Merge pull request #40929 from Expensify/cmartins-fixSearchFilters

Fix search filters
Expensify · Apr 25, 2024 · 3b9662c · 3b9662c
2 parents 4d5c0a4 + 8b71b1b
commit 3b9662c
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 32 deletions.
diff --git a/src/CONST.ts b/src/CONST.ts
@@ -3331,7 +3331,7 @@ const CONST = {
     },
     TAB_SEARCH: {
         ALL: 'all',
-        SENT: 'sent',
+        SHARED: 'shared',
         DRAFTS: 'drafts',
         WAITING_ON_YOU: 'waitingOnYou',
         FINISHED: 'finished',

diff --git a/src/components/PopoverMenu.tsx b/src/components/PopoverMenu.tsx
@@ -218,6 +218,8 @@ function PopoverMenu({
                         shouldShowSubscriptRightAvatar={item.shouldShowSubscriptRightAvatar}
                         disabled={item.disabled}
                         onFocus={() => setFocusedIndex(menuIndex)}
+                        success={item.success}
+                        containerStyle={item.containerStyle}
                     />
                 ))}
             </View>

diff --git a/src/pages/Search/SearchFilters.tsx b/src/pages/Search/SearchFilters.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import {View} from 'react-native';
 import MenuItem from '@components/MenuItem';
 import useActiveRoute from '@hooks/useActiveRoute';
+import useLocalize from '@hooks/useLocalize';
 import useSingleExecution from '@hooks/useSingleExecution';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
@@ -19,30 +20,20 @@ type SearchMenuFilterItem = {
     route: Route;
 };
 
-const filterItems: SearchMenuFilterItem[] = [
-    {
-        title: 'All',
-        icon: Expensicons.All,
-        route: ROUTES.SEARCH.getRoute(CONST.TAB_SEARCH.ALL),
-    },
-    // More tabs prepared for final version but in v1 we support only "All"
-    // {
-    //     title: 'Sent',
-    //     icon: Expensicons.Send,
-    //     route: ROUTES.SEARCH.getRoute(CONST.TAB_SEARCH.SENT),
-    // },
-    // {
-    //     title: 'Drafts',
-    //     icon: Expensicons.Pencil,
-    //     route: ROUTES.SEARCH.getRoute(CONST.TAB_SEARCH.DRAFTS),
-    // },
-];
-
 function SearchFilters() {
     const styles = useThemeStyles();
     const {singleExecution} = useSingleExecution();
     const activeRoute = useActiveRoute();
     const {isSmallScreenWidth} = useWindowDimensions();
+    const {translate} = useLocalize();
+
+    const filterItems: SearchMenuFilterItem[] = [
+        {
+            title: translate('common.all'),
+            icon: Expensicons.All,
+            route: ROUTES.SEARCH.getRoute(CONST.TAB_SEARCH.ALL),
+        },
+    ];
 
     const currentQuery = activeRoute?.params && 'query' in activeRoute.params ? activeRoute?.params?.query : '';
 

diff --git a/src/pages/Search/SearchFiltersNarrow.tsx b/src/pages/Search/SearchFiltersNarrow.tsx
@@ -29,18 +29,23 @@ function SearchFiltersNarrow({filterItems, activeItemLabel}: SearchFiltersNarrow
     const openMenu = () => setIsPopoverVisible(true);
     const closeMenu = () => setIsPopoverVisible(false);
 
-    const activeItem = filterItems.find((item) => item.title.toLowerCase() === activeItemLabel);
-    const popoverMenuItems = filterItems.map((item) => ({
+    const activeItemIndex = filterItems.findIndex((item) => item.title.toLowerCase() === activeItemLabel);
+    const popoverMenuItems = filterItems.map((item, index) => ({
         text: item.title,
         onSelected: singleExecution(() => Navigation.navigate(item.route)),
         icon: item.icon,
+        iconFill: index === activeItemIndex ? theme.iconSuccessFill : theme.icon,
+        iconRight: Expensicons.Checkmark,
+        shouldShowRightIcon: index === activeItemIndex,
+        success: index === activeItemIndex,
+        containerStyle: index === activeItemIndex ? [{backgroundColor: theme.border}] : undefined,
     }));
 
     return (
         <>
             <PressableWithFeedback
                 accessible
-                accessibilityLabel={activeItem?.title ?? ''}
+                accessibilityLabel={popoverMenuItems[activeItemIndex]?.text ?? ''}
                 style={[styles.tabSelectorButton]}
                 wrapperStyle={[styles.flex1]}
                 ref={buttonRef}
@@ -50,10 +55,10 @@ function SearchFiltersNarrow({filterItems, activeItemLabel}: SearchFiltersNarrow
                     <Animated.View style={[styles.tabSelectorButton, StyleSheet.absoluteFill, styles.tabBackground(hovered, true, theme.border), styles.mh3]}>
                         <View style={[styles.flexRow]}>
                             <Icon
-                                src={activeItem?.icon ?? Expensicons.All}
+                                src={popoverMenuItems[activeItemIndex]?.icon ?? Expensicons.All}
                                 fill={theme.icon}
                             />
-                            <Text style={[styles.searchFiltersButtonText]}>{activeItem?.title}</Text>
+                            <Text style={[styles.mh1, styles.textStrong]}>{popoverMenuItems[activeItemIndex]?.text}</Text>
                             <Icon
                                 src={Expensicons.DownArrow}
                                 fill={theme.icon}

diff --git a/src/pages/Search/SearchPageBottomTab.tsx b/src/pages/Search/SearchPageBottomTab.tsx
@@ -1,16 +1,21 @@
 import React from 'react';
 import ScreenWrapper from '@components/ScreenWrapper';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import TopBar from '@navigation/AppNavigator/createCustomBottomTabNavigator/TopBar';
 import SearchFilters from './SearchFilters';
 
 // import EmptySearchView from './EmptySearchView';
 
 function SearchPageBottomTab() {
     const {translate} = useLocalize();
+    const styles = useThemeStyles();
 
     return (
-        <ScreenWrapper testID={SearchPageBottomTab.displayName}>
+        <ScreenWrapper
+            testID={SearchPageBottomTab.displayName}
+            style={styles.pt0}
+        >
             <TopBar
                 breadcrumbLabel={translate('common.search')}
                 shouldDisplaySearch={false}

diff --git a/src/styles/index.ts b/src/styles/index.ts
@@ -4870,12 +4870,6 @@ const styles = (theme: ThemeColors) =>
         textLineThrough: {
             textDecorationLine: 'line-through',
         },
-
-        searchFiltersButtonText: {
-            marginLeft: 4,
-            marginRight: 4,
-            fontWeight: 'bold',
-        },
     } satisfies Styles);
 
 type ThemeStyles = ReturnType<typeof styles>;