Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[TS migration] Migrate IOURequestStepDescription and IOURequestStepDate pages to TypeScript #38995

Merged
merged 6 commits into from
Apr 2, 2024
Merged

[TS migration] Migrate IOURequestStepDescription and IOURequestStepDate pages to TypeScript #38995

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
b71feac
migrate step date
war-in Mar 26, 2024
85621d3
migrate IOURequestStepDescription
war-in Mar 26, 2024
9d8e8a1
add missing types
war-in Mar 27, 2024
ff173b4
Merge branch 'main' into ts/war-in/iou-request-step-desc-date
war-in Mar 27, 2024
fffd56b
fix wrong HOC order
war-in Mar 27, 2024
bbce2e0
review suggestions
war-in Mar 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 10 additions & 9 deletions src/libs/Navigation/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -336,47 +336,48 @@ type MoneyRequestNavigatorParamList = {
iouType: string;
reportID: string;
currency: string;
backTo: string;
backTo: Routes;
};
[SCREENS.MONEY_REQUEST.STEP_DATE]: {
action: ValueOf<typeof CONST.IOU.ACTION>;
iouType: ValueOf<typeof CONST.IOU.TYPE>;
transactionID: string;
reportID: string;
backTo: string;
backTo: Routes;
};
[SCREENS.MONEY_REQUEST.STEP_DESCRIPTION]: {
action: ValueOf<typeof CONST.IOU.ACTION>;
iouType: ValueOf<typeof CONST.IOU.TYPE>;
transactionID: string;
reportID: string;
backTo: string;
backTo: Routes;
reportActionID: string;
};
[SCREENS.MONEY_REQUEST.STEP_CATEGORY]: {
action: ValueOf<typeof CONST.IOU.ACTION>;
iouType: ValueOf<typeof CONST.IOU.TYPE>;
transactionID: string;
reportID: string;
backTo: string;
backTo: Routes;
};
[SCREENS.MONEY_REQUEST.STEP_TAX_AMOUNT]: {
iouType: string;
transactionID: string;
reportID: string;
backTo: string;
backTo: Routes;
};
[SCREENS.MONEY_REQUEST.STEP_TAG]: {
action: ValueOf<typeof CONST.IOU.ACTION>;
iouType: ValueOf<typeof CONST.IOU.TYPE>;
transactionID: string;
reportID: string;
backTo: string;
backTo: Routes;
};
[SCREENS.MONEY_REQUEST.STEP_TAX_RATE]: {
iouType: string;
transactionID: string;
reportID: string;
backTo: string;
backTo: Routes;
};
[SCREENS.MONEY_REQUEST.STEP_WAYPOINT]: {
iouType: ValueOf<typeof CONST.IOU.TYPE>;
Expand All @@ -391,7 +392,7 @@ type MoneyRequestNavigatorParamList = {
iouType: ValueOf<typeof CONST.IOU.TYPE>;
transactionID: string;
reportID: string;
backTo: string;
backTo: Routes;
};
[SCREENS.IOU_SEND.ENABLE_PAYMENTS]: undefined;
[SCREENS.IOU_SEND.ADD_BANK_ACCOUNT]: undefined;
Expand All @@ -407,7 +408,7 @@ type MoneyRequestNavigatorParamList = {
iouType: ValueOf<typeof CONST.IOU.TYPE>;
transactionID: string;
reportID: string;
backTo: string;
backTo: Routes;
};
[SCREENS.MONEY_REQUEST.RECEIPT]: {
iouType: string;
Expand Down
103 changes: 45 additions & 58 deletions ...es/iou/request/step/IOURequestStepDate.js → ...s/iou/request/step/IOURequestStepDate.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,58 +1,49 @@
import lodashGet from 'lodash/get';
import lodashIsEmpty from 'lodash/isEmpty';
import PropTypes from 'prop-types';
import React from 'react';
import type {OnyxEntry} from 'react-native-onyx';
import {withOnyx} from 'react-native-onyx';
import categoryPropTypes from '@components/categoryPropTypes';
import DatePicker from '@components/DatePicker';
import FormProvider from '@components/Form/FormProvider';
import InputWrapper from '@components/Form/InputWrapper';
import tagPropTypes from '@components/tagPropTypes';
import transactionPropTypes from '@components/transactionPropTypes';
import useLocalize from '@hooks/useLocalize';
import useThemeStyles from '@hooks/useThemeStyles';
import compose from '@libs/compose';
import * as IOUUtils from '@libs/IOUUtils';
import Navigation from '@libs/Navigation/Navigation';
import * as TransactionUtils from '@libs/TransactionUtils';
import * as IOU from '@userActions/IOU';
import CONST from '@src/CONST';
import ONYXKEYS from '@src/ONYXKEYS';
import {policyPropTypes} from '@src/pages/workspace/withPolicy';
import type SCREENS from '@src/SCREENS';
import INPUT_IDS from '@src/types/form/MoneyRequestDateForm';
import IOURequestStepRoutePropTypes from './IOURequestStepRoutePropTypes';
import type * as OnyxTypes from '@src/types/onyx';
import StepScreenWrapper from './StepScreenWrapper';
import withFullTransactionOrNotFound from './withFullTransactionOrNotFound';
import type {WithWritableReportOrNotFoundProps} from './withWritableReportOrNotFound';
import withWritableReportOrNotFound from './withWritableReportOrNotFound';

const propTypes = {
/** Navigation route context info provided by react navigation */
route: IOURequestStepRoutePropTypes.isRequired,

/** Onyx Props */
/** Holds data related to Money Request view state, rather than the underlying Money Request data. */
transaction: transactionPropTypes,
type MoneyRequestCreated = {
moneyRequestCreated: string;
};

type IOURequestStepDateOnyxProps = {
/** The draft transaction that holds data to be persisted on the current transaction */
splitDraftTransaction: transactionPropTypes,
splitDraftTransaction: OnyxEntry<OnyxTypes.Transaction>;

/** The policy of the report */
policy: policyPropTypes.policy,
policy: OnyxEntry<OnyxTypes.Policy>;

/** Collection of categories attached to a policy */
policyCategories: PropTypes.objectOf(categoryPropTypes),
policyCategories: OnyxEntry<OnyxTypes.PolicyCategories>;

/** Collection of tags attached to a policy */
policyTags: tagPropTypes,
policyTags: OnyxEntry<OnyxTypes.PolicyTagList>;
};

const defaultProps = {
transaction: {},
splitDraftTransaction: {},
policy: null,
policyTags: null,
policyCategories: null,
};
type IOURequestStepDateProps = IOURequestStepDateOnyxProps &
WithWritableReportOrNotFoundProps<typeof SCREENS.MONEY_REQUEST.STEP_WAYPOINT> & {
/** Holds data related to Money Request view state, rather than the underlying Money Request data. */
transaction: OnyxEntry<OnyxTypes.Transaction>;
};

function IOURequestStepDate({
route: {
Expand All @@ -63,7 +54,7 @@ function IOURequestStepDate({
policy,
policyTags,
policyCategories,
}) {
}: IOURequestStepDateProps) {
const styles = useThemeStyles();
const {translate} = useLocalize();
const isEditing = action === CONST.IOU.ACTION.EDIT;
Expand All @@ -75,11 +66,7 @@ function IOURequestStepDate({
Navigation.goBack(backTo);
};

/**
* @param {Object} value
* @param {String} value.moneyRequestCreated
*/
const updateDate = (value) => {
const updateDate = (value: MoneyRequestCreated) => {
const newCreated = value.moneyRequestCreated;

// Only update created if it has changed
Expand All @@ -90,15 +77,15 @@ function IOURequestStepDate({

// In the split flow, when editing we use SPLIT_TRANSACTION_DRAFT to save draft value
if (isEditingSplitBill) {
IOU.setDraftSplitTransaction(transaction.transactionID, {created: newCreated});
IOU.setDraftSplitTransaction(transaction?.transactionID ?? '0', {created: newCreated});
navigateBack();
return;
}

IOU.setMoneyRequestCreated(transaction.transactionID, newCreated, action === CONST.IOU.ACTION.CREATE);
IOU.setMoneyRequestCreated(transaction?.transactionID ?? '0', newCreated, action === CONST.IOU.ACTION.CREATE);

if (isEditing) {
IOU.updateMoneyRequestDate(transaction.transactionID, reportID, newCreated, policy, policyTags, policyCategories);
IOU.updateMoneyRequestDate(transaction?.transactionID ?? '0', reportID, newCreated, policy, policyTags, policyCategories);
}

navigateBack();
Expand All @@ -108,7 +95,7 @@ function IOURequestStepDate({
<StepScreenWrapper
headerTitle={translate('common.date')}
onBackButtonPress={navigateBack}
shouldShowNotFound={!IOUUtils.isValidMoneyRequestType(iouType)}
shouldShowNotFoundPage={!IOUUtils.isValidMoneyRequestType(iouType)}
shouldShowWrapper
testID={IOURequestStepDate.displayName}
>
Expand All @@ -132,28 +119,28 @@ function IOURequestStepDate({
);
}

IOURequestStepDate.propTypes = propTypes;
IOURequestStepDate.defaultProps = defaultProps;
IOURequestStepDate.displayName = 'IOURequestStepDate';

export default compose(
withWritableReportOrNotFound,
withFullTransactionOrNotFound,
withOnyx({
splitDraftTransaction: {
key: ({route}) => {
const transactionID = lodashGet(route, 'params.transactionID', 0);
return `${ONYXKEYS.COLLECTION.SPLIT_TRANSACTION_DRAFT}${transactionID}`;
},
},
policy: {
key: ({report}) => `${ONYXKEYS.COLLECTION.POLICY}${report ? report.policyID : '0'}`,
},
policyCategories: {
key: ({report}) => `${ONYXKEYS.COLLECTION.POLICY_CATEGORIES}${report ? report.policyID : '0'}`,
},
policyTags: {
key: ({report}) => `${ONYXKEYS.COLLECTION.POLICY_TAGS}${report ? report.policyID : '0'}`,
// eslint-disable-next-line rulesdir/no-negated-variables
const IOURequestStepDateWithWritableReportOrNotFound = withWritableReportOrNotFound(IOURequestStepDate);
// eslint-disable-next-line rulesdir/no-negated-variables
const IOURequestStepDateWithFullTransactionOrNotFound = withFullTransactionOrNotFound(IOURequestStepDateWithWritableReportOrNotFound);

export default withOnyx<IOURequestStepDateProps, IOURequestStepDateOnyxProps>({
splitDraftTransaction: {
key: ({route}) => {
const transactionID = route?.params.transactionID ?? 0;
return `${ONYXKEYS.COLLECTION.SPLIT_TRANSACTION_DRAFT}${transactionID}`;
},
}),
)(IOURequestStepDate);
},
policy: {
key: ({report}) => `${ONYXKEYS.COLLECTION.POLICY}${report ? report.policyID : '0'}`,
},
policyCategories: {
key: ({report}) => `${ONYXKEYS.COLLECTION.POLICY_CATEGORIES}${report ? report.policyID : '0'}`,
},
policyTags: {
key: ({report}) => `${ONYXKEYS.COLLECTION.POLICY_TAGS}${report ? report.policyID : '0'}`,
},
// @ts-expect-error TODO: Remove this once withFullTransactionOrNotFound (https://github.com/Expensify/App/issues/36123) is migrated to TypeScript.
})(IOURequestStepDateWithFullTransactionOrNotFound);
Loading
Loading