Merge pull request Expensify#65235 from linhvovan29546/fix/64976-cards-filter-with-old-ui

fix: cards filter with old ui

Author: MarioExpensify

src/components/SelectionList/Search/CardListItem.tsx

@@ -2,10 +2,9 @@ import {Str} from 'expensify-common';
 import React, {useCallback} from 'react';
 import {View} from 'react-native';
 import Avatar from '@components/Avatar';
+import Checkbox from '@components/Checkbox';
 import Icon from '@components/Icon';
 import {FallbackAvatar} from '@components/Icon/Expensicons';
-import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
-import SelectCircle from '@components/SelectCircle';
 import BaseListItem from '@components/SelectionList/BaseListItem';
 import type {BaseListItemProps, ListItem} from '@components/SelectionList/types';
 import TextWithTooltip from '@components/TextWithTooltip';
@@ -50,7 +49,7 @@ function CardListItem<TItem extends ListItem>({
 
     const ownersAvatar = {
         source: item.cardOwnerPersonalDetails?.avatar ?? FallbackAvatar,
-        id: item.cardOwnerPersonalDetails?.accountID ?? -1,
+        id: item.cardOwnerPersonalDetails?.accountID ?? CONST.DEFAULT_NUMBER_ID,
         type: CONST.ICON_TYPE_AVATAR,
         name: item.cardOwnerPersonalDetails?.displayName ?? '',
         fallbackIcon: item.cardOwnerPersonalDetails?.fallbackIcon,
@@ -85,7 +84,7 @@ function CardListItem<TItem extends ListItem>({
                             <View>
                                 <UserDetailsTooltip
                                     shouldRender={showTooltip}
-                                    accountID={Number(item.cardOwnerPersonalDetails?.accountID ?? -1)}
+                                    accountID={Number(item.cardOwnerPersonalDetails?.accountID ?? CONST.DEFAULT_NUMBER_ID)}
                                     icon={ownersAvatar}
                                     fallbackUserDetails={{
                                         displayName: item.cardOwnerPersonalDetails?.displayName,
@@ -144,18 +143,14 @@ function CardListItem<TItem extends ListItem>({
                     </View>
                 </View>
                 {!!canSelectMultiple && !item.isDisabled && (
-                    <PressableWithFeedback
-                        onPress={handleCheckboxPress}
-                        disabled={isDisabled}
-                        role={CONST.ROLE.BUTTON}
+                    <Checkbox
+                        shouldSelectOnPressEnter
+                        isChecked={item.isSelected ?? false}
                         accessibilityLabel={item.text ?? ''}
-                        style={[styles.ml2, styles.optionSelectCircle]}
-                    >
-                        <SelectCircle
-                            isChecked={item.isSelected ?? false}
-                            selectCircleStyles={styles.ml0}
-                        />
-                    </PressableWithFeedback>
+                        onPress={handleCheckboxPress}
+                        disabled={!!isDisabled}
+                        style={styles.ml3}
+                    />
                 )}
             </>
         </BaseListItem>

src/pages/Search/SearchAdvancedFiltersPage/SearchFiltersCardPage.tsx

@@ -1,10 +1,10 @@
 import React, {useCallback, useEffect, useMemo, useState} from 'react';
 import {View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
-import Button from '@components/Button';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import {usePersonalDetails} from '@components/OnyxProvider';
 import ScreenWrapper from '@components/ScreenWrapper';
+import SearchFilterPageFooterButtons from '@components/Search/SearchFilterPageFooterButtons';
 import SelectionList from '@components/SelectionList';
 import CardListItem from '@components/SelectionList/Search/CardListItem';
 import useDebouncedState from '@hooks/useDebouncedState';
@@ -25,10 +25,10 @@ function SearchFiltersCardPage() {
     const {translate} = useLocalize();
     const illustrations = useThemeIllustrations();
 
-    const [userCardList, userCardListMetadata] = useOnyx(ONYXKEYS.CARD_LIST);
-    const [workspaceCardFeeds, workspaceCardFeedsMetadata] = useOnyx(ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST);
+    const [userCardList, userCardListMetadata] = useOnyx(ONYXKEYS.CARD_LIST, {canBeMissing: true});
+    const [workspaceCardFeeds, workspaceCardFeedsMetadata] = useOnyx(ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST, {canBeMissing: true});
     const [searchTerm, debouncedSearchTerm, setSearchTerm] = useDebouncedState('');
-    const [searchAdvancedFiltersForm, searchAdvancedFiltersFormMetadata] = useOnyx(ONYXKEYS.FORMS.SEARCH_ADVANCED_FILTERS_FORM);
+    const [searchAdvancedFiltersForm, searchAdvancedFiltersFormMetadata] = useOnyx(ONYXKEYS.FORMS.SEARCH_ADVANCED_FILTERS_FORM, {canBeMissing: true});
     const personalDetails = usePersonalDetails();
 
     const [selectedCards, setSelectedCards] = useState<string[]>([]);
@@ -147,17 +147,18 @@ function SearchFiltersCardPage() {
 
     const headerMessage = debouncedSearchTerm.trim() && sections.every((section) => !section.data.length) ? translate('common.noResultsFound') : '';
 
+    const resetChanges = useCallback(() => {
+        setSelectedCards([]);
+    }, [setSelectedCards]);
+
     const footerContent = useMemo(
         () => (
-            <Button
-                success
-                text={translate('common.save')}
-                pressOnEnter
-                onPress={handleConfirmSelection}
-                large
+            <SearchFilterPageFooterButtons
+                applyChanges={handleConfirmSelection}
+                resetChanges={resetChanges}
             />
         ),
-        [translate, handleConfirmSelection],
+        [resetChanges, handleConfirmSelection],
     );
 
     return (