Merge pull request #2707 from GetStream/develop

Next Release

.gitignore

@@ -23,3 +23,6 @@ index.android.bundle
 *.app
 *.DSYM.zip
 **/metrics/
+
+#docusaurus
+docusaurus/shared

.styles/Vocab/Base/accept.txt

@@ -42,4 +42,9 @@ RNCLI
 CDNs
 haptics
 async
-Podfile
+Podfile
+boolean
+Async
+subscribable
+memoizing
+Boolean

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.
 

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
 

docusaurus/docs/reactnative/guides/custom-message-actions.mdx

@@ -45,7 +45,7 @@ You can customize each one of the default actions using props on the [`Channel c
 
 The channel component accepts a prop called `messageActions`. You can use this prop as a callback function to render message actions selectively.
 
-The arguments to this function is an object with all the default message actions as [`MessageAction`](#messageaction) objects. The function should return an array of MessageAction objects to render in a [MessageActionList](../common-content/ui-components/overlay-provider/props/message_action_list.mdx) within the message overlay, that is shown when a user long presses a message in a MessageList.
+The arguments to this function is an object with all the default message actions as [`MessageAction`](#messageaction) objects. The function should return an array of MessageAction objects to render in a [MessageActionList](../core-components/overlay-provider.mdx#messageactionlist) within the message overlay, that is shown when a user long presses a message in a MessageList.
 
 You can also customize each one of the default actions using the `messageActions` prop passed to the OverlayProvider as shown in the example below. The OverlayProvider component makes these props available in the `MessageOverlayContext` context.
 

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';

docusaurus/reactnative_versioned_docs/version-4.x.x/guides/message_actions_customization.mdx

@@ -46,7 +46,7 @@ You can customize each one of the default actions using props on the [`Channel c
 
 The channel component accepts a prop called `messageActions`. You can use this prop as a callback function to render message actions selectively.
 
-The arguments to this function is an object with all the default message actions as [`MessageAction`](../object-types/message_action.mdx) objects. The function should return an array of MessageAction objects to render in a [MessageActionList](../common-content/core-components/overlay-provider/props/message_action_list.mdx) within the message overlay, that is shown when a user long presses a message in a MessageList.
+The arguments to this function is an object with all the default message actions as [`MessageAction`](../object-types/message_action.mdx) objects. The function should return an array of MessageAction objects to render in a [MessageActionList](../core-components/overlay_provider.mdx#messageactionlist) within the message overlay, that is shown when a user long presses a message in a MessageList.
 
 You can also customize each one of the default actions using the `messageActions` prop passed to the OverlayProvider as shown in the example below. The OverlayProvider component makes these props available in the `MessageOverlayContext` context.
 

package/src/components/AttachmentPicker/components/AttachmentPickerItem.tsx

@@ -5,6 +5,7 @@ import { Alert, ImageBackground, Platform, StyleSheet, Text, View } from 'react-
 import { TouchableOpacity } from '@gorhom/bottom-sheet';
 import { lookup } from 'mime-types';
 
+import { useTranslationContext } from '../../../contexts';
 import { AttachmentPickerContextValue } from '../../../contexts/attachmentPickerContext/AttachmentPickerContext';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { useViewport } from '../../../hooks/useViewport';
@@ -39,6 +40,7 @@ const AttachmentVideo = (props: AttachmentVideoProps) => {
     setSelectedFiles,
   } = props;
   const { vw } = useViewport();
+  const { t } = useTranslationContext();
 
   const {
     theme: {
@@ -76,7 +78,7 @@ const AttachmentVideo = (props: AttachmentVideoProps) => {
 
   const updateSelectedFiles = async () => {
     if (numberOfUploads >= maxNumberOfFiles) {
-      Alert.alert('Maximum number of files reached');
+      Alert.alert(t('Maximum number of files reached'));
       return;
     }
     const files = await patchVideoFile(selectedFiles);
@@ -143,6 +145,7 @@ const AttachmentImage = (props: AttachmentImageProps) => {
     },
   } = useTheme();
   const { vw } = useViewport();
+  const { t } = useTranslationContext();
 
   const size = vw(100) / (numberOfAttachmentPickerImageColumns || 3) - 2;
 
@@ -165,7 +168,7 @@ const AttachmentImage = (props: AttachmentImageProps) => {
 
   const updateSelectedImages = async () => {
     if (numberOfUploads >= maxNumberOfFiles) {
-      Alert.alert('Maximum number of files reached');
+      Alert.alert(t('Maximum number of files reached'));
       return;
     }
     const images = await patchImageFile(selectedImages);

package/src/components/Channel/Channel.tsx

@@ -674,6 +674,14 @@ const ChannelWithContext = <
       ) {
         loadChannelAtFirstUnreadMessage();
       }
+      // If the messageId is undefined and the last message and the current message id do not match we load the channel at the very bottom.
+      else if (
+        channel.state.messages?.[channel.state.messages.length - 1]?.id !==
+          channel.state.latestMessages?.[channel.state.latestMessages.length - 1]?.id &&
+        !messageId
+      ) {
+        await loadChannel();
+      }
     };
 
     initChannel();

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}`, '');

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 = [

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;
 };

package/src/contexts/messageInputContext/MessageInputContext.tsx

@@ -694,7 +694,19 @@ export const MessageInputProvider = <
         ],
       );
     }
+
+    // RN CLI
+    if (numberOfUploads >= value.maxNumberOfFiles) {
+      Alert.alert(t('Maximum number of files reached'));
+      return;
+    }
+
     if (result.assets && result.assets.length > 0) {
+      // Expo
+      if (result.assets.length > value.maxNumberOfFiles) {
+        Alert.alert(t('Maximum number of files reached'));
+        return;
+      }
       result.assets.forEach(async (asset) => {
         if (asset.type.includes('image')) {
           await uploadNewImage(asset);
@@ -746,7 +758,7 @@ export const MessageInputProvider = <
     }
 
     if (numberOfUploads >= value.maxNumberOfFiles) {
-      Alert.alert('Maximum number of files reached');
+      Alert.alert(t('Maximum number of files reached'));
       return;
     }
 

package/src/i18n/en.json

@@ -40,6 +40,7 @@
   "Loading messages...": "Loading messages...",
   "Loading threads...": "Loading threads...",
   "Loading...": "Loading...",
+  "Maximum number of files reached": "Maximum number of files reached",
   "Message Reactions": "Message Reactions",
   "Message deleted": "Message deleted",
   "Message flagged": "Message flagged",

package/src/i18n/es.json

@@ -40,6 +40,7 @@
   "Loading messages...": "Cargando mensajes...",
   "Loading threads...": "Cargando hilos...",
   "Loading...": "Cargando...",
+  "Maximum number of files reached": "Número máximo de archivos alcanzado",
   "Message Reactions": "Reacciones al mensaje",
   "Message deleted": "Mensaje eliminado",
   "Message flagged": "Mensaje reportado",

package/src/i18n/fr.json

@@ -40,6 +40,7 @@
   "Loading messages...": "Chargement des messages...",
   "Loading threads...": "Chargement des fils...",
   "Loading...": "Chargement...",
+  "Maximum number of files reached": "Nombre maximal de fichiers atteint",
   "Message Reactions": "Réactions aux messages",
   "Message deleted": "Message supprimé",
   "Message flagged": "Message signalé",

package/src/i18n/he.json

@@ -40,6 +40,7 @@
   "Loading messages...": "ההודעות בטעינה..",
   "Loading threads...": "טוען שרשורים...",
   "Loading...": "טוען...",
+  "Maximum number of files reached": "הגעת למספר המרבי של קבצים",
   "Message Reactions": "תגובות להודעה",
   "Message deleted": "ההודעה נמחקה",
   "Message flagged": "ההודעה סומנה",

package/src/i18n/hi.json

@@ -40,6 +40,7 @@
   "Loading messages...": "मेसेजस लोड हो रहे हैं...",
   "Loading threads...": "थ्रेड्स लोड हो रहे हैं...",
   "Loading...": "लोड हो रहा है...",
+  "Maximum number of files reached": "फ़ाइलों की अधिकतम संख्या पहुँच गई",
   "Message Reactions": "संदेश प्रतिक्रियाएँ",
   "Message deleted": "मैसेज हटा दिया गया",
   "Message flagged": "संदेश को ध्वजांकित किया गया",

package/src/i18n/it.json

@@ -40,6 +40,7 @@
   "Loading messages...": "Caricamento messaggi...",
   "Loading threads...": "Caricamento dei thread...",
   "Loading...": "Caricamento...",
+  "Maximum number of files reached": "Numero massimo di file raggiunto",
   "Message Reactions": "Reazioni ai Messaggi",
   "Message deleted": "Messaggio cancellato",
   "Message flagged": "Messaggio contrassegnato",

package/src/i18n/ja.json

@@ -40,6 +40,7 @@
   "Loading messages...": "メッセージを読み込み中。。。",
   "Loading threads...": "スレッドを読み込み中...",
   "Loading...": "読み込み中。。。",
+  "Maximum number of files reached": "ファイルの最大数に達しました",
   "Message Reactions": "メッセージのリアクション",
   "Message deleted": "メッセージが削除されました",
   "Message flagged": "メッセージにフラグが付けられました",

package/src/i18n/ko.json

@@ -40,6 +40,7 @@
   "Loading messages...": "메시지를 로딩 중...",
   "Loading threads...": "스레드 로딩 중...",
   "Loading...": "로딩 중...",
+  "Maximum number of files reached": "최대 파일 수에 도달했습니다",
   "Message Reactions": "메시지의 리액션",
   "Message deleted": "메시지가 삭제되었습니다.",
   "Message flagged": "메시지에 플래그가 지정되었습니다",

package/src/i18n/nl.json

@@ -40,6 +40,7 @@
   "Loading messages...": "Berichten aan het laden...",
   "Loading threads...": "Threads laden...",
   "Loading...": "Aan het laden...",
+  "Maximum number of files reached": "Maximaal aantal bestanden bereikt",
   "Message Reactions": "Bericht Reacties",
   "Message deleted": "Bericht verwijderd",
   "Message flagged": "Bericht gemarkeerd",

package/src/i18n/pt-br.json

@@ -40,6 +40,7 @@
   "Loading messages...": "Carregando mensagens...",
   "Loading threads...": "Carregando tópicos...",
   "Loading...": "Carregando...",
+  "Maximum number of files reached": "Número máximo de arquivos atingido",
   "Message Reactions": "Reações à Mensagem",
   "Message deleted": "Mensagem excluída",
   "Message flagged": "Mensagem sinalizada",

package/src/i18n/ru.json

@@ -40,6 +40,7 @@
   "Loading messages...": "Загружаю сообщения...",
   "Loading threads...": "Загрузка потоков...",
   "Loading...": "Загружаю...",
+  "Maximum number of files reached": "Достигнуто максимальное количество файлов",
   "Message Reactions": "Сообщения Реакции",
   "Message deleted": "Сообщение удалено",
   "Message flagged": "Сообщение отмечено",

package/src/i18n/tr.json

@@ -40,6 +40,7 @@
   "Loading messages...": "Mesajlar yükleniyor...",
   "Loading threads...": "Akışlar yükleniyor...",
   "Loading...": "Yükleniyor...",
+  "Maximum number of files reached": "Maksimum dosya sayısına ulaşıldı",
   "Message Reactions": "Mesaj Tepkileri",
   "Message deleted": "Mesaj silindi",
   "Message flagged": "Mesaj işaretlendi",