fix: remove return null check from OverlayProvider and Chat component (#2039)

* fix: remove return null check from OverlayProvider and Chat component

* chore: update yarn lock files

* refactor: moving the translator state inside the useStreami18n hook

* fix: failing tests for giphy

Author: khushal87

package/src/components/Attachment/__tests__/Giphy.test.js

@@ -21,13 +21,18 @@ import { generateMember } from '../../../mock-builders/generator/member';
 import { generateMessage } from '../../../mock-builders/generator/message';
 import { generateUser } from '../../../mock-builders/generator/user';
 import { getTestClientWithUser } from '../../../mock-builders/mock';
+import { Streami18n } from '../../../utils/Streami18n';
 import { ImageLoadingFailedIndicator } from '../../Attachment/ImageLoadingFailedIndicator';
 import { ImageLoadingIndicator } from '../../Attachment/ImageLoadingIndicator';
 import { Channel } from '../../Channel/Channel';
 import { Chat } from '../../Chat/Chat';
 import { MessageList } from '../../MessageList/MessageList';
 import { Giphy } from '../Giphy';
 
+const streami18n = new Streami18n({
+  language: 'en',
+});
+
 describe('Giphy', () => {
   const getAttachmentComponent = (props) => {
     const message = generateMessage();
@@ -241,8 +246,8 @@ describe('Giphy', () => {
     await channel.watch();
 
     const { getByTestId, queryByTestId } = render(
-      <OverlayProvider>
-        <Chat client={chatClient}>
+      <OverlayProvider i18nInstance={streami18n}>
+        <Chat client={chatClient} i18nInstance={streami18n}>
           <Channel channel={channel}>
             <MessageList />
           </Channel>
@@ -260,8 +265,8 @@ describe('Giphy', () => {
 
   it('giphy attachment UI should render within the message list', async () => {
     const { queryByTestId } = render(
-      <OverlayProvider>
-        <Chat client={chatClient}>
+      <OverlayProvider i18nInstance={streami18n}>
+        <Chat client={chatClient} i18nInstance={streami18n}>
           <Channel channel={channel}>
             <MessageList />
           </Channel>
@@ -276,8 +281,8 @@ describe('Giphy', () => {
 
   it('should render a error indicator in giphy image', async () => {
     const { getByA11yLabel, getByAccessibilityHint, queryByTestId } = render(
-      <OverlayProvider>
-        <Chat client={chatClient}>
+      <OverlayProvider i18nInstance={streami18n}>
+        <Chat client={chatClient} i18nInstance={streami18n}>
           <Channel channel={channel}>
             <MessageList />
           </Channel>
@@ -294,8 +299,8 @@ describe('Giphy', () => {
 
   it('should render a loading indicator in giphy image and when successful render the image', async () => {
     const { getByA11yLabel, getByAccessibilityHint } = render(
-      <OverlayProvider>
-        <Chat client={chatClient}>
+      <OverlayProvider i18nInstance={streami18n}>
+        <Chat client={chatClient} i18nInstance={streami18n}>
           <Channel channel={channel}>
             <MessageList />
           </Channel>

package/src/components/Chat/Chat.tsx

@@ -1,8 +1,6 @@
 import React, { PropsWithChildren, useEffect, useState } from 'react';
 import { Image, Platform } from 'react-native';
 
-import Dayjs from 'dayjs';
-
 import type { Channel, StreamChat } from 'stream-chat';
 
 import { useAppSettings } from './hooks/useAppSettings';
@@ -21,7 +19,6 @@ import type { Theme } from '../../contexts/themeContext/utils/theme';
 import {
   DEFAULT_USER_LANGUAGE,
   TranslationProvider,
-  TranslatorFunctions,
 } from '../../contexts/translationContext/TranslationContext';
 import { useStreami18n } from '../../hooks/useStreami18n';
 import init from '../../init';
@@ -149,15 +146,9 @@ const ChatWithContext = <
   } = props;
 
   const [channel, setChannel] = useState<Channel<StreamChatGenerics>>();
-  const [translators, setTranslators] = useState<TranslatorFunctions>({
-    t: (key: string) => key,
-    tDateTimeParser: (input?: string | number | Date) => Dayjs(input),
-  });
 
-  /**
-   * Setup translators
-   */
-  const loadingTranslators = useStreami18n(setTranslators, i18nInstance);
+  // Setup translators
+  const translators = useStreami18n(i18nInstance);
 
   /**
    * Setup connection event listeners
@@ -226,8 +217,6 @@ const ChatWithContext = <
     enableOfflineSupport,
   });
 
-  if (loadingTranslators) return null;
-
   return (
     <ChatProvider<StreamChatGenerics> value={chatContext}>
       <TranslationProvider

package/src/contexts/overlayContext/OverlayProvider.tsx

@@ -10,7 +10,6 @@ import Animated, {
 } from 'react-native-reanimated';
 
 import type BottomSheet from '@gorhom/bottom-sheet';
-import Dayjs from 'dayjs';
 
 import { OverlayContext, OverlayProviderProps } from './OverlayContext';
 
@@ -36,7 +35,6 @@ import { ThemeProvider } from '../themeContext/ThemeContext';
 import {
   DEFAULT_USER_LANGUAGE,
   TranslationProvider,
-  TranslatorFunctions,
 } from '../translationContext/TranslationContext';
 
 /**
@@ -142,17 +140,13 @@ export const OverlayProvider = <
 
   const bottomSheetRef = useRef<BottomSheet>(null);
 
-  const [translators, setTranslators] = useState<TranslatorFunctions>({
-    t: (key: string) => key,
-    tDateTimeParser: (input?: string | number | Date) => Dayjs(input),
-  });
   const [overlay, setOverlay] = useState(value?.overlay || 'none');
 
   const overlayOpacity = useSharedValue(0);
   const { height, width } = Dimensions.get('screen');
 
   // Setup translators
-  const loadingTranslators = useStreami18n(setTranslators, i18nInstance);
+  const translators = useStreami18n(i18nInstance);
 
   useEffect(() => {
     const backAction = () => {
@@ -216,8 +210,6 @@ export const OverlayProvider = <
     translucentStatusBar,
   };
 
-  if (loadingTranslators) return null;
-
   return (
     <TranslationProvider value={{ ...translators, userLanguage: DEFAULT_USER_LANGUAGE }}>
       <OverlayContext.Provider value={overlayContext}>

package/src/hooks/useStreami18n.ts

@@ -1,16 +1,19 @@
 import { useEffect, useState } from 'react';
 
+import Dayjs from 'dayjs';
+
 import { useIsMountedRef } from './useIsMountedRef';
 
 import type { TranslatorFunctions } from '../contexts/translationContext/TranslationContext';
 import { Streami18n } from '../utils/Streami18n';
 
-export const useStreami18n = (
-  setTranslators: React.Dispatch<React.SetStateAction<TranslatorFunctions>>,
-  i18nInstance?: Streami18n,
-) => {
-  const [loadingTranslators, setLoadingTranslators] = useState(true);
+export const useStreami18n = (i18nInstance?: Streami18n) => {
+  const [translators, setTranslators] = useState<TranslatorFunctions>({
+    t: (key: string) => key,
+    tDateTimeParser: (input?: string | number | Date) => Dayjs(input),
+  });
   const isMounted = useIsMountedRef();
+
   useEffect(() => {
     let streami18n: Streami18n;
 
@@ -28,20 +31,21 @@ export const useStreami18n = (
       streami18n.addOnLanguageChangeListener((t) => {
         updateTFunction(t);
       });
+
     const { unsubscribe: unsubscribeOnTFuncOverrideListener } =
       streami18n.addOnTFunctionOverrideListener((t) => {
         updateTFunction(t);
       });
+
     streami18n.getTranslators().then((translator) => {
       if (translator && isMounted.current) setTranslators(translator);
     });
 
-    setLoadingTranslators(false);
     return () => {
       unsubscribeOnTFuncOverrideListener();
       unsubscribeOnLanguageChangeListener();
     };
   }, [i18nInstance]);
 
-  return loadingTranslators;
+  return translators;
 };