stream-chat-react-native-core 4.0.0 → 4.1.0

package/src/components/Chat/Chat.tsx

@@ -1,7 +1,10 @@
 import React, { PropsWithChildren, useEffect, useState } from 'react';
 import { Platform } from 'react-native';
+
 import Dayjs from 'dayjs';
 
+import type { Channel } from 'stream-chat';
+
 import { useCreateChatContext } from './hooks/useCreateChatContext';
 import { useIsOnline } from './hooks/useIsOnline';
 import { useMutedUsers } from './hooks/useMutedUsers';
@@ -9,39 +12,24 @@ import { useMutedUsers } from './hooks/useMutedUsers';
 import { ChatContextValue, ChatProvider } from '../../contexts/chatContext/ChatContext';
 import { useOverlayContext } from '../../contexts/overlayContext/OverlayContext';
 import { DeepPartial, ThemeProvider } from '../../contexts/themeContext/ThemeContext';
+import type { Theme } from '../../contexts/themeContext/utils/theme';
 import {
   TranslationContextValue,
   TranslationProvider,
 } from '../../contexts/translationContext/TranslationContext';
 import { useStreami18n } from '../../hooks/useStreami18n';
+import init from '../../init';
 
 import { SDK } from '../../native';
+import type { DefaultStreamChatGenerics } from '../../types/types';
+import type { Streami18n } from '../../utils/Streami18n';
 import { version } from '../../version.json';
 
-import type { Channel } from 'stream-chat';
-
-import type { Theme } from '../../contexts/themeContext/utils/theme';
-import type { Streami18n } from '../../utils/Streami18n';
-import type {
-  DefaultAttachmentType,
-  DefaultChannelType,
-  DefaultCommandType,
-  DefaultEventType,
-  DefaultMessageType,
-  DefaultReactionType,
-  DefaultUserType,
-  UnknownType,
-} from '../../types/types';
+init();
 
 export type ChatProps<
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
-> = Pick<ChatContextValue<At, Ch, Co, Ev, Me, Re, Us>, 'client'> & {
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Pick<ChatContextValue<StreamChatGenerics>, 'client'> & {
   /**
    * When false, ws connection won't be disconnection upon backgrounding the app.
    * To receive push notifications, its necessary that user doesn't have active
@@ -133,19 +121,13 @@ export type ChatProps<
 };
 
 const ChatWithContext = <
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
-  props: PropsWithChildren<ChatProps<At, Ch, Co, Ev, Me, Re, Us>>,
+  props: PropsWithChildren<ChatProps<StreamChatGenerics>>,
 ) => {
   const { children, client, closeConnectionOnBackground = true, i18nInstance, style } = props;
 
-  const [channel, setChannel] = useState<Channel<At, Ch, Co, Ev, Me, Re, Us>>();
+  const [channel, setChannel] = useState<Channel<StreamChatGenerics>>();
   const [translators, setTranslators] = useState<TranslationContextValue>({
     t: (key: string) => key,
     tDateTimeParser: (input?: string | number | Date) => Dayjs(input),
@@ -159,7 +141,7 @@ const ChatWithContext = <
   /**
    * Setup connection event listeners
    */
-  const { connectionRecovering, isOnline } = useIsOnline<At, Ch, Co, Ev, Me, Re, Us>(
+  const { connectionRecovering, isOnline } = useIsOnline<StreamChatGenerics>(
     client,
     closeConnectionOnBackground,
   );
@@ -167,7 +149,7 @@ const ChatWithContext = <
   /**
    * Setup muted user listener
    */
-  const mutedUsers = useMutedUsers<At, Ch, Co, Ev, Me, Re, Us>(client);
+  const mutedUsers = useMutedUsers<StreamChatGenerics>(client);
 
   useEffect(() => {
     if (client.setUserAgent) {
@@ -177,8 +159,7 @@ const ChatWithContext = <
     }
   }, []);
 
-  const setActiveChannel = (newChannel?: Channel<At, Ch, Co, Ev, Me, Re, Us>) =>
-    setChannel(newChannel);
+  const setActiveChannel = (newChannel?: Channel<StreamChatGenerics>) => setChannel(newChannel);
 
   const chatContext = useCreateChatContext({
     channel,
@@ -192,7 +173,7 @@ const ChatWithContext = <
   if (loadingTranslators) return null;
 
   return (
-    <ChatProvider<At, Ch, Co, Ev, Me, Re, Us> value={chatContext}>
+    <ChatProvider<StreamChatGenerics> value={chatContext}>
       <TranslationProvider value={translators}>
         <ThemeProvider style={style}>{children}</ThemeProvider>
       </TranslationProvider>
@@ -222,15 +203,9 @@ const ChatWithContext = <
  * - Us (UserType) - custom User object extension
  */
 export const Chat = <
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
-  props: PropsWithChildren<ChatProps<At, Ch, Co, Ev, Me, Re, Us>>,
+  props: PropsWithChildren<ChatProps<StreamChatGenerics>>,
 ) => {
   const { style } = useOverlayContext();
 

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

@@ -1,16 +1,17 @@
 import React from 'react';
 import { View } from 'react-native';
-import { act, cleanup, render, waitFor } from '@testing-library/react-native';
-
-import { Chat } from '../Chat';
 
-import { Streami18n } from '../../../utils/Streami18n';
+import { act, cleanup, render, waitFor } from '@testing-library/react-native';
 
+import { setNetInfoFetchMock } from '../../../../jest-setup';
 import { useChatContext } from '../../../contexts/chatContext/ChatContext';
+
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
 import dispatchConnectionChangedEvent from '../../../mock-builders/event/connectionChanged';
 import dispatchConnectionRecoveredEvent from '../../../mock-builders/event/connectionRecovered';
 import { getTestClient } from '../../../mock-builders/mock';
+import { Streami18n } from '../../../utils/Streami18n';
+import { Chat } from '../Chat';
 
 const ChatContextConsumer = ({ fn }) => {
   fn(useChatContext());
@@ -38,6 +39,8 @@ describe('Chat', () => {
 
   it('listens and updates state on a connection changed event', async () => {
     let context;
+    const netInfoFetch = jest.fn();
+    setNetInfoFetchMock(netInfoFetch);
 
     render(
       <Chat client={chatClient}>
@@ -49,15 +52,16 @@ describe('Chat', () => {
       </Chat>,
     );
 
-    const { connectionRecovering } = context;
+    await waitFor(() => expect(netInfoFetch).toHaveBeenCalledTimes(1));
 
+    const { connectionRecovering } = context;
     act(() => dispatchConnectionChangedEvent(chatClient));
-
     await waitFor(() => {
       expect(context.connectionRecovering).toStrictEqual(!connectionRecovering);
       expect(context.isOnline).toBeFalsy();
     });
   });
+
   it('listens and updates state on a connection recovered event', async () => {
     let context;
 
@@ -95,50 +99,10 @@ describe('Chat', () => {
         expect(context.channel).toBeUndefined();
         expect(context.client).toBe(chatClient);
         expect(context.connectionRecovering).toBeFalsy();
-        expect(context.isOnline).toBeTruthy();
-        expect(context.logger).toBeInstanceOf(Function);
         expect(context.setActiveChannel).toBeInstanceOf(Function);
       });
     });
 
-    it('updates the context when props change', async () => {
-      let context;
-      const logger = () => true;
-
-      const { rerender } = render(
-        <Chat client={chatClient} logger={logger}>
-          <ChatContextConsumer
-            fn={(ctx) => {
-              context = ctx;
-            }}
-          ></ChatContextConsumer>
-        </Chat>,
-      );
-
-      await waitFor(() => {
-        expect(context.client).toBe(chatClient);
-        expect(context.logger).toBe(logger);
-      });
-
-      const newClient = getTestClient();
-      const newLogger = () => false;
-
-      rerender(
-        <Chat client={newClient} logger={newLogger}>
-          <ChatContextConsumer
-            fn={(ctx) => {
-              context = ctx;
-            }}
-          ></ChatContextConsumer>
-        </Chat>,
-      );
-
-      await waitFor(() => {
-        expect(context.client).toBe(newClient);
-        expect(context.logger).toBe(newLogger);
-      });
-    });
-
     it('calls setActiveChannel to set a new channel in context', async () => {
       let context;
 
@@ -152,10 +116,11 @@ describe('Chat', () => {
         </Chat>,
       );
 
-      const channel = { cid: 'cid', query: jest.fn() };
+      const channel = { cid: 'cid', id: 'cid', query: jest.fn() };
 
       await waitFor(() => expect(context.channel).toBeUndefined());
       act(() => context.setActiveChannel(channel));
+
       await waitFor(() => expect(context.channel).toStrictEqual(channel));
     });
   });

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

@@ -1,25 +1,10 @@
 import { useMemo } from 'react';
 
 import type { ChatContextValue } from '../../../contexts/chatContext/ChatContext';
-import type {
-  DefaultAttachmentType,
-  DefaultChannelType,
-  DefaultCommandType,
-  DefaultEventType,
-  DefaultMessageType,
-  DefaultReactionType,
-  DefaultUserType,
-  UnknownType,
-} from '../../../types/types';
+import type { DefaultStreamChatGenerics } from '../../../types/types';
 
 export const useCreateChatContext = <
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   channel,
   client,
@@ -27,14 +12,14 @@ export const useCreateChatContext = <
   isOnline,
   mutedUsers,
   setActiveChannel,
-}: ChatContextValue<At, Ch, Co, Ev, Me, Re, Us>) => {
+}: ChatContextValue<StreamChatGenerics>) => {
   const channelId = channel?.id;
   const clientValues = `${client.clientID}${Object.keys(client.activeChannels).length}${
     Object.keys(client.listeners).length
   }${client.mutedChannels.length}`;
   const mutedUsersLength = mutedUsers.length;
 
-  const chatContext: ChatContextValue<At, Ch, Co, Ev, Me, Re, Us> = useMemo(
+  const chatContext: ChatContextValue<StreamChatGenerics> = useMemo(
     () => ({
       channel,
       client,

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

@@ -1,21 +1,14 @@
-import { useEffect, useState } from 'react';
-
-import { useAppStateListener } from '../../../hooks/useAppStateListener';
-import { NetInfo } from '../../../native';
+import { useCallback, useEffect, useState } from 'react';
 
 import type { NetInfoSubscription } from '@react-native-community/netinfo';
+
 import type { StreamChat, Event as StreamEvent } from 'stream-chat';
 
-import type {
-  DefaultAttachmentType,
-  DefaultChannelType,
-  DefaultCommandType,
-  DefaultEventType,
-  DefaultMessageType,
-  DefaultReactionType,
-  DefaultUserType,
-  UnknownType,
-} from '../../../types/types';
+import { useAppStateListener } from '../../../hooks/useAppStateListener';
+import { useIsMountedRef } from '../../../hooks/useIsMountedRef';
+import { NetInfo } from '../../../native';
+
+import type { DefaultStreamChatGenerics } from '../../../types/types';
 
 /**
  * Disconnect the websocket connection when app goes to background,
@@ -24,44 +17,38 @@ import type {
  * You can't receive push notification until you have active websocket connection.
  */
 export const useIsOnline = <
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
-  client: StreamChat<At, Ch, Co, Ev, Me, Re, Us>,
+  client: StreamChat<StreamChatGenerics>,
   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 = closeConnectionOnBackground
-    ? () => {
-        for (const cid in client.activeChannels) {
-          const channel = client.activeChannels[cid];
-          channel?.state.setIsUpToDate(false);
-        }
-        client.closeConnection();
-        setIsOnline(false);
-      }
-    : undefined;
+  const onBackground = useCallback(() => {
+    if (!closeConnectionOnBackground) return;
 
-  const onForeground = closeConnectionOnBackground
-    ? () => {
-        client.openConnection();
-      }
-    : undefined;
+    for (const cid in client.activeChannels) {
+      const channel = client.activeChannels[cid];
+      channel?.state.setIsUpToDate(false);
+    }
+
+    client.closeConnection();
+    setIsOnline(false);
+  }, [closeConnectionOnBackground, client]);
+
+  const onForeground = useCallback(() => {
+    if (!closeConnectionOnBackground) return;
+
+    client.openConnection();
+  }, [closeConnectionOnBackground, client]);
 
   useAppStateListener(onForeground, onBackground);
 
   useEffect(() => {
-    const handleChangedEvent = (event: StreamEvent<At, Ch, Co, Ev, Me, Re, Us>) => {
+    const handleChangedEvent = (event: StreamEvent<StreamChatGenerics>) => {
       setConnectionRecovering(!event.online);
       setIsOnline(event.online || false);
     };
@@ -82,35 +69,37 @@ export const useIsOnline = <
       }
     };
 
-    const setConnectionListener = () => {
-      NetInfo.fetch().then((netInfoState) => {
+    let unsubscribeNetInfo: NetInfoSubscription;
+    const setNetInfoListener = () => {
+      unsubscribeNetInfo = NetInfo.addEventListener((netInfoState) => {
+        if (netInfoState === false && !client.wsConnection?.isHealthy) {
+          setConnectionRecovering(true);
+          setIsOnline(false);
+        }
         notifyChatClient(netInfoState);
       });
-      setUnsubscribeNetInfo(
-        NetInfo.addEventListener((netInfoState) => {
-          notifyChatClient(netInfoState);
-        }),
-      );
     };
 
     const setInitialOnlineState = async () => {
       const status = await NetInfo.fetch();
-      setIsOnline(status);
+      if (isMounted.current) {
+        setIsOnline(status);
+        notifyChatClient(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/Chat/hooks/useMutedUsers.ts

@@ -2,32 +2,17 @@ import { useEffect, useState } from 'react';
 
 import type { Event, Mute, StreamChat } from 'stream-chat';
 
-import type {
-  DefaultAttachmentType,
-  DefaultChannelType,
-  DefaultCommandType,
-  DefaultEventType,
-  DefaultMessageType,
-  DefaultReactionType,
-  DefaultUserType,
-  UnknownType,
-} from '../../../types/types';
+import type { DefaultStreamChatGenerics } from '../../../types/types';
 
 export const useMutedUsers = <
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
-  client: StreamChat<At, Ch, Co, Ev, Me, Re, Us>,
+  client: StreamChat<StreamChatGenerics>,
 ) => {
-  const [mutedUsers, setMutedUsers] = useState<Mute<Us>[]>(client.mutedUsers || []);
+  const [mutedUsers, setMutedUsers] = useState<Mute<StreamChatGenerics>[]>(client.mutedUsers || []);
 
   useEffect(() => {
-    const handleEvent = (event: Event<At, Ch, Co, Ev, Me, Re, Us>) => {
+    const handleEvent = (event: Event<StreamChatGenerics>) => {
       setMutedUsers((mutes) => event.me?.mutes || mutes || []);
     };