From 5a10676f01dfebd20e4f69a379bfbb2be9b706a8 Mon Sep 17 00:00:00 2001 From: Yuwen Memon Date: Wed, 26 Jun 2024 13:21:12 -0700 Subject: [PATCH 1/4] Fix selection for splits when there is a seatch term present --- .../iou/request/MoneyRequestParticipantsSelector.tsx | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/src/pages/iou/request/MoneyRequestParticipantsSelector.tsx b/src/pages/iou/request/MoneyRequestParticipantsSelector.tsx index 46c0d10e08ac..19bd9657547c 100644 --- a/src/pages/iou/request/MoneyRequestParticipantsSelector.tsx +++ b/src/pages/iou/request/MoneyRequestParticipantsSelector.tsx @@ -47,7 +47,7 @@ type MoneyRequestParticipantsSelectorProps = { action: IOUAction; }; -function MoneyRequestParticipantsSelector({participants = [], onFinish, onParticipantsAdded, iouType, iouRequestType, action}: MoneyRequestParticipantsSelectorProps) { +function MoneyRequestParticipantsSelector({participants = CONST.EMPTY_ARRAY, onFinish, onParticipantsAdded, iouType, iouRequestType, action}: MoneyRequestParticipantsSelectorProps) { const {translate} = useLocalize(); const styles = useThemeStyles(); const [searchTerm, debouncedSearchTerm, setSearchTerm] = useDebouncedState(''); @@ -378,6 +378,14 @@ function MoneyRequestParticipantsSelector({participants = [], onFinish, onPartic onFinish, ]); + const onSelectRow = useCallback((item) => { + if (isIOUSplit) { + addParticipantToSelection(item); + return; + } + addSingleParticipant(item); + }, [isIOUSplit, addParticipantToSelection, addSingleParticipant]); + return ( (isIOUSplit ? addParticipantToSelection(item) : addSingleParticipant(item))} + onSelectRow={onSelectRow} shouldDebounceRowSelect footerContent={footerContent} headerMessage={header} From 25533d80adeb819412f6df9188cd390d4ca4cec2 Mon Sep 17 00:00:00 2001 From: Yuwen Memon Date: Wed, 26 Jun 2024 13:34:09 -0700 Subject: [PATCH 2/4] Fix types --- src/pages/iou/request/MoneyRequestParticipantsSelector.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/pages/iou/request/MoneyRequestParticipantsSelector.tsx b/src/pages/iou/request/MoneyRequestParticipantsSelector.tsx index 19bd9657547c..812d6a996c34 100644 --- a/src/pages/iou/request/MoneyRequestParticipantsSelector.tsx +++ b/src/pages/iou/request/MoneyRequestParticipantsSelector.tsx @@ -27,6 +27,7 @@ import type {IOUAction, IOURequestType, IOUType} from '@src/CONST'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import type {Participant} from '@src/types/onyx/IOU'; +import {ListItem} from "@components/SelectionList/types"; type MoneyRequestParticipantsSelectorProps = { /** Callback to request parent modal to go to next step, which should be split */ @@ -35,7 +36,7 @@ type MoneyRequestParticipantsSelectorProps = { /** Callback to add participants in MoneyRequestModal */ onParticipantsAdded: (value: Participant[]) => void; /** Selected participants from MoneyRequestModal with login */ - participants?: Participant[]; + participants?: Participant[] | typeof CONST.EMPTY_ARRAY; /** The type of IOU report, i.e. split, request, send, track */ iouType: IOUType; @@ -378,7 +379,7 @@ function MoneyRequestParticipantsSelector({participants = CONST.EMPTY_ARRAY, onF onFinish, ]); - const onSelectRow = useCallback((item) => { + const onSelectRow = useCallback((item: Participant) => { if (isIOUSplit) { addParticipantToSelection(item); return; From 38cb30e53faab7660de751f0b2b68b19cdb7bbed Mon Sep 17 00:00:00 2001 From: Yuwen Memon Date: Wed, 26 Jun 2024 13:36:54 -0700 Subject: [PATCH 3/4] Prettier --- .../MoneyRequestParticipantsSelector.tsx | 19 +++++++++++-------- 1 file changed, 11 insertions(+), 8 deletions(-) diff --git a/src/pages/iou/request/MoneyRequestParticipantsSelector.tsx b/src/pages/iou/request/MoneyRequestParticipantsSelector.tsx index 812d6a996c34..27a87aa7ad40 100644 --- a/src/pages/iou/request/MoneyRequestParticipantsSelector.tsx +++ b/src/pages/iou/request/MoneyRequestParticipantsSelector.tsx @@ -11,6 +11,7 @@ import {useOptionsList} from '@components/OptionListContextProvider'; import ReferralProgramCTA from '@components/ReferralProgramCTA'; import SelectionList from '@components/SelectionList'; import InviteMemberListItem from '@components/SelectionList/InviteMemberListItem'; +import {ListItem} from '@components/SelectionList/types'; import useDebouncedState from '@hooks/useDebouncedState'; import useDismissedReferralBanners from '@hooks/useDismissedReferralBanners'; import useLocalize from '@hooks/useLocalize'; @@ -27,7 +28,6 @@ import type {IOUAction, IOURequestType, IOUType} from '@src/CONST'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import type {Participant} from '@src/types/onyx/IOU'; -import {ListItem} from "@components/SelectionList/types"; type MoneyRequestParticipantsSelectorProps = { /** Callback to request parent modal to go to next step, which should be split */ @@ -379,13 +379,16 @@ function MoneyRequestParticipantsSelector({participants = CONST.EMPTY_ARRAY, onF onFinish, ]); - const onSelectRow = useCallback((item: Participant) => { - if (isIOUSplit) { - addParticipantToSelection(item); - return; - } - addSingleParticipant(item); - }, [isIOUSplit, addParticipantToSelection, addSingleParticipant]); + const onSelectRow = useCallback( + (item: Participant) => { + if (isIOUSplit) { + addParticipantToSelection(item); + return; + } + addSingleParticipant(item); + }, + [isIOUSplit, addParticipantToSelection, addSingleParticipant], + ); return ( Date: Wed, 26 Jun 2024 13:52:42 -0700 Subject: [PATCH 4/4] Fix types --- src/pages/iou/request/MoneyRequestParticipantsSelector.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/pages/iou/request/MoneyRequestParticipantsSelector.tsx b/src/pages/iou/request/MoneyRequestParticipantsSelector.tsx index 27a87aa7ad40..58e69485c1b3 100644 --- a/src/pages/iou/request/MoneyRequestParticipantsSelector.tsx +++ b/src/pages/iou/request/MoneyRequestParticipantsSelector.tsx @@ -11,7 +11,6 @@ import {useOptionsList} from '@components/OptionListContextProvider'; import ReferralProgramCTA from '@components/ReferralProgramCTA'; import SelectionList from '@components/SelectionList'; import InviteMemberListItem from '@components/SelectionList/InviteMemberListItem'; -import {ListItem} from '@components/SelectionList/types'; import useDebouncedState from '@hooks/useDebouncedState'; import useDismissedReferralBanners from '@hooks/useDismissedReferralBanners'; import useLocalize from '@hooks/useLocalize'; @@ -35,6 +34,7 @@ type MoneyRequestParticipantsSelectorProps = { /** Callback to add participants in MoneyRequestModal */ onParticipantsAdded: (value: Participant[]) => void; + /** Selected participants from MoneyRequestModal with login */ participants?: Participant[] | typeof CONST.EMPTY_ARRAY; @@ -95,7 +95,7 @@ function MoneyRequestParticipantsSelector({participants = CONST.EMPTY_ARRAY, onF options.personalDetails, betas, '', - participants, + participants as Participant[], CONST.EXPENSIFY_EMAILS, // If we are using this component in the "Submit expense" flow then we pass the includeOwnedWorkspaceChats argument so that the current user @@ -154,7 +154,7 @@ function MoneyRequestParticipantsSelector({participants = CONST.EMPTY_ARRAY, onF const newOptions = OptionsListUtils.filterOptions(defaultOptions, debouncedSearchTerm, { betas, - selectedOptions: participants, + selectedOptions: participants as Participant[], excludeLogins: CONST.EXPENSIFY_EMAILS, maxRecentReportsToShow: CONST.IOU.MAX_RECENT_REPORTS_TO_SHOW, });