Merge pull request #50490 from truph01/fix/49407

fix: Description with mentions shown for a while after saving
Expensify · Oct 16, 2024 · e4e32aa · e4e32aa
2 parents cbd4f17 + 7646be8
commit e4e32aa
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 35 deletions.
diff --git a/...omponents/HTMLEngineProvider/HTMLRenderers/MentionReportRenderer/MentionReportContext.tsx b/...omponents/HTMLEngineProvider/HTMLRenderers/MentionReportRenderer/MentionReportContext.tsx
@@ -2,6 +2,7 @@ import {createContext} from 'react';
 
 type MentionReportContextProps = {
     currentReportID: string;
+    exactlyMatch?: boolean;
 };
 
 const MentionReportContext = createContext<MentionReportContextProps>({

diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/MentionReportRenderer/index.tsx b/src/components/HTMLEngineProvider/HTMLRenderers/MentionReportRenderer/index.tsx
@@ -3,7 +3,7 @@ import React, {useContext, useMemo} from 'react';
 import type {TextStyle} from 'react-native';
 import {StyleSheet} from 'react-native';
 import type {OnyxCollection, OnyxEntry} from 'react-native-onyx';
-import {useOnyx, withOnyx} from 'react-native-onyx';
+import {useOnyx} from 'react-native-onyx';
 import type {CustomRendererProps, TPhrasing, TText} from 'react-native-render-html';
 import {ShowContextMenuContext} from '@components/ShowContextMenuContext';
 import Text from '@components/Text';
@@ -18,12 +18,7 @@ import type {Report} from '@src/types/onyx';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
 import MentionReportContext from './MentionReportContext';
 
-type MentionReportOnyxProps = {
-    /** All reports shared with the user */
-    reports: OnyxCollection<Report>;
-};
-
-type MentionReportRendererProps = MentionReportOnyxProps & CustomRendererProps<TText | TPhrasing>;
+type MentionReportRendererProps = CustomRendererProps<TText | TPhrasing>;
 
 const removeLeadingLTRAndHash = (value: string) => value.replace(CONST.UNICODE.LTR, '').replace('#', '');
 
@@ -53,11 +48,12 @@ const getMentionDetails = (htmlAttributeReportID: string, currentReport: OnyxEnt
     return {reportID, mentionDisplayText};
 };
 
-function MentionReportRenderer({style, tnode, TDefaultRenderer, reports, ...defaultRendererProps}: MentionReportRendererProps) {
+function MentionReportRenderer({style, tnode, TDefaultRenderer, ...defaultRendererProps}: MentionReportRendererProps) {
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
     const htmlAttributeReportID = tnode.attributes.reportid;
-    const {currentReportID: currentReportIDContext} = useContext(MentionReportContext);
+    const {currentReportID: currentReportIDContext, exactlyMatch} = useContext(MentionReportContext);
+    const [reports] = useOnyx(ONYXKEYS.COLLECTION.REPORT);
 
     const currentReportID = useCurrentReportID();
     const currentReportIDValue = currentReportIDContext || currentReportID?.currentReportID;
@@ -86,7 +82,7 @@ function MentionReportRenderer({style, tnode, TDefaultRenderer, reports, ...defa
                     // eslint-disable-next-line react/jsx-props-no-spreading
                     {...defaultRendererProps}
                     style={
-                        isGroupPolicyReport
+                        isGroupPolicyReport && (!exactlyMatch || navigationRoute)
                             ? [styles.link, styleWithoutColor, StyleUtils.getMentionStyle(isCurrentRoomMention), {color: StyleUtils.getMentionTextColor(isCurrentRoomMention)}]
                             : []
                     }
@@ -111,17 +107,4 @@ function MentionReportRenderer({style, tnode, TDefaultRenderer, reports, ...defa
 
 MentionReportRenderer.displayName = 'MentionReportRenderer';
 
-const chatReportSelector = (report: OnyxEntry<Report>): Report =>
-    (report && {
-        reportID: report.reportID,
-        reportName: report.reportName,
-        displayName: report.displayName,
-        policyID: report.policyID,
-    }) as Report;
-
-export default withOnyx<MentionReportRendererProps, MentionReportOnyxProps>({
-    reports: {
-        key: ONYXKEYS.COLLECTION.REPORT,
-        selector: chatReportSelector,
-    },
-})(MentionReportRenderer);
+export default MentionReportRenderer;
diff --git a/src/pages/ReportDetailsPage.tsx b/src/pages/ReportDetailsPage.tsx
@@ -10,6 +10,7 @@ import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView
 import DelegateNoAccessModal from '@components/DelegateNoAccessModal';
 import DisplayNames from '@components/DisplayNames';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
+import MentionReportContext from '@components/HTMLEngineProvider/HTMLRenderers/MentionReportRenderer/MentionReportContext';
 import * as Expensicons from '@components/Icon/Expensicons';
 import MenuItem from '@components/MenuItem';
 import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
@@ -739,6 +740,9 @@ function ReportDetailsPage({policies, report, route}: ReportDetailsPageProps) {
 
         isTransactionDeleted.current = true;
     }, [caseID, iouTransactionID, moneyRequestReport?.reportID, report, requestParentReportAction, isSingleTransactionView]);
+
+    const mentionReportContextValue = useMemo(() => ({currentReportID: report.reportID, exactlyMatch: true}), [report.reportID]);
+
     return (
         <ScreenWrapper testID={ReportDetailsPage.displayName}>
             <FullPageNotFoundView shouldShow={isEmptyObject(report)}>
@@ -758,17 +762,19 @@ function ReportDetailsPage({policies, report, route}: ReportDetailsPageProps) {
 
                     {shouldShowReportDescription && (
                         <OfflineWithFeedback pendingAction={report.pendingFields?.description}>
-                            <MenuItemWithTopDescription
-                                shouldShowRightIcon
-                                interactive
-                                title={report.description}
-                                shouldRenderAsHTML
-                                shouldTruncateTitle
-                                characterLimit={100}
-                                shouldCheckActionAllowedOnPress={false}
-                                description={translate('reportDescriptionPage.roomDescription')}
-                                onPress={() => Navigation.navigate(ROUTES.REPORT_DESCRIPTION.getRoute(report.reportID, Navigation.getActiveRoute()))}
-                            />
+                            <MentionReportContext.Provider value={mentionReportContextValue}>
+                                <MenuItemWithTopDescription
+                                    shouldShowRightIcon
+                                    interactive
+                                    title={report.description}
+                                    shouldRenderAsHTML
+                                    shouldTruncateTitle
+                                    characterLimit={100}
+                                    shouldCheckActionAllowedOnPress={false}
+                                    description={translate('reportDescriptionPage.roomDescription')}
+                                    onPress={() => Navigation.navigate(ROUTES.REPORT_DESCRIPTION.getRoute(report.reportID, Navigation.getActiveRoute()))}
+                                />
+                            </MentionReportContext.Provider>
                         </OfflineWithFeedback>
                     )}