stream-chat-react-native-core 3.9.0 → 3.9.2-next.2

package/src/components/Channel/Channel.tsx

@@ -544,7 +544,7 @@ const ChannelWithContext = <
       colors: { black },
     },
   } = useTheme();
-
+  const [deleted, setDeleted] = useState(false);
   const [editing, setEditing] = useState<boolean | MessageType<At, Ch, Co, Ev, Me, Re, Us>>(false);
   const [error, setError] = useState(false);
   const [hasMore, setHasMore] = useState(true);
@@ -670,7 +670,7 @@ const ChannelWithContext = <
   const markRead: ChannelContextValue<At, Ch, Co, Ev, Me, Re, Us>['markRead'] = useRef(
     throttle(
       () => {
-        if (channel?.disconnected || !channel?.getConfig?.()?.read_events) {
+        if (!channel || channel?.disconnected || !clientChannelConfig?.read_events) {
           return;
         }
 
@@ -778,18 +778,33 @@ const ChannelWithContext = <
   };
 
   useEffect(() => {
-    /**
-     * The more complex sync logic around internet connectivity (NetInfo) is part of Chat.tsx
-     * listen to client.connection.recovered and all channel events
-     */
-    client.on('connection.recovered', connectionRecoveredHandler);
-    client.on('connection.changed', connectionChangedHandler);
-    channel?.on(handleEvent);
+    const channelSubscriptions: Array<ReturnType<ChannelType['on']>> = [];
+    const clientSubscriptions: Array<ReturnType<StreamChat['on']>> = [];
+
+    const subscribe = () => {
+      if (!channel) return;
+
+      /**
+       * The more complex sync logic around internet connectivity (NetInfo) is part of Chat.tsx
+       * listen to client.connection.recovered and all channel events
+       */
+      clientSubscriptions.push(client.on('connection.recovered', connectionRecoveredHandler));
+      clientSubscriptions.push(client.on('connection.changed', connectionChangedHandler));
+      clientSubscriptions.push(
+        client.on('channel.deleted', (event) => {
+          if (event.cid === channel.cid) {
+            setDeleted(true);
+          }
+        }),
+      );
+      channelSubscriptions.push(channel.on(handleEvent));
+    };
+
+    subscribe();
 
     return () => {
-      client.off('connection.recovered', connectionRecoveredHandler);
-      client.off('connection.changed', connectionChangedHandler);
-      channel?.off(handleEvent);
+      clientSubscriptions.forEach((s) => s.unsubscribe());
+      channelSubscriptions.forEach((s) => s.unsubscribe());
     };
   }, [channelId, connectionRecoveredHandler, handleEvent]);
 
@@ -1152,13 +1167,23 @@ const ChannelWithContext = <
     }
   };
 
+  // In case the channel is disconnected which may happen when channel is deleted,
+  // underlying js client throws an error. Following function ensures that Channel component
+  // won't result in error in such a case.
+  const getChannelConfigSafely = () => {
+    try {
+      return channel?.getConfig();
+    } catch (_) {
+      return null;
+    }
+  };
+
   /**
    * Channel configs for use in disabling local functionality.
    * Nullish coalescing is used to give first priority to props to override
    * the server settings. Then priority to server settings to override defaults.
    */
-  const clientChannelConfig =
-    typeof channel?.getConfig === 'function' ? channel.getConfig() : undefined;
+  const clientChannelConfig = getChannelConfigSafely();
 
   const messagesConfig: MessagesConfig = {
     /**
@@ -1597,7 +1622,7 @@ const ChannelWithContext = <
     error,
     giphyEnabled:
       giphyEnabled ??
-      !!(channel?.getConfig?.()?.commands || [])?.some((command) => command.name === 'giphy'),
+      !!(clientChannelConfig?.commands || [])?.some((command) => command.name === 'giphy'),
     hideDateSeparators,
     hideStickyDateHeader,
     isAdmin,
@@ -1780,6 +1805,9 @@ const ChannelWithContext = <
     typing,
   });
 
+  // TODO: replace the null view with appropriate message. Currently this is waiting a design decision.
+  if (deleted) return null;
+
   if (!channel || (error && messages.length === 0)) {
     return <LoadingErrorIndicator error={error} listType='message' retry={reloadChannel} />;
   }

package/src/components/Channel/__tests__/Channel.test.js

@@ -1,6 +1,6 @@
 import React, { useContext, useEffect } from 'react';
 import { View } from 'react-native';
-import { cleanup, render, waitFor } from '@testing-library/react-native';
+import { act, cleanup, render, waitFor } from '@testing-library/react-native';
 import { StreamChat } from 'stream-chat';
 
 import { Channel } from '../Channel';
@@ -14,8 +14,10 @@ import {
   MessagesProvider,
 } from '../../../contexts/messagesContext/MessagesContext';
 import { ThreadContext, ThreadProvider } from '../../../contexts/threadContext/ThreadContext';
+
 import { useMockedApis } from '../../../mock-builders/api/useMockedApis';
 import { getOrCreateChannelApi } from '../../../mock-builders/api/getOrCreateChannel';
+import dispatchChannelDeletedEvent from '../../../mock-builders/event/channelDeleted';
 import { generateChannel } from '../../../mock-builders/generator/channel';
 import { generateMember } from '../../../mock-builders/generator/member';
 import { generateMessage } from '../../../mock-builders/generator/message';
@@ -65,6 +67,7 @@ describe('Channel', () => {
     chatClient = await getTestClientWithUser(user);
     useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]);
     channel = chatClient.channel('messaging', mockedChannel.id);
+    channel.cid = mockedChannel.channel.cid;
   });
 
   afterEach(() => {
@@ -77,7 +80,9 @@ describe('Channel', () => {
       ...channel,
       cid: null,
       off: () => {},
-      on: () => {},
+      on: () => ({
+        unsubscribe: () => null,
+      }),
       watch: () => {},
     };
     const { getByTestId } = renderComponent({ channel: nullChannel });
@@ -193,6 +198,17 @@ describe('Channel', () => {
     await waitFor(() => expect(channelQuerySpy).toHaveBeenCalled());
   });
 
+  it('should render null if channel gets deleted', async () => {
+    const { getByTestId, queryByTestId } = renderComponent({
+      channel,
+      children: <View testID='children' />,
+    });
+
+    await waitFor(() => expect(getByTestId('children')).toBeTruthy());
+    act(() => dispatchChannelDeletedEvent(chatClient, channel));
+    expect(queryByTestId('children')).toBeNull();
+  });
+
   describe('ChannelContext', () => {
     it('renders children without crashing', async () => {
       const { getByTestId } = render(

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/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/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"
+  "version": "3.9.2-next.2"
 }