diff --git a/src/components/LHNOptionsList/OptionRowLHNData.js b/src/components/LHNOptionsList/OptionRowLHNData.js index 49fb10a5a09f..dff1cd3b15b6 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 */ @@ -41,6 +42,9 @@ const propTypes = { }), ), + /** The actions from the parent report */ + parentReportActions: PropTypes.objectOf(PropTypes.shape(reportActionPropTypes)), + ...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,8 @@ 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 +85,9 @@ function OptionRowLHNData({shouldDisableFocusOptions, currentReportID, fullRepor } optionItemRef.current = item; return item; - }, [fullReport, personalDetails, preferredLocale, policy]); + // Listen parentReportAction to update title of thread report when parentReportAction changed + // 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 +165,11 @@ export default React.memo( key: ONYXKEYS.COLLECTION.POLICY, }, }), + withOnyx({ + parentReportActions: { + key: ({fullReport}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${fullReport.parentReportID}`, + canEvict: false, + }, + }), )(OptionRowLHNData), ); diff --git a/tests/unit/SidebarFilterTest.js b/tests/unit/SidebarFilterTest.js index eeeb180f9fde..ce5f343785d9 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 7c0e12e6b1bc..ffc619e7d578 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 02585d273fb7..4da568ec2561 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], }), );