Merge pull request #56549 from Expensify/cmartins-useTranslateLive

Cmartins use translate live
Expensify · Feb 7, 2025 · 74485da · 74485da
2 parents af3bb87 + 1e735f1
commit 74485da
Show file tree

Hide file tree

Showing 7 changed files with 66 additions and 8 deletions.
diff --git a/src/components/SelectionList/ChatListItem.tsx b/src/components/SelectionList/ChatListItem.tsx
@@ -17,6 +17,7 @@ import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import BaseListItem from './BaseListItem';
 import type {ChatListItemProps, ListItem, ReportActionListItemType} from './types';
+import useTranslateLive from '@hooks/useTranslateLive';
 
 function ChatListItem<TItem extends ListItem>({
     item,
@@ -140,6 +141,8 @@ function ChatListItem<TItem extends ListItem>({
                                             {reportActionItem.message.map((fragment, index) => (
                                                 <ReportActionItemFragment
                                                     // eslint-disable-next-line react/no-array-index-key
+                                                    reportID={item.reportID}
+                                                    reportAction={reportActionItem}
                                                     key={`actionFragment-${reportActionItem.reportActionID}-${index}`}
                                                     fragment={fragment}
                                                     actionName={reportActionItem.actionName}

diff --git a/src/hooks/useTranslateLive.ts b/src/hooks/useTranslateLive.ts
@@ -0,0 +1,39 @@
+import ONYXKEYS from '@src/ONYXKEYS';
+import {useEffect} from 'react';
+import Onyx, {useOnyx} from 'react-native-onyx';
+import type {OnyxEntry, ReportAction} from 'react-native-onyx';
+import * as API from '@libs/API';
+import useLocalize from './useLocalize';
+
+export default function useTranslateLive(reportID: string, reportAction: OnyxEntry<ReportAction>) {
+    const {preferredLocale} = useLocalize();
+    const [session] = useOnyx(ONYXKEYS.SESSION);
+
+    useEffect(() => {
+        if (reportAction.message.length > 1) {
+            return;
+        }
+
+        if (reportAction.actorAccountID === session?.accountID) {
+            return;
+        }
+
+        if (!reportAction?.message?.[0]?.html) {
+            return;
+        }
+
+        console.log('over here API call')
+        API.makeRequestWithSideEffects('Translate', {
+            type: 'live',
+            textToTranslate: reportAction?.message?.[0]?.html,
+            targetLanguage: preferredLocale,
+        }).then((response) => {
+            console.log('over here', response)
+            Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${reportID}`, {
+                [reportAction.reportActionID]: {
+                    message: [{...reportAction?.message[0], translatedText: response.translation}]
+                }
+            });
+        });
+    }, [reportID, reportAction.reportActionID]);
+}
diff --git a/src/pages/home/report/ReportActionItemFragment.tsx b/src/pages/home/report/ReportActionItemFragment.tsx
@@ -15,6 +15,8 @@ import type ReportActionName from '@src/types/onyx/ReportActionName';
 import AttachmentCommentFragment from './comment/AttachmentCommentFragment';
 import TextCommentFragment from './comment/TextCommentFragment';
 import ReportActionItemMessageHeaderSender from './ReportActionItemMessageHeaderSender';
+import useTranslateLive from '@hooks/useTranslateLive';
+import type {ReportAction} from '@src/types/onyx';
 
 type ReportActionItemFragmentProps = {
     /** Users accountID */
@@ -63,6 +65,9 @@ type ReportActionItemFragmentProps = {
     actionName?: ReportActionName;
 
     moderationDecision?: DecisionName;
+
+    reportAction?: string;
+    reportID?: string;
 };
 
 const MUTED_ACTIONS = [
@@ -76,6 +81,8 @@ const MUTED_ACTIONS = [
 ] as ReportActionName[];
 
 function ReportActionItemFragment({
+    reportID,
+    reportAction,
     pendingAction,
     actionName,
     fragment,
@@ -96,6 +103,7 @@ function ReportActionItemFragment({
     const styles = useThemeStyles();
     const {isOffline} = useNetwork();
     const {translate} = useLocalize();
+    useTranslateLive(reportID, reportAction);
 
     switch (fragment?.type) {
         case 'COMMENT': {
@@ -117,7 +125,7 @@ function ReportActionItemFragment({
                 return (
                     <AttachmentCommentFragment
                         source={source}
-                        html={fragment?.html ?? ''}
+                        html={fragment?.translatedText ?? fragment?.html ?? ''}
                         addExtraMargin={!displayAsGroup}
                         styleAsDeleted={!!(isOffline && isPendingDelete)}
                     />
@@ -143,7 +151,7 @@ function ReportActionItemFragment({
                         numberOfLines={isSingleLine ? 1 : undefined}
                         style={[styles.chatItemMessage, styles.colorMuted]}
                     >
-                        {isFragmentContainingDisplayName ? convertToLTR(fragment?.text ?? '') : fragment?.text}
+                        {isFragmentContainingDisplayName ? convertToLTR(fragment?.translatedText ?? fragment?.text ?? '') : fragment?.text}
                     </Text>
                 );
             }
@@ -154,7 +162,7 @@ function ReportActionItemFragment({
                         numberOfLines={isSingleLine ? 1 : undefined}
                         style={[styles.chatItemMessage]}
                     >
-                        {isFragmentContainingDisplayName ? convertToLTR(fragment?.text ?? '') : fragment?.text}
+                        {isFragmentContainingDisplayName ? convertToLTR(fragment?.translatedText ?? fragment?.text ?? '') : fragment?.text}
                     </Text>
                 );
             }
@@ -163,7 +171,7 @@ function ReportActionItemFragment({
                 <ReportActionItemMessageHeaderSender
                     accountID={accountID}
                     delegateAccountID={delegateAccountID}
-                    fragmentText={fragment.text}
+                    fragmentText={fragment?.translatedText ?? fragment.text}
                     actorIcon={actorIcon}
                     isSingleLine={isSingleLine}
                 />

diff --git a/src/pages/home/report/ReportActionItemMessage.tsx b/src/pages/home/report/ReportActionItemMessage.tsx
@@ -109,6 +109,8 @@ function ReportActionItemMessage({action, displayAsGroup, reportID, style, isHid
             <ReportActionItemFragment
                 /* eslint-disable-next-line react/no-array-index-key */
                 key={`actionFragment-${action.reportActionID}-${index}`}
+                reportID={reportID}
+                reportAction={action}
                 fragment={fragment}
                 iouMessage={iouMessage}
                 isThreadParentMessage={isThreadParentMessage(action, reportID)}

diff --git a/src/pages/home/report/ReportActionItemSingle.tsx b/src/pages/home/report/ReportActionItemSingle.tsx
@@ -309,6 +309,8 @@ function ReportActionItemSingle({
                             {personArray?.map((fragment, index) => (
                                 <ReportActionItemFragment
                                     // eslint-disable-next-line react/no-array-index-key
+                                    reportID={reportID}
+                                    reportAction={action}
                                     key={`person-${action?.reportActionID}-${index}`}
                                     accountID={Number(delegatePersonalDetails && !isWorkspaceActor ? actorAccountID : icon.id ?? CONST.DEFAULT_NUMBER_ID)}
                                     fragment={{...fragment, type: fragment.type ?? '', text: fragment.text ?? ''}}

diff --git a/src/pages/home/report/comment/TextCommentFragment.tsx b/src/pages/home/report/comment/TextCommentFragment.tsx
@@ -48,8 +48,9 @@ type TextCommentFragmentProps = {
 function TextCommentFragment({fragment, styleAsDeleted, styleAsMuted = false, source, style, displayAsGroup, iouMessage = ''}: TextCommentFragmentProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
-    const {html = ''} = fragment ?? {};
-    const text = ReportActionsUtils.getTextFromHtml(html);
+    const {translatedText = null, html = ''} = fragment ?? {};
+    const displayText = translatedText ?? html;
+    const text = ReportActionsUtils.getTextFromHtml(displayText);
     const {translate} = useLocalize();
     const {shouldUseNarrowLayout} = useResponsiveLayout();
 
@@ -67,9 +68,9 @@ function TextCommentFragment({fragment, styleAsDeleted, styleAsMuted = false, so
     // on other device, only render it as text if the only difference is <br /> tag
     const containsOnlyEmojis = EmojiUtils.containsOnlyEmojis(text ?? '');
     const containsEmojis = CONST.REGEX.ALL_EMOJIS.test(text ?? '');
-    if (!shouldRenderAsText(html, text ?? '') && !(containsOnlyEmojis && styleAsDeleted)) {
+    if (!shouldRenderAsText(displayText, text ?? '') && !(containsOnlyEmojis && styleAsDeleted)) {
         const editedTag = fragment?.isEdited ? `<edited ${styleAsDeleted ? 'deleted' : ''}></edited>` : '';
-        const htmlWithDeletedTag = styleAsDeleted ? `<del>${html}</del>` : html;
+        const htmlWithDeletedTag = styleAsDeleted ? `<del>${displayText}</del>` : displayText;
 
         let htmlContent = htmlWithDeletedTag;
         if (containsOnlyEmojis) {

diff --git a/src/types/onyx/ReportAction.ts b/src/types/onyx/ReportAction.ts
@@ -22,6 +22,9 @@ type Message = {
     /** The html content of the fragment. */
     html?: string;
 
+    /** Translate text */
+    translatedText?: string;
+
     /** Used to apply additional styling. Style refers to a predetermined constant and not a class name. e.g. 'normal'
      * or 'strong'
      */