Skip to content

Commit

Permalink
refactor functions to consts
Browse files Browse the repository at this point in the history
  • Loading branch information
@luacmartins
luacmartins committed May 24, 2023
1 parent b03b92d commit 7e21fc7
Showing 1 changed file with 14 additions and 41 deletions.
55 changes: 14 additions & 41 deletions src/components/MoneyRequestConfirmationList.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,7 @@ function MoneyRequestConfirmationList(props) {
* @param {Array} participants
* @returns {Array}
*/
const getParticipantsWithAmount = useMemo(
const getParticipantsWithAmount = useCallback(
(participants) => {
const iouAmount = IOUUtils.calculateAmount(participants.length, props.iouAmount);
return OptionsListUtils.getIOUConfirmationOptionsFromParticipants(participants, CurrencyUtils.convertToDisplayString(iouAmount, props.iou.selectedCurrencyCode));
Expand All @@ -110,11 +110,7 @@ function MoneyRequestConfirmationList(props) {
const [participants, setParticipants] = useState(formattedParticipants);
const [didConfirm, setDidConfirm] = useState(false);

/**
* Get the confirmation button options
* @returns {Array}
*/
const getSplitOrRequestOptions = useMemo(() => {
const splitOrRequestOptions = useMemo(() => {
const text = props.translate(props.hasMultipleParticipants ? 'iou.splitAmount' : 'iou.requestAmount', {
amount: CurrencyUtils.convertToDisplayString(props.iouAmount, props.iou.selectedCurrencyCode),
});
Expand All @@ -126,36 +122,20 @@ function MoneyRequestConfirmationList(props) {
];
}, [props.hasMultipleParticipants, props.iouAmount, props.iou.selectedCurrencyCode, props.translate]);

/**
* Get selected participants
* @returns {Array}
*/
const getSelectedParticipants = useMemo(() => _.filter(participants, (participant) => participant.selected), [participants]);

/**
* Get unselected participants
* @returns {Array}
*/
const getUnselectedParticipants = useMemo(() => _.filter(participants, (participant) => !participant.selected), [participants]);
const selectedParticipants = useMemo(() => _.filter(participants, (participant) => participant.selected), [participants]);
const unselectedParticipants = useMemo(() => _.filter(participants, (participant) => !participant.selected), [participants]);

/**
* Returns the participants without amount
*
* @param {Array} participants
* @returns {Array}
*/
const getParticipantsWithoutAmount = useMemo((participantsList) => _.map(participantsList, (option) => _.omit(option, 'descriptiveText')), []);
const getParticipantsWithoutAmount = useCallback((participantsList) => _.map(participantsList, (option) => _.omit(option, 'descriptiveText')), []);

This comment has been minimized.

Sign in to view

Copy link
@aldo-expensify

aldo-expensify Jun 20, 2023

Contributor

getParticipantsWithoutAmount doesn't use any prop or state, I think it would have been simpler/better to just define it outside the component.

/**
* Returns the sections needed for the OptionsSelector
* @returns {Array}
*/
const getSections = useMemo(() => {
const optionSelectorSections = useMemo(() => {
const sections = [];
if (props.hasMultipleParticipants) {
const selectedParticipants = getSelectedParticipants();
const unselectedParticipants = getUnselectedParticipants();

const formattedSelectedParticipants = getParticipantsWithAmount(selectedParticipants);
const formattedUnselectedParticipants = getParticipantsWithoutAmount(unselectedParticipants);
const formattedParticipantsList = _.union(formattedSelectedParticipants, formattedUnselectedParticipants);
Expand Down Expand Up @@ -192,8 +172,8 @@ function MoneyRequestConfirmationList(props) {
}
return sections;
}, [
getSelectedParticipants,
getUnselectedParticipants,
selectedParticipants,
unselectedParticipants,
getParticipantsWithAmount,
getParticipantsWithoutAmount,
props.hasMultipleParticipants,
Expand All @@ -204,17 +184,12 @@ function MoneyRequestConfirmationList(props) {
props.translate,
]);

/**
* Returns selected options -- there is checkmark for every row in List for split flow
* @returns {Array}
*/
const getSelectedOptions = useMemo(() => {
const selectedOptions = useMemo(() => {
if (!props.hasMultipleParticipants) {
return [];
}
const selectedParticipants = getSelectedParticipants();
return [...selectedParticipants, OptionsListUtils.getIOUConfirmationOptionsFromMyPersonalDetail(props.currentUserPersonalDetails)];
}, [getSelectedParticipants, props.hasMultipleParticipants, props.currentUserPersonalDetails]);
}, [selectedParticipants, props.hasMultipleParticipants, props.currentUserPersonalDetails]);

/**
* Toggle selected option's selected prop.
Expand Down Expand Up @@ -247,7 +222,6 @@ function MoneyRequestConfirmationList(props) {
(paymentMethod) => {
setDidConfirm(true);

const selectedParticipants = getSelectedParticipants();
if (_.isEmpty(selectedParticipants)) {
return;
}
Expand All @@ -263,10 +237,9 @@ function MoneyRequestConfirmationList(props) {
props.onConfirm(selectedParticipants);
}
},
[getSelectedParticipants, props.iouType, props.onSendMoney, props.onConfirm],
[selectedParticipants, props.iouType, props.onSendMoney, props.onConfirm],
);

const selectedParticipants = getSelectedParticipants();
const shouldShowSettlementButton = props.iouType === CONST.IOU.MONEY_REQUEST_TYPE.SEND;
const shouldDisableButton = selectedParticipants.length === 0;
const recipient = participants[0];
Expand All @@ -275,11 +248,11 @@ function MoneyRequestConfirmationList(props) {

return (
<OptionsSelector
sections={getSections()}
sections={optionSelectorSections}
value=""
onSelectRow={canModifyParticipants ? toggleOption : undefined}
onConfirmSelection={confirm}
selectedOptions={getSelectedOptions()}
selectedOptions={selectedOptions}
canSelectMultipleOptions={canModifyParticipants}
disableArrowKeysActions={!canModifyParticipants}
isDisabled={!canModifyParticipants}
Expand All @@ -304,7 +277,7 @@ function MoneyRequestConfirmationList(props) {
<ButtonWithDropdownMenu
isDisabled={shouldDisableButton}
onPress={(_event, value) => confirm(value)}
options={getSplitOrRequestOptions()}
options={splitOrRequestOptions}
/>
)
}
Expand Down

0 comments on commit 7e21fc7

Please sign in to comment.