diff --git a/package/src/components/Channel/Channel.tsx b/package/src/components/Channel/Channel.tsx index 9c729e18d9..25a38793ea 100644 --- 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 index 2221f9ff6a..866daaf44c 100644 --- 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 index a30b239412..389d8c334a 100644 --- 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[]; /** An array of the own reaction objects to distinguish own reactions visually */ - own_reactions?: ReactionResponse[]; + own_reactions?: ReactionResponse[] | null; radius?: number; // not recommended to change this /** An object containing summary for each reaction type on a message */ - reaction_groups?: Record; + reaction_groups?: Record | 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 index 707610fb8f..3589edacd1 100644 --- 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, 'own_reactions' | 'reaction_groups' | 'latest_reactions' > & - Pick, 'supportedReactions'> & { + Partial, 'supportedReactions'>> & { sortReactions?: ReactionsComparator; }; @@ -73,36 +72,30 @@ export const useProcessReactions = < >( props: UseProcessReactionsParams, ) => { + 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(reactionType, ownReactions), + isOwnReaction: isOwnReaction(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 index 3830b34983..d3fcee99d3 100644 --- a/package/src/utils/utils.ts +++ b/package/src/utils/utils.ts @@ -614,7 +614,9 @@ export const stringifyMessage = < type, updated_at, }: FormatMessageResponse | MessageType): 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