stream-chat-react-native-core 4.9.0 → 4.10.1-beta.1

package/src/contexts/messageInputContext/__tests__/__snapshots__/sendMessage.test.tsx.snap

@@ -6,6 +6,7 @@ Object {
     Object {
       "fallback": undefined,
       "image_url": undefined,
+      "mime_type": false,
       "original_height": undefined,
       "original_width": undefined,
       "type": "image",
@@ -65,6 +66,7 @@ Object {
     Object {
       "fallback": "dummy.pdf",
       "image_url": undefined,
+      "mime_type": "application/pdf",
       "type": "image",
     },
   ],
@@ -85,6 +87,7 @@ Object {
     Object {
       "fallback": undefined,
       "image_url": undefined,
+      "mime_type": false,
       "original_height": undefined,
       "original_width": undefined,
       "type": "image",
@@ -92,6 +95,7 @@ Object {
     Object {
       "fallback": undefined,
       "image_url": undefined,
+      "mime_type": false,
       "original_height": undefined,
       "original_width": undefined,
       "type": "image",

package/src/contexts/messageOverlayContext/MessageOverlayContext.tsx

@@ -1,6 +1,6 @@
 import React, { PropsWithChildren, useContext } from 'react';
 
-import type { Attachment } from 'stream-chat';
+import type { Attachment, TranslationLanguages } from 'stream-chat';
 
 import { useResettableState } from './hooks/useResettableState';
 
@@ -43,6 +43,7 @@ export type MessageOverlayData<
   ownCapabilities?: OwnCapabilitiesContextValue;
   supportedReactions?: ReactionData[];
   threadList?: boolean;
+  userLanguage?: TranslationLanguages;
   videos?: Attachment<StreamChatGenerics>[];
 };
 

package/src/contexts/overlayContext/OverlayProvider.tsx

@@ -35,8 +35,9 @@ import { ImageGalleryProvider } from '../imageGalleryContext/ImageGalleryContext
 import { MessageOverlayProvider } from '../messageOverlayContext/MessageOverlayContext';
 import { ThemeProvider } from '../themeContext/ThemeContext';
 import {
-  TranslationContextValue,
+  DEFAULT_USER_LANGUAGE,
   TranslationProvider,
+  TranslatorFunctions,
 } from '../translationContext/TranslationContext';
 
 /**
@@ -127,7 +128,7 @@ export const OverlayProvider = <
 
   const bottomSheetRef = useRef<BottomSheet>(null);
 
-  const [translators, setTranslators] = useState<TranslationContextValue>({
+  const [translators, setTranslators] = useState<TranslatorFunctions>({
     t: (key: string) => key,
     tDateTimeParser: (input?: string | number | Date) => Dayjs(input),
   });
@@ -198,7 +199,7 @@ export const OverlayProvider = <
   if (loadingTranslators) return null;
 
   return (
-    <TranslationProvider value={translators}>
+    <TranslationProvider value={{ ...translators, userLanguage: DEFAULT_USER_LANGUAGE }}>
       <OverlayContext.Provider value={overlayContext}>
         <MessageOverlayProvider<StreamChatGenerics>>
           <AttachmentPickerProvider value={attachmentPickerContext}>

package/src/contexts/translationContext/TranslationContext.tsx

@@ -5,10 +5,14 @@ import Dayjs from 'dayjs';
 import type { TFunction } from 'i18next';
 import type { Moment } from 'moment';
 
+import type { TranslationLanguages } from 'stream-chat';
+
 import type { DefaultStreamChatGenerics } from '../../types/types';
 import { getDisplayName } from '../utils/getDisplayName';
 import { isTestEnvironment } from '../utils/isTestEnvironment';
 
+export const DEFAULT_USER_LANGUAGE: TranslationLanguages = 'en';
+
 export const isDayOrMoment = (output: TDateTimeParserOutput): output is Dayjs.Dayjs | Moment =>
   (output as Dayjs.Dayjs | Moment).isSame != null;
 
@@ -18,14 +22,19 @@ export type TDateTimeParserOutput = string | number | Date | Dayjs.Dayjs | Momen
 
 export type TDateTimeParser = (input?: TDateTimeParserInput) => TDateTimeParserOutput;
 
-export type TranslationContextValue = {
+export type TranslatorFunctions = {
   t: TFunction | ((key: string) => string);
   tDateTimeParser: TDateTimeParser;
 };
 
+export type TranslationContextValue = TranslatorFunctions & {
+  userLanguage: TranslationLanguages;
+};
+
 const defaultTranslationContextValue: TranslationContextValue = {
   t: (key: string) => key,
   tDateTimeParser: (input) => Dayjs(input),
+  userLanguage: DEFAULT_USER_LANGUAGE,
 };
 
 export const TranslationContext = React.createContext<TranslationContextValue>(

package/src/hooks/__tests__/useTranslatedMessage.test.tsx

@@ -0,0 +1,106 @@
+import React from 'react';
+import { Text } from 'react-native';
+
+import { render, waitFor } from '@testing-library/react-native';
+
+import type { MessageResponse } from 'stream-chat';
+
+import {
+  MessageOverlayContextValue,
+  MessageOverlayProvider,
+} from '../../contexts/messageOverlayContext/MessageOverlayContext';
+import {
+  TranslationContextValue,
+  TranslationProvider,
+} from '../../contexts/translationContext/TranslationContext';
+import { useTranslatedMessage } from '../useTranslatedMessage';
+
+type TestComponentProps = {
+  message: MessageResponse;
+};
+
+const TestComponent = ({ message }: TestComponentProps) => {
+  const translatedMessage = useTranslatedMessage(message);
+  return <Text>{translatedMessage.text}</Text>;
+};
+
+describe('useTranslatedMessage', () => {
+  it("doesn't translate a message if there isn't a translation available for the userLanguage", async () => {
+    const message = {
+      i18n: {
+        nl_text: 'Hallo wereld!',
+      },
+      text: 'Hello world!',
+    } as MessageResponse;
+
+    const { getByText } = render(
+      <TranslationProvider value={{ userLanguage: 'es' } as TranslationContextValue}>
+        <TestComponent message={message} />
+      </TranslationProvider>,
+    );
+
+    await waitFor(() => {
+      expect(getByText('Hello world!')).toBeTruthy();
+    });
+  });
+
+  it('returns a new message with the text translated if userLanguage is set and the translation exists', async () => {
+    const message = {
+      i18n: {
+        no_text: 'Hallo verden!',
+      },
+      text: 'Hello world!',
+    } as MessageResponse;
+
+    const { getByText } = render(
+      <TranslationProvider value={{ userLanguage: 'no' } as TranslationContextValue}>
+        <TestComponent message={message} />
+      </TranslationProvider>,
+    );
+
+    await waitFor(() => {
+      expect(getByText('Hallo verden!')).toBeTruthy();
+    });
+  });
+
+  it("returns the original text if the message doesn't contain any translations", async () => {
+    const message = {
+      text: 'Hello world!',
+    } as MessageResponse;
+
+    const { getByText } = render(<TestComponent message={message} />);
+
+    await waitFor(() => {
+      expect(getByText('Hello world!')).toBeTruthy();
+    });
+  });
+
+  it('uses userLanguage from messageOverlayData if it is set', async () => {
+    const message = {
+      i18n: {
+        nl_text: 'Hallo wereld!',
+        no_text: 'Hallo verden!',
+      },
+      text: 'Hello world!',
+    } as MessageResponse;
+
+    /**
+     * The reason for the as unknown as MessageOverlayContextValue is that the provider
+     * uses useResettableState, wrapping the input to fit in the data structure.
+     *
+     * In practice, the userLanguage will be set with the setData call and not directly
+     * in the provider.
+     * */
+    const { getByText } = render(
+      <MessageOverlayProvider
+        value={{ userLanguage: 'nl' } as unknown as MessageOverlayContextValue}
+      >
+        <TestComponent message={message} />
+      </MessageOverlayProvider>,
+    );
+
+    await waitFor(() => {
+      expect(getByText('Hallo wereld!')).toBeTruthy();
+    });
+  });
+});

package/src/hooks/useStreami18n.ts

@@ -2,14 +2,14 @@ import { useEffect, useState } from 'react';
 
 import { useIsMountedRef } from './useIsMountedRef';
 
-import type { TranslationContextValue } from '../contexts/translationContext/TranslationContext';
+import type { TranslatorFunctions } from '../contexts/translationContext/TranslationContext';
 import { Streami18n } from '../utils/Streami18n';
 
 export const useStreami18n = ({
   i18nInstance,
   setTranslators,
 }: {
-  setTranslators: React.Dispatch<React.SetStateAction<TranslationContextValue>>;
+  setTranslators: React.Dispatch<React.SetStateAction<TranslatorFunctions>>;
   i18nInstance?: Streami18n;
 }) => {
   const [loadingTranslators, setLoadingTranslators] = useState(true);

package/src/hooks/useTranslatedMessage.ts

@@ -0,0 +1,30 @@
+import type { FormatMessageResponse, MessageResponse, TranslationLanguages } from 'stream-chat';
+
+import { useMessageOverlayContext } from '../contexts/messageOverlayContext/MessageOverlayContext';
+import { useTranslationContext } from '../contexts/translationContext/TranslationContext';
+import type { DefaultStreamChatGenerics } from '../types/types';
+
+type TranslationKey = `${TranslationLanguages}_text`;
+
+export const useTranslatedMessage = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>(
+  message: MessageResponse<StreamChatGenerics> | FormatMessageResponse<StreamChatGenerics>,
+) => {
+  const { userLanguage: translationContextUserLanguage } = useTranslationContext();
+  const messageOverlayContextValue = useMessageOverlayContext<StreamChatGenerics>();
+
+  const userLanguage =
+    messageOverlayContextValue.data?.userLanguage || translationContextUserLanguage;
+
+  const translationKey: TranslationKey = `${userLanguage}_text`;
+
+  if (message.i18n && translationKey in message.i18n) {
+    return {
+      ...message,
+      text: message.i18n[translationKey],
+    };
+  }
+
+  return { ...message };
+};

package/src/mock-builders/api/{getOrCreateChannel.js → getOrCreateChannel.ts}

@@ -1,5 +1,12 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { mockedApiResponse } from './utils';
 
+export type GetOrCreateChannelApiParams = {
+  channel?: Record<string, any>;
+  members?: Record<string, any>[];
+  messages?: Record<string, any>[];
+};
+
 /**
  * Returns the api response for queryChannel api.
  *
@@ -8,7 +15,7 @@ import { mockedApiResponse } from './utils';
  * @param {*} channel
  */
 export const getOrCreateChannelApi = (
-  channel = {
+  channel: GetOrCreateChannelApiParams = {
     channel: {},
     members: [],
     messages: [],

package/src/mock-builders/generator/{channel.js → channel.ts}

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { v4 as uuidv4 } from 'uuid';
 
 import { generateUser, getUserDefaults } from './user';
@@ -53,7 +54,9 @@ const defaultState = {
   setIsUpToDate: jest.fn(),
 };
 
-const getChannelDefaults = ({ id, type } = { id: uuidv4(), type: 'messaging' }) => ({
+const getChannelDefaults = (
+  { id, type }: { [key: string]: any } = { id: uuidv4(), type: 'messaging' },
+) => ({
   _client: {},
   data: {
     cid: `${type}:${id}`,
@@ -75,22 +78,28 @@ const getChannelDefaults = ({ id, type } = { id: uuidv4(), type: 'messaging' })
   type,
 });
 
-export const generateChannel = (customValues) =>
+export const generateChannel = (customValues: { [key: string]: any }) =>
   Object.keys(customValues).reduce((accumulated, current) => {
-    if (Object.prototype.hasOwnProperty.call(accumulated, current)) {
-      accumulated[current] =
-        typeof accumulated[current] === 'object'
-          ? { ...accumulated[current], ...customValues[current] }
-          : (accumulated[current] = customValues[current]);
+    if (current in accumulated) {
+      const key = current as keyof typeof accumulated;
+      accumulated[key] =
+        typeof accumulated[key] === 'object'
+          ? { ...accumulated[key], ...customValues[key] }
+          : (accumulated[key] = customValues[key]);
       return accumulated;
     }
     return { ...accumulated, [current]: customValues[current] };
   }, getChannelDefaults());
 
 export const generateChannelResponse = (
-  customValues = { channel: {}, id: uuidv4(), type: 'messaging' },
+  customValues: {
+    channel?: Record<string, any>;
+    id?: string;
+    messages?: Record<string, any>[];
+    type?: string;
+  } = { channel: {}, id: uuidv4(), messages: [], type: 'messaging' },
 ) => {
-  const { id = uuidv4(), type = 'messaging', channel = {}, ...rest } = customValues;
+  const { id = uuidv4(), messages = [], type = 'messaging', channel = {}, ...rest } = customValues;
 
   const defaults = getChannelDefaults();
   return {
@@ -105,7 +114,7 @@ export const generateChannelResponse = (
       },
     },
     members: [],
-    messages: [],
+    messages,
     ...rest,
   };
 };

package/src/version.json

@@ -1,3 +1,3 @@
 {
-  "version": "4.9.0"
+  "version": "4.10.1-beta.1"
 }

package/src/components/Message/MessageSimple/__tests__/MessageTextContainer.test.js

@@ -1,65 +0,0 @@
-import React from 'react';
-import { Text } from 'react-native';
-
-import { cleanup, render, waitFor } from '@testing-library/react-native';
-
-import { ThemeProvider } from '../../../../contexts/themeContext/ThemeContext';
-import { defaultTheme } from '../../../../contexts/themeContext/utils/theme';
-import {
-  generateMessage,
-  generateStaticMessage,
-} from '../../../../mock-builders/generator/message';
-import { generateStaticUser } from '../../../../mock-builders/generator/user';
-import { MessageTextContainer } from '../MessageTextContainer';
-
-afterEach(cleanup);
-
-describe('MessageTextContainer', () => {
-  it('should render message text container', async () => {
-    const staticUser = generateStaticUser(1);
-    const message = generateMessage({
-      user: { ...staticUser, image: undefined },
-    });
-    const { getByTestId, getByText, rerender, toJSON } = render(
-      <ThemeProvider style={defaultTheme}>
-        <MessageTextContainer alignment='right' groupStyles={['top']} message={message} />
-      </ThemeProvider>,
-    );
-
-    await waitFor(() => {
-      expect(getByTestId('message-text-container')).toBeTruthy();
-      expect(getByText(message.text)).toBeTruthy();
-    });
-
-    rerender(
-      <ThemeProvider style={defaultTheme}>
-        <MessageTextContainer
-          alignment='right'
-          groupStyles={['top']}
-          message={message}
-          MessageText={({ message }) => <Text testID='message-text'>{message.text}</Text>}
-        />
-      </ThemeProvider>,
-    );
-
-    await waitFor(() => {
-      expect(getByTestId('message-text-container')).toBeTruthy();
-      expect(getByTestId('message-text')).toBeTruthy();
-      expect(getByText(message.text)).toBeTruthy();
-    });
-
-    const staticMessage = generateStaticMessage('Hello World', {
-      user: staticUser,
-    });
-
-    rerender(
-      <ThemeProvider style={defaultTheme}>
-        <MessageTextContainer message={staticMessage} />
-      </ThemeProvider>,
-    );
-
-    await waitFor(() => {
-      expect(toJSON()).toMatchSnapshot();
-    });
-  });
-});