Skip to content

Commit

Permalink
Get the tabs working with navigation
Browse files Browse the repository at this point in the history
  • Loading branch information
@tgolen
tgolen committed Sep 25, 2023
1 parent 5622e0e commit 094cc2e
Show file tree
Hide file tree
Showing 10 changed files with 37 additions and 82 deletions.
5 changes: 5 additions & 0 deletions src/CONST.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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: {

This comment has been minimized.

Sign in to view

Copy link
@jjcoffee

jjcoffee Dec 21, 2023

Contributor

We missed a few cases where TAB_REQUEST should've been updated, which caused a regression in #32911.

This comment has been minimized.

Sign in to view

Copy link
@tgolen

tgolen via email Dec 21, 2023

Author Contributor
MANUAL: 'manual',
SCAN: 'scan',
DISTANCE: 'distance',
Expand Down
5 changes: 3 additions & 2 deletions src/ROUTES.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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<typeof CONST.IOU.MONEY_REQUEST_TYPE>, transactionID: string, field: MoneyRequestFields, reportID = '') => `${iouType}/${transactionID}/${field}/${reportID}`},
MONEE_REQUEST_START: { route: ':iouType/:transactionID/start/:reportID?', getRoute: (iouType: ValueOf<typeof CONST.IOU.MONEY_REQUEST_TYPE>, transactionID: string, reportID = '') => `${iouType}/${transactionID}/start/${reportID}`},
MONEE_REQUEST: { route: ':iouType/:transactionID/:field/:reportID?', getRoute: (iouType: ValueOf<typeof CONST.IOU.MONEY_REQUEST_TYPE>, transactionID: string, field: MoneyRequestFields, reportID = '') => `${iouType}/${transactionID}/${field}/${reportID}`},
MONEE_REQUEST_START: { route: ':iouType/:transactionID/start/:reportID?', getRoute: (iouType: ValueOf<typeof CONST.IOU.MONEY_REQUEST_TYPE>, transactionID: string, reportID = '') => `${iouType}/${transactionID}/start/${reportID}`},
MONEE_REQUEST_START_TAB: { route: ':iouType/:transactionID/start/:tabName/:reportID?', getRoute: (iouType: ValueOf<typeof CONST.IOU.MONEY_REQUEST_TYPE>, transactionID: string, tabName: ValueOf<typeof CONST.TAB_REQUEST>, reportID = '') => `${iouType}/${transactionID}/start/${tabName}/${reportID}`},

IOU_REQUEST: 'request/new',
IOU_SEND: 'send/new',
Expand Down
6 changes: 3 additions & 3 deletions src/components/TabSelector/TabSelector.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.`);
Expand Down
1 change: 1 addition & 0 deletions src/libs/Navigation/AppNavigator/ModalStackNavigators.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
4 changes: 4 additions & 0 deletions src/libs/Navigation/linkingConfig.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
4 changes: 2 additions & 2 deletions src/libs/actions/IOU.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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));
Expand Down
16 changes: 7 additions & 9 deletions src/pages/iou/create/CreateIOUStartPage.js
View file
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -42,7 +43,7 @@ const propTypes = {
};

const defaultProps = {
selectedTab: CONST.TAB.SCAN,
selectedTab: CONST.TAB_REQUEST.SCAN,
};

function CreateIOUStartPage({
Expand Down Expand Up @@ -82,7 +83,7 @@ function CreateIOUStartPage({
{({safeAreaPaddingBottomStyle}) => (
<FullPageNotFoundView shouldShow={!IOUUtils.isValidMoneyRequestType(iouType)}>
<DragAndDropProvider
isDisabled={selectedTab !== CONST.TAB.SCAN}
isDisabled={selectedTab !== CONST.TAB_REQUEST.SCAN}
setIsDraggingOver={setIsDraggingOver}
>
<View style={[styles.flex1, safeAreaPaddingBottomStyle]}>
Expand All @@ -105,25 +106,22 @@ function CreateIOUStartPage({
)}
>
<TopTab.Screen
name={CONST.TAB.MANUAL}
name={CONST.TAB_REQUEST.MANUAL}
component={CreateIOUStartTabManual}
initialParams={{reportID, iouType}}
/>
<TopTab.Screen
name={CONST.TAB.SCAN}
name={CONST.TAB_REQUEST.SCAN}
component={CreateIOUStartTabScan}
initialParams={{reportID, iouType, pageIndex: 1}}
/>
{shouldDisplayDistanceRequest && (
<TopTab.Screen
name={CONST.TAB.DISTANCE}
name={CONST.TAB_REQUEST.DISTANCE}
component={CreateIOUStartTabDistance}
initialParams={{reportID, iouType}}
/>
)}
</OnyxTabNavigator>
) : (
<CreateIOUStartTabManual route={route} />
<CreateIOUStartTabManual />
)}
</View>
</DragAndDropProvider>
Expand Down
26 changes: 4 additions & 22 deletions src/pages/iou/create/CreateIOUStartTabDistance.js
View file
Original file line number Diff line number Diff line change
@@ -1,38 +1,20 @@
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';
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;

Expand Down
26 changes: 4 additions & 22 deletions src/pages/iou/create/CreateIOUStartTabManual.js
View file
Original file line number Diff line number Diff line change
@@ -1,38 +1,20 @@
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';
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;

Expand Down
26 changes: 4 additions & 22 deletions src/pages/iou/create/CreateIOUStartTabScan.js
View file
Original file line number Diff line number Diff line change
@@ -1,38 +1,20 @@
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';
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;

Expand Down

0 comments on commit 094cc2e

Please sign in to comment.