reply_filtering.tsx

let allPosts = [ {id: 123, name: "test post 1"}, 
              {id: 456, name: "test post 2"}
            ];
let allReplies = [ {id: 1, replyTo: 123, name: 'reply 1', read: false}, 
                {id: 2, replyTo: 123, name: 'reply 2', read: false}, 
                {id: 3, replyTo: 456, name: 'reply 3', read: false}
              ];

// simulate a server response with 1s wait time 
const getRepliesToPost = async (id: number) => {
  let replies = [];
  for (let i = 0; i < 10; i++) {
    const reply = new Promise((resolve, reject) => {
      if (allReplies[i] && allReplies[i].replyTo === id) {
        resolve(allReplies[i]);
      } else {
        reject('reply not found');
      }
    });
    replies.push(reply);
  }
  return replies;
}

const processUnreadReplies = async(posts: any) => {
  let repliesTotal = 0;
  for (let post of posts) {
    const replyArray: Array<any> = await getRepliesToPost(post.id);
      replyArray.forEach(async (reply: any) => {
        const resolved = await reply;
        if (!resolved.read) {
          post.unreadReplyCount = (post.unreadReplyCount ?? 0) + 1;
          repliesTotal++;
        }
      });
  };
  console.log(repliesTotal);
}

processUnreadReplies(allPosts); // logs 2 (good)

// guarantees an order, whereas forEach does not 
const processUnreadRepliesWithForOf = async (posts: any) => {
  let repliesTotal = 0;
  for (let post of posts) {
    const replyArray: Array<any> = await getRepliesToPost(post.id);
      for await (let reply of replyArray) {
        if (!reply.read) {
          post.unreadReplyCount = (post.unreadReplyCount ?? 0) + 1;
          repliesTotal++;
        }
        repliesTotal
      }
  }
  console.log(repliesTotal);
}

processUnreadRepliesWithForOf(allPosts); // logs 20 (bad)