fix: useProcessReactions hook and Channel message spread

GetStream · May 28, 2024 · e014bb2 · e014bb2
1 parent 1547041
commit e014bb2
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 39 deletions.
diff --git a/package/src/components/Channel/Channel.tsx b/package/src/components/Channel/Channel.tsx
@@ -2,6 +2,7 @@ import React, { PropsWithChildren, useCallback, useEffect, useMemo, useRef, useS
 import { KeyboardAvoidingViewProps, StyleSheet, Text, View } from 'react-native';
 
 import debounce from 'lodash/debounce';
+import omit from 'lodash/omit';
 import throttle from 'lodash/throttle';
 
 import { lookup } from 'mime-types';
@@ -1631,7 +1632,28 @@ const ChannelWithContext = <
   ) => {
     try {
       const updatedMessage = await uploadPendingAttachments(message);
-      const { attachments, id, mentioned_users, parent_id, text, ...extraFields } = updatedMessage;
+      const extraFields = omit(updatedMessage, [
+        '__html',
+        'attachments',
+        'created_at',
+        'deleted_at',
+        'html',
+        'id',
+        'latest_reactions',
+        'mentioned_users',
+        'own_reactions',
+        'parent_id',
+        'quoted_message',
+        'reaction_counts',
+        'reaction_groups',
+        'reactions',
+        'status',
+        'text',
+        'type',
+        'updated_at',
+        'user',
+      ]);
+      const { attachments, id, mentioned_users, parent_id, text } = updatedMessage;
       if (!channel.id) return;
 
       const mentionedUserIds = mentioned_users?.map((user) => user.id) || [];

diff --git a/package/src/components/Message/Message.tsx b/package/src/components/Message/Message.tsx
@@ -466,10 +466,9 @@ const MessageWithContext = <
   };
 
   const { existingReactions, hasReactions } = useProcessReactions({
-    latest_reactions: message.latest_reactions ?? [],
-    own_reactions: message.own_reactions ?? [],
-    reaction_groups: message.reaction_groups ?? {},
-    supportedReactions,
+    latest_reactions: message.latest_reactions,
+    own_reactions: message.own_reactions,
+    reaction_groups: message.reaction_groups,
   });
 
   const reactions = hasReactions ? existingReactions : [];

diff --git a/package/src/components/Message/MessageSimple/ReactionList.tsx b/package/src/components/Message/MessageSimple/ReactionList.tsx
@@ -64,10 +64,10 @@ export type ReactionListPropsWithContext<
     /** An array of the reaction objects to display in the list */
     latest_reactions?: ReactionResponse<StreamChatGenerics>[];
     /** An array of the own reaction objects to distinguish own reactions visually */
-    own_reactions?: ReactionResponse<StreamChatGenerics>[];
+    own_reactions?: ReactionResponse<StreamChatGenerics>[] | null;
     radius?: number; // not recommended to change this
     /** An object containing summary for each reaction type on a message */
-    reaction_groups?: Record<string, ReactionGroupResponse>;
+    reaction_groups?: Record<string, ReactionGroupResponse> | null;
     reactionSize?: number;
     stroke?: string;
     strokeSize?: number; // not recommended to change this

diff --git a/package/src/components/Message/hooks/useProcessReactions.ts b/package/src/components/Message/hooks/useProcessReactions.ts
@@ -2,7 +2,6 @@ import { ComponentType, useMemo } from 'react';
 
 import { ReactionResponse } from 'stream-chat';
 
-import { useMessageContext } from '../../../contexts/messageContext/MessageContext';
 import {
   MessagesContextValue,
   useMessagesContext,
@@ -30,7 +29,7 @@ type UseProcessReactionsParams<
   ReactionListProps<StreamChatGenerics>,
   'own_reactions' | 'reaction_groups' | 'latest_reactions'
 > &
-  Pick<MessagesContextValue<StreamChatGenerics>, 'supportedReactions'> & {
+  Partial<Pick<MessagesContextValue<StreamChatGenerics>, 'supportedReactions'>> & {
     sortReactions?: ReactionsComparator;
   };
 
@@ -73,36 +72,30 @@ export const useProcessReactions = <
 >(
   props: UseProcessReactionsParams<StreamChatGenerics>,
 ) => {
+  const { supportedReactions: contextSupportedReactions } = useMessagesContext();
+
   const {
-    latest_reactions: propLatestReactions,
-    own_reactions: propOwnReactions,
-    reaction_groups: propReactionGroups,
-    sortReactions: propSortReactions,
-    supportedReactions: propSupportedReactions,
+    latest_reactions,
+    own_reactions,
+    reaction_groups,
+    sortReactions = defaultReactionsSort,
+    supportedReactions = contextSupportedReactions,
   } = props;
 
-  const { message } = useMessageContext();
-  const { supportedReactions: contextSupportedReactions } = useMessagesContext();
-  const supportedReactions = propSupportedReactions || contextSupportedReactions;
-  const latestReactions = propLatestReactions || message.latest_reactions;
-  const ownReactions = propOwnReactions || message.own_reactions;
-  const reactionGroups = propReactionGroups || message.reaction_groups;
-  const sortReactions = propSortReactions || defaultReactionsSort;
-
-  const { existingReactions, hasReactions, totalReactionCount } = useMemo(() => {
-    if (!reactionGroups)
+  return useMemo(() => {
+    if (!reaction_groups)
       return { existingReactions: [], hasReactions: false, totalReactionCount: 0 };
-    const unsortedReactions = Object.entries(reactionGroups).flatMap(
+    const unsortedReactions = Object.entries(reaction_groups).flatMap(
       ([reactionType, { count, first_reaction_at, last_reaction_at }]) => {
         if (count === 0 || !isSupportedReaction(reactionType, supportedReactions)) return [];
 
-        const latestReactedUserNames = getLatestReactedUserNames(reactionType, latestReactions);
+        const latestReactedUserNames = getLatestReactedUserNames(reactionType, latest_reactions);
 
         return {
           count,
           firstReactionAt: first_reaction_at ? new Date(first_reaction_at) : null,
           Icon: getEmojiByReactionType(reactionType, supportedReactions),
-          isOwnReaction: isOwnReaction<StreamChatGenerics>(reactionType, ownReactions),
+          isOwnReaction: isOwnReaction<StreamChatGenerics>(reactionType, own_reactions),
           lastReactionAt: last_reaction_at ? new Date(last_reaction_at) : null,
           latestReactedUserNames,
           type: reactionType,
@@ -116,14 +109,5 @@ export const useProcessReactions = <
       hasReactions: unsortedReactions.length > 0,
       totalReactionCount: unsortedReactions.reduce((total, { count }) => total + count, 0),
     };
-  }, [
-    getEmojiByReactionType,
-    getLatestReactedUserNames,
-    isOwnReaction,
-    isSupportedReaction,
-    reactionGroups,
-    sortReactions,
-  ]);
-
-  return { existingReactions, hasReactions, totalReactionCount };
+  }, [reaction_groups, own_reactions?.length, latest_reactions?.length, sortReactions]);
 };
diff --git a/package/src/utils/utils.ts b/package/src/utils/utils.ts
@@ -614,7 +614,9 @@ export const stringifyMessage = <
   type,
   updated_at,
 }: FormatMessageResponse<StreamChatGenerics> | MessageType<StreamChatGenerics>): string =>
-  `${type}${deleted_at}${latest_reactions ? latest_reactions.map(({ type }) => type).join() : ''}${
+  `${
+    latest_reactions ? latest_reactions.map(({ type, user }) => `${type}${user?.id}`).join() : ''
+  }${
     reaction_groups
       ? Object.entries(reaction_groups)
           .flatMap(
@@ -623,7 +625,7 @@ export const stringifyMessage = <
           )
           .join()
       : ''
-  }${text}${readBy}${reply_count}${status}${updated_at}`;
+  }${type}${deleted_at}${text}${readBy}${reply_count}${status}${updated_at}`;
 
 /**
  * Reduces a list of messages to strings that are used in useEffect & useMemo