Unread reactions: Bug fixes (#4663)

src/components/middle/FloatingActionButtons.tsx

@@ -25,6 +25,7 @@ type StateProps = {
   chatId?: string;
   messageListType?: MessageListType;
   unreadCount?: number;
+  unreadReactions?: number[];
   reactionsCount?: number;
   mentionsCount?: number;
 };
@@ -37,6 +38,7 @@ const FloatingActionButtons: FC<OwnProps & StateProps> = ({
   messageListType,
   chatId,
   unreadCount,
+  unreadReactions,
   reactionsCount,
   mentionsCount,
   withExtraShift,
@@ -52,6 +54,12 @@ const FloatingActionButtons: FC<OwnProps & StateProps> = ({
   const hasUnreadReactions = Boolean(reactionsCount);
   const hasUnreadMentions = Boolean(mentionsCount);
 
+  useEffect(() => {
+    if (hasUnreadReactions && chatId && !unreadReactions?.length) {
+      fetchUnreadReactions({ chatId });
+    }
+  }, [chatId, fetchUnreadReactions, hasUnreadReactions, unreadReactions?.length]);
+
   useEffect(() => {
     if (hasUnreadReactions && chatId) {
       fetchUnreadReactions({ chatId });
@@ -144,6 +152,7 @@ export default memo(withGlobal<OwnProps>(
       messageListType,
       chatId,
       reactionsCount: shouldShowCount ? chat.unreadReactionsCount : undefined,
+      unreadReactions: shouldShowCount ? chat.unreadReactions : undefined,
       mentionsCount: shouldShowCount ? chat.unreadMentionsCount : undefined,
       unreadCount: shouldShowCount ? chat.unreadCount : undefined,
     };

src/global/actions/api/reactions.ts

@@ -379,7 +379,7 @@ addActionHandler('fetchUnreadReactions', async (global, actions, payload): Promi
   global = addUsers(global, buildCollectionByKey(users, 'id'));
   global = addChats(global, buildCollectionByKey(chats, 'id'));
   global = updateUnreadReactions(global, chatId, {
-    unreadReactions: unique([...(chat.unreadReactions || []), ...ids]),
+    unreadReactions: unique([...(chat.unreadReactions || []), ...ids]).sort((a, b) => b - a),
   });
 
   setGlobal(global);
@@ -391,43 +391,40 @@ addActionHandler('animateUnreadReaction', (global, actions, payload): ActionRetu
   const chat = selectCurrentChat(global, tabId);
   if (!chat) return undefined;
 
-  if (chat.unreadReactionsCount) {
+  if (!chat.unreadReactionsCount) {
-    const unreadReactions = (chat.unreadReactions || []).filter((id) => !messageIds.includes(id));
+    return updateUnreadReactions(global, chat.id, {
-
+      unreadReactions: [],
-    global = updateUnreadReactions(global, chat.id, {
-      unreadReactions,
     });
-
-    setGlobal(global);
   }
 
+  const unreadReactionsCount = Math.max(chat.unreadReactionsCount - messageIds.length, 0);
+  const unreadReactions = (chat.unreadReactions || []).filter((id) => !messageIds.includes(id));
+
+  global = updateUnreadReactions(global, chat.id, {
+    unreadReactions,
+    unreadReactionsCount,
+  });
+
+  setGlobal(global);
+
   actions.markMessagesRead({ messageIds, shouldFetchUnreadReactions: true, tabId });
 
   if (!selectPerformanceSettingsValue(global, 'reactionEffects')) return undefined;
 
   global = getGlobal();
 
-  return updateTabState(global, {
+  messageIds.forEach((id) => {
-    activeReactions: {
+    const message = selectChatMessage(global, chat.id, id);
-      ...selectTabState(global, tabId).activeReactions,
+    if (!message) return;
-      ...Object.fromEntries(messageIds.map((messageId) => {
-        const message = selectChatMessage(global, chat.id, messageId);
 
-        if (!message) return undefined;
+    const { reaction, isOwn, isUnread } = message.reactions?.recentReactions?.[0] ?? {};
+    if (reaction && isUnread && !isOwn) {
+      const messageKey = getMessageKey(message);
+      actions.startActiveReaction({ containerId: messageKey, reaction, tabId: getCurrentTabId() });
+    }
+  });
 
-        const unread = message.reactions?.recentReactions?.filter(({ isUnread }) => isUnread);
+  return undefined;
-
-        if (!unread) return undefined;
-
-        const reactions = unread.map((recent) => recent.reaction);
-
-        return [messageId, reactions.map((r) => ({
-          messageId,
-          reaction: r,
-        }))];
-      }).filter(Boolean)),
-    },
-  }, tabId);
 });
 
 addActionHandler('focusNextReaction', (global, actions, payload): ActionReturnType => {
@@ -445,12 +442,6 @@ addActionHandler('focusNextReaction', (global, actions, payload): ActionReturnTy
 
   actions.focusMessage({ chatId: chat.id, messageId: chat.unreadReactions[0], tabId });
   actions.markMessagesRead({ messageIds: [chat.unreadReactions[0]], tabId });
-  if (chat && chat?.unreadReactionsCount && chat.unreadReactionsCount > 0) {
-    return updateUnreadReactions(global, chat.id, {
-      unreadReactionsCount: chat.unreadReactionsCount - 1,
-      unreadReactions: chat.unreadReactions.slice(1) || [],
-    });
-  }
   return undefined;
 });
 

src/global/actions/apiUpdaters/messages.ts

@@ -781,13 +781,14 @@ function updateReactions<T extends GlobalState>(
     actions.startActiveReaction({ containerId: messageKey, reaction, tabId: getCurrentTabId() });
   }
 
-  const alreadyHasUnreadReaction = chat.unreadReactions?.includes(id);
+  const hasUnreadReactionsForMessageInChat = chat.unreadReactions?.includes(id);
+  const hasUnreadReactionsInNewReactions = checkIfHasUnreadReactions(global, reactions);
 
   // Only notify about added reactions, not removed ones
-  if (checkIfHasUnreadReactions(global, reactions) && !alreadyHasUnreadReaction) {
+  if (hasUnreadReactionsInNewReactions && !hasUnreadReactionsForMessageInChat) {
     global = updateUnreadReactions(global, chatId, {
       unreadReactionsCount: (chat?.unreadReactionsCount || 0) + 1,
-      unreadReactions: [...(chat?.unreadReactions || []), id],
+      unreadReactions: [...(chat?.unreadReactions || []), id].sort((a, b) => b - a),
     });
 
     const newMessage = selectChatMessage(global, chatId, id);
@@ -801,7 +802,9 @@ function updateReactions<T extends GlobalState>(
         isReaction: true,
       });
     });
-  } else if (alreadyHasUnreadReaction) {
+  }
+
+  if (!hasUnreadReactionsInNewReactions && hasUnreadReactionsForMessageInChat) {
     global = updateUnreadReactions(global, chatId, {
       unreadReactionsCount: (chat?.unreadReactionsCount || 1) - 1,
       unreadReactions: chat?.unreadReactions?.filter((i) => i !== id),