From 71fd42034a62a91eaf270a7dfad0ee08e58f3204 Mon Sep 17 00:00:00 2001 From: dukenv0307 Date: Fri, 28 Jul 2023 11:47:09 +0700 Subject: [PATCH 1/9] fix: message of thread chat on LHN doesn't updated --- .../LHNOptionsList/OptionRowLHNData.js | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 deletions(-) diff --git a/src/components/LHNOptionsList/OptionRowLHNData.js b/src/components/LHNOptionsList/OptionRowLHNData.js index 49fb10a5a09..167f441533d 100644 --- a/src/components/LHNOptionsList/OptionRowLHNData.js +++ b/src/components/LHNOptionsList/OptionRowLHNData.js @@ -41,6 +41,10 @@ const propTypes = { }), ), + /** The list of parent report action of the report */ + // eslint-disable-next-line react/forbid-prop-types + parentReportActions: PropTypes.object, + ...withCurrentReportIDPropTypes, ...basePropTypes, }; @@ -50,6 +54,7 @@ const defaultProps = { personalDetails: {}, fullReport: {}, policies: {}, + parentReportActions: {}, preferredLocale: CONST.LOCALES.DEFAULT, ...withCurrentReportIDDefaultProps, ...baseDefaultProps, @@ -61,7 +66,7 @@ const defaultProps = { * The OptionRowLHN component is memoized, so it will only * re-render if the data really changed. */ -function OptionRowLHNData({shouldDisableFocusOptions, currentReportID, fullReport, personalDetails, preferredLocale, comment, policies, ...propsToForward}) { +function OptionRowLHNData({shouldDisableFocusOptions, currentReportID, fullReport, personalDetails, preferredLocale, comment, policies, parentReportActions, ...propsToForward}) { const reportID = propsToForward.reportID; // We only want to pass a boolean to the memoized component, // instead of a changing number (so we prevent unnecessary re-renders). @@ -69,6 +74,7 @@ function OptionRowLHNData({shouldDisableFocusOptions, currentReportID, fullRepor const policy = lodashGet(policies, [`${ONYXKEYS.COLLECTION.POLICY}${fullReport.policyID}`], ''); + const parentReportAction = parentReportActions[fullReport.parentReportActionID]; const optionItemRef = useRef(); const optionItem = useMemo(() => { // Note: ideally we'd have this as a dependent selector in onyx! @@ -78,7 +84,8 @@ function OptionRowLHNData({shouldDisableFocusOptions, currentReportID, fullRepor } optionItemRef.current = item; return item; - }, [fullReport, personalDetails, preferredLocale, policy]); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [fullReport, personalDetails, preferredLocale, policy, parentReportAction]); useEffect(() => { if (!optionItem || optionItem.hasDraftComment || !comment || comment.length <= 0 || isFocused) { @@ -156,5 +163,11 @@ export default React.memo( key: ONYXKEYS.COLLECTION.POLICY, }, }), + withOnyx({ + parentReportActions: { + key: (props) => ONYXKEYS.COLLECTION.REPORT_ACTIONS + props.fullReport.parentReportID, + canEvict: false, + }, + }), )(OptionRowLHNData), ); From 258743aa6824af2750418355d1b0568966dd2461 Mon Sep 17 00:00:00 2001 From: dukenv0307 Date: Fri, 28 Jul 2023 13:55:52 +0700 Subject: [PATCH 2/9] fix: test fails --- src/components/LHNOptionsList/OptionRowLHNData.js | 3 +-- tests/unit/SidebarFilterTest.js | 1 + tests/unit/SidebarOrderTest.js | 1 + tests/unit/SidebarTest.js | 1 + 4 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/LHNOptionsList/OptionRowLHNData.js b/src/components/LHNOptionsList/OptionRowLHNData.js index 167f441533d..02dd4e8d1c0 100644 --- a/src/components/LHNOptionsList/OptionRowLHNData.js +++ b/src/components/LHNOptionsList/OptionRowLHNData.js @@ -73,7 +73,6 @@ function OptionRowLHNData({shouldDisableFocusOptions, currentReportID, fullRepor const isFocused = !shouldDisableFocusOptions && currentReportID === reportID; const policy = lodashGet(policies, [`${ONYXKEYS.COLLECTION.POLICY}${fullReport.policyID}`], ''); - const parentReportAction = parentReportActions[fullReport.parentReportActionID]; const optionItemRef = useRef(); const optionItem = useMemo(() => { @@ -165,7 +164,7 @@ export default React.memo( }), withOnyx({ parentReportActions: { - key: (props) => ONYXKEYS.COLLECTION.REPORT_ACTIONS + props.fullReport.parentReportID, + key: ({fullReport}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${fullReport.parentReportID}`, canEvict: false, }, }), diff --git a/tests/unit/SidebarFilterTest.js b/tests/unit/SidebarFilterTest.js index eeeb180f9fd..ce5f343785d 100644 --- a/tests/unit/SidebarFilterTest.js +++ b/tests/unit/SidebarFilterTest.js @@ -29,6 +29,7 @@ describe('Sidebar', () => { Onyx.init({ keys: ONYXKEYS, registerStorageEventListener: () => {}, + safeEvictionKeys: [ONYXKEYS.COLLECTION.REPORT_ACTIONS], }), ); diff --git a/tests/unit/SidebarOrderTest.js b/tests/unit/SidebarOrderTest.js index 7c0e12e6b1b..ffc619e7d57 100644 --- a/tests/unit/SidebarOrderTest.js +++ b/tests/unit/SidebarOrderTest.js @@ -29,6 +29,7 @@ describe('Sidebar', () => { Onyx.init({ keys: ONYXKEYS, registerStorageEventListener: () => {}, + safeEvictionKeys: [ONYXKEYS.COLLECTION.REPORT_ACTIONS], }), ); diff --git a/tests/unit/SidebarTest.js b/tests/unit/SidebarTest.js index 02585d273fb..4da568ec256 100644 --- a/tests/unit/SidebarTest.js +++ b/tests/unit/SidebarTest.js @@ -28,6 +28,7 @@ describe('Sidebar', () => { Onyx.init({ keys: ONYXKEYS, registerStorageEventListener: () => {}, + safeEvictionKeys: [ONYXKEYS.COLLECTION.REPORT_ACTIONS], }), ); From 95b694f9263694bd430901fb34ddba653c3695f8 Mon Sep 17 00:00:00 2001 From: dukenv0307 Date: Fri, 28 Jul 2023 14:09:18 +0700 Subject: [PATCH 3/9] fix: parentReportActions type --- src/components/LHNOptionsList/OptionRowLHNData.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/LHNOptionsList/OptionRowLHNData.js b/src/components/LHNOptionsList/OptionRowLHNData.js index 02dd4e8d1c0..7fceed6a8e7 100644 --- a/src/components/LHNOptionsList/OptionRowLHNData.js +++ b/src/components/LHNOptionsList/OptionRowLHNData.js @@ -14,6 +14,7 @@ import * as Report from '../../libs/actions/Report'; import * as UserUtils from '../../libs/UserUtils'; import participantPropTypes from '../participantPropTypes'; import CONST from '../../CONST'; +import reportActionPropTypes from '../../pages/home/report/reportActionPropTypes'; const propTypes = { /** If true will disable ever setting the OptionRowLHN to focused */ @@ -42,8 +43,7 @@ const propTypes = { ), /** The list of parent report action of the report */ - // eslint-disable-next-line react/forbid-prop-types - parentReportActions: PropTypes.object, + parentReportActions: PropTypes.objectOf(PropTypes.shape(reportActionPropTypes)), ...withCurrentReportIDPropTypes, ...basePropTypes, From 59635b026ff571292f2c49b826bd53a3fdff67b6 Mon Sep 17 00:00:00 2001 From: dukenv0307 Date: Fri, 28 Jul 2023 18:05:07 +0700 Subject: [PATCH 4/9] fix: memo value --- src/components/LHNOptionsList/OptionRowLHNData.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/LHNOptionsList/OptionRowLHNData.js b/src/components/LHNOptionsList/OptionRowLHNData.js index 7fceed6a8e7..9516882686f 100644 --- a/src/components/LHNOptionsList/OptionRowLHNData.js +++ b/src/components/LHNOptionsList/OptionRowLHNData.js @@ -73,7 +73,9 @@ function OptionRowLHNData({shouldDisableFocusOptions, currentReportID, fullRepor const isFocused = !shouldDisableFocusOptions && currentReportID === reportID; const policy = lodashGet(policies, [`${ONYXKEYS.COLLECTION.POLICY}${fullReport.policyID}`], ''); - const parentReportAction = parentReportActions[fullReport.parentReportActionID]; + + const parentReportAction = useMemo(() => parentReportActions[fullReport.parentReportActionID], [parentReportActions, fullReport.parentReportActionID]); + const optionItemRef = useRef(); const optionItem = useMemo(() => { // Note: ideally we'd have this as a dependent selector in onyx! From eeb89274062b8296b4afce1e7a59d67889c9cedb Mon Sep 17 00:00:00 2001 From: dukenv0307 Date: Sat, 29 Jul 2023 14:58:39 +0700 Subject: [PATCH 5/9] add comment --- src/components/LHNOptionsList/OptionRowLHNData.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/LHNOptionsList/OptionRowLHNData.js b/src/components/LHNOptionsList/OptionRowLHNData.js index 9516882686f..76ca0b5d122 100644 --- a/src/components/LHNOptionsList/OptionRowLHNData.js +++ b/src/components/LHNOptionsList/OptionRowLHNData.js @@ -85,6 +85,7 @@ function OptionRowLHNData({shouldDisableFocusOptions, currentReportID, fullRepor } optionItemRef.current = item; return item; + // listen parentReportAction to update title of thread report when parentReportAction changed // eslint-disable-next-line react-hooks/exhaustive-deps }, [fullReport, personalDetails, preferredLocale, policy, parentReportAction]); From a369e761fa256cca9ecd46837654acd4fc38ce3a Mon Sep 17 00:00:00 2001 From: dukenv0307 Date: Sat, 29 Jul 2023 19:15:44 +0700 Subject: [PATCH 6/9] remove useMemo --- src/components/LHNOptionsList/OptionRowLHNData.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/LHNOptionsList/OptionRowLHNData.js b/src/components/LHNOptionsList/OptionRowLHNData.js index 76ca0b5d122..50e417948bb 100644 --- a/src/components/LHNOptionsList/OptionRowLHNData.js +++ b/src/components/LHNOptionsList/OptionRowLHNData.js @@ -74,7 +74,7 @@ function OptionRowLHNData({shouldDisableFocusOptions, currentReportID, fullRepor const policy = lodashGet(policies, [`${ONYXKEYS.COLLECTION.POLICY}${fullReport.policyID}`], ''); - const parentReportAction = useMemo(() => parentReportActions[fullReport.parentReportActionID], [parentReportActions, fullReport.parentReportActionID]); + const parentReportAction = parentReportActions[fullReport.parentReportActionID] const optionItemRef = useRef(); const optionItem = useMemo(() => { From 9b70ac7f0663b8e245148310689b57ec53d359d3 Mon Sep 17 00:00:00 2001 From: dukenv0307 Date: Mon, 31 Jul 2023 09:31:31 +0700 Subject: [PATCH 7/9] fix: lint issue --- src/components/LHNOptionsList/OptionRowLHNData.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/LHNOptionsList/OptionRowLHNData.js b/src/components/LHNOptionsList/OptionRowLHNData.js index 50e417948bb..82e842bf368 100644 --- a/src/components/LHNOptionsList/OptionRowLHNData.js +++ b/src/components/LHNOptionsList/OptionRowLHNData.js @@ -74,7 +74,7 @@ function OptionRowLHNData({shouldDisableFocusOptions, currentReportID, fullRepor const policy = lodashGet(policies, [`${ONYXKEYS.COLLECTION.POLICY}${fullReport.policyID}`], ''); - const parentReportAction = parentReportActions[fullReport.parentReportActionID] + const parentReportAction = parentReportActions[fullReport.parentReportActionID]; const optionItemRef = useRef(); const optionItem = useMemo(() => { From cd5ea63701af09a230cd711e01d1f6f52f993d1a Mon Sep 17 00:00:00 2001 From: dukenv0307 <129500732+dukenv0307@users.noreply.github.com> Date: Mon, 31 Jul 2023 11:21:18 +0700 Subject: [PATCH 8/9] Update src/components/LHNOptionsList/OptionRowLHNData.js Co-authored-by: Rajat Parashar --- src/components/LHNOptionsList/OptionRowLHNData.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/LHNOptionsList/OptionRowLHNData.js b/src/components/LHNOptionsList/OptionRowLHNData.js index 82e842bf368..6f924377360 100644 --- a/src/components/LHNOptionsList/OptionRowLHNData.js +++ b/src/components/LHNOptionsList/OptionRowLHNData.js @@ -85,7 +85,7 @@ function OptionRowLHNData({shouldDisableFocusOptions, currentReportID, fullRepor } optionItemRef.current = item; return item; - // listen parentReportAction to update title of thread report when parentReportAction changed + // Listen parentReportAction to update title of thread report when parentReportAction changed // eslint-disable-next-line react-hooks/exhaustive-deps }, [fullReport, personalDetails, preferredLocale, policy, parentReportAction]); From a0df9fed5d02ed5e61938c877354dfbdd1024796 Mon Sep 17 00:00:00 2001 From: dukenv0307 <129500732+dukenv0307@users.noreply.github.com> Date: Tue, 1 Aug 2023 00:55:59 +0700 Subject: [PATCH 9/9] Update src/components/LHNOptionsList/OptionRowLHNData.js Co-authored-by: Puneet Lath --- src/components/LHNOptionsList/OptionRowLHNData.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/LHNOptionsList/OptionRowLHNData.js b/src/components/LHNOptionsList/OptionRowLHNData.js index 6f924377360..dff1cd3b15b 100644 --- a/src/components/LHNOptionsList/OptionRowLHNData.js +++ b/src/components/LHNOptionsList/OptionRowLHNData.js @@ -42,7 +42,7 @@ const propTypes = { }), ), - /** The list of parent report action of the report */ + /** The actions from the parent report */ parentReportActions: PropTypes.objectOf(PropTypes.shape(reportActionPropTypes)), ...withCurrentReportIDPropTypes,