stream-chat-react-native-core 5.31.2-beta.3 → 5.32.0-beta.1

package/src/components/Message/MessageSimple/ReactionList.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
-import { StyleSheet, TouchableOpacity, useWindowDimensions, View } from 'react-native';
+import { StyleSheet, Text, TouchableOpacity, useWindowDimensions, View } from 'react-native';
 
 import Svg, { Circle } from 'react-native-svg';
 
+import { ReactionGroupResponse, ReactionResponse } from 'stream-chat';
+
 import {
   MessageContextValue,
-  Reactions,
   useMessageContext,
 } from '../../../contexts/messageContext/MessageContext';
 import {
@@ -19,26 +20,10 @@ import { Unknown } from '../../../icons/Unknown';
 import type { IconProps } from '../../../icons/utils/base';
 import type { DefaultStreamChatGenerics } from '../../../types/types';
 import type { ReactionData } from '../../../utils/utils';
-
-const styles = StyleSheet.create({
-  container: {
-    left: 0,
-    position: 'absolute',
-    top: 0,
-  },
-  reactionBubble: {
-    alignItems: 'center',
-    flexDirection: 'row',
-    justifyContent: 'space-evenly',
-    position: 'absolute',
-  },
-  reactionBubbleBackground: {
-    position: 'absolute',
-  },
-});
+import { ReactionSummary } from '../hooks/useProcessReactions';
 
 export type MessageReactions = {
-  reactions: Reactions;
+  reactions: ReactionSummary[];
   supportedReactions?: ReactionData[];
 };
 
@@ -76,7 +61,13 @@ export type ReactionListPropsWithContext<
     messageContentWidth: number;
     supportedReactions: ReactionData[];
     fill?: string;
+    /** 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>[] | null;
     radius?: number; // not recommended to change this
+    /** An object containing summary for each reaction type on a message */
+    reaction_groups?: Record<string, ReactionGroupResponse> | null;
     reactionSize?: number;
     stroke?: string;
     strokeSize?: number; // not recommended to change this
@@ -110,6 +101,7 @@ const ReactionListWithContext = <
     theme: {
       colors: {
         accent_blue,
+        black,
         grey,
         grey_gainsboro,
         grey_whisper,
@@ -125,7 +117,6 @@ const ReactionListWithContext = <
           middleIcon,
           radius: themeRadius,
           reactionBubble,
-          reactionBubbleBackground,
           reactionSize: themeReactionSize,
           strokeSize: themeStrokeSize,
         },
@@ -200,21 +191,6 @@ const ReactionListWithContext = <
             <Circle cx={x1} cy={y1} fill={alignmentLeft ? fill : white} r={radius} />
             <Circle cx={x2} cy={y2} fill={alignmentLeft ? fill : white} r={radius * 2} />
           </Svg>
-          <View
-            style={[
-              styles.reactionBubbleBackground,
-              {
-                backgroundColor: alignmentLeft ? fill : white,
-                borderColor: fill,
-                borderRadius: reactionSize,
-                borderWidth: strokeSize,
-                height: reactionSize,
-                left,
-                width: reactionSize * reactions.length,
-              },
-              reactionBubbleBackground,
-            ]}
-          />
           <View pointerEvents='none' style={[StyleSheet.absoluteFill]}>
             <Svg>
               <Circle cx={x2} cy={y2} fill={alignmentLeft ? fill : white} r={radius * 2} />
@@ -252,24 +228,36 @@ const ReactionListWithContext = <
               styles.reactionBubble,
               {
                 backgroundColor: alignmentLeft ? fill : white,
-                borderRadius: reactionSize - strokeSize * 2,
+                borderColor: fill,
+                borderRadius: reactionSize,
+                borderWidth: strokeSize,
                 height: reactionSize - strokeSize * 2,
                 left: left + strokeSize,
                 top: strokeSize,
-                width: reactionSize * reactions.length - strokeSize * 2,
               },
               reactionBubble,
             ]}
           >
-            {reactions.map((reaction) => (
-              <Icon
+            {reactions.map((reaction, index) => (
+              <View
                 key={reaction.type}
-                pathFill={reaction.own ? iconFillColor || accent_blue : grey}
-                size={reactionSize / 2}
-                style={middleIcon}
-                supportedReactions={supportedReactions}
-                type={reaction.type}
-              />
+                style={[
+                  styles.reactionContainer,
+                  {
+                    marginRight: index < reactions.length - 1 ? 5 : 0,
+                  },
+                ]}
+              >
+                <Icon
+                  key={reaction.type}
+                  pathFill={reaction.own ? iconFillColor || accent_blue : grey}
+                  size={reactionSize / 2}
+                  style={middleIcon}
+                  supportedReactions={supportedReactions}
+                  type={reaction.type}
+                />
+                <Text style={[styles.reactionCount, { color: black }]}>{reaction.count}</Text>
+              </View>
             ))}
           </TouchableOpacity>
         </View>
@@ -285,11 +273,13 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
   const {
     message: prevMessage,
     messageContentWidth: prevMessageContentWidth,
+    reactions: prevReactions,
     targetedMessage: prevTargetedMessage,
   } = prevProps;
   const {
     message: nextMessage,
     messageContentWidth: nextMessageContentWidth,
+    reactions: nextReactions,
     targetedMessage: nextTargetedMessage,
   } = nextProps;
 
@@ -313,6 +303,16 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
       : prevMessage.latest_reactions === nextMessage.latest_reactions;
   if (!latestReactionsEqual) return false;
 
+  const reactionsEqual =
+    Array.isArray(prevReactions) && Array.isArray(nextReactions)
+      ? prevReactions.length === nextReactions.length &&
+        prevReactions.every(
+          ({ type }, index) => type === nextMessage.latest_reactions?.[index].type,
+        )
+      : prevReactions === nextReactions;
+
+  if (!reactionsEqual) return false;
+
   return true;
 };
 
@@ -323,7 +323,7 @@ const MemoizedReactionList = React.memo(
 
 export type ReactionListProps<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-> = Partial<Omit<ReactionListPropsWithContext<StreamChatGenerics>, 'messageContentWidth'>> &
+> = Partial<ReactionListPropsWithContext<StreamChatGenerics>> &
   Pick<ReactionListPropsWithContext<StreamChatGenerics>, 'messageContentWidth'>;
 
 /**
@@ -364,3 +364,28 @@ export const ReactionList = <
     />
   );
 };
+
+const styles = StyleSheet.create({
+  container: {
+    left: 0,
+    position: 'absolute',
+    top: 0,
+  },
+  reactionBubble: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    justifyContent: 'space-evenly',
+    paddingHorizontal: 5,
+    position: 'absolute',
+  },
+  reactionContainer: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    justifyContent: 'center',
+  },
+  reactionCount: {
+    fontSize: 12,
+    fontWeight: 'bold',
+    marginLeft: 2,
+  },
+});

package/src/components/Message/MessageSimple/__tests__/MessageContent.test.js

@@ -212,7 +212,7 @@ describe('MessageContent', () => {
     const user = generateUser();
     const reaction = generateReaction();
     const message = generateMessage({
-      latest_reactions: [reaction],
+      reaction_groups: { [reaction.type]: reaction },
       user,
     });
 

package/src/components/Message/hooks/useCreateMessageContext.ts

@@ -2,7 +2,7 @@ import { useMemo } from 'react';
 
 import type { MessageContextValue } from '../../../contexts/messageContext/MessageContext';
 import type { DefaultStreamChatGenerics } from '../../../types/types';
-import { isMessageWithStylesReadByAndDateSeparator } from '../../MessageList/hooks/useMessageList';
+import { stringifyMessage } from '../../../utils/utils';
 
 export const useCreateMessageContext = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
@@ -48,14 +48,9 @@ export const useCreateMessageContext = <
   videos,
 }: MessageContextValue<StreamChatGenerics>) => {
   const groupStylesLength = groupStyles.length;
-  const reactionsValue = reactions.map(({ own, type }) => `${own}${type}`).join();
-  const latestReactions = message.latest_reactions ? message.latest_reactions : undefined;
-  const readBy = isMessageWithStylesReadByAndDateSeparator(message) && message.readBy;
-  const messageValue = `${
-    latestReactions ? latestReactions.map(({ type, user }) => `${type}${user?.id}`).join() : ''
-  }${message.updated_at}${message.deleted_at}${readBy}${message.status}${message.type}${
-    message.text
-  }${message.reply_count}`;
+  const reactionsValue = reactions.map(({ count, own, type }) => `${own}${type}${count}`).join();
+  const stringifiedMessage = stringifyMessage(message);
+
   const membersValue = JSON.stringify(members);
   const myMessageThemeString = useMemo(() => JSON.stringify(myMessageTheme), [myMessageTheme]);
 
@@ -115,7 +110,7 @@ export const useCreateMessageContext = <
       lastGroupMessage,
       lastReceivedId,
       membersValue,
-      messageValue,
+      stringifiedMessage,
       myMessageThemeString,
       reactionsValue,
       showAvatar,

package/src/components/Message/hooks/useProcessReactions.ts

@@ -0,0 +1,116 @@
+import { ComponentType, useMemo } from 'react';
+
+import { ReactionResponse } from 'stream-chat';
+
+import {
+  MessagesContextValue,
+  useMessagesContext,
+} from '../../../contexts/messagesContext/MessagesContext';
+import { DefaultStreamChatGenerics } from '../../../types/types';
+import { ReactionData } from '../../../utils/utils';
+import { ReactionListProps } from '../MessageSimple/ReactionList';
+
+export type ReactionSummary = {
+  own: boolean;
+  type: string;
+  count?: number;
+  firstReactionAt?: Date | null;
+  Icon?: ComponentType | null;
+  lastReactionAt?: Date | null;
+  latestReactedUserNames?: string[];
+  unlistedReactedUserCount?: number;
+};
+
+export type ReactionsComparator = (a: ReactionSummary, b: ReactionSummary) => number;
+
+type UseProcessReactionsParams<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Pick<
+  ReactionListProps<StreamChatGenerics>,
+  'own_reactions' | 'reaction_groups' | 'latest_reactions'
+> &
+  Partial<Pick<MessagesContextValue<StreamChatGenerics>, 'supportedReactions'>> & {
+    sortReactions?: ReactionsComparator;
+  };
+
+export const defaultReactionsSort: ReactionsComparator = (a, b) => {
+  if (a.firstReactionAt && b.firstReactionAt) {
+    return +a.firstReactionAt - +b.firstReactionAt;
+  }
+
+  return a.type.localeCompare(b.type, 'en');
+};
+
+const isOwnReaction = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>(
+  reactionType: string,
+  ownReactions?: ReactionResponse<StreamChatGenerics>[] | null,
+) => (ownReactions ? ownReactions.some((reaction) => reaction.type === reactionType) : false);
+
+const isSupportedReaction = (reactionType: string, supportedReactions: ReactionData[]) =>
+  supportedReactions
+    ? supportedReactions.some((reactionOption) => reactionOption.type === reactionType)
+    : false;
+
+const getEmojiByReactionType = (reactionType: string, supportedReactions: ReactionData[]) =>
+  supportedReactions.find(({ type }) => type === reactionType)?.Icon ?? null;
+
+const getLatestReactedUserNames = (reactionType: string, latestReactions?: ReactionResponse[]) =>
+  latestReactions
+    ? latestReactions.flatMap((reaction) => {
+        if (reactionType && reactionType === reaction.type) {
+          const username = reaction.user?.name || reaction.user?.id;
+          return username ? [username] : [];
+        }
+        return [];
+      })
+    : [];
+
+/**
+ * Custom hook to process reactions data from message and return a list of reactions with additional info.
+ */
+export const useProcessReactions = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>(
+  props: UseProcessReactionsParams<StreamChatGenerics>,
+) => {
+  const { supportedReactions: contextSupportedReactions } = useMessagesContext();
+
+  const {
+    latest_reactions,
+    own_reactions,
+    reaction_groups,
+    sortReactions = defaultReactionsSort,
+    supportedReactions = contextSupportedReactions,
+  } = props;
+
+  return useMemo(() => {
+    if (!reaction_groups)
+      return { existingReactions: [], hasReactions: false, totalReactionCount: 0 };
+    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, latest_reactions);
+
+        return {
+          count,
+          firstReactionAt: first_reaction_at ? new Date(first_reaction_at) : null,
+          Icon: getEmojiByReactionType(reactionType, supportedReactions),
+          lastReactionAt: last_reaction_at ? new Date(last_reaction_at) : null,
+          latestReactedUserNames,
+          own: isOwnReaction<StreamChatGenerics>(reactionType, own_reactions),
+          type: reactionType,
+          unlistedReactedUserCount: count - latestReactedUserNames.length,
+        };
+      },
+    );
+
+    return {
+      existingReactions: unsortedReactions.sort(sortReactions),
+      hasReactions: unsortedReactions.length > 0,
+      totalReactionCount: unsortedReactions.reduce((total, { count }) => total + count, 0),
+    };
+  }, [reaction_groups, own_reactions?.length, latest_reactions?.length, sortReactions]);
+};

package/src/components/MessageOverlay/MessageOverlay.tsx

@@ -44,10 +44,7 @@ import { mergeThemes, ThemeProvider, useTheme } from '../../contexts/themeContex
 import { useViewport } from '../../hooks/useViewport';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 import { MessageTextContainer } from '../Message/MessageSimple/MessageTextContainer';
-import {
-  OverlayReactions as DefaultOverlayReactions,
-  Reaction,
-} from '../MessageOverlay/OverlayReactions';
+import { OverlayReactions as DefaultOverlayReactions } from '../MessageOverlay/OverlayReactions';
 import type { ReplyProps } from '../Reply/Reply';
 
 const styles = StyleSheet.create({
@@ -464,26 +461,16 @@ const MessageOverlayWithContext = <
                 message={message}
               />
             )}
-            {!!messageReactionTitle &&
-            message.latest_reactions &&
-            message.latest_reactions.length > 0 ? (
+            {!!messageReactionTitle && (
               <OverlayReactions
                 alignment={alignment}
+                messageId={message.id}
                 OverlayReactionsAvatar={OverlayReactionsAvatar}
-                reactions={
-                  message.latest_reactions.map((reaction) => ({
-                    alignment: clientId && clientId === reaction.user?.id ? 'right' : 'left',
-                    id: reaction?.user?.id || '',
-                    image: reaction?.user?.image,
-                    name: reaction?.user?.name || reaction.user_id || '',
-                    type: reaction.type,
-                  })) as Reaction[]
-                }
                 showScreen={showScreen}
                 supportedReactions={messagesContext?.supportedReactions}
                 title={messageReactionTitle}
               />
-            ) : null}
+            )}
           </View>
         )}
       </Animated.View>