From 0fbc48ec47df34204f37bab3c2aaf3da6f2fc73e Mon Sep 17 00:00:00 2001 From: Sebastian Szewczyk Date: Thu, 19 Oct 2023 23:56:31 +0200 Subject: [PATCH 1/3] Optimized listening to hasDraft property changes --- src/components/LHNOptionsList/OptionRowLHNData.js | 10 +++------- src/pages/home/HeaderView.js | 1 + src/pages/home/ReportScreen.js | 1 + src/pages/home/report/ReportActionItemCreated.js | 1 + 4 files changed, 6 insertions(+), 7 deletions(-) diff --git a/src/components/LHNOptionsList/OptionRowLHNData.js b/src/components/LHNOptionsList/OptionRowLHNData.js index 3386dbe8c8cd..4bc959f03058 100644 --- a/src/components/LHNOptionsList/OptionRowLHNData.js +++ b/src/components/LHNOptionsList/OptionRowLHNData.js @@ -164,14 +164,10 @@ const personalDetailsSelector = (personalDetails) => */ export default React.memo( compose( - withReportCommentDrafts({ - propName: 'comment', - transformValue: (drafts, props) => { - const draftKey = `${ONYXKEYS.COLLECTION.REPORT_DRAFT_COMMENT}${props.reportID}`; - return lodashGet(drafts, draftKey, ''); - }, - }), withOnyx({ + comment: { + key: ({reportID}) => `${ONYXKEYS.COLLECTION.REPORT_DRAFT_COMMENT}${reportID}`, + }, fullReport: { key: ({reportID}) => `${ONYXKEYS.COLLECTION.REPORT}${reportID}`, }, diff --git a/src/pages/home/HeaderView.js b/src/pages/home/HeaderView.js index 8ddbf066a774..978b230d9ad9 100644 --- a/src/pages/home/HeaderView.js +++ b/src/pages/home/HeaderView.js @@ -280,6 +280,7 @@ export default compose( }, parentReport: { key: ({report}) => `${ONYXKEYS.COLLECTION.REPORT}${report.parentReportID || report.reportID}`, + selector: ({ hasDraft, ...report}={}) => report, // hasDraft not needed in this component }, session: { key: ONYXKEYS.SESSION, diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js index 4eaf1c1ce15c..7fc89c357c6d 100644 --- a/src/pages/home/ReportScreen.js +++ b/src/pages/home/ReportScreen.js @@ -482,6 +482,7 @@ export default compose( report: { key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT}${getReportID(route)}`, allowStaleData: true, + selector: ({ hasDraft, ...report}={}) => report, // hasDraft not needed in this component }, reportMetadata: { key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT_METADATA}${getReportID(route)}`, diff --git a/src/pages/home/report/ReportActionItemCreated.js b/src/pages/home/report/ReportActionItemCreated.js index a5df1c37e769..58863e979a66 100644 --- a/src/pages/home/report/ReportActionItemCreated.js +++ b/src/pages/home/report/ReportActionItemCreated.js @@ -106,6 +106,7 @@ export default compose( withOnyx({ report: { key: ({reportID}) => `${ONYXKEYS.COLLECTION.REPORT}${reportID}`, + selector: ({ hasDraft, ...report}={}) => report, // hasDraft not needed in this component }, personalDetails: { key: ONYXKEYS.PERSONAL_DETAILS_LIST, From ddfea3bfa4629b381fad03f34034874af41c9c50 Mon Sep 17 00:00:00 2001 From: Sebastian Szewczyk Date: Fri, 20 Oct 2023 22:52:05 +0200 Subject: [PATCH 2/3] Extracted onyx selector ReportWithoutHasDraft for null checking in single place --- src/components/LHNOptionsList/OptionRowLHNData.js | 1 - src/libs/OnyxSelectors/reportWithoutHasDraftSelector.ts | 9 +++++++++ src/pages/home/HeaderView.js | 3 ++- src/pages/home/ReportScreen.js | 3 ++- src/pages/home/report/ReportActionItemCreated.js | 3 ++- 5 files changed, 15 insertions(+), 4 deletions(-) create mode 100644 src/libs/OnyxSelectors/reportWithoutHasDraftSelector.ts diff --git a/src/components/LHNOptionsList/OptionRowLHNData.js b/src/components/LHNOptionsList/OptionRowLHNData.js index 4bc959f03058..e93e3690138e 100644 --- a/src/components/LHNOptionsList/OptionRowLHNData.js +++ b/src/components/LHNOptionsList/OptionRowLHNData.js @@ -4,7 +4,6 @@ import _ from 'underscore'; import PropTypes from 'prop-types'; import React, {useEffect, useRef, useMemo} from 'react'; import {deepEqual} from 'fast-equals'; -import {withReportCommentDrafts} from '../OnyxProvider'; import SidebarUtils from '../../libs/SidebarUtils'; import compose from '../../libs/compose'; import ONYXKEYS from '../../ONYXKEYS'; diff --git a/src/libs/OnyxSelectors/reportWithoutHasDraftSelector.ts b/src/libs/OnyxSelectors/reportWithoutHasDraftSelector.ts new file mode 100644 index 000000000000..bc2d0acb890f --- /dev/null +++ b/src/libs/OnyxSelectors/reportWithoutHasDraftSelector.ts @@ -0,0 +1,9 @@ +import { OnyxKeyValue } from "../../ONYXKEYS"; + +export default function reportWithoutHasDraftSelector(report: OnyxKeyValue<'report_'>) { + if (!report) { + return report; + } + const { hasDraft, ...reportWithoutHasDraft} = report; + return reportWithoutHasDraft; +} diff --git a/src/pages/home/HeaderView.js b/src/pages/home/HeaderView.js index 978b230d9ad9..8d0c94e088eb 100644 --- a/src/pages/home/HeaderView.js +++ b/src/pages/home/HeaderView.js @@ -34,6 +34,7 @@ import * as Session from '../../libs/actions/Session'; import styles from '../../styles/styles'; import themeColors from '../../styles/themes/default'; import reportPropTypes from '../reportPropTypes'; +import reportWithoutHasDraftSelector from '../../libs/OnyxSelectors/reportWithoutHasDraftSelector'; const propTypes = { /** Toggles the navigationMenu open and closed */ @@ -280,7 +281,7 @@ export default compose( }, parentReport: { key: ({report}) => `${ONYXKEYS.COLLECTION.REPORT}${report.parentReportID || report.reportID}`, - selector: ({ hasDraft, ...report}={}) => report, // hasDraft not needed in this component + selector: reportWithoutHasDraftSelector, }, session: { key: ONYXKEYS.SESSION, diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js index 7fc89c357c6d..9f974f458e8a 100644 --- a/src/pages/home/ReportScreen.js +++ b/src/pages/home/ReportScreen.js @@ -39,6 +39,7 @@ import DragAndDropProvider from '../../components/DragAndDrop/Provider'; import usePrevious from '../../hooks/usePrevious'; import CONST from '../../CONST'; import withCurrentReportID, {withCurrentReportIDPropTypes, withCurrentReportIDDefaultProps} from '../../components/withCurrentReportID'; +import reportWithoutHasDraftSelector from '../../libs/OnyxSelectors/reportWithoutHasDraftSelector'; const propTypes = { /** Navigation route context info provided by react navigation */ @@ -482,7 +483,7 @@ export default compose( report: { key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT}${getReportID(route)}`, allowStaleData: true, - selector: ({ hasDraft, ...report}={}) => report, // hasDraft not needed in this component + selector: reportWithoutHasDraftSelector, }, reportMetadata: { key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT_METADATA}${getReportID(route)}`, diff --git a/src/pages/home/report/ReportActionItemCreated.js b/src/pages/home/report/ReportActionItemCreated.js index 58863e979a66..50b4a3eb6148 100644 --- a/src/pages/home/report/ReportActionItemCreated.js +++ b/src/pages/home/report/ReportActionItemCreated.js @@ -19,6 +19,7 @@ import PressableWithoutFeedback from '../../../components/Pressable/PressableWit import MultipleAvatars from '../../../components/MultipleAvatars'; import CONST from '../../../CONST'; import AnimatedEmptyStateBackground from './AnimatedEmptyStateBackground'; +import reportWithoutHasDraftSelector from '../../../libs/OnyxSelectors/reportWithoutHasDraftSelector'; const propTypes = { /** The id of the report */ @@ -106,7 +107,7 @@ export default compose( withOnyx({ report: { key: ({reportID}) => `${ONYXKEYS.COLLECTION.REPORT}${reportID}`, - selector: ({ hasDraft, ...report}={}) => report, // hasDraft not needed in this component + selector: reportWithoutHasDraftSelector, }, personalDetails: { key: ONYXKEYS.PERSONAL_DETAILS_LIST, From 017cb9a6ff0784e7ba3d5c5901d2d16f91ce234e Mon Sep 17 00:00:00 2001 From: Sebastian Szewczyk Date: Mon, 23 Oct 2023 13:34:25 +0200 Subject: [PATCH 3/3] Prettier autofix --- src/libs/OnyxSelectors/reportWithoutHasDraftSelector.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/libs/OnyxSelectors/reportWithoutHasDraftSelector.ts b/src/libs/OnyxSelectors/reportWithoutHasDraftSelector.ts index bc2d0acb890f..8819cc8aa47c 100644 --- a/src/libs/OnyxSelectors/reportWithoutHasDraftSelector.ts +++ b/src/libs/OnyxSelectors/reportWithoutHasDraftSelector.ts @@ -1,9 +1,9 @@ -import { OnyxKeyValue } from "../../ONYXKEYS"; +import {OnyxKeyValue} from '../../ONYXKEYS'; export default function reportWithoutHasDraftSelector(report: OnyxKeyValue<'report_'>) { if (!report) { return report; } - const { hasDraft, ...reportWithoutHasDraft} = report; + const {hasDraft, ...reportWithoutHasDraft} = report; return reportWithoutHasDraft; }