From 90968b84d4ba097693308493c37782877bb741ec Mon Sep 17 00:00:00 2001 From: Abhinay Bathina Date: Sat, 14 Sep 2024 11:10:01 +0530 Subject: [PATCH 1/8] chore: migrate withWritableReportOrNotFound from withOnyx to useOnyx --- .../step/withWritableReportOrNotFound.tsx | 32 +++++++++---------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/src/pages/iou/request/step/withWritableReportOrNotFound.tsx b/src/pages/iou/request/step/withWritableReportOrNotFound.tsx index 8df530f3c81c..be45b173f5ff 100644 --- a/src/pages/iou/request/step/withWritableReportOrNotFound.tsx +++ b/src/pages/iou/request/step/withWritableReportOrNotFound.tsx @@ -2,7 +2,7 @@ import type {RouteProp} from '@react-navigation/core'; import type {ComponentType, ForwardedRef, RefAttributes} from 'react'; import React, {forwardRef, useEffect} from 'react'; import type {OnyxEntry} from 'react-native-onyx'; -import {withOnyx} from 'react-native-onyx'; +import {useOnyx} from 'react-native-onyx'; import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView'; import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator'; import getComponentDisplayName from '@libs/getComponentDisplayName'; @@ -52,14 +52,21 @@ type WithWritableReportOrNotFoundProps = WithWr export default function , TRef>( WrappedComponent: ComponentType>, shouldIncludeDeprecatedIOUType = false, -): React.ComponentType, keyof WithWritableReportOrNotFoundOnyxProps>> { +): React.ComponentType> & RefAttributes> { // eslint-disable-next-line rulesdir/no-negated-variables - function WithWritableReportOrNotFound(props: TProps, ref: ForwardedRef) { - const {report = {reportID: ''}, route, isLoadingApp = true, reportDraft} = props; + function WithWritableReportOrNotFound(props: Omit>, ref: ForwardedRef) { + const {route} = props as TProps; const iouTypeParamIsInvalid = !Object.values(CONST.IOU.TYPE) .filter((type) => shouldIncludeDeprecatedIOUType || (type !== CONST.IOU.TYPE.REQUEST && type !== CONST.IOU.TYPE.SEND)) .includes(route.params?.iouType); const isEditing = 'action' in route.params && route.params?.action === CONST.IOU.ACTION.EDIT; + + const reportID = route.params.reportID; + + const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${reportID ?? -1}`); + const [isLoadingApp = true] = useOnyx(ONYXKEYS.IS_LOADING_APP); + const [reportDraft] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_DRAFT}${reportID ?? -1}`); + const canUserPerformWriteAction = ReportUtils.canUserPerformWriteAction(report); useEffect(() => { @@ -81,7 +88,10 @@ export default function ); @@ -89,17 +99,7 @@ export default function , WithWritableReportOrNotFoundOnyxProps>({ - report: { - key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT}${route.params.reportID ?? '-1'}`, - }, - isLoadingApp: { - key: ONYXKEYS.IS_LOADING_APP, - }, - reportDraft: { - key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT_DRAFT}${route.params.reportID ?? '-1'}`, - }, - })(forwardRef(WithWritableReportOrNotFound)); + return forwardRef(WithWritableReportOrNotFound); } export type {WithWritableReportOrNotFoundProps}; From bd4712ae3107f53dff67ecbd6618f29bbc804633 Mon Sep 17 00:00:00 2001 From: Abhinay Bathina Date: Fri, 20 Sep 2024 00:01:36 +0530 Subject: [PATCH 2/8] chore: update TypeScript types --- src/pages/iou/request/step/withWritableReportOrNotFound.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/pages/iou/request/step/withWritableReportOrNotFound.tsx b/src/pages/iou/request/step/withWritableReportOrNotFound.tsx index be45b173f5ff..6a045e6289f8 100644 --- a/src/pages/iou/request/step/withWritableReportOrNotFound.tsx +++ b/src/pages/iou/request/step/withWritableReportOrNotFound.tsx @@ -52,10 +52,10 @@ type WithWritableReportOrNotFoundProps = WithWr export default function , TRef>( WrappedComponent: ComponentType>, shouldIncludeDeprecatedIOUType = false, -): React.ComponentType> & RefAttributes> { +): React.ComponentType & RefAttributes> { // eslint-disable-next-line rulesdir/no-negated-variables - function WithWritableReportOrNotFound(props: Omit>, ref: ForwardedRef) { - const {route} = props as TProps; + function WithWritableReportOrNotFound(props: Omit, ref: ForwardedRef) { + const {route} = props; const iouTypeParamIsInvalid = !Object.values(CONST.IOU.TYPE) .filter((type) => shouldIncludeDeprecatedIOUType || (type !== CONST.IOU.TYPE.REQUEST && type !== CONST.IOU.TYPE.SEND)) .includes(route.params?.iouType); From 0415fe326dc8c71dc1af9be74b34a75474654d81 Mon Sep 17 00:00:00 2001 From: Abhinay Bathina Date: Fri, 20 Sep 2024 00:13:49 +0530 Subject: [PATCH 3/8] minor: refactor --- src/pages/iou/request/step/withWritableReportOrNotFound.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/iou/request/step/withWritableReportOrNotFound.tsx b/src/pages/iou/request/step/withWritableReportOrNotFound.tsx index 6a045e6289f8..69172bde748e 100644 --- a/src/pages/iou/request/step/withWritableReportOrNotFound.tsx +++ b/src/pages/iou/request/step/withWritableReportOrNotFound.tsx @@ -52,7 +52,7 @@ type WithWritableReportOrNotFoundProps = WithWr export default function , TRef>( WrappedComponent: ComponentType>, shouldIncludeDeprecatedIOUType = false, -): React.ComponentType & RefAttributes> { +): React.ComponentType, keyof WithWritableReportOrNotFoundOnyxProps>> { // eslint-disable-next-line rulesdir/no-negated-variables function WithWritableReportOrNotFound(props: Omit, ref: ForwardedRef) { const {route} = props; From ed9659daa784d85703595af457b8789a2c499e03 Mon Sep 17 00:00:00 2001 From: Abhinay Bathina Date: Fri, 20 Sep 2024 00:22:45 +0530 Subject: [PATCH 4/8] chore: code review changes --- src/pages/iou/request/step/withWritableReportOrNotFound.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/pages/iou/request/step/withWritableReportOrNotFound.tsx b/src/pages/iou/request/step/withWritableReportOrNotFound.tsx index 69172bde748e..7bad2de23660 100644 --- a/src/pages/iou/request/step/withWritableReportOrNotFound.tsx +++ b/src/pages/iou/request/step/withWritableReportOrNotFound.tsx @@ -61,11 +61,9 @@ export default function Date: Fri, 20 Sep 2024 01:17:55 +0530 Subject: [PATCH 5/8] chore: move useOnyx calls to top for readability and use '-1' instead of 1 for missing reportID --- .../iou/request/step/withWritableReportOrNotFound.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/pages/iou/request/step/withWritableReportOrNotFound.tsx b/src/pages/iou/request/step/withWritableReportOrNotFound.tsx index 7bad2de23660..dab24427aaf7 100644 --- a/src/pages/iou/request/step/withWritableReportOrNotFound.tsx +++ b/src/pages/iou/request/step/withWritableReportOrNotFound.tsx @@ -56,15 +56,15 @@ export default function , ref: ForwardedRef) { const {route} = props; + const [report = {reportID: ''}] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${route.params.reportID ?? '-1'}`); + const [isLoadingApp = true] = useOnyx(ONYXKEYS.IS_LOADING_APP); + const [reportDraft] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_DRAFT}${route.params.reportID ?? '-1'}`); + const iouTypeParamIsInvalid = !Object.values(CONST.IOU.TYPE) .filter((type) => shouldIncludeDeprecatedIOUType || (type !== CONST.IOU.TYPE.REQUEST && type !== CONST.IOU.TYPE.SEND)) .includes(route.params?.iouType); const isEditing = 'action' in route.params && route.params?.action === CONST.IOU.ACTION.EDIT; - const [report = {reportID: ''}] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${route.params.reportID ?? -1}`); - const [isLoadingApp = true] = useOnyx(ONYXKEYS.IS_LOADING_APP); - const [reportDraft] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_DRAFT}${route.params.reportID ?? -1}`); - const canUserPerformWriteAction = ReportUtils.canUserPerformWriteAction(report); useEffect(() => { From 69aba443834f8fae1aaa6f2304a494037ed6c0ef Mon Sep 17 00:00:00 2001 From: Abhinay Bathina Date: Fri, 20 Sep 2024 18:06:18 +0530 Subject: [PATCH 6/8] fix: create a variable for reportOrDefault to pass report as it is to child component --- .../iou/request/step/withWritableReportOrNotFound.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/pages/iou/request/step/withWritableReportOrNotFound.tsx b/src/pages/iou/request/step/withWritableReportOrNotFound.tsx index dab24427aaf7..115d9f503b9c 100644 --- a/src/pages/iou/request/step/withWritableReportOrNotFound.tsx +++ b/src/pages/iou/request/step/withWritableReportOrNotFound.tsx @@ -56,19 +56,21 @@ export default function , ref: ForwardedRef) { const {route} = props; - const [report = {reportID: ''}] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${route.params.reportID ?? '-1'}`); + const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${route.params.reportID ?? '-1'}`); const [isLoadingApp = true] = useOnyx(ONYXKEYS.IS_LOADING_APP); const [reportDraft] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_DRAFT}${route.params.reportID ?? '-1'}`); + const reportOrDefault = report ?? {reportID: ''}; + const iouTypeParamIsInvalid = !Object.values(CONST.IOU.TYPE) .filter((type) => shouldIncludeDeprecatedIOUType || (type !== CONST.IOU.TYPE.REQUEST && type !== CONST.IOU.TYPE.SEND)) .includes(route.params?.iouType); const isEditing = 'action' in route.params && route.params?.action === CONST.IOU.ACTION.EDIT; - const canUserPerformWriteAction = ReportUtils.canUserPerformWriteAction(report); + const canUserPerformWriteAction = ReportUtils.canUserPerformWriteAction(reportOrDefault); useEffect(() => { - if (!!report?.reportID || !route.params.reportID || !!reportDraft || !isEditing) { + if (!!reportOrDefault?.reportID || !route.params.reportID || !!reportDraft || !isEditing) { return; } ReportActions.openReport(route.params.reportID); From f616babdc79f4cebc20e12d536b2c6057774fbd3 Mon Sep 17 00:00:00 2001 From: Abhinay Bathina Date: Sat, 21 Sep 2024 09:40:16 +0530 Subject: [PATCH 7/8] chore: don't pass isLoadingApp into the wrapped component --- src/pages/iou/request/step/withWritableReportOrNotFound.tsx | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/pages/iou/request/step/withWritableReportOrNotFound.tsx b/src/pages/iou/request/step/withWritableReportOrNotFound.tsx index 115d9f503b9c..cd4dd4f93ba4 100644 --- a/src/pages/iou/request/step/withWritableReportOrNotFound.tsx +++ b/src/pages/iou/request/step/withWritableReportOrNotFound.tsx @@ -18,9 +18,6 @@ type WithWritableReportOrNotFoundOnyxProps = { /** The report corresponding to the reportID in the route params */ report: OnyxEntry; - /** Whether the reports are loading. When false it means they are ready to be used. */ - isLoadingApp: OnyxEntry; - /** The draft report corresponding to the reportID in the route params */ reportDraft: OnyxEntry; }; @@ -90,7 +87,6 @@ export default function From edf4ee7e478cdf04a10912ba58d5cf2a4e2ce360 Mon Sep 17 00:00:00 2001 From: Abhinay Bathina Date: Tue, 24 Sep 2024 01:00:51 +0530 Subject: [PATCH 8/8] refactor: remove reportOrDraft variable and pass default value to canUserPerformWriteAction function only --- src/pages/iou/request/step/withWritableReportOrNotFound.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/pages/iou/request/step/withWritableReportOrNotFound.tsx b/src/pages/iou/request/step/withWritableReportOrNotFound.tsx index cd4dd4f93ba4..2361d58dc2be 100644 --- a/src/pages/iou/request/step/withWritableReportOrNotFound.tsx +++ b/src/pages/iou/request/step/withWritableReportOrNotFound.tsx @@ -57,17 +57,15 @@ export default function shouldIncludeDeprecatedIOUType || (type !== CONST.IOU.TYPE.REQUEST && type !== CONST.IOU.TYPE.SEND)) .includes(route.params?.iouType); const isEditing = 'action' in route.params && route.params?.action === CONST.IOU.ACTION.EDIT; - const canUserPerformWriteAction = ReportUtils.canUserPerformWriteAction(reportOrDefault); + const canUserPerformWriteAction = ReportUtils.canUserPerformWriteAction(report ?? {reportID: ''}); useEffect(() => { - if (!!reportOrDefault?.reportID || !route.params.reportID || !!reportDraft || !isEditing) { + if (!!report?.reportID || !route.params.reportID || !!reportDraft || !isEditing) { return; } ReportActions.openReport(route.params.reportID);