Arrays not getting sorted after async function

Question

On a screen on my app I have a useEffect hook that retrieves some info about a user for a notification, after that I want to get all the notifications array sorted by date, the problem is that the arrays doesn't seem to get sorted:

useEffect(() => {
  const arrayNotifications = [];
  const arrayRequests = [];

  notificationsAndRequests.forEach(async notif => {
    const senderSnapshot = await database().ref(`/users/${notif.sender}`).once('value');
    let senderImage = (senderSnapshot.val() && senderSnapshot.val().userImg);

    if (notif.sender == null) {
      const recieverSnapshot = await database().ref(`/users/${notif.sender}`).once('value');
      senderImage = (recieverSnapshot.val() && recieverSnapshot.val().userImg);
    }

    const element = {
      date: notif.date,
      id: notif.id,
      isInvitation: notif.isInvitation,
      message: notif.message,
      reciever: notif.reciever,
      sender: notif.sender,
      senderimage: senderImage,
      timestamp: notif.timestamp,
      title: notif.title,
      extraid: notif.extraid,
      requestid: notif.requestid,
      viewed: notif.viewed,
      status: notif.status || ''
    };

    if (notif.isInvitation) {
      arrayRequests.push(element);
    } else {
      arrayNotifications.push(element);
    }
  });
  const sortedNotifications = arrayNotifications.sort(
    (a, b) => Date.parse(mom(b.timestamp, 'YYYY-MM-DD HH:mm').toDate())
    - Date.parse(mom(a.timestamp, 'YYYY-MM-DD HH:mm').toDate())
  );
  const sortedRequests = arrayRequests.sort(
    (a, b) => Date.parse(mom(b.timestamp, 'YYYY-MM-DD HH:mm').toDate())
    - Date.parse(mom(a.timestamp, 'YYYY-MM-DD HH:mm').toDate())
  );

  setNotifications(sortedNotifications);
  setRequestsNotifications(sortedRequests);
}, [notificationsAndRequests]);

Both sortedRequests and sortedNotifications should be ordered by the timestamp property of the notif object (timestamp is just a string formatted as a date). Should I sort both arrayRequests and arrayNotifications instead?

.forEach(async never works like you expect - use a for loop instead — Bravo
– Bravo, Commented Apr 5, 2022 at 4:04
as @Bravo mentioned, try stackoverflow.com/questions/37576685/… — boxdox
– boxdox, Commented Apr 5, 2022 at 4:29

Nick Vu · Accepted Answer · 2022-04-05 04:33:44Z

async on your forEach is not waiting for arrayNotifications and arrayRequests results. You need to wrap your async logic in another function and then update your states there

const sortNotificationsAndRequests = async (notificationsAndRequests) => {
  const arrayNotifications = [];
  const arrayRequests = [];

 for(const notif of notificationsAndRequests) {
   const senderSnapshot = await database().ref(`/users/${notif.sender}`).once('value');
    let senderImage = (senderSnapshot.val() && senderSnapshot.val().userImg);

    if (notif.sender == null) {
      const recieverSnapshot = await database().ref(`/users/${notif.sender}`).once('value');
      senderImage = (recieverSnapshot.val() && recieverSnapshot.val().userImg);
    }

    const element = {
      date: notif.date,
      id: notif.id,
      isInvitation: notif.isInvitation,
      message: notif.message,
      reciever: notif.reciever,
      sender: notif.sender,
      senderimage: senderImage,
      timestamp: notif.timestamp,
      title: notif.title,
      extraid: notif.extraid,
      requestid: notif.requestid,
      viewed: notif.viewed,
      status: notif.status || ''
    };

    if (notif.isInvitation) {
      arrayRequests.push(element);
    } else {
      arrayNotifications.push(element);
    }
 }

  const sortedNotifications = arrayNotifications.sort(
    (a, b) => Date.parse(mom(b.timestamp, 'YYYY-MM-DD HH:mm').toDate())
    - Date.parse(mom(a.timestamp, 'YYYY-MM-DD HH:mm').toDate())
  );
  const sortedRequests = arrayRequests.sort(
    (a, b) => Date.parse(mom(b.timestamp, 'YYYY-MM-DD HH:mm').toDate())
    - Date.parse(mom(a.timestamp, 'YYYY-MM-DD HH:mm').toDate())
  );

  setNotifications(sortedNotifications);
  setRequestsNotifications(sortedRequests);
}

useEffect(() => {
  //call the new function to update your states
  sortNotificationsAndRequests(notificationsAndRequests)
}, [notificationsAndRequests]);

Collectives™ on Stack Overflow

Arrays not getting sorted after async function

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related