Component adjustments

src/components/Message/hooks/useReactionHandler.ts

@@ -96,6 +96,7 @@ export const useReactionHandler = <
 
     try {
       updateMessage(tempMessage);
+      // @ts-expect-error
       thread?.upsertReplyLocally({ message: tempMessage });
 
       const messageResponse = add
@@ -107,6 +108,7 @@ export const useReactionHandler = <
     } catch (error) {
       // revert to the original message if the API call fails
       updateMessage(message);
+      // @ts-expect-error
       thread?.upsertReplyLocally({ message });
     }
   }, 1000);

src/components/Message/utils.tsx

@@ -201,7 +201,6 @@ export const getMessageActions = (
 
 export const ACTIONS_NOT_WORKING_IN_THREAD = [
   MESSAGE_ACTIONS.pin,
-  MESSAGE_ACTIONS.react,
   MESSAGE_ACTIONS.reply,
   MESSAGE_ACTIONS.markUnread,
 ];

src/components/Thread/Thread.tsx

@@ -74,7 +74,7 @@ export const Thread = <
 };
 
 const selector = (nextValue: ThreadState) =>
-  [nextValue.latestReplies, nextValue.loadingPreviousPage, nextValue.parentMessage] as const;
+  [nextValue.replies, nextValue.pagination.isLoadingPrev, nextValue.parentMessage] as const;
 
 const ThreadInner = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
@@ -145,7 +145,7 @@ const ThreadInner = <
   > = threadInstance
     ? {
         loadingMore: loadingPreviousPage,
-        loadMore: threadInstance.loadPreviousPage,
+        loadMore: threadInstance.loadPrevPage,
         messages: latestReplies,
       }
     : {

src/components/Threads/ThreadList/ThreadListItemUI.tsx

@@ -1,9 +1,10 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import clsx from 'clsx';
 
 import type { FormatMessageResponse, ThreadState } from 'stream-chat';
 import type { ComponentPropsWithoutRef } from 'react';
 
+import { Timestamp } from '../../Message/Timestamp';
 import { Avatar } from '../../Avatar';
 import { Icon } from '../icons';
 import { UnreadCountBadge } from '../UnreadCountBadge';
@@ -22,15 +23,6 @@ export type ThreadListItemUIProps = ComponentPropsWithoutRef<'button'>;
  * - handle deleted message [in progress]
  */
 
-const selector = (nextValue: ThreadState) =>
-  [
-    nextValue.latestReplies.at(-1),
-    nextValue.read,
-    nextValue.parentMessage,
-    nextValue.channel,
-    nextValue.deletedAt,
-  ] as const;
-
 export const attachmentTypeIconMap = {
   audio: '🔈',
   file: '📄',
@@ -79,15 +71,26 @@ export const ThreadListItemUI = (props: ThreadListItemUIProps) => {
   const { client } = useChatContext();
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   const thread = useThreadListItemContext()!;
-  const [latestReply, read, parentMessage, channelData, deletedAt] = useStateStore(
+
+  const selector = useCallback(
+    (nextValue: ThreadState) =>
+      [
+        nextValue.replies.at(-1),
+        (client.userID && nextValue.read[client.userID]?.unreadMessageCount) || 0,
+        nextValue.parentMessage,
+        nextValue.channel,
+        nextValue.deletedAt,
+      ] as const,
+    [client],
+  );
+
+  const [latestReply, ownUnreadMessageCount, parentMessage, channelData, deletedAt] = useStateStore(
     thread.state,
     selector,
   );
 
   const { activeThread, setActiveThread } = useThreadsViewContext();
 
-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-  const unreadMessagesCount = read[client.user!.id]?.unread_messages ?? 0;
   const avatarProps = deletedAt ? null : latestReply?.user;
 
   return (
@@ -110,7 +113,7 @@ export const ThreadListItemUI = (props: ThreadListItemUIProps) => {
           {/* TODO: use thread.title instead? */}
           replied to: {getTitleFromMessage({ message: parentMessage })}
         </div>
-        {!deletedAt && <UnreadCountBadge count={unreadMessagesCount} />}
+        {!deletedAt && <UnreadCountBadge count={ownUnreadMessageCount} />}
       </div>
       <div className='str-chat__thread-list-item__latest-reply'>
         <Avatar {...avatarProps} />
@@ -127,9 +130,7 @@ export const ThreadListItemUI = (props: ThreadListItemUIProps) => {
                 : getTitleFromMessage({ currentUserId: client.user?.id, message: latestReply })}
             </div>
             <div className='str-chat__thread-list-item__latest-reply-timestamp'>
-              {deletedAt
-                ? deletedAt.toLocaleTimeString()
-                : latestReply?.created_at.toLocaleTimeString() || 'N/A'}
+              <Timestamp timestamp={deletedAt ?? latestReply?.created_at} />
             </div>
           </div>
         </div>

src/components/Threads/hooks/useThreadState.ts

@@ -4,13 +4,13 @@ import { useThreadListItemContext } from '../ThreadList';
 import { useThreadContext } from '../ThreadContext';
 
 /**
- * @description returns thread state, prioritizes `ThreadListItemContext`, uses `ThreadContext` if not present
+ * @description returns thread state, prioritizes `ThreadListItemContext` falls back to `ThreadContext` if not former is not present
  */
 export const useThreadState = <T extends readonly unknown[]>(
   selector: (nextValue: ThreadState) => T,
 ) => {
   const listItemThread = useThreadListItemContext();
   const thread = useThreadContext();
 
-  return useStateStore(listItemThread?.state ?? thread.state, selector);
+  return useStateStore(listItemThread?.state ?? thread?.state, selector);
 };

src/context/MessageContext.tsx

@@ -162,15 +162,12 @@ export const MessageProvider = <
 export const useMessageContext = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
 >(
-  componentName?: string,
+  // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
+  _componentName?: string,
 ) => {
   const contextValue = useContext(MessageContext);
 
   if (!contextValue) {
-    console.warn(
-      `The useMessageContext hook was called outside of the MessageContext provider. Make sure this hook is called within the Message's UI component. The errored call is located in the ${componentName} component.`,
-    );
-
     return {} as MessageContextValue<StreamChatGenerics>;
   }