Merge pull request #683 from GetStream/auto-translation-text

DanC5 · web-flow · commit 585ad5f2183d · 2021-02-01T14:36:39.000-07:00
Auto translation text
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -31,8 +31,8 @@
     "import/extensions": [0],
     "max-classes-per-file": 0,
     "camelcase": 0,
-    "react-hooks/rules-of-hooks": 2,
-    "react-hooks/exhaustive-deps": 1,
+    "react-hooks/rules-of-hooks": 1,
+    "react-hooks/exhaustive-deps": 0,
     "jest/prefer-inline-snapshots": 0,
     "jest/lowercase-name": 0,
     "jest/prefer-expect-assertions": 0,
diff --git a/src/components/Chat/Chat.js b/src/components/Chat/Chat.js
@@ -37,8 +37,10 @@ const Chat = ({
     /** @type { Required<import('types').TranslationContextValue>} */ ({
       t: /** @param {string} key */ (key) => key,
       tDateTimeParser: (input) => Dayjs(input),
+      userLanguage: '',
     }),
   );
+
   const [mutes, setMutes] = useState(
     /** @type {import('stream-chat').Mute[]} */ ([]),
   );
@@ -81,9 +83,14 @@ const Chat = ({
       setTranslators((prevTranslator) => ({ ...prevTranslator, t })),
     );
     streami18n.getTranslators().then((translator) => {
-      if (translator) setTranslators(translator);
+      if (translator) {
+        setTranslators({
+          ...translator,
+          userLanguage: client?.user?.language || '',
+        });
+      }
     });
-  }, [i18nInstance]);
+  }, [client, i18nInstance]);
 
   const setActiveChannel = useCallback(
     /**
diff --git a/src/components/Message/FixedHeightMessage.js b/src/components/Message/FixedHeightMessage.js
@@ -5,7 +5,7 @@ import MessageTimestamp from './MessageTimestamp';
 import { Avatar } from '../Avatar';
 import { MML } from '../MML';
 import { renderText } from '../../utils';
-import { ChatContext } from '../../context';
+import { ChatContext, TranslationContext } from '../../context';
 import { Gallery } from '../Gallery';
 import { MessageActions } from '../MessageActions';
 import { useUserRole, useActionHandler } from './hooks';
@@ -46,12 +46,18 @@ const getUserColor = (theme, userId) => {
  */
 const FixedHeightMessage = ({ message, groupedByUser }) => {
   const { theme } = useContext(ChatContext);
+  const { userLanguage } = useContext(TranslationContext);
+
   const role = useUserRole(message);
   const handleAction = useActionHandler(message);
 
+  const messageTextToRender =
+    // @ts-expect-error
+    message?.i18n?.[`${userLanguage}_text`] || message?.text;
+
   const renderedText = useMemo(
-    () => renderText(message.text, message.mentioned_users),
-    [message.text, message.mentioned_users],
+    () => renderText(messageTextToRender, message.mentioned_users),
+    [message.mentioned_users, messageTextToRender],
   );
   const userId = message.user?.id;
   // @ts-ignore
diff --git a/src/components/Message/MessageLivestream.js b/src/components/Message/MessageLivestream.js
@@ -83,7 +83,7 @@ const MessageLivestreamComponent = (props) => {
     MessageDeleted,
     PinIndicator = DefaultPinIndicator,
   } = props;
-  const { t: contextT } = useContext(TranslationContext);
+  const { t: contextT, userLanguage } = useContext(TranslationContext);
   const t = propT || contextT;
   const messageWrapperRef = useRef(null);
   const reactionSelectorRef = useRef(null);
@@ -120,11 +120,12 @@ const MessageLivestreamComponent = (props) => {
     onUserClickHandler: propOnUserClick,
     onUserHoverHandler: propOnUserHover,
   });
-  const messageTextItem = message?.text;
+  const messageTextToRender =
+    message?.i18n?.[`${userLanguage}_text`] || message?.text;
   const messageMentionedUsersItem = message?.mentioned_users;
   const messageText = useMemo(
-    () => renderText(messageTextItem, messageMentionedUsersItem),
-    [messageTextItem, messageMentionedUsersItem],
+    () => renderText(messageTextToRender, messageMentionedUsersItem),
+    [messageMentionedUsersItem, messageTextToRender],
   );
 
   const firstGroupStyle = groupStyles ? groupStyles[0] : '';
diff --git a/src/components/Message/MessageTeam.js b/src/components/Message/MessageTeam.js
@@ -87,7 +87,7 @@ const MessageTeam = (props) => {
     ChannelContext,
   );
   const channelConfig = propChannelConfig || channel?.getConfig();
-  const { t: contextT } = useContext(TranslationContext);
+  const { t: contextT, userLanguage } = useContext(TranslationContext);
   const t = propT || contextT;
   const groupStyles = props.groupStyles || ['single'];
   const reactionSelectorRef = useRef(null);
@@ -119,11 +119,13 @@ const MessageTeam = (props) => {
     onUserClickHandler: propOnUserClick,
     onUserHoverHandler: propOnUserHover,
   });
-  const messageTextItem = message?.text;
+  const messageTextToRender =
+    message?.i18n?.[`${userLanguage}_text`] || message?.text;
   const messageMentionedUsersItem = message?.mentioned_users;
+  // eslint-disable-next-line react-hooks/rules-of-hooks
   const messageText = useMemo(
-    () => renderText(messageTextItem, messageMentionedUsersItem),
-    [messageTextItem, messageMentionedUsersItem],
+    () => renderText(messageTextToRender, messageMentionedUsersItem),
+    [messageMentionedUsersItem, messageTextToRender],
   );
   const firstGroupStyle = groupStyles ? groupStyles[0] : '';
 
diff --git a/src/components/Message/MessageText.js b/src/components/Message/MessageText.js
@@ -30,27 +30,36 @@ const MessageTextComponent = (props) => {
     unsafeHTML,
     customOptionProps,
   } = props;
+
   const reactionSelectorRef = useRef(
     /** @type {HTMLDivElement | null} */ (null),
   );
+
   const { onMentionsClick, onMentionsHover } = useMentionsUIHandler(message, {
     onMentionsClick: propOnMentionsClick,
     onMentionsHover: propOnMentionsHover,
   });
+
   const {
     onReactionListClick,
     showDetailedReactions,
     isReactionEnabled,
   } = useReactionClick(message, reactionSelectorRef);
-  const { t } = useContext(TranslationContext);
+
+  const { t, userLanguage } = useContext(TranslationContext);
+
   const hasReactions = messageHasReactions(message);
   const hasAttachment = messageHasAttachments(message);
   const handleReaction = useReactionHandler(message);
-  const messageTextItem = message?.text;
+
+  const messageTextToRender =
+    message?.i18n?.[`${userLanguage}_text`] || message?.text;
+
   const messageMentionedUsersItem = message?.mentioned_users;
+
   const messageText = useMemo(
-    () => renderText(messageTextItem, messageMentionedUsersItem),
-    [messageTextItem, messageMentionedUsersItem],
+    () => renderText(messageTextToRender, messageMentionedUsersItem),
+    [messageMentionedUsersItem, messageTextToRender],
   );
 
   const wrapperClass = customWrapperClass || 'str-chat__message-text';
diff --git a/src/components/Message/__tests__/FixedHeightMessage.test.js b/src/components/Message/__tests__/FixedHeightMessage.test.js
@@ -9,7 +9,11 @@ import {
 } from 'mock-builders';
 
 import FixedHeightMessage from '../FixedHeightMessage';
-import { ChatContext, ChannelContext } from '../../../context';
+import {
+  ChatContext,
+  ChannelContext,
+  TranslationContext,
+} from '../../../context';
 import { Avatar as AvatarMock } from '../../Avatar';
 import { MML as MMLMock } from '../../MML';
 import { Gallery as GalleryMock } from '../../Gallery';
@@ -29,11 +33,20 @@ const bob = generateUser({ name: 'bob' });
 async function renderMsg(message) {
   const channel = generateChannel();
   const client = await getTestClientWithUser(alice);
+  const customDateTimeParser = jest.fn(() => ({ format: jest.fn() }));
 
   return render(
     <ChatContext.Provider value={{ theme: 'dark' }}>
       <ChannelContext.Provider value={{ client, channel }}>
-        <FixedHeightMessage message={message} />
+        <TranslationContext.Provider
+          value={{
+            t: (key) => key,
+            tDateTimeParser: customDateTimeParser,
+            userLanguage: 'en',
+          }}
+        >
+          <FixedHeightMessage message={message} />
+        </TranslationContext.Provider>
       </ChannelContext.Provider>
     </ChatContext.Provider>,
   );
@@ -91,4 +104,16 @@ describe('<FixedHeightMessage />', () => {
     await renderMsg(message);
     expect(MessageActionsMock).toHaveReturnedWith([]);
   });
+
+  it('should display text in users set language', async () => {
+    const message = generateMessage({
+      user: alice,
+      i18n: { fr_text: 'bonjour', en_text: 'hello', language: 'fr' },
+      text: 'bonjour',
+    });
+
+    const { getByText } = await renderMsg(message);
+
+    expect(getByText('hello')).toBeInTheDocument();
+  });
 });
diff --git a/src/components/Message/__tests__/MessageLivestream.test.js b/src/components/Message/__tests__/MessageLivestream.test.js
@@ -13,7 +13,7 @@ import MessageLivestream from '../MessageLivestream';
 import { Avatar as AvatarMock } from '../../Avatar';
 import { MessageInput as MessageInputMock } from '../../MessageInput';
 import { MessageActions as MessageActionsMock } from '../../MessageActions';
-import { ChannelContext } from '../../../context';
+import { ChannelContext, TranslationContext } from '../../../context';
 
 jest.mock('../../Avatar', () => ({
   Avatar: jest.fn(() => <div />),
@@ -37,9 +37,19 @@ async function renderMessageLivestream(
 ) {
   const channel = generateChannel({ getConfig: () => channelConfig });
   const client = await getTestClientWithUser(alice);
+  const customDateTimeParser = jest.fn(() => ({ format: jest.fn() }));
+
   return render(
     <ChannelContext.Provider value={{ client, channel }}>
-      <MessageLivestream message={message} typing={false} {...props} />
+      <TranslationContext.Provider
+        value={{
+          t: (key) => key,
+          tDateTimeParser: customDateTimeParser,
+          userLanguage: 'en',
+        }}
+      >
+        <MessageLivestream message={message} typing={false} {...props} />
+      </TranslationContext.Provider>
     </ChannelContext.Provider>,
   );
 }
@@ -385,6 +395,18 @@ describe('<MessageLivestream />', () => {
     expect(getByTestId(messageLivestreamthreadTestId)).toBeInTheDocument();
   });
 
+  it('should display text in users set language', async () => {
+    const message = generateAliceMessage({
+      i18n: { fr_text: 'bonjour', en_text: 'hello', language: 'fr' },
+      text: 'bonjour',
+    });
+
+    const { getByText, debug } = await renderMessageLivestream(message);
+    debug();
+
+    expect(getByText('hello')).toBeInTheDocument();
+  });
+
   it('should open thread when thread action button is clicked', async () => {
     const message = generateAliceMessage();
     const handleOpenThread = jest.fn();
diff --git a/src/components/Message/__tests__/MessageTeam.test.js b/src/components/Message/__tests__/MessageTeam.test.js
@@ -10,7 +10,7 @@ import {
   generateReaction,
 } from 'mock-builders';
 
-import { ChannelContext } from '../../../context';
+import { ChannelContext, TranslationContext } from '../../../context';
 import MessageTeam from '../MessageTeam';
 import { Avatar as AvatarMock } from '../../Avatar';
 import { MML as MMLMock } from '../../MML';
@@ -42,9 +42,19 @@ async function renderMessageTeam(
 ) {
   const channel = generateChannel({ getConfig: () => channelConfig });
   const client = await getTestClientWithUser(alice);
+  const customDateTimeParser = jest.fn(() => ({ format: jest.fn() }));
+
   return render(
     <ChannelContext.Provider value={{ client, channel, t: (key) => key }}>
-      <MessageTeam message={message} typing={false} {...props} />
+      <TranslationContext.Provider
+        value={{
+          t: (key) => key,
+          tDateTimeParser: customDateTimeParser,
+          userLanguage: 'en',
+        }}
+      >
+        <MessageTeam message={message} typing={false} {...props} />
+      </TranslationContext.Provider>
     </ChannelContext.Provider>,
   );
 }
@@ -294,6 +304,17 @@ describe('<MessageTeam />', () => {
     );
   });
 
+  it('should display text in users set language', async () => {
+    const message = generateAliceMessage({
+      i18n: { fr_text: 'bonjour', en_text: 'hello', language: 'fr' },
+      text: 'bonjour',
+    });
+
+    const { getByText } = await renderMessageTeam(message);
+
+    expect(getByText('hello')).toBeInTheDocument();
+  });
+
   it('should place a spacer when message is not the first message on a thread and group style is not top or single', async () => {
     const message = generateAliceMessage();
     const { getByTestId } = await renderMessageTeam(message, {
diff --git a/src/components/Message/__tests__/MessageText.test.js b/src/components/Message/__tests__/MessageText.test.js
diff --git a/types/index.d.ts b/types/index.d.ts
