排序对象数组以首先放置与 id 匹配的特定 object

Question

I have an array of objects that contain user data.

What I need to do is order them with the logged-in user first.

I previously had this working with:

  const loggedInUserTemplate = users?.find(loggedInUser => {
    return loggedInUser.id === user?.id;
  });

  renderUsers?.forEach((item, i) => {
    if (item.id === loggedInUserTemplate.id) {
      renderUsers?.splice(i, 1);
      renderUsers?.unshift(item);
    }
  });

but for various reasons, I can't use this anymore.

My new solutions include these but none work. Does anyone have any suggestions?

const loggedInUser = user?.id;

  let test = JSON.parse(JSON.stringify(users));
  // test = test.sort((a, user) => (a.id === loggedInUser ? 0 : 1));
  // test = test.sort((a, user) => (a.id == loggedInUser ? 0 : 1));

  test.sort((a, loggedInUser) => {
    console.log("what is a?", typeof a.id, a.id);
    console.log("user -----", typeof loggedInUser, loggedInUser);
    if (a?.id === loggedInUser) return 0;
  });

  console.log("test", test);

The array looks like this:

[
{__typename: "user", id: "4274", firstName: "tom"},
{__typename: "user", id: "742", firstName: "richard"},
{__typename: "user", id: "4293", firstName: "harry" }
]

In my test case the logged-in user id is "742", so I want "richard" to appear first in the array.

Answer 1

Using the JavaScript built-in sort method is the way to go, I agree.

Say you have an array of logged in user ids, let loggedInUsers = ["742"] in your example. Then sorting them like this should work:

test.sort((a, b) => {
    // push b to the top if he is logged in
    if(loggedInUsers.includes(b.id)) return 1;
    // otherwise stick to the original order
    else return 0;
})

Meaning if the first user (of a and b) is logged in, it gets pushed to the top. You could change the if statement to keep the original order of logged in users by only pushing b up if a is not logged in:

if(loggedInUsers.includes(b.id) && !loggedInUsers.includes(a.id)) return 1;

Answer 2

So the solution was to create a new array in state and use .sort() like this.

setUserArray([...users].sort(a => (a.id === user.id? -1: 1)));

*Note the -1 as chrome reads a 0 as falsy so it won't work like that.