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.

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

DRY iou prop types and default props #25961

Merged
merged 8 commits into from
Aug 30, 2023
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
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
10 changes: 3 additions & 7 deletions src/pages/iou/IOUCurrencySelection.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import * as CurrencyUtils from '../../libs/CurrencyUtils';
import ROUTES from '../../ROUTES';
import themeColors from '../../styles/themes/default';
import * as Expensicons from '../../components/Icon/Expensicons';
import {iouPropTypes, iouDefaultProps} from './propTypes';

const greenCheckmark = {src: Expensicons.Checkmark, color: themeColors.success};

Expand Down Expand Up @@ -57,19 +58,14 @@ const propTypes = {
),

/** Holds data related to Money Request view state, rather than the underlying Money Request data. */
iou: PropTypes.shape({
/** Currency of the request */
currency: PropTypes.string,
}),
iou: iouPropTypes,

...withLocalizePropTypes,
};

const defaultProps = {
currencyList: {},
iou: {
currency: CONST.CURRENCY.USD,
},
iou: iouDefaultProps,
};

function IOUCurrencySelection(props) {
Expand Down
27 changes: 3 additions & 24 deletions src/pages/iou/MoneyRequestDatePage.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,28 +11,14 @@ import styles from '../../styles/styles';
import Navigation from '../../libs/Navigation/Navigation';
import ROUTES from '../../ROUTES';
import * as IOU from '../../libs/actions/IOU';
import optionPropTypes from '../../components/optionPropTypes';
import NewDatePicker from '../../components/NewDatePicker';
import useLocalize from '../../hooks/useLocalize';
import {iouPropTypes, iouDefaultProps} from './propTypes';

const propTypes = {
/** Onyx Props */
/** Holds data related to Money Request view state, rather than the underlying Money Request data. */
iou: PropTypes.shape({
/** ID (iouType + reportID) of the request */
id: PropTypes.string,

/** Amount of the request */
amount: PropTypes.number,

/** Description of the request */
comment: PropTypes.string,
created: PropTypes.string,

/** List of the participants */
participants: PropTypes.arrayOf(optionPropTypes),
receiptPath: PropTypes.string,
}),
iou: iouPropTypes,

/** Route from navigation */
route: PropTypes.shape({
Expand All @@ -54,14 +40,7 @@ const propTypes = {
};

const defaultProps = {
iou: {
id: '',
amount: 0,
comment: '',
created: '',
participants: [],
receiptPath: '',
},
iou: iouDefaultProps,
};

function MoneyRequestDatePage({iou, route}) {
Expand Down
25 changes: 3 additions & 22 deletions src/pages/iou/MoneyRequestDescriptionPage.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,27 +13,14 @@ import styles from '../../styles/styles';
import Navigation from '../../libs/Navigation/Navigation';
import ROUTES from '../../ROUTES';
import * as IOU from '../../libs/actions/IOU';
import optionPropTypes from '../../components/optionPropTypes';
import CONST from '../../CONST';
import useLocalize from '../../hooks/useLocalize';
import {iouPropTypes, iouDefaultProps} from './propTypes';

const propTypes = {
/** Onyx Props */
/** Holds data related to Money Request view state, rather than the underlying Money Request data. */
iou: PropTypes.shape({
/** ID (iouType + reportID) of the request */
id: PropTypes.string,

/** Amount of the request */
amount: PropTypes.number,

/** Description of the request */
comment: PropTypes.string,

/** List of the participants */
participants: PropTypes.arrayOf(optionPropTypes),
receiptPath: PropTypes.string,
}),
iou: iouPropTypes,

/** Route from navigation */
route: PropTypes.shape({
Expand All @@ -55,13 +42,7 @@ const propTypes = {
};

const defaultProps = {
iou: {
id: '',
amount: 0,
comment: '',
participants: [],
receiptPath: '',
},
iou: iouDefaultProps,
};

function MoneyRequestDescriptionPage({iou, route}) {
Expand Down
28 changes: 3 additions & 25 deletions src/pages/iou/MoneyRequestMerchantPage.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,29 +13,14 @@ import styles from '../../styles/styles';
import Navigation from '../../libs/Navigation/Navigation';
import ROUTES from '../../ROUTES';
import * as IOU from '../../libs/actions/IOU';
import optionPropTypes from '../../components/optionPropTypes';
import CONST from '../../CONST';
import useLocalize from '../../hooks/useLocalize';
import {iouPropTypes, iouDefaultProps} from './propTypes';

const propTypes = {
/** Onyx Props */
/** Holds data related to Money Request view state, rather than the underlying Money Request data. */
iou: PropTypes.shape({
/** ID (iouType + reportID) of the request */
id: PropTypes.string,

/** Amount of the request */
amount: PropTypes.number,

/** Description of the request */
comment: PropTypes.string,
created: PropTypes.string,
merchant: PropTypes.string,

/** List of the participants */
participants: PropTypes.arrayOf(optionPropTypes),
receiptPath: PropTypes.string,
}),
iou: iouPropTypes,

/** Route from navigation */
route: PropTypes.shape({
Expand All @@ -57,14 +42,7 @@ const propTypes = {
};

const defaultProps = {
iou: {
id: '',
amount: 0,
comment: '',
merchant: '',
participants: [],
receiptPath: '',
},
iou: iouDefaultProps,
};

function MoneyRequestMerchantPage({iou, route}) {
Expand Down
23 changes: 1 addition & 22 deletions src/pages/iou/MoneyRequestSelectorPage.js
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,8 @@ import DistanceRequestPage from './DistanceRequestPage';
import DragAndDropProvider from '../../components/DragAndDrop/Provider';
import usePermissions from '../../hooks/usePermissions';
import OnyxTabNavigator, {TopTab} from '../../libs/Navigation/OnyxTabNavigator';
import participantPropTypes from '../../components/participantPropTypes';
import NewRequestAmountPage from './steps/NewRequestAmountPage';
import {iouPropTypes, iouDefaultProps} from './propTypes';

const propTypes = {
/** React Navigation route */
Expand All @@ -35,32 +35,11 @@ const propTypes = {
}),
}).isRequired,

/** Holds data related to Money Request view state, rather than the underlying Money Request data. */
iou: PropTypes.shape({
/** ID (iouType + reportID) of the request */
id: PropTypes.string,

/** Amount of the request */
amount: PropTypes.number,

/** Currency of the request */
currency: PropTypes.string,

/** List of the participants */
participants: PropTypes.arrayOf(participantPropTypes),
}),

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I ran the lint locally and found that iou prop is not exist here

/** Which tab has been selected */
selectedTab: PropTypes.string,
};

const defaultProps = {
iou: {
id: '',
amount: 0,
currency: CONST.CURRENCY.USD,
participants: [],
},
selectedTab: CONST.TAB.MANUAL,
};

Expand Down
23 changes: 3 additions & 20 deletions src/pages/iou/ReceiptSelector/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import PropTypes from 'prop-types';
import {withOnyx} from 'react-native-onyx';
import * as IOU from '../../../libs/actions/IOU';
import reportPropTypes from '../../reportPropTypes';
import participantPropTypes from '../../../components/participantPropTypes';
import CONST from '../../../CONST';
import ReceiptUpload from '../../../../assets/images/receipt-upload.svg';
import PressableWithFeedback from '../../../components/Pressable/PressableWithFeedback';
Expand All @@ -21,6 +20,7 @@ import useWindowDimensions from '../../../hooks/useWindowDimensions';
import useLocalize from '../../../hooks/useLocalize';
import {DragAndDropContext} from '../../../components/DragAndDrop/Provider';
import * as ReceiptUtils from '../../../libs/ReceiptUtils';
import {iouPropTypes, iouDefaultProps} from '../propTypes';

const propTypes = {
/** Information shown to the user when a receipt is not valid */
Expand All @@ -46,19 +46,7 @@ const propTypes = {
}).isRequired,

/** Holds data related to Money Request view state, rather than the underlying Money Request data. */
iou: PropTypes.shape({
/** ID (iouType + reportID) of the request */
id: PropTypes.string,

/** Amount of the request */
amount: PropTypes.number,

/** Currency of the request */
currency: PropTypes.string,

/** List of the participants */
participants: PropTypes.arrayOf(participantPropTypes),
}),
iou: iouPropTypes,
};

const defaultProps = {
Expand All @@ -68,12 +56,7 @@ const defaultProps = {
attachmentInvalidReason: '',
},
report: {},
iou: {
id: '',
amount: 0,
currency: CONST.CURRENCY.USD,
participants: [],
},
iou: iouDefaultProps,
};

function ReceiptSelector(props) {
Expand Down
27 changes: 3 additions & 24 deletions src/pages/iou/ReceiptSelector/index.native.js
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ import Button from '../../../components/Button';
import useLocalize from '../../../hooks/useLocalize';
import ONYXKEYS from '../../../ONYXKEYS';
import Log from '../../../libs/Log';
import participantPropTypes from '../../../components/participantPropTypes';
import {iouPropTypes, iouDefaultProps} from '../propTypes';

const propTypes = {
/** React Navigation route */
Expand All @@ -39,33 +39,12 @@ const propTypes = {
report: reportPropTypes,

/** Holds data related to Money Request view state, rather than the underlying Money Request data. */
iou: PropTypes.shape({
/** ID (iouType + reportID) of the request */
id: PropTypes.string,

/** Amount of the request */
amount: PropTypes.number,

/** Description of the request */
comment: PropTypes.string,
created: PropTypes.string,
merchant: PropTypes.string,

/** List of the participants */
participants: PropTypes.arrayOf(participantPropTypes),
}),
iou: iouPropTypes,
};

const defaultProps = {
report: {},
iou: {
id: '',
amount: 0,
merchant: '',
created: '',
currency: CONST.CURRENCY.USD,
participants: [],
},
iou: iouDefaultProps,
};

/**
Expand Down
37 changes: 37 additions & 0 deletions src/pages/iou/propTypes/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
import PropTypes from 'prop-types';
import CONST from '../../../CONST';
import participantPropTypes from '../../../components/participantPropTypes';

const iouPropTypes = PropTypes.shape({
/** ID (iouType + reportID) of the request */
id: PropTypes.string,

/** Amount of the request */
amount: PropTypes.number,

/** Currency of the request */
currency: PropTypes.string,

/** Description of the request */
comment: PropTypes.string,

merchant: PropTypes.string,
created: PropTypes.string,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this one is "Date that the request was created"

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done. Any idea for the merchant?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can probably use the same description as transactionPropTypes.js which is:

/** The merchant name */

In the context of "manual request", the merchant doesn't really make much sense. It looks like we provide a "merchant" field, but never a description or directions on how to use it (from a consumer perspective).

image

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, I still don't understand what is merchant for haha. Updated the comment.

receiptPath: PropTypes.string,
bernhardoj marked this conversation as resolved.
Show resolved Hide resolved

/** List of the participants */
participants: PropTypes.arrayOf(participantPropTypes),
});

const iouDefaultProps = {
id: '',
amount: 0,
currency: CONST.CURRENCY.USD,
comment: '',
merchant: '',
created: '',
participants: [],
receiptPath: '',
};

export {iouPropTypes, iouDefaultProps};
Loading
Loading