From 3fdadb27e4d92897e7eb4506683d6876ca02e129 Mon Sep 17 00:00:00 2001 From: truph01 Date: Sat, 5 Oct 2024 21:41:17 +0700 Subject: [PATCH 1/4] fix: Description with mentions shown in preview but after saved disappeared --- .../MentionReportRenderer/index.tsx | 4 +-- src/pages/ReportDetailsPage.tsx | 28 +++++++++++-------- 2 files changed, 19 insertions(+), 13 deletions(-) diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/MentionReportRenderer/index.tsx b/src/components/HTMLEngineProvider/HTMLRenderers/MentionReportRenderer/index.tsx index 7aa0f5eca22a..3e0445796a60 100644 --- a/src/components/HTMLEngineProvider/HTMLRenderers/MentionReportRenderer/index.tsx +++ b/src/components/HTMLEngineProvider/HTMLRenderers/MentionReportRenderer/index.tsx @@ -57,7 +57,7 @@ function MentionReportRenderer({style, tnode, TDefaultRenderer, reports, ...defa const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); const htmlAttributeReportID = tnode.attributes.reportid; - const {currentReportID: currentReportIDContext} = useContext(MentionReportContext); + const {currentReportID: currentReportIDContext, exactlyMatch} = useContext(MentionReportContext); const currentReportID = useCurrentReportID(); const currentReportIDValue = currentReportIDContext || currentReportID?.currentReportID; @@ -86,7 +86,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)}] : [] } diff --git a/src/pages/ReportDetailsPage.tsx b/src/pages/ReportDetailsPage.tsx index e51b8e36704a..4c84f7daacb0 100644 --- 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'; @@ -736,6 +737,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 ( @@ -755,17 +759,19 @@ function ReportDetailsPage({policies, report, route}: ReportDetailsPageProps) { {shouldShowReportDescription && ( - Navigation.navigate(ROUTES.REPORT_DESCRIPTION.getRoute(report.reportID, Navigation.getActiveRoute()))} - /> + + Navigation.navigate(ROUTES.REPORT_DESCRIPTION.getRoute(report.reportID, Navigation.getActiveRoute()))} + /> + )} From e8fe3c3b7946322702cbb3d6176e42825b859397 Mon Sep 17 00:00:00 2001 From: truph01 Date: Wed, 9 Oct 2024 14:39:37 +0700 Subject: [PATCH 2/4] fix: type --- .../MentionReportRenderer/MentionReportContext.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/MentionReportRenderer/MentionReportContext.tsx b/src/components/HTMLEngineProvider/HTMLRenderers/MentionReportRenderer/MentionReportContext.tsx index 9fe1088c9809..2c72033ff682 100644 --- a/src/components/HTMLEngineProvider/HTMLRenderers/MentionReportRenderer/MentionReportContext.tsx +++ b/src/components/HTMLEngineProvider/HTMLRenderers/MentionReportRenderer/MentionReportContext.tsx @@ -2,10 +2,12 @@ import {createContext} from 'react'; type MentionReportContextProps = { currentReportID: string; + exactlyMatch: boolean; }; const MentionReportContext = createContext({ currentReportID: '', + exactlyMatch: false, }); export default MentionReportContext; From 4265a0ce03c89732b5aa9bdd68b766c49b6664ff Mon Sep 17 00:00:00 2001 From: truph01 Date: Wed, 9 Oct 2024 14:44:19 +0700 Subject: [PATCH 3/4] fix: type --- .../MentionReportRenderer/MentionReportContext.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/MentionReportRenderer/MentionReportContext.tsx b/src/components/HTMLEngineProvider/HTMLRenderers/MentionReportRenderer/MentionReportContext.tsx index 2c72033ff682..e44d3ef97df6 100644 --- a/src/components/HTMLEngineProvider/HTMLRenderers/MentionReportRenderer/MentionReportContext.tsx +++ b/src/components/HTMLEngineProvider/HTMLRenderers/MentionReportRenderer/MentionReportContext.tsx @@ -2,12 +2,11 @@ import {createContext} from 'react'; type MentionReportContextProps = { currentReportID: string; - exactlyMatch: boolean; + exactlyMatch?: boolean; }; const MentionReportContext = createContext({ currentReportID: '', - exactlyMatch: false, }); export default MentionReportContext; From 7646be8d753d4d7fbd9aea27bc45a2b09ece7c67 Mon Sep 17 00:00:00 2001 From: truph01 Date: Wed, 16 Oct 2024 15:09:09 +0700 Subject: [PATCH 4/4] fix: use useOnyx --- .../MentionReportRenderer/index.tsx | 27 ++++--------------- 1 file changed, 5 insertions(+), 22 deletions(-) diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/MentionReportRenderer/index.tsx b/src/components/HTMLEngineProvider/HTMLRenderers/MentionReportRenderer/index.tsx index 3e0445796a60..3ab907dc767d 100644 --- 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; -}; - -type MentionReportRendererProps = MentionReportOnyxProps & CustomRendererProps; +type MentionReportRendererProps = CustomRendererProps; 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, exactlyMatch} = useContext(MentionReportContext); + const [reports] = useOnyx(ONYXKEYS.COLLECTION.REPORT); const currentReportID = useCurrentReportID(); const currentReportIDValue = currentReportIDContext || currentReportID?.currentReportID; @@ -111,17 +107,4 @@ function MentionReportRenderer({style, tnode, TDefaultRenderer, reports, ...defa MentionReportRenderer.displayName = 'MentionReportRenderer'; -const chatReportSelector = (report: OnyxEntry): Report => - (report && { - reportID: report.reportID, - reportName: report.reportName, - displayName: report.displayName, - policyID: report.policyID, - }) as Report; - -export default withOnyx({ - reports: { - key: ONYXKEYS.COLLECTION.REPORT, - selector: chatReportSelector, - }, -})(MentionReportRenderer); +export default MentionReportRenderer;