From 094cc2e79687467603fac2b7d44a9c234b5e7384 Mon Sep 17 00:00:00 2001 From: Tim Golen Date: Mon, 25 Sep 2023 17:26:14 +0800 Subject: [PATCH] Get the tabs working with navigation --- src/CONST.ts | 5 ++++ src/ROUTES.ts | 5 ++-- src/components/TabSelector/TabSelector.js | 6 ++--- .../AppNavigator/ModalStackNavigators.js | 1 + src/libs/Navigation/linkingConfig.js | 4 +++ src/libs/actions/IOU.js | 4 +-- src/pages/iou/create/CreateIOUStartPage.js | 16 +++++------- .../iou/create/CreateIOUStartTabDistance.js | 26 +++---------------- .../iou/create/CreateIOUStartTabManual.js | 26 +++---------------- src/pages/iou/create/CreateIOUStartTabScan.js | 26 +++---------------- 10 files changed, 37 insertions(+), 82 deletions(-) diff --git a/src/CONST.ts b/src/CONST.ts index 6a11c18ef46c..1178ef47bd02 100755 --- a/src/CONST.ts +++ b/src/CONST.ts @@ -2613,6 +2613,11 @@ const CONST = { NEW_CHAT: 'chat', NEW_ROOM: 'room', RECEIPT_TAB_ID: 'ReceiptTab', + MANUAL: 'manual', // @TODO remove + SCAN: 'scan', // @TODO remove + DISTANCE: 'distance', // @TODO remove + }, + TAB_REQUEST: { MANUAL: 'manual', SCAN: 'scan', DISTANCE: 'distance', diff --git a/src/ROUTES.ts b/src/ROUTES.ts index 4ef5958ecc05..f88abce2d56d 100644 --- a/src/ROUTES.ts +++ b/src/ROUTES.ts @@ -121,8 +121,9 @@ export default { MONEY_REQUEST_MANUAL_TAB: ':iouType/new/:reportID?/manual', MONEY_REQUEST_SCAN_TAB: ':iouType/new/:reportID?/scan', - MONEE_REQUEST: { route: ':iouType/:transactionID/:field/:reportID?', getRoute: (iouType: ValueOf, transactionID: string, field: MoneyRequestFields, reportID = '') => `${iouType}/${transactionID}/${field}/${reportID}`}, - MONEE_REQUEST_START: { route: ':iouType/:transactionID/start/:reportID?', getRoute: (iouType: ValueOf, transactionID: string, reportID = '') => `${iouType}/${transactionID}/start/${reportID}`}, + MONEE_REQUEST: { route: ':iouType/:transactionID/:field/:reportID?', getRoute: (iouType: ValueOf, transactionID: string, field: MoneyRequestFields, reportID = '') => `${iouType}/${transactionID}/${field}/${reportID}`}, + MONEE_REQUEST_START: { route: ':iouType/:transactionID/start/:reportID?', getRoute: (iouType: ValueOf, transactionID: string, reportID = '') => `${iouType}/${transactionID}/start/${reportID}`}, + MONEE_REQUEST_START_TAB: { route: ':iouType/:transactionID/start/:tabName/:reportID?', getRoute: (iouType: ValueOf, transactionID: string, tabName: ValueOf, reportID = '') => `${iouType}/${transactionID}/start/${tabName}/${reportID}`}, IOU_REQUEST: 'request/new', IOU_SEND: 'send/new', diff --git a/src/components/TabSelector/TabSelector.js b/src/components/TabSelector/TabSelector.js index 79cd1a6dd17d..36d017000959 100644 --- a/src/components/TabSelector/TabSelector.js +++ b/src/components/TabSelector/TabSelector.js @@ -38,15 +38,15 @@ const defaultProps = { const getIconAndTitle = (route, translate) => { switch (route) { - case CONST.TAB.MANUAL: + case CONST.TAB_REQUEST.MANUAL: return {icon: Expensicons.Pencil, title: translate('tabSelector.manual')}; - case CONST.TAB.SCAN: + case CONST.TAB_REQUEST.SCAN: return {icon: Expensicons.Receipt, title: translate('tabSelector.scan')}; case CONST.TAB.NEW_CHAT: return {icon: Expensicons.User, title: translate('tabSelector.chat')}; case CONST.TAB.NEW_ROOM: return {icon: Expensicons.Hashtag, title: translate('tabSelector.room')}; - case CONST.TAB.DISTANCE: + case CONST.TAB_REQUEST.DISTANCE: return {icon: Expensicons.Car, title: translate('common.distance')}; default: throw new Error(`Route ${route} has no icon nor title set.`); diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js index cb2ff1f4e503..23b030d87c11 100644 --- a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js +++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js @@ -34,6 +34,7 @@ function createModalStackNavigator(screens) { const MoneyRequestModalStackNavigator = createModalStackNavigator({ Monee_Request: () => require('../../../pages/iou/create/CreateIOUFieldPage').default, Monee_Request_Start: () => require('../../../pages/iou/create/CreateIOUStartPage').default, + Monee_Request_Start_Tab: () => require('../../../pages/iou/create/CreateIOUStartPage').default, Money_Request: () => require('../../../pages/iou/MoneyRequestSelectorPage').default, Money_Request_Amount: () => require('../../../pages/iou/steps/NewRequestAmountPage').default, Money_Request_Participants: () => require('../../../pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsPage').default, diff --git a/src/libs/Navigation/linkingConfig.js b/src/libs/Navigation/linkingConfig.js index 3a4df5b4af34..b1f9ed2b0b7a 100644 --- a/src/libs/Navigation/linkingConfig.js +++ b/src/libs/Navigation/linkingConfig.js @@ -305,6 +305,10 @@ export default { path: ROUTES.MONEE_REQUEST_START.route, exact: true, }, + Monee_Request_Start_Tabs: { + path: ROUTES.MONEE_REQUEST_START_TAB.route, + exact: true, + }, Money_Request: { path: ROUTES.MONEY_REQUEST.route, exact: true, diff --git a/src/libs/actions/IOU.js b/src/libs/actions/IOU.js index d3cbd7d5ea63..750787d3ee53 100644 --- a/src/libs/actions/IOU.js +++ b/src/libs/actions/IOU.js @@ -2122,8 +2122,8 @@ function startMoneeRequest(iouType, reportID = '') { // Generate a brand new transactionID const newTransactionID = NumberUtils.rand64(); - // Store the transaction in Onyx - Onyx.merge(`${ONYXKEYS.COLLECTION.TRANSACTION}${newTransactionID}`); + // Store the transaction in Onyx and mark it as not saved so it can be cleaned up later + Onyx.merge(`${ONYXKEYS.COLLECTION.TRANSACTION}${newTransactionID}`, {wasSaved: false}); // Navigate to it Navigation.navigate(ROUTES.MONEE_REQUEST_START.getRoute(iouType, newTransactionID, reportID)); diff --git a/src/pages/iou/create/CreateIOUStartPage.js b/src/pages/iou/create/CreateIOUStartPage.js index e53f46285e38..f3ab5c509cbe 100644 --- a/src/pages/iou/create/CreateIOUStartPage.js +++ b/src/pages/iou/create/CreateIOUStartPage.js @@ -1,3 +1,4 @@ +// @TODO cleanup - file was made from MoneyRequestSelectorPage import React, {useState} from 'react'; import {View} from 'react-native'; import PropTypes from 'prop-types'; @@ -42,7 +43,7 @@ const propTypes = { }; const defaultProps = { - selectedTab: CONST.TAB.SCAN, + selectedTab: CONST.TAB_REQUEST.SCAN, }; function CreateIOUStartPage({ @@ -82,7 +83,7 @@ function CreateIOUStartPage({ {({safeAreaPaddingBottomStyle}) => ( @@ -105,25 +106,22 @@ function CreateIOUStartPage({ )} > {shouldDisplayDistanceRequest && ( )} ) : ( - + )} diff --git a/src/pages/iou/create/CreateIOUStartTabDistance.js b/src/pages/iou/create/CreateIOUStartTabDistance.js index 3b09dd054582..64eb2db7d5b4 100644 --- a/src/pages/iou/create/CreateIOUStartTabDistance.js +++ b/src/pages/iou/create/CreateIOUStartTabDistance.js @@ -1,7 +1,7 @@ import React from 'react'; import {View, Text} from 'react-native'; -import PropTypes from 'prop-types'; import {withOnyx} from 'react-native-onyx'; +import {useRoute} from '@react-navigation/native'; import useLocalize from '../../../hooks/useLocalize'; import * as IOUUtils from '../../../libs/IOUUtils'; import FullPageNotFoundView from '../../../components/BlockingViews/FullPageNotFoundView'; @@ -9,30 +9,12 @@ import styles from '../../../styles/styles'; import HeaderWithBackButton from '../../../components/HeaderWithBackButton'; import ScreenWrapper from '../../../components/ScreenWrapper'; -const propTypes = { - /** React Navigation route */ - route: PropTypes.shape({ - /** Params from the route */ - params: PropTypes.shape({ - /** The type of IOU report, i.e. bill, request, send */ - iouType: PropTypes.string, - - /** The optimistic ID of a new transaction that is being created */ - transactionID: PropTypes.string.isRequired, - - /** The report ID of the IOU */ - reportID: PropTypes.string, - }), - }).isRequired, -}; +const propTypes = {}; const defaultProps = {}; -function CreateIOUStartTabDistance({ - route: { - params: {iouType}, - }, -}) { +function CreateIOUStartTabDistance() { + const {params: iouType, transactionID, reportID} = useRoute(); const {translate} = useLocalize(); const isEditing = false; diff --git a/src/pages/iou/create/CreateIOUStartTabManual.js b/src/pages/iou/create/CreateIOUStartTabManual.js index e6749ccc6ef5..c0fab7bccd92 100644 --- a/src/pages/iou/create/CreateIOUStartTabManual.js +++ b/src/pages/iou/create/CreateIOUStartTabManual.js @@ -1,7 +1,7 @@ import React from 'react'; import {View, Text} from 'react-native'; -import PropTypes from 'prop-types'; import {withOnyx} from 'react-native-onyx'; +import {useRoute} from '@react-navigation/native'; import useLocalize from '../../../hooks/useLocalize'; import * as IOUUtils from '../../../libs/IOUUtils'; import FullPageNotFoundView from '../../../components/BlockingViews/FullPageNotFoundView'; @@ -9,30 +9,12 @@ import styles from '../../../styles/styles'; import HeaderWithBackButton from '../../../components/HeaderWithBackButton'; import ScreenWrapper from '../../../components/ScreenWrapper'; -const propTypes = { - /** React Navigation route */ - route: PropTypes.shape({ - /** Params from the route */ - params: PropTypes.shape({ - /** The type of IOU report, i.e. bill, request, send */ - iouType: PropTypes.string, - - /** The optimistic ID of a new transaction that is being created */ - transactionID: PropTypes.string.isRequired, - - /** The report ID of the IOU */ - reportID: PropTypes.string, - }), - }).isRequired, -}; +const propTypes = {}; const defaultProps = {}; -function CreateIOUStartTabManual({ - route: { - params: {iouType}, - }, -}) { +function CreateIOUStartTabManual() { + const {params: iouType, transactionID, reportID} = useRoute(); const {translate} = useLocalize(); const isEditing = false; diff --git a/src/pages/iou/create/CreateIOUStartTabScan.js b/src/pages/iou/create/CreateIOUStartTabScan.js index c5a066507ec0..974ebaa5b37f 100644 --- a/src/pages/iou/create/CreateIOUStartTabScan.js +++ b/src/pages/iou/create/CreateIOUStartTabScan.js @@ -1,7 +1,7 @@ import React from 'react'; import {View, Text} from 'react-native'; -import PropTypes from 'prop-types'; import {withOnyx} from 'react-native-onyx'; +import {useRoute} from '@react-navigation/native'; import useLocalize from '../../../hooks/useLocalize'; import * as IOUUtils from '../../../libs/IOUUtils'; import FullPageNotFoundView from '../../../components/BlockingViews/FullPageNotFoundView'; @@ -9,30 +9,12 @@ import styles from '../../../styles/styles'; import HeaderWithBackButton from '../../../components/HeaderWithBackButton'; import ScreenWrapper from '../../../components/ScreenWrapper'; -const propTypes = { - /** React Navigation route */ - route: PropTypes.shape({ - /** Params from the route */ - params: PropTypes.shape({ - /** The type of IOU report, i.e. bill, request, send */ - iouType: PropTypes.string, - - /** The optimistic ID of a new transaction that is being created */ - transactionID: PropTypes.string.isRequired, - - /** The report ID of the IOU */ - reportID: PropTypes.string, - }), - }).isRequired, -}; +const propTypes = {}; const defaultProps = {}; -function CreateIOUStartTabScan({ - route: { - params: {iouType}, - }, -}) { +function CreateIOUStartTabScan() { + const {params: iouType, transactionID, reportID} = useRoute(); const {translate} = useLocalize(); const isEditing = false;