fix: handle undefined updated_at on messages with util function (#1337)

* fix: handling the case of undefined updated_at on message and threadMessage with util function

* fix: fix linter errors

* fix: update function name to be more descriptive

* fix: function rename

* doc: add documentation for compareMessages and mapMessage functions

* fix: give more descriptive variable names and updated inline doc

* fix: resolve typographical error

Co-authored-by: Nwagba Okechukwu <[email protected]>

Author: Enigma-I-am

package/src/components/Channel/hooks/useCreatePaginatedMessageListContext.ts

@@ -2,6 +2,7 @@ import { useMemo } from 'react';
 
 import type { PaginatedMessageListContextValue } from '../../../contexts/paginatedMessageListContext/PaginatedMessageListContext';
 import type { DefaultStreamChatGenerics } from '../../../types/types';
+import { reduceMessagesToString } from '../../../utils/utils';
 
 export const useCreatePaginatedMessageListContext = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
@@ -18,14 +19,7 @@ export const useCreatePaginatedMessageListContext = <
 }: PaginatedMessageListContextValue<StreamChatGenerics> & {
   channelId?: string;
 }) => {
-  const messagesUpdated = messages
-    .map(
-      ({ deleted_at, latest_reactions, reply_count, status, updated_at }) =>
-        `${deleted_at}${
-          latest_reactions ? latest_reactions.map(({ type }) => type).join() : ''
-        }${reply_count}${status}${updated_at?.toISOString?.() || updated_at}`,
-    )
-    .join();
+  const messagesStr = reduceMessagesToString(messages);
 
   const paginatedMessagesContext: PaginatedMessageListContextValue<StreamChatGenerics> = useMemo(
     () => ({
@@ -38,7 +32,7 @@ export const useCreatePaginatedMessageListContext = <
       setLoadingMore,
       setLoadingMoreRecent,
     }),
-    [channelId, hasMore, loadingMoreRecent, loadingMore, messagesUpdated],
+    [channelId, hasMore, loadingMoreRecent, loadingMore, messagesStr],
   );
 
   return paginatedMessagesContext;

package/src/components/Channel/hooks/useCreateThreadContext.ts

@@ -2,6 +2,7 @@ import { useMemo } from 'react';
 
 import type { ThreadContextValue } from '../../../contexts/threadContext/ThreadContext';
 import type { DefaultStreamChatGenerics } from '../../../types/types';
+import { reduceMessagesToString } from '../../../utils/utils';
 
 export const useCreateThreadContext = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
@@ -19,14 +20,7 @@ export const useCreateThreadContext = <
 }: ThreadContextValue<StreamChatGenerics>) => {
   const threadId = thread?.id;
   const threadReplyCount = thread?.reply_count;
-  const threadMessagesUpdated = threadMessages
-    .map(
-      ({ deleted_at, latest_reactions, reply_count, status, updated_at }) =>
-        `${deleted_at}${
-          latest_reactions ? latest_reactions.map(({ type }) => type).join() : ''
-        }${reply_count}${status}${updated_at.toISOString()}`,
-    )
-    .join();
+  const threadMessagesStr = reduceMessagesToString(threadMessages);
 
   const threadContext: ThreadContextValue<StreamChatGenerics> = useMemo(
     () => ({
@@ -46,7 +40,7 @@ export const useCreateThreadContext = <
       threadHasMore,
       threadId,
       threadLoadingMore,
-      threadMessagesUpdated,
+      threadMessagesStr,
       threadReplyCount,
     ],
   );

package/src/utils/utils.ts

@@ -8,6 +8,7 @@ import type {
   ChannelMemberAPIResponse,
   ChannelMemberResponse,
   CommandResponse,
+  FormatMessageResponse,
   StreamChat,
   UserResponse,
 } from 'stream-chat';
@@ -534,3 +535,32 @@ export const emojiRegex =
 
 export const urlRegex =
   /(?:\s|^)((?:https?:\/\/)?(?:[a-z0-9-]+(?:\.[a-z0-9-]+)+)(?::[0-9]+)?(?:\/(?:[^\s]+)?)?)/g;
+
+/**
+ * Stringifies a message object
+ * @param {FormatMessageResponse<StreamChatGenerics>} message - the message object to be stringified
+ * @returns {string} The stringified message
+ */
+const stringifyMessage = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>({
+  deleted_at,
+  latest_reactions,
+  reply_count,
+  status,
+  updated_at,
+}: FormatMessageResponse<StreamChatGenerics>): string =>
+  `${deleted_at}${
+    latest_reactions ? latest_reactions.map(({ type }) => type).join() : ''
+  }${reply_count}${status}${updated_at?.toISOString?.() || updated_at}`;
+
+/**
+ * Reduces a list of messages to strings that are used in useEffect & useMemo
+ * @param {messages} messages - the array of messages to be compared
+ * @returns {string} The mapped message string
+ */
+export const reduceMessagesToString = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>(
+  messages: FormatMessageResponse<StreamChatGenerics>[],
+): string => messages.map(stringifyMessage).join();