scan tab, cleanups

src/pages/share/ScanTab.tsx

@@ -0,0 +1,71 @@
+import React, {useCallback, useRef} from 'react';
+import {withOnyx} from 'react-native-onyx';
+import type {OnyxEntry} from 'react-native-onyx';
+import * as IOU from '@libs/actions/IOU';
+import Navigation from '@libs/Navigation/Navigation';
+import * as ReportUtils from '@libs/ReportUtils';
+import MoneyRequestParticipantsSelector from '@pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import ROUTES from '@src/ROUTES';
+import type {Transaction} from '@src/types/onyx';
+import type {Participant} from '@src/types/onyx/IOU';
+
+type ScanTabOnyxProps = {
+    transaction?: OnyxEntry<Transaction>;
+};
+
+type ScanTabProps = ScanTabOnyxProps;
+
+// eslint-disable-next-line rulesdir/no-negated-variables
+function ScanTab({transaction}: ScanTabProps) {
+    const transactionID = CONST.IOU.OPTIMISTIC_TRANSACTION_ID;
+    const optimisticReportID = ReportUtils.generateReportID();
+    const selectedReportID = useRef(optimisticReportID);
+    const numberOfParticipants = useRef(transaction?.participants?.length);
+
+    const goToNextStep = useCallback(() => {
+        const nextStepIOUType = numberOfParticipants.current === 1 ? CONST.IOU.TYPE.REQUEST : CONST.IOU.TYPE.SPLIT;
+        IOU.initMoneyRequest(optimisticReportID, false, CONST.IOU.REQUEST_TYPE.SCAN);
+        IOU.setMoneyRequestTag(transactionID, '');
+        IOU.setMoneyRequestCategory(transactionID, '');
+        IOU.setMoneyRequestParticipants_temporaryForRefactor(transactionID, transaction?.participants ?? []);
+        Navigation.navigate(ROUTES.SHARE_SCAN_CONFIRM.getRoute(nextStepIOUType, transactionID, selectedReportID.current || optimisticReportID));
+    }, [transactionID, optimisticReportID]);
+
+    const addParticipant = useCallback(
+        (val: Participant[]) => {
+            IOU.setMoneyRequestParticipants_temporaryForRefactor(transactionID, val);
+            numberOfParticipants.current = val.length;
+
+            // When multiple participants are selected, the reportID is generated at the end of the confirmation step.
+            // So we are resetting selectedReportID ref to the reportID coming from params.
+            if (val.length !== 1) {
+                selectedReportID.current = optimisticReportID;
+                return;
+            }
+
+            // When a participant is selected, the reportID needs to be saved because that's the reportID that will be used in the confirmation step.
+            selectedReportID.current = val?.[0].reportID ?? optimisticReportID;
+        },
+        [optimisticReportID, transactionID],
+    );
+
+    return (
+        <MoneyRequestParticipantsSelector
+            participants={transaction?.participants ?? []}
+            onAddParticipants={addParticipant}
+            navigateToRequest={goToNextStep}
+            navigateToSplit={goToNextStep}
+            iouType={CONST.IOU.TYPE.REQUEST}
+            isScanRequest
+        />
+    );
+}
+
+export default withOnyx<ScanTabProps, ScanTabOnyxProps>({
+    // @ts-expect-error to fix
+    transaction: {
+        key: `${ONYXKEYS.COLLECTION.TRANSACTION_DRAFT}${CONST.IOU.OPTIMISTIC_TRANSACTION_ID}`,
+    },
+})(ScanTab);

src/pages/share/ShareRootPage.tsx

@@ -1,56 +1,42 @@
-import React, {useCallback, useEffect, useRef} from 'react';
+import React, {useEffect, useRef} from 'react';
 import type {AppStateStatus} from 'react-native';
 import {AppState, Platform, View} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
 import {withOnyx} from 'react-native-onyx';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
 import TabSelector from '@components/TabSelector/TabSelector';
+import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
-import * as IOU from '@libs/actions/IOU';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
-import * as ReportUtils from '@libs/ReportUtils';
 import Navigation from '@navigation/Navigation';
 import OnyxTabNavigator, {TopTab} from '@navigation/OnyxTabNavigator';
-import MoneyRequestParticipantsSelector from '@pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector';
 import CONST from '@src/CONST';
 import ShareActionHandlerModule from '@src/modules/ShareActionHandlerModule';
 import ONYXKEYS from '@src/ONYXKEYS';
-import ROUTES from '@src/ROUTES';
-import type {Report} from '@src/types/onyx';
+import ScanTab from './ScanTab';
 
 type ShareRootPageOnyxProps = {
     selectedTab: OnyxEntry<string>;
-
-    iou: OnyxEntry<Report>;
 };
 
 type ShareRootPageProps = ShareRootPageOnyxProps;
 
-function ShareRootPage({selectedTab, iou}: ShareRootPageProps) {
-    const transactionID = CONST.IOU.OPTIMISTIC_TRANSACTION_ID;
+function ShareRootPage({selectedTab}: ShareRootPageProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const fileIsScannable = false;
-    const optimisticReportID = ReportUtils.generateReportID();
-    const selectedReportID = useRef(optimisticReportID);
     const appState = useRef(AppState.currentState);
 
     const handleAppStateChange = (nextAppState: AppStateStatus) => {
         if (appState.current.match(/inactive|background/) && nextAppState === 'active') {
-            console.log('PROCESSED FILES ATTEMPT');
-
             ShareActionHandlerModule.processFiles((processedFiles) => {
                 // eslint-disable-next-line no-console
                 console.log('PROCESSED FILES ', processedFiles);
             });
         }
-        console.log('AppState', nextAppState);
-
         appState.current = nextAppState;
-        // eslint-disable-next-line no-console
-        console.log('AppState', appState.current);
     };
 
     useEffect(() => {
@@ -65,16 +51,6 @@ function ShareRootPage({selectedTab, iou}: ShareRootPageProps) {
         Navigation.dismissModal();
     };
 
-    const goToNextStep = useCallback(() => {
-        // const nextStepIOUType = numberOfParticipants.current === 1 ? CONST.IOU.TYPE.REQUEST : CONST.IOU.TYPE.SPLIT;
-        const nextStepIOUType = CONST.IOU.TYPE.REQUEST;
-        // IOU.startMoneyRequest_temporaryForRefactor(optimisticReportID, false, CONST.IOU.REQUEST_TYPE.SCAN);
-        IOU.setMoneyRequestTag(transactionID, '');
-        // IOU.resetMoneyRequestCategory_temporaryForRefactor(transactionID);
-        Navigation.navigate(ROUTES.SHARE_SCAN_CONFIRM.getRoute(nextStepIOUType, transactionID, selectedReportID.current || optimisticReportID));
-    }, [transactionID, optimisticReportID]);
-
-    console.log('share root page');
     return (
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
@@ -101,37 +77,18 @@ function ShareRootPage({selectedTab, iou}: ShareRootPageProps) {
                         />
                     )}
                 >
-                    <TopTab.Screen name={CONST.TAB.SHARE}>
-                        {() => (
-                            <MoneyRequestParticipantsSelector
-                                participants={iou?.participants ?? []}
-                                onAddParticipants={IOU.setMoneyRequestParticipants}
-                                onFinish={goToNextStep}
-                                navigateToRequest={goToNextStep}
-                                navigateToSplit={goToNextStep}
-                                iouType={CONST.IOU.TYPE.REQUEST}
-                                iouRequestType={CONST.IOU.REQUEST_TYPE.MANUAL}
-                            />
-                        )}
-                    </TopTab.Screen>
-                    <TopTab.Screen name={CONST.TAB.SCAN}>
-                        {() => (
-                            <MoneyRequestParticipantsSelector
-                                participants={iou?.participants ?? []}
-                                onAddParticipants={IOU.setMoneyRequestParticipants}
-                                onFinish={goToNextStep}
-                                navigateToRequest={goToNextStep}
-                                navigateToSplit={goToNextStep}
-                                iouType={CONST.IOU.TYPE.REQUEST}
-                                iouRequestType={CONST.IOU.REQUEST_TYPE.SCAN}
-                                isScanRequest
-                            />
-                        )}
-                    </TopTab.Screen>
+                    <TopTab.Screen name={CONST.TAB.SHARE}>{() => <Text>test</Text>}</TopTab.Screen>
+                    <TopTab.Screen name={CONST.TAB.SCAN}>{() => <ScanTab />}</TopTab.Screen>
                 </OnyxTabNavigator>
             </View>
         </ScreenWrapper>
     );
 }
 
-export default ShareRootPage;
+ShareRootPage.displayName = 'ShareRootPage';
+
+export default withOnyx<ShareRootPageProps, ShareRootPageOnyxProps>({
+    selectedTab: {
+        key: `${ONYXKEYS.COLLECTION.SELECTED_TAB}${CONST.TAB.RECEIPT_TAB_ID}`,
+    },
+})(ShareRootPage);