Merge branch 'develop' of github.com:GetStream/stream-chat-react-nati…

…ve into load-channel-when-message-id-undefined
GetStream · Oct 14, 2024 · 69bba7b · 69bba7b
2 parents 2d8ecde + 78d83fd
commit 69bba7b
Show file tree

Hide file tree

Showing 9 changed files with 30 additions and 23 deletions.
diff --git a/.gitignore b/.gitignore
@@ -23,3 +23,6 @@ index.android.bundle
 *.app
 *.DSYM.zip
 **/metrics/
+
+#docusaurus
+docusaurus/shared
diff --git a/.styles/Vocab/Base/accept.txt b/.styles/Vocab/Base/accept.txt
@@ -42,4 +42,9 @@ RNCLI
 CDNs
 haptics
 async
-Podfile
+Podfile
+boolean
+Async
+subscribable
+memoizing
+Boolean
diff --git a/docusaurus/docs/reactnative/basics/troubleshooting.mdx b/docusaurus/docs/reactnative/basics/troubleshooting.mdx
@@ -125,7 +125,7 @@ useEffect(() => {
 }, [setTopInset, finalHeaderHeight]);
 ```
 
-This can also be passed to the `topInset` prop of of `OverlayProvider`.
+This can also be passed to the `topInset` prop of `OverlayProvider`.
 
 It is important to note that since Expo 38 `true` is the default for transparent on Android.
 

diff --git a/docusaurus/docs/reactnative/contexts/message-input-context.mdx b/docusaurus/docs/reactnative/contexts/message-input-context.mdx
@@ -246,17 +246,15 @@ const { sendMessage, toggleAttachmentPicker } = useMessageInputContext();
 
 <SendMessage />
 
-{/* ### setInputRef */}
-
-{/* ### setQuotedMessageState */}
+[//]: # '### setInputRef'
+[//]: # '### setQuotedMessageState'
 
 ### `appendText`
 
 <AppendText />
 
-{/* ### asyncIds */}
-
-{/* ### asyncUploads */}
+[//]: # '### asyncIds'
+[//]: # '### asyncUploads'
 
 ### closeAttachmentPicker
 
@@ -290,9 +288,8 @@ const { sendMessage, toggleAttachmentPicker } = useMessageInputContext();
 
 <NumberOfUploads />
 
-{/* ### onChange */}
-
-{/* ### onSelectItem */}
+[//]: # '### onChange'
+[//]: # '### onSelectItem'
 
 ### openAttachmentPicker
 
@@ -314,7 +311,7 @@ const { sendMessage, toggleAttachmentPicker } = useMessageInputContext();
 
 <PickAndUploadImageFromNativePicker />
 
-{/* ### pickFile */}
+[//]: # '### pickFile'
 
 ### `removeFile`
 
@@ -332,17 +329,15 @@ const { sendMessage, toggleAttachmentPicker } = useMessageInputContext();
 
 <SelectedPicker />
 
-{/* ### sending */}
-
-{/* ### sendMessageAsync */}
+[//]: # '### sending'
+[//]: # '### sendMessageAsync'
 
 ### sendThreadMessageInChannel
 
 <SendThreadMessageInChannel />
 
-{/* ### setAsyncIds */}
-
-{/* ### setAsyncUploads */}
+[//]: # '### setAsyncIds'
+[//]: # '### setAsyncUploads'
 
 ### setFileUploads
 

diff --git a/docusaurus/docs/reactnative/state-and-offline-support/state-overview.mdx b/docusaurus/docs/reactnative/state-and-offline-support/state-overview.mdx
@@ -305,7 +305,7 @@ const Component3 = ({ userId }: { userId: string }) => {
 };
 ```
 
-3. Break your components down to the smallest reasonable parts that each take care of the apropriate piece of state if it makes sense to do so.
+3. Break your components down to the smallest reasonable parts that each take care of the appropriate piece of state if it makes sense to do so.
 
 ### Accessing Reactive State
 
@@ -344,7 +344,7 @@ thread?.state.getLatestValue(/*...*/);
 
 #### useStateStore Hook
 
-For the ease of use - the React SDK comes with the appropriate state acesss hook which wraps `SimpleStateStore.subscribeWithSelector` API for the React-based applications.
+For the ease of use - the React SDK comes with the appropriate state access hook which wraps `SimpleStateStore.subscribeWithSelector` API for the React-based applications.
 
 ```tsx
 import { useStateStore } from 'stream-chat-react-native';

diff --git a/docusaurus/shared b/docusaurus/shared
diff --git a/package/src/components/ChannelList/ChannelList.tsx b/package/src/components/ChannelList/ChannelList.tsx
@@ -354,6 +354,7 @@ export const ChannelList = <
 
   useUserPresence({
     setChannels,
+    setForceUpdate,
   });
 
   const channelIdsStr = channels?.reduce((acc, channel) => `${acc}${channel.cid}`, '');

diff --git a/package/src/components/ChannelList/hooks/listeners/useUserPresence.ts b/package/src/components/ChannelList/hooks/listeners/useUserPresence.ts
@@ -9,12 +9,14 @@ import type { DefaultStreamChatGenerics } from '../../../../types/types';
 type Parameters<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> =
   {
     setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[] | null>>;
+    setForceUpdate: React.Dispatch<React.SetStateAction<number>>;
   };
 
 export const useUserPresence = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   setChannels,
+  setForceUpdate,
 }: Parameters<StreamChatGenerics>) => {
   const { client } = useChatContext<StreamChatGenerics>();
 
@@ -33,6 +35,7 @@ export const useUserPresence = <
 
         return [...newChannels];
       });
+      setForceUpdate((u) => u + 1);
     };
 
     const listeners = [

diff --git a/package/src/components/ChannelPreview/hooks/useChannelPreviewDisplayPresence.ts b/package/src/components/ChannelPreview/hooks/useChannelPreviewDisplayPresence.ts
@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react';
 
 import type { Channel, StreamChat } from 'stream-chat';
 
+import { useChannelsContext } from '../../../contexts';
 import { useChatContext } from '../../../contexts/chatContext/ChatContext';
 
 import type { DefaultStreamChatGenerics } from '../../../types/types';
@@ -37,6 +38,7 @@ export const useChannelPreviewDisplayPresence = <
   channel: Channel<StreamChatGenerics>,
 ) => {
   const { client } = useChatContext<StreamChatGenerics>();
+  const { forceUpdate } = useChannelsContext<StreamChatGenerics>();
 
   const currentUserId = client.userID;
   const members = Object.values(channel.state.members).filter(
@@ -48,8 +50,7 @@ export const useChannelPreviewDisplayPresence = <
 
   useEffect(() => {
     setDisplayPresence(getChannelPreviewDisplayPresence(channel, client));
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [channelMemberOnline]);
+  }, [channel, channelMemberOnline, client, forceUpdate]);
 
   return displayPresence;
 };