From 372c3482b596ee6697b14820b388131bde1795cc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?F=C3=A1bio=20Henriques?= Date: Mon, 23 Sep 2024 11:00:30 +0100 Subject: [PATCH 01/10] Migrate AccessOrNotFoundWrapper to useOnyx --- .../workspace/AccessOrNotFoundWrapper.tsx | 36 +++++++++---------- 1 file changed, 17 insertions(+), 19 deletions(-) diff --git a/src/pages/workspace/AccessOrNotFoundWrapper.tsx b/src/pages/workspace/AccessOrNotFoundWrapper.tsx index 1a6f59830506..fe82cdae4b3a 100644 --- a/src/pages/workspace/AccessOrNotFoundWrapper.tsx +++ b/src/pages/workspace/AccessOrNotFoundWrapper.tsx @@ -1,7 +1,7 @@ /* eslint-disable rulesdir/no-negated-variables */ -import React, {useEffect, useState} from 'react'; +import React, {useEffect, useMemo, useState} from 'react'; import type {OnyxCollection, OnyxEntry} from 'react-native-onyx'; -import {withOnyx} from 'react-native-onyx'; +import {useOnyx} from 'react-native-onyx'; import type {FullPageNotFoundViewProps} from '@components/BlockingViews/FullPageNotFoundView'; import FullscreenLoadingIndicator from '@components/FullscreenLoadingIndicator'; import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails'; @@ -43,7 +43,8 @@ const ACCESS_VARIANTS = { >; type AccessVariant = keyof typeof ACCESS_VARIANTS; -type AccessOrNotFoundWrapperOnyxProps = { + +type AccessOrNotFoundWrapperChildrenProps = { /** The report that holds the transaction */ report: OnyxEntry; @@ -54,9 +55,9 @@ type AccessOrNotFoundWrapperOnyxProps = { isLoadingReportData: OnyxEntry; }; -type AccessOrNotFoundWrapperProps = AccessOrNotFoundWrapperOnyxProps & { +type AccessOrNotFoundWrapperProps = { /** The children to render */ - children: ((props: AccessOrNotFoundWrapperOnyxProps) => React.ReactNode) | React.ReactNode; + children: ((props: AccessOrNotFoundWrapperChildrenProps) => React.ReactNode) | React.ReactNode; /** The id of the report that holds the transaction */ reportID?: string; @@ -103,12 +104,17 @@ function PageNotFoundFallback({policyID, shouldShowFullScreenFallback, fullPageN } function AccessOrNotFoundWrapper({accessVariants = [], fullPageNotFoundViewProps, shouldBeBlocked, ...props}: AccessOrNotFoundWrapperProps) { - const {policy, policyID, report, iouType, allPolicies, featureName, isLoadingReportData} = props; + const {reportID, policyID, iouType, allPolicies, featureName} = props; + + const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${reportID ?? '-1'}`); + const [policy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${policyID ?? '-1'}`); + const [isLoadingReportData] = useOnyx(ONYXKEYS.IS_LOADING_REPORT_DATA); + const {login = ''} = useCurrentUserPersonalDetails(); const isPolicyIDInRoute = !!policyID?.length; const isMoneyRequest = !!iouType && IOUUtils.isValidMoneyRequestType(iouType); const isFromGlobalCreate = isEmptyObject(report?.reportID); - const pendingField = featureName ? props.policy?.pendingFields?.[featureName] : undefined; + const pendingField = featureName ? policy?.pendingFields?.[featureName] : undefined; useEffect(() => { if (!isPolicyIDInRoute || !isEmptyObject(policy)) { @@ -145,6 +151,8 @@ function AccessOrNotFoundWrapper({accessVariants = [], fullPageNotFoundViewProps setIsPolicyFeatureEnabled(isFeatureEnabled); }, [pendingField, isOffline, isFeatureEnabled]); + const childrenProps = useMemo(() => ({report, policy, isLoadingReportData}), [report, policy, isLoadingReportData]); + if (shouldShowFullScreenLoadingIndicator) { return ; } @@ -160,19 +168,9 @@ function AccessOrNotFoundWrapper({accessVariants = [], fullPageNotFoundViewProps ); } - return callOrReturn(props.children, props); + return callOrReturn(props.children, childrenProps); } export type {AccessVariant}; -export default withOnyx({ - report: { - key: ({reportID}) => `${ONYXKEYS.COLLECTION.REPORT}${reportID}`, - }, - policy: { - key: ({policyID}) => `${ONYXKEYS.COLLECTION.POLICY}${policyID}`, - }, - isLoadingReportData: { - key: ONYXKEYS.IS_LOADING_REPORT_DATA, - }, -})(AccessOrNotFoundWrapper); +export default AccessOrNotFoundWrapper; From f6cc213deb435f987bc38dfefe6f00038b812bc8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?F=C3=A1bio=20Henriques?= Date: Mon, 23 Sep 2024 11:01:43 +0100 Subject: [PATCH 02/10] Migrate AttachmentPickerWithMenuItems to useOnyx --- .../AttachmentPickerWithMenuItems.tsx | 19 +++++-------------- 1 file changed, 5 insertions(+), 14 deletions(-) diff --git a/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.tsx b/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.tsx index 6e3c3a48de74..edc2a1341ecc 100644 --- a/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.tsx +++ b/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.tsx @@ -2,7 +2,7 @@ import {useIsFocused} from '@react-navigation/native'; import React, {useCallback, useEffect, useMemo} from 'react'; import {View} from 'react-native'; import type {OnyxEntry} from 'react-native-onyx'; -import {withOnyx} from 'react-native-onyx'; +import {useOnyx} from 'react-native-onyx'; import type {FileObject} from '@components/AttachmentModal'; import AttachmentPicker from '@components/AttachmentPicker'; import Icon from '@components/Icon'; @@ -33,12 +33,7 @@ import type * as OnyxTypes from '@src/types/onyx'; type MoneyRequestOptions = Record, PopoverMenuItem>; -type AttachmentPickerWithMenuItemsOnyxProps = { - /** The policy tied to the report */ - policy: OnyxEntry; -}; - -type AttachmentPickerWithMenuItemsProps = AttachmentPickerWithMenuItemsOnyxProps & { +type AttachmentPickerWithMenuItemsProps = { /** The report currently being looked at */ report: OnyxEntry; @@ -97,7 +92,6 @@ type AttachmentPickerWithMenuItemsProps = AttachmentPickerWithMenuItemsOnyxProps */ function AttachmentPickerWithMenuItems({ report, - policy, reportParticipantIDs, displayFileInModal, isFullComposerAvailable, @@ -115,6 +109,8 @@ function AttachmentPickerWithMenuItems({ actionButtonRef, raiseIsScrollLikelyLayoutTriggered, }: AttachmentPickerWithMenuItemsProps) { + const [policy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${report?.policyID ?? '-1'}`, {initialValue: {} as OnyxTypes.Policy}); + const isFocused = useIsFocused(); const theme = useTheme(); const styles = useThemeStyles(); @@ -336,9 +332,4 @@ function AttachmentPickerWithMenuItems({ AttachmentPickerWithMenuItems.displayName = 'AttachmentPickerWithMenuItems'; -export default withOnyx({ - policy: { - key: ({report}) => `${ONYXKEYS.COLLECTION.POLICY}${report?.policyID}`, - initialValue: {} as OnyxTypes.Policy, - }, -})(AttachmentPickerWithMenuItems); +export default AttachmentPickerWithMenuItems; From c8f031f1d68b8002986aab919ac6d308c48917e2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?F=C3=A1bio=20Henriques?= Date: Mon, 23 Sep 2024 11:04:28 +0100 Subject: [PATCH 03/10] Migrate FloatingActionButtonAndPopover to useOnyx --- .../FloatingActionButtonAndPopover.tsx | 85 +++---------------- 1 file changed, 14 insertions(+), 71 deletions(-) diff --git a/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.tsx b/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.tsx index 4444f519dbcd..62501f6d1caf 100644 --- a/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.tsx +++ b/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.tsx @@ -1,10 +1,10 @@ import {useIsFocused as useIsFocusedOriginal, useNavigationState} from '@react-navigation/native'; import type {ImageContentFit} from 'expo-image'; -import type {ForwardedRef, RefAttributes} from 'react'; +import type {ForwardedRef} from 'react'; import React, {forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react'; import {View} 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 {SvgProps} from 'react-native-svg'; import FloatingActionButton from '@components/FloatingActionButton'; import * as Expensicons from '@components/Icon/Expensicons'; @@ -50,33 +50,7 @@ const useIsFocused = () => { type PolicySelector = Pick; -type FloatingActionButtonAndPopoverOnyxProps = { - /** The list of policies the user has access to. */ - allPolicies: OnyxCollection; - - /** Whether app is in loading state */ - isLoading: OnyxEntry; - - /** Information on the last taken action to display as Quick Action */ - quickAction: OnyxEntry; - - /** The report data of the quick action */ - quickActionReport: OnyxEntry; - - /** The policy data of the quick action */ - quickActionPolicy: OnyxEntry; - - /** The current session */ - session: OnyxEntry; - - /** Personal details of all the users */ - personalDetails: OnyxEntry; - - /** Has user seen track expense training interstitial */ - hasSeenTrackTraining: OnyxEntry; -}; - -type FloatingActionButtonAndPopoverProps = FloatingActionButtonAndPopoverOnyxProps & { +type FloatingActionButtonAndPopoverProps = { /* Callback function when the menu is shown */ onShowCreateMenu?: () => void; @@ -160,21 +134,16 @@ const getQuickActionTitle = (action: QuickActionName): TranslationPaths => { * Responsible for rendering the {@link PopoverMenu}, and the accompanying * FAB that can open or close the menu. */ -function FloatingActionButtonAndPopover( - { - onHideCreateMenu, - onShowCreateMenu, - isLoading = false, - allPolicies, - quickAction, - quickActionReport, - quickActionPolicy, - session, - personalDetails, - hasSeenTrackTraining, - }: FloatingActionButtonAndPopoverProps, - ref: ForwardedRef, -) { +function FloatingActionButtonAndPopover({onHideCreateMenu, onShowCreateMenu}: FloatingActionButtonAndPopoverProps, ref: ForwardedRef) { + const [allPolicies] = useOnyx(ONYXKEYS.COLLECTION.POLICY, {selector: policySelector}); + const [isLoading = false] = useOnyx(ONYXKEYS.IS_LOADING_APP); + const [quickAction] = useOnyx(ONYXKEYS.NVP_QUICK_ACTION_GLOBAL_CREATE); + const [quickActionReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${quickAction?.chatReportID}`); + const [quickActionPolicy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${quickActionReport?.policyID}`); + const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST); + const [session] = useOnyx(ONYXKEYS.SESSION); + const [hasSeenTrackTraining] = useOnyx(ONYXKEYS.NVP_HAS_SEEN_TRACK_TRAINING); + const styles = useThemeStyles(); const {translate} = useLocalize(); const [reportNameValuePairs] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_NAME_VALUE_PAIRS}${quickActionReport?.reportID ?? -1}`); @@ -484,32 +453,6 @@ function FloatingActionButtonAndPopover( FloatingActionButtonAndPopover.displayName = 'FloatingActionButtonAndPopover'; -export default withOnyx, FloatingActionButtonAndPopoverOnyxProps>({ - allPolicies: { - key: ONYXKEYS.COLLECTION.POLICY, - selector: policySelector, - }, - isLoading: { - key: ONYXKEYS.IS_LOADING_APP, - }, - quickAction: { - key: ONYXKEYS.NVP_QUICK_ACTION_GLOBAL_CREATE, - }, - quickActionReport: { - key: ({quickAction}) => `${ONYXKEYS.COLLECTION.REPORT}${quickAction?.chatReportID}`, - }, - quickActionPolicy: { - key: ({quickActionReport}) => `${ONYXKEYS.COLLECTION.POLICY}${quickActionReport?.policyID}`, - }, - personalDetails: { - key: ONYXKEYS.PERSONAL_DETAILS_LIST, - }, - session: { - key: ONYXKEYS.SESSION, - }, - hasSeenTrackTraining: { - key: ONYXKEYS.NVP_HAS_SEEN_TRACK_TRAINING, - }, -})(forwardRef(FloatingActionButtonAndPopover)); +export default forwardRef(FloatingActionButtonAndPopover); export type {PolicySelector}; From 08ed6684dd42e6c947bc6e0027452fdf8c39b126 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?F=C3=A1bio=20Henriques?= Date: Mon, 23 Sep 2024 11:15:46 +0100 Subject: [PATCH 04/10] Migrate IOURequestStepAmount to useOnyx --- .../iou/request/step/IOURequestStepAmount.tsx | 62 +++---------------- 1 file changed, 9 insertions(+), 53 deletions(-) diff --git a/src/pages/iou/request/step/IOURequestStepAmount.tsx b/src/pages/iou/request/step/IOURequestStepAmount.tsx index a03c40e8c1f3..697c70fef583 100644 --- a/src/pages/iou/request/step/IOURequestStepAmount.tsx +++ b/src/pages/iou/request/step/IOURequestStepAmount.tsx @@ -1,7 +1,7 @@ import {useFocusEffect} from '@react-navigation/native'; import React, {useCallback, useEffect, useMemo, useRef} from 'react'; import type {OnyxEntry} from 'react-native-onyx'; -import {useOnyx, withOnyx} from 'react-native-onyx'; +import {useOnyx} from 'react-native-onyx'; import type {BaseTextInputRef} from '@components/TextInput/BaseTextInput/types'; import withCurrentUserPersonalDetails from '@components/withCurrentUserPersonalDetails'; import type {WithCurrentUserPersonalDetailsProps} from '@components/withCurrentUserPersonalDetails'; @@ -32,25 +32,7 @@ type AmountParams = { paymentMethod?: PaymentMethodType; }; -type IOURequestStepAmountOnyxProps = { - /** The draft transaction that holds data to be persisted on the current transaction */ - splitDraftTransaction: OnyxEntry; - - /** Whether the confirmation step should be skipped */ - skipConfirmation: OnyxEntry; - - /** The draft transaction object being modified in Onyx */ - draftTransaction: OnyxEntry; - - /** Personal details of all users */ - personalDetails: OnyxEntry; - - /** The policy which the user has access to and which the report is tied to */ - policy: OnyxEntry; -}; - -type IOURequestStepAmountProps = IOURequestStepAmountOnyxProps & - WithCurrentUserPersonalDetailsProps & +type IOURequestStepAmountProps = WithCurrentUserPersonalDetailsProps & WithWritableReportOrNotFoundProps & { /** The transaction object being modified in Onyx */ transaction: OnyxEntry; @@ -65,14 +47,15 @@ function IOURequestStepAmount({ params: {iouType, reportID, transactionID, backTo, action, currency: selectedCurrency = ''}, }, transaction, - policy, - personalDetails, currentUserPersonalDetails, - splitDraftTransaction, - skipConfirmation, - draftTransaction, shouldKeepUserInput = false, }: IOURequestStepAmountProps) { + const [splitDraftTransaction] = useOnyx(`${ONYXKEYS.COLLECTION.SPLIT_TRANSACTION_DRAFT}${transactionID ?? '-1'}`); + const [draftTransaction] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION_DRAFT}${transactionID ?? '0'}`); + const [skipConfirmation] = useOnyx(`${ONYXKEYS.COLLECTION.SKIP_CONFIRMATION}${transactionID ?? '-1'}`); + const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST); + const [policy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${report?.policyID ?? '-1'}`); + const {translate} = useLocalize(); const textInput = useRef(null); const focusTimeoutRef = useRef(null); @@ -330,34 +313,7 @@ function IOURequestStepAmount({ IOURequestStepAmount.displayName = 'IOURequestStepAmount'; -const IOURequestStepAmountWithOnyx = withOnyx({ - splitDraftTransaction: { - key: ({route}) => { - const transactionID = route.params.transactionID ?? -1; - return `${ONYXKEYS.COLLECTION.SPLIT_TRANSACTION_DRAFT}${transactionID}`; - }, - }, - draftTransaction: { - key: ({route}) => { - const transactionID = route.params.transactionID ?? 0; - return `${ONYXKEYS.COLLECTION.TRANSACTION_DRAFT}${transactionID}`; - }, - }, - skipConfirmation: { - key: ({route}) => { - const transactionID = route.params.transactionID ?? -1; - return `${ONYXKEYS.COLLECTION.SKIP_CONFIRMATION}${transactionID}`; - }, - }, - personalDetails: { - key: ONYXKEYS.PERSONAL_DETAILS_LIST, - }, - policy: { - key: ({report}) => `${ONYXKEYS.COLLECTION.POLICY}${report ? report.policyID : '-1'}`, - }, -})(IOURequestStepAmount); - -const IOURequestStepAmountWithCurrentUserPersonalDetails = withCurrentUserPersonalDetails(IOURequestStepAmountWithOnyx); +const IOURequestStepAmountWithCurrentUserPersonalDetails = withCurrentUserPersonalDetails(IOURequestStepAmount); // eslint-disable-next-line rulesdir/no-negated-variables const IOURequestStepAmountWithWritableReportOrNotFound = withWritableReportOrNotFound(IOURequestStepAmountWithCurrentUserPersonalDetails, true); // eslint-disable-next-line rulesdir/no-negated-variables From aef5b90b2a860d58db2001c610825bcf00d15a36 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?F=C3=A1bio=20Henriques?= Date: Mon, 23 Sep 2024 11:17:20 +0100 Subject: [PATCH 05/10] Migrate IOURequestStepDistance to useOnyx --- .../request/step/IOURequestStepDistance.tsx | 51 +++---------------- 1 file changed, 8 insertions(+), 43 deletions(-) diff --git a/src/pages/iou/request/step/IOURequestStepDistance.tsx b/src/pages/iou/request/step/IOURequestStepDistance.tsx index 14597df8e313..4b634e18c352 100644 --- a/src/pages/iou/request/step/IOURequestStepDistance.tsx +++ b/src/pages/iou/request/step/IOURequestStepDistance.tsx @@ -6,7 +6,7 @@ import {View} from 'react-native'; import type {ScrollView as RNScrollView} from 'react-native'; import type {RenderItemParams} from 'react-native-draggable-flatlist/lib/typescript/types'; import type {OnyxEntry} from 'react-native-onyx'; -import {useOnyx, withOnyx} from 'react-native-onyx'; +import {useOnyx} from 'react-native-onyx'; import Button from '@components/Button'; import DistanceRequestFooter from '@components/DistanceRequest/DistanceRequestFooter'; import DistanceRequestRenderItem from '@components/DistanceRequest/DistanceRequestRenderItem'; @@ -42,22 +42,7 @@ import withFullTransactionOrNotFound from './withFullTransactionOrNotFound'; import type {WithWritableReportOrNotFoundProps} from './withWritableReportOrNotFound'; import withWritableReportOrNotFound from './withWritableReportOrNotFound'; -type IOURequestStepDistanceOnyxProps = { - /** backup version of the original transaction */ - transactionBackup: OnyxEntry; - - /** The policy which the user has access to and which the report is tied to */ - policy: OnyxEntry; - - /** Personal details of all users */ - personalDetails: OnyxEntry; - - /** Whether the confirmation step should be skipped */ - skipConfirmation: OnyxEntry; -}; - -type IOURequestStepDistanceProps = IOURequestStepDistanceOnyxProps & - WithCurrentUserPersonalDetailsProps & +type IOURequestStepDistanceProps = WithCurrentUserPersonalDetailsProps & WithWritableReportOrNotFoundProps & { /** The transaction object being modified in Onyx */ transaction: OnyxEntry; @@ -65,16 +50,17 @@ type IOURequestStepDistanceProps = IOURequestStepDistanceOnyxProps & function IOURequestStepDistance({ report, - policy, route: { params: {action, iouType, reportID, transactionID, backTo}, }, transaction, - transactionBackup, - personalDetails, currentUserPersonalDetails, - skipConfirmation, }: IOURequestStepDistanceProps) { + const [transactionBackup] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION_BACKUP}${transactionID ?? '-1'}`); + const [policy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${report?.policyID ?? '-1'}`); + const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST); + const [skipConfirmation] = useOnyx(`${ONYXKEYS.COLLECTION.SKIP_CONFIRMATION}${transactionID ?? '-1'}`); + const styles = useThemeStyles(); const {isOffline} = useNetwork(); const {translate} = useLocalize(); @@ -520,28 +506,7 @@ function IOURequestStepDistance({ IOURequestStepDistance.displayName = 'IOURequestStepDistance'; -const IOURequestStepDistanceWithOnyx = withOnyx({ - transactionBackup: { - key: ({route}) => { - const transactionID = route.params.transactionID ?? -1; - return `${ONYXKEYS.COLLECTION.TRANSACTION_BACKUP}${transactionID}`; - }, - }, - policy: { - key: ({report}) => `${ONYXKEYS.COLLECTION.POLICY}${report ? report?.policyID : '-1'}`, - }, - personalDetails: { - key: ONYXKEYS.PERSONAL_DETAILS_LIST, - }, - skipConfirmation: { - key: ({route}) => { - const transactionID = route.params.transactionID ?? -1; - return `${ONYXKEYS.COLLECTION.SKIP_CONFIRMATION}${transactionID}`; - }, - }, -})(IOURequestStepDistance); - -const IOURequestStepDistanceWithCurrentUserPersonalDetails = withCurrentUserPersonalDetails(IOURequestStepDistanceWithOnyx); +const IOURequestStepDistanceWithCurrentUserPersonalDetails = withCurrentUserPersonalDetails(IOURequestStepDistance); // eslint-disable-next-line rulesdir/no-negated-variables const IOURequestStepDistanceWithWritableReportOrNotFound = withWritableReportOrNotFound(IOURequestStepDistanceWithCurrentUserPersonalDetails, true); // eslint-disable-next-line rulesdir/no-negated-variables From ff81d54c9b4f0322f7366876a5372396daca0341 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?F=C3=A1bio=20Henriques?= Date: Mon, 23 Sep 2024 11:18:57 +0100 Subject: [PATCH 06/10] Migrate IOURequestStepParticipants to useOnyx --- .../step/IOURequestStepParticipants.tsx | 25 ++++--------------- 1 file changed, 5 insertions(+), 20 deletions(-) diff --git a/src/pages/iou/request/step/IOURequestStepParticipants.tsx b/src/pages/iou/request/step/IOURequestStepParticipants.tsx index 552ad4d54e39..0ed638aa6004 100644 --- a/src/pages/iou/request/step/IOURequestStepParticipants.tsx +++ b/src/pages/iou/request/step/IOURequestStepParticipants.tsx @@ -1,7 +1,6 @@ import {useIsFocused} from '@react-navigation/core'; import React, {useCallback, useEffect, useMemo, useRef} from 'react'; -import type {OnyxEntry} from 'react-native-onyx'; -import {withOnyx} from 'react-native-onyx'; +import {useOnyx} from 'react-native-onyx'; import FormHelpMessage from '@components/FormHelpMessage'; import useLocalize from '@hooks/useLocalize'; import usePermissions from '@hooks/usePermissions'; @@ -26,13 +25,7 @@ import withFullTransactionOrNotFound from './withFullTransactionOrNotFound'; import type {WithWritableReportOrNotFoundProps} from './withWritableReportOrNotFound'; import withWritableReportOrNotFound from './withWritableReportOrNotFound'; -type IOURequestStepParticipantsOnyxProps = { - /** Whether the confirmation step should be skipped */ - skipConfirmation: OnyxEntry; -}; - -type IOURequestStepParticipantsProps = IOURequestStepParticipantsOnyxProps & - WithWritableReportOrNotFoundProps & +type IOURequestStepParticipantsProps = WithWritableReportOrNotFoundProps & WithFullTransactionOrNotFoundProps; function IOURequestStepParticipants({ @@ -40,8 +33,9 @@ function IOURequestStepParticipants({ params: {iouType, reportID, transactionID, action}, }, transaction, - skipConfirmation, }: IOURequestStepParticipantsProps) { + const [skipConfirmation] = useOnyx(`${ONYXKEYS.COLLECTION.SKIP_CONFIRMATION}${transactionID ?? '-1'}`); + const participants = transaction?.participants; const {translate} = useLocalize(); const styles = useThemeStyles(); @@ -183,13 +177,4 @@ function IOURequestStepParticipants({ IOURequestStepParticipants.displayName = 'IOURequestStepParticipants'; -const IOURequestStepParticipantsWithOnyx = withOnyx({ - skipConfirmation: { - key: ({route}) => { - const transactionID = route.params.transactionID ?? -1; - return `${ONYXKEYS.COLLECTION.SKIP_CONFIRMATION}${transactionID}`; - }, - }, -})(IOURequestStepParticipants); - -export default withWritableReportOrNotFound(withFullTransactionOrNotFound(IOURequestStepParticipantsWithOnyx)); +export default withWritableReportOrNotFound(withFullTransactionOrNotFound(IOURequestStepParticipants)); From 9a807a3c0d984413355b4fec31178c472bb96788 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?F=C3=A1bio=20Henriques?= Date: Mon, 23 Sep 2024 11:22:36 +0100 Subject: [PATCH 07/10] Migrate IOURequestStepScan to useOnyx --- .../step/IOURequestStepScan/index.native.tsx | 33 +++++-------------- .../request/step/IOURequestStepScan/index.tsx | 28 ++++------------ .../request/step/IOURequestStepScan/types.ts | 18 ++-------- 3 files changed, 17 insertions(+), 62 deletions(-) diff --git a/src/pages/iou/request/step/IOURequestStepScan/index.native.tsx b/src/pages/iou/request/step/IOURequestStepScan/index.native.tsx index 05ebdc1dfc62..cea02997320e 100644 --- a/src/pages/iou/request/step/IOURequestStepScan/index.native.tsx +++ b/src/pages/iou/request/step/IOURequestStepScan/index.native.tsx @@ -3,7 +3,7 @@ import {Str} from 'expensify-common'; import React, {useCallback, useMemo, useRef, useState} from 'react'; import {ActivityIndicator, Alert, AppState, InteractionManager, View} from 'react-native'; import {Gesture, GestureDetector} from 'react-native-gesture-handler'; -import {useOnyx, withOnyx} from 'react-native-onyx'; +import {useOnyx} from 'react-native-onyx'; import {RESULTS} from 'react-native-permissions'; import Animated, {runOnJS, useAnimatedStyle, useSharedValue, withDelay, withSequence, withSpring, withTiming} from 'react-native-reanimated'; import type {Camera, PhotoFile, Point} from 'react-native-vision-camera'; @@ -43,20 +43,21 @@ import ROUTES from '@src/ROUTES'; import type {Receipt} from '@src/types/onyx/Transaction'; import CameraPermission from './CameraPermission'; import NavigationAwareCamera from './NavigationAwareCamera/Camera'; -import type {IOURequestStepOnyxProps, IOURequestStepScanProps} from './types'; +import type IOURequestStepScanProps from './types'; function IOURequestStepScan({ report, - policy, - user, route: { params: {action, iouType, reportID, transactionID, backTo}, }, transaction, - personalDetails, currentUserPersonalDetails, - skipConfirmation, }: IOURequestStepScanProps) { + const [policy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${report?.policyID ?? '-1'}`); + const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST); + const [skipConfirmation] = useOnyx(`${ONYXKEYS.COLLECTION.SKIP_CONFIRMATION}${transactionID ?? '-1'}`); + const [user] = useOnyx(ONYXKEYS.USER); + const theme = useTheme(); const styles = useThemeStyles(); const device = useCameraDevice('back', { @@ -606,25 +607,7 @@ function IOURequestStepScan({ IOURequestStepScan.displayName = 'IOURequestStepScan'; -const IOURequestStepScanWithOnyx = withOnyx({ - policy: { - key: ({report}) => `${ONYXKEYS.COLLECTION.POLICY}${report ? report.policyID : '-1'}`, - }, - personalDetails: { - key: ONYXKEYS.PERSONAL_DETAILS_LIST, - }, - skipConfirmation: { - key: ({route}) => { - const transactionID = route.params.transactionID ?? -1; - return `${ONYXKEYS.COLLECTION.SKIP_CONFIRMATION}${transactionID}`; - }, - }, - user: { - key: ONYXKEYS.USER, - }, -})(IOURequestStepScan); - -const IOURequestStepScanWithCurrentUserPersonalDetails = withCurrentUserPersonalDetails(IOURequestStepScanWithOnyx); +const IOURequestStepScanWithCurrentUserPersonalDetails = withCurrentUserPersonalDetails(IOURequestStepScan); // eslint-disable-next-line rulesdir/no-negated-variables const IOURequestStepScanWithWritableReportOrNotFound = withWritableReportOrNotFound(IOURequestStepScanWithCurrentUserPersonalDetails, true); // eslint-disable-next-line rulesdir/no-negated-variables diff --git a/src/pages/iou/request/step/IOURequestStepScan/index.tsx b/src/pages/iou/request/step/IOURequestStepScan/index.tsx index 58f20b281937..80095538ce6e 100644 --- a/src/pages/iou/request/step/IOURequestStepScan/index.tsx +++ b/src/pages/iou/request/step/IOURequestStepScan/index.tsx @@ -1,7 +1,7 @@ import {Str} from 'expensify-common'; import React, {useCallback, useContext, useEffect, useMemo, useReducer, useRef, useState} from 'react'; import {ActivityIndicator, PanResponder, PixelRatio, View} from 'react-native'; -import {useOnyx, withOnyx} from 'react-native-onyx'; +import {useOnyx} from 'react-native-onyx'; import type Webcam from 'react-webcam'; import type {TupleToUnion} from 'type-fest'; import Hand from '@assets/images/hand.svg'; @@ -45,19 +45,20 @@ import ROUTES from '@src/ROUTES'; import type {Receipt} from '@src/types/onyx/Transaction'; import {isEmptyObject} from '@src/types/utils/EmptyObject'; import NavigationAwareCamera from './NavigationAwareCamera/WebCamera'; -import type {IOURequestStepOnyxProps, IOURequestStepScanProps} from './types'; +import type IOURequestStepScanProps from './types'; function IOURequestStepScan({ report, - policy, route: { params: {action, iouType, reportID, transactionID, backTo}, }, transaction, - personalDetails, currentUserPersonalDetails, - skipConfirmation, }: Omit) { + const [policy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${report?.policyID ?? '-1'}`); + const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST); + const [skipConfirmation] = useOnyx(`${ONYXKEYS.COLLECTION.SKIP_CONFIRMATION}${transactionID ?? '-1'}`); + const theme = useTheme(); const styles = useThemeStyles(); @@ -731,22 +732,7 @@ function IOURequestStepScan({ IOURequestStepScan.displayName = 'IOURequestStepScan'; -const IOURequestStepScanWithOnyx = withOnyx, Omit>({ - policy: { - key: ({report}) => `${ONYXKEYS.COLLECTION.POLICY}${report ? report.policyID : '-1'}`, - }, - personalDetails: { - key: ONYXKEYS.PERSONAL_DETAILS_LIST, - }, - skipConfirmation: { - key: ({route}) => { - const transactionID = route.params.transactionID ?? -1; - return `${ONYXKEYS.COLLECTION.SKIP_CONFIRMATION}${transactionID}`; - }, - }, -})(IOURequestStepScan); - -const IOURequestStepScanWithCurrentUserPersonalDetails = withCurrentUserPersonalDetails(IOURequestStepScanWithOnyx); +const IOURequestStepScanWithCurrentUserPersonalDetails = withCurrentUserPersonalDetails(IOURequestStepScan); // eslint-disable-next-line rulesdir/no-negated-variables const IOURequestStepScanWithWritableReportOrNotFound = withWritableReportOrNotFound(IOURequestStepScanWithCurrentUserPersonalDetails, true); // eslint-disable-next-line rulesdir/no-negated-variables diff --git a/src/pages/iou/request/step/IOURequestStepScan/types.ts b/src/pages/iou/request/step/IOURequestStepScan/types.ts index 0b130a795073..88cef86dbc43 100644 --- a/src/pages/iou/request/step/IOURequestStepScan/types.ts +++ b/src/pages/iou/request/step/IOURequestStepScan/types.ts @@ -4,24 +4,10 @@ import type {WithWritableReportOrNotFoundProps} from '@pages/iou/request/step/wi import type SCREENS from '@src/SCREENS'; import type * as OnyxTypes from '@src/types/onyx'; -type IOURequestStepOnyxProps = { - user: OnyxEntry; - - /** Personal details of all users */ - personalDetails: OnyxEntry; - - /** The policy which the user has access to and which the report is tied to */ - policy: OnyxEntry; - - /** Whether the confirmation step should be skipped */ - skipConfirmation: OnyxEntry; -}; - -type IOURequestStepScanProps = IOURequestStepOnyxProps & - WithCurrentUserPersonalDetailsProps & +type IOURequestStepScanProps = WithCurrentUserPersonalDetailsProps & WithWritableReportOrNotFoundProps & { /** Holds data related to Money Request view state, rather than the underlying Money Request data. */ transaction: OnyxEntry; }; -export type {IOURequestStepOnyxProps, IOURequestStepScanProps}; +export default IOURequestStepScanProps; From e078baf524a797d07b600d8080070c27b03076fe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?F=C3=A1bio=20Henriques?= Date: Mon, 23 Sep 2024 11:24:31 +0100 Subject: [PATCH 08/10] Migrate ReportWelcomeText to useOnyx --- src/components/ReportWelcomeText.tsx | 21 +++++++-------------- 1 file changed, 7 insertions(+), 14 deletions(-) diff --git a/src/components/ReportWelcomeText.tsx b/src/components/ReportWelcomeText.tsx index 96f705ea2d52..1061cd2678e9 100644 --- a/src/components/ReportWelcomeText.tsx +++ b/src/components/ReportWelcomeText.tsx @@ -1,7 +1,7 @@ import React, {useMemo} from 'react'; import {View} from 'react-native'; import type {OnyxEntry} from 'react-native-onyx'; -import {withOnyx} from 'react-native-onyx'; +import {useOnyx} from 'react-native-onyx'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import Navigation from '@libs/Navigation/Navigation'; @@ -12,18 +12,13 @@ import CONST from '@src/CONST'; import type {IOUType} from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; -import type {PersonalDetailsList, Policy, Report} from '@src/types/onyx'; +import type {Policy, Report} from '@src/types/onyx'; import {PressableWithoutFeedback} from './Pressable'; import RenderHTML from './RenderHTML'; import Text from './Text'; import UserDetailsTooltip from './UserDetailsTooltip'; -type ReportWelcomeTextOnyxProps = { - /** All of the personal details for everyone */ - personalDetails: OnyxEntry; -}; - -type ReportWelcomeTextProps = ReportWelcomeTextOnyxProps & { +type ReportWelcomeTextProps = { /** The report currently being looked at */ report: OnyxEntry; @@ -31,7 +26,9 @@ type ReportWelcomeTextProps = ReportWelcomeTextOnyxProps & { policy: OnyxEntry; }; -function ReportWelcomeText({report, policy, personalDetails}: ReportWelcomeTextProps) { +function ReportWelcomeText({report, policy}: ReportWelcomeTextProps) { + const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST); + const {translate} = useLocalize(); const styles = useThemeStyles(); const isPolicyExpenseChat = ReportUtils.isPolicyExpenseChat(report); @@ -185,8 +182,4 @@ function ReportWelcomeText({report, policy, personalDetails}: ReportWelcomeTextP ReportWelcomeText.displayName = 'ReportWelcomeText'; -export default withOnyx({ - personalDetails: { - key: ONYXKEYS.PERSONAL_DETAILS_LIST, - }, -})(ReportWelcomeText); +export default ReportWelcomeText; From 277fea0e835a8df22a27288c575f509b5402c1a5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?F=C3=A1bio=20Henriques?= Date: Thu, 3 Oct 2024 09:18:50 +0100 Subject: [PATCH 09/10] Minor adjustment --- .../sidebar/SidebarScreen/FloatingActionButtonAndPopover.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.tsx b/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.tsx index a353e84fbb11..e79f40c61145 100644 --- a/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.tsx +++ b/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.tsx @@ -139,8 +139,8 @@ function FloatingActionButtonAndPopover({onHideCreateMenu, onShowCreateMenu}: Fl const [allPolicies] = useOnyx(ONYXKEYS.COLLECTION.POLICY, {selector: policySelector}); const [isLoading = false] = useOnyx(ONYXKEYS.IS_LOADING_APP); const [quickAction] = useOnyx(ONYXKEYS.NVP_QUICK_ACTION_GLOBAL_CREATE); - const [quickActionReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${quickAction?.chatReportID}`); - const [quickActionPolicy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${quickActionReport?.policyID}`); + const [quickActionReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${quickAction?.chatReportID ?? '-1'}`); + const [quickActionPolicy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${quickActionReport?.policyID ?? '-1'}`); const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST); const [session] = useOnyx(ONYXKEYS.SESSION); const [hasSeenTrackTraining] = useOnyx(ONYXKEYS.NVP_HAS_SEEN_TRACK_TRAINING); From cfe2ce30117d782d546be4edd72ca5a22b23a796 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?F=C3=A1bio=20Henriques?= Date: Fri, 11 Oct 2024 17:59:23 +0100 Subject: [PATCH 10/10] Fix FloatingActionButtonAndPopover to use mapOnyxCollectionItems --- .../sidebar/SidebarScreen/FloatingActionButtonAndPopover.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.tsx b/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.tsx index e79f40c61145..fd5eadd10b79 100644 --- a/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.tsx +++ b/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.tsx @@ -39,6 +39,7 @@ import SCREENS from '@src/SCREENS'; import type * as OnyxTypes from '@src/types/onyx'; import type {QuickActionName} from '@src/types/onyx/QuickAction'; import {isEmptyObject} from '@src/types/utils/EmptyObject'; +import mapOnyxCollectionItems from '@src/utils/mapOnyxCollectionItems'; // On small screen we hide the search page from central pane to show the search bottom tab page with bottom tab bar. // We need to take this in consideration when checking if the screen is focused. @@ -136,7 +137,7 @@ const getQuickActionTitle = (action: QuickActionName): TranslationPaths => { * FAB that can open or close the menu. */ function FloatingActionButtonAndPopover({onHideCreateMenu, onShowCreateMenu}: FloatingActionButtonAndPopoverProps, ref: ForwardedRef) { - const [allPolicies] = useOnyx(ONYXKEYS.COLLECTION.POLICY, {selector: policySelector}); + const [allPolicies] = useOnyx(ONYXKEYS.COLLECTION.POLICY, {selector: (c) => mapOnyxCollectionItems(c, policySelector)}); const [isLoading = false] = useOnyx(ONYXKEYS.IS_LOADING_APP); const [quickAction] = useOnyx(ONYXKEYS.NVP_QUICK_ACTION_GLOBAL_CREATE); const [quickActionReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${quickAction?.chatReportID ?? '-1'}`);