Merge pull request Expensify#75441 from software-mansion-labs/@zfurtak/migrate-AssigneeStep

Make `AssigneeStep` use new `SelectionList`

Author: grgia

src/pages/workspace/duplicate/WorkspaceDuplicateSelectFeaturesForm.tsx

@@ -307,7 +307,7 @@ function WorkspaceDuplicateSelectFeaturesForm({policyID}: WorkspaceDuplicateForm
 
     const isSelectAllChecked = selectedItems.length > 0 && selectedItems.length === items.length;
 
-    const confirmButtonConfig = useMemo(
+    const confirmButtonOptions = useMemo(
         () => ({
             showButton: true,
             text: translate('common.continue'),
@@ -354,7 +354,7 @@ function WorkspaceDuplicateSelectFeaturesForm({policyID}: WorkspaceDuplicateForm
                         onSelectRow={updateSelectedItems}
                         alternateNumberOfSupportedLines={2}
                         addBottomSafeAreaPadding
-                        confirmButtonOptions={confirmButtonConfig}
+                        confirmButtonOptions={confirmButtonOptions}
                     />
                 </View>
             </>

src/pages/workspace/expensifyCard/issueNew/AssigneeStep.tsx

@@ -2,9 +2,9 @@ import React, {useEffect, useMemo, useState} from 'react';
 import type {OnyxEntry} from 'react-native-onyx';
 import * as Expensicons from '@components/Icon/Expensicons';
 import InteractiveStepWrapper from '@components/InteractiveStepWrapper';
-import SelectionList from '@components/SelectionListWithSections';
-import type {ListItem} from '@components/SelectionListWithSections/types';
-import UserListItem from '@components/SelectionListWithSections/UserListItem';
+import SelectionList from '@components/SelectionList';
+import UserListItem from '@components/SelectionList/ListItem/UserListItem';
+import type {ListItem} from '@components/SelectionList/types';
 import Text from '@components/Text';
 import useCurrencyForExpensifyCard from '@hooks/useCurrencyForExpensifyCard';
 import useLocalize from '@hooks/useLocalize';
@@ -150,74 +150,32 @@ function AssigneeStep({policy, stepNames, startStepIndex, route}: AssigneeStepPr
         return membersList;
     }, [policy?.employeeList, localeCompare, isOffline, issueNewCard?.data?.assigneeEmail, formatPhoneNumber]);
 
-    const sections = useMemo(() => {
+    const assignees = useMemo(() => {
         if (!debouncedSearchTerm) {
-            return [
-                {
-                    data: membersDetails,
-                    shouldShow: true,
-                },
-            ];
+            return membersDetails;
         }
 
-        const sectionsArr = [];
-
         if (!areOptionsInitialized) {
             return [];
         }
 
         const searchValueForOptions = getSearchValueForPhoneOrEmail(debouncedSearchTerm, countryCode).toLowerCase();
-        const filteredOptions = tokenizedSearch(membersDetails, searchValueForOptions, (option) => [option.text ?? '', option.alternateText ?? '']);
-
-        sectionsArr.push({
-            title: undefined,
-            data: filteredOptions,
-            shouldShow: true,
-        });
-
-        // Selected options section
-        if (selectedOptionsForDisplay.length > 0) {
-            sectionsArr.push({
-                title: undefined,
-                data: selectedOptionsForDisplay,
-            });
-        }
-
-        // Recent reports section
-        if (availableOptions.recentReports.length > 0) {
-            sectionsArr.push({
-                title: undefined,
-                data: availableOptions.recentReports,
-            });
-        }
 
-        // Contacts section
-        if (availableOptions.personalDetails.length > 0) {
-            sectionsArr.push({
-                title: undefined,
-                data: availableOptions.personalDetails,
-            });
-        }
+        const filteredMembers = tokenizedSearch(membersDetails, searchValueForOptions, (option) => [option.text ?? '', option.alternateText ?? '']);
 
-        // User to invite section
-        if (availableOptions.userToInvite) {
-            sectionsArr.push({
-                title: undefined,
-                data: [availableOptions.userToInvite],
-            });
-        }
+        const options = [
+            ...filteredMembers,
+            ...selectedOptionsForDisplay,
+            ...availableOptions.recentReports,
+            ...availableOptions.personalDetails,
+            ...(availableOptions.userToInvite ? [availableOptions.userToInvite] : []),
+        ];
 
-        return sectionsArr;
-    }, [
-        debouncedSearchTerm,
-        areOptionsInitialized,
-        countryCode,
-        membersDetails,
-        selectedOptionsForDisplay,
-        availableOptions.recentReports,
-        availableOptions.personalDetails,
-        availableOptions.userToInvite,
-    ]);
+        return options.map((option) => ({
+            ...option,
+            keyForList: option.keyForList ?? option.login ?? '',
+        }));
+    }, [debouncedSearchTerm, areOptionsInitialized, countryCode, membersDetails, selectedOptionsForDisplay, availableOptions]);
 
     useEffect(() => {
         searchInServer(searchTerm);
@@ -228,14 +186,18 @@ function AssigneeStep({policy, stepNames, startStepIndex, route}: AssigneeStepPr
         if (!availableOptions.userToInvite && CONST.EXPENSIFY_EMAILS_OBJECT[searchValue]) {
             return translate('messages.errorMessageInvalidEmail');
         }
-        return getHeaderMessage(
-            sections.some((section) => section.data.length > 0),
-            !!availableOptions.userToInvite,
-            searchValue,
-            countryCode,
-            false,
-        );
-    }, [searchTerm, availableOptions.userToInvite, sections, countryCode, translate]);
+        return getHeaderMessage(assignees.length > 0, !!availableOptions.userToInvite, searchValue, countryCode, false);
+    }, [searchTerm, availableOptions.userToInvite, assignees, countryCode, translate]);
+
+    const textInputOptions = useMemo(
+        () => ({
+            label: translate('selectionList.nameEmailOrPhoneNumber'),
+            value: searchTerm,
+            onChangeText: setSearchTerm,
+            headerMessage,
+        }),
+        [headerMessage, searchTerm, setSearchTerm, translate],
+    );
 
     return (
         <InteractiveStepWrapper
@@ -251,17 +213,15 @@ function AssigneeStep({policy, stepNames, startStepIndex, route}: AssigneeStepPr
         >
             <Text style={[styles.textHeadlineLineHeightXXL, styles.ph5, styles.mv3]}>{translate('workspace.card.issueNewCard.whoNeedsCard')}</Text>
             <SelectionList
-                textInputLabel={translate('selectionList.nameEmailOrPhoneNumber')}
-                textInputValue={searchTerm}
-                onChangeText={setSearchTerm}
-                sections={sections}
-                headerMessage={headerMessage}
+                data={assignees}
+                onSelectRow={submit}
                 ListItem={UserListItem}
+                textInputOptions={textInputOptions}
+                isLoadingNewOptions={!!isSearchingForReports}
+                initiallyFocusedItemKey={issueNewCard?.data?.assigneeEmail}
+                disableMaintainingScrollPosition
                 shouldUpdateFocusedIndex
-                initiallyFocusedOptionKey={issueNewCard?.data?.assigneeEmail}
-                onSelectRow={submit}
                 addBottomSafeAreaPadding
-                isLoadingNewOptions={!!isSearchingForReports}
             />
         </InteractiveStepWrapper>
     );