stream-chat-react-native-core 3.9.0-next.8 → 3.9.2-next.1

package/src/components/AutoCompleteInput/AutoCompleteInput.tsx

@@ -288,12 +288,7 @@ const AutoCompleteInputWithContext = <
 
     const textToModify = text.slice(0, selectionEnd.current);
 
-    const startOfTokenPosition = textToModify.search(
-      /**
-       * It's important to escape the trigger char for chars like [, (,...
-       */
-      new RegExp(`\\${trigger}${`[^\\${trigger}${'\\s'}]`}*$`),
-    );
+    const startOfTokenPosition = textToModify.lastIndexOf(trigger, selectionEnd.current);
 
     const newCaretPosition = computeCaretPosition(newTokenString, startOfTokenPosition);
 
@@ -335,7 +330,7 @@ const AutoCompleteInputWithContext = <
   };
 
   const handleMentions = ({ tokenMatch }: { tokenMatch: RegExpMatchArray | null }) => {
-    const lastToken = tokenMatch?.[tokenMatch.length - 1].trim();
+    const lastToken = tokenMatch?.[tokenMatch.length - 1];
     const handleMentionsTrigger =
       (lastToken && Object.keys(triggerSettings).find((trigger) => trigger === lastToken[0])) ||
       null;
@@ -401,7 +396,7 @@ const AutoCompleteInputWithContext = <
     } else if (giphyEnabled && !(await handleCommand(text))) {
       const mentionTokenMatch = text
         .slice(0, selectionEnd.current)
-        .match(/(?!^|\W)?@[^\s]*\s?[^\s]*$/g);
+        .match(/(?!^|\W)?@[^\s@]*\s?[^\s@]*$/g);
       if (mentionTokenMatch) {
         handleMentions({ tokenMatch: mentionTokenMatch });
       } else {

package/src/components/ChannelList/ChannelListLoadingIndicator.tsx

@@ -13,6 +13,7 @@ const styles = StyleSheet.create({
 export const ChannelListLoadingIndicator: React.FC = () => {
   const {
     theme: {
+      channelListLoadingIndicator: { container },
       colors: { white_snow },
     },
   } = useTheme();
@@ -20,7 +21,7 @@ export const ChannelListLoadingIndicator: React.FC = () => {
 
   return (
     <View
-      style={[styles.container, { backgroundColor: white_snow }]}
+      style={[styles.container, { backgroundColor: white_snow }, container]}
       testID='channel-list-loading-indicator'
     >
       {Array.from(Array(numberOfSkeletons)).map((_, index) => (

package/src/components/ChannelList/hooks/usePaginatedChannels.ts

@@ -3,6 +3,7 @@ import { useEffect, useMemo, useRef, useState } from 'react';
 import { MAX_QUERY_CHANNELS_LIMIT } from '../utils';
 
 import { useChatContext } from '../../../contexts/chatContext/ChatContext';
+import { useIsMountedRef } from '../../../hooks/useIsMountedRef';
 
 import type { Channel, ChannelFilters, ChannelOptions, ChannelSort } from 'stream-chat';
 
@@ -58,9 +59,10 @@ export const usePaginatedChannels = <
   const [loadingChannels, setLoadingChannels] = useState(false);
   const [loadingNextPage, setLoadingNextPage] = useState(false);
   const [refreshing, setRefreshing] = useState(false);
+  const isMounted = useIsMountedRef();
 
   const queryChannels = async (queryType = '', retryCount = 0): Promise<void> => {
-    if (!client || loadingChannels || loadingNextPage || refreshing) return;
+    if (!client || loadingChannels || loadingNextPage || refreshing || !isMounted.current) return;
 
     if (queryType === 'reload') {
       setLoadingChannels(true);
@@ -79,6 +81,8 @@ export const usePaginatedChannels = <
     try {
       const channelQueryResponse = await client.queryChannels(filters, sort, newOptions);
 
+      if (!isMounted.current) return;
+
       channelQueryResponse.forEach((channel) => channel.state.setIsUpToDate(true));
 
       const newChannels =
@@ -92,6 +96,8 @@ export const usePaginatedChannels = <
     } catch (err) {
       await wait(2000);
 
+      if (!isMounted.current) return;
+
       if (retryCount === 3) {
         setLoadingChannels(false);
         setLoadingNextPage(false);

package/src/components/ChannelPreview/ChannelPreviewMessage.tsx

@@ -51,7 +51,7 @@ export const ChannelPreviewMessage: React.FC<ChannelPreviewMessageProps> = ({
         preview.text ? (
           <Text
             key={`${preview.text}_${index}`}
-            style={[{ color: grey }, preview.bold ? styles.bold : {}]}
+            style={[{ color: grey }, preview.bold ? styles.bold : {}, message]}
           >
             {preview.text}
           </Text>

package/src/components/Chat/hooks/useIsOnline.ts

@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useState } from 'react';
 
 import { useAppStateListener } from '../../../hooks/useAppStateListener';
+import { useIsMountedRef } from '../../../hooks/useIsMountedRef';
 import { NetInfo } from '../../../native';
 
 import type { NetInfoSubscription } from '@react-native-community/netinfo';
@@ -35,10 +36,9 @@ export const useIsOnline = <
   client: StreamChat<At, Ch, Co, Ev, Me, Re, Us>,
   closeConnectionOnBackground = true,
 ) => {
-  const [unsubscribeNetInfo, setUnsubscribeNetInfo] = useState<NetInfoSubscription>();
   const [isOnline, setIsOnline] = useState(true);
   const [connectionRecovering, setConnectionRecovering] = useState(false);
-
+  const isMounted = useIsMountedRef();
   const clientExits = !!client;
 
   const onBackground = useCallback(() => {
@@ -83,35 +83,34 @@ export const useIsOnline = <
       }
     };
 
-    const setConnectionListener = () => {
+    let unsubscribeNetInfo: NetInfoSubscription;
+    const setNetInfoListener = () => {
       NetInfo.fetch().then((netInfoState) => {
         notifyChatClient(netInfoState);
       });
-      setUnsubscribeNetInfo(
-        NetInfo.addEventListener((netInfoState) => {
-          notifyChatClient(netInfoState);
-        }),
-      );
+      unsubscribeNetInfo = NetInfo.addEventListener((netInfoState) => {
+        notifyChatClient(netInfoState);
+      });
     };
 
     const setInitialOnlineState = async () => {
       const status = await NetInfo.fetch();
-      setIsOnline(status);
+
+      if (isMounted.current) setIsOnline(status);
     };
 
     setInitialOnlineState();
+    const chatListeners: Array<ReturnType<StreamChat['on']>> = [];
+
     if (client) {
-      client.on('connection.changed', handleChangedEvent);
-      client.on('connection.recovered', handleRecoveredEvent);
-      setConnectionListener();
+      chatListeners.push(client.on('connection.changed', handleChangedEvent));
+      chatListeners.push(client.on('connection.recovered', handleRecoveredEvent));
+      setNetInfoListener();
     }
 
     return () => {
-      client.off('connection.changed', handleChangedEvent);
-      client.off('connection.recovered', handleRecoveredEvent);
-      if (unsubscribeNetInfo) {
-        unsubscribeNetInfo();
-      }
+      chatListeners.forEach((listener) => listener.unsubscribe?.());
+      unsubscribeNetInfo?.();
     };
   }, [clientExits]);
 

package/src/components/Message/MessageSimple/utils/renderText.tsx

@@ -262,7 +262,7 @@ export const renderText = <
     <Markdown
       key={`${JSON.stringify(mentioned_users)}-${onlyEmojis}-${
         messageOverlay ? JSON.stringify(markdownStyles) : undefined
-      }`}
+      }-${JSON.stringify(colors)}`}
       onLink={onLink}
       rules={{
         ...customRules,

package/src/contexts/themeContext/utils/theme.ts

@@ -110,6 +110,9 @@ export type Theme = {
     container: ViewStyle;
     errorText: TextStyle;
   };
+  channelListLoadingIndicator: {
+    container: ViewStyle;
+  };
   channelListMessenger: {
     flatList: ViewStyle;
     flatListContent: ViewStyle;
@@ -531,6 +534,9 @@ export const defaultTheme: Theme = {
     container: {},
     errorText: {},
   },
+  channelListLoadingIndicator: {
+    container: {},
+  },
   channelListMessenger: {
     flatList: {},
     flatListContent: {},

package/src/hooks/useIsMountedRef.ts

@@ -0,0 +1,36 @@
+import { useEffect, useRef } from 'react';
+
+/**
+ * Returns mount status of component. This hook can be used for purpose of avoiding any
+ * setState calls (within async operation) after component gets unmounted.
+ *
+ * @example
+ * ```
+ * const isMounted = useIsMountedRef();
+ * const [dummyValue, setDummyValue] = useState(false);
+ *
+ * useEffect(() => {
+ *  someAsyncOperation().then(() => {
+ *    if (isMounted.current) setDummyValue(true);
+ *  })
+ * })
+ * ```
+ *
+ * @returns isMounted {Object} Mount status ref for the component.
+ */
+export const useIsMountedRef = () => {
+  // Initial value has been set to true, since this hook exist only for sole purpose of
+  // avoiding any setState calls (within async operation) after component gets unmounted.
+  // Basically we don't need to know about state change from component being initialized -> mounted.
+  // We only need a state change from initialized or mounted state -> unmounted state.
+  const isMounted = useRef(true);
+
+  useEffect(
+    () => () => {
+      isMounted.current = false;
+    },
+    [],
+  );
+
+  return isMounted;
+};

package/src/hooks/useStreami18n.ts

@@ -1,8 +1,10 @@
 import { useEffect, useState } from 'react';
 
-import type { TranslationContextValue } from '../contexts/translationContext/TranslationContext';
+import { useIsMountedRef } from './useIsMountedRef';
 import { Streami18n } from '../utils/Streami18n';
 
+import type { TranslationContextValue } from '../contexts/translationContext/TranslationContext';
+
 export const useStreami18n = ({
   i18nInstance,
   setTranslators,
@@ -11,7 +13,7 @@ export const useStreami18n = ({
   i18nInstance?: Streami18n;
 }) => {
   const [loadingTranslators, setLoadingTranslators] = useState(true);
-
+  const isMounted = useIsMountedRef();
   const i18nInstanceExists = !!i18nInstance;
   useEffect(() => {
     let streami18n: Streami18n;
@@ -26,7 +28,7 @@ export const useStreami18n = ({
       setTranslators((prevTranslator) => ({ ...prevTranslator, t })),
     );
     streami18n.getTranslators().then((translator) => {
-      if (translator) setTranslators(translator);
+      if (translator && isMounted.current) setTranslators(translator);
     });
 
     setLoadingTranslators(false);

package/src/i18n/fr.json

@@ -9,7 +9,7 @@
   "Copy Message": "Copier le message",
   "Delete": "Supprimer",
   "Delete Message": "Supprimer un message",
-  "Dismiss": "Rejeter",
+  "Dismiss": "Fermer",
   "Do you want to send a copy of this message to a moderator for further investigation?": "Voulez-vous envoyer une copie de ce message à un modérateur pour une enquête plus approfondie?",
   "Edit Message": "Éditer un message",
   "Editing Message": "Édite un message",

package/src/version.json

@@ -1,3 +1,3 @@
 {
-  "version": "3.9.0-next.8"
+  "version": "3.9.2-next.1"
 }