Implement Search ListItems and table header

src/CONST.ts

@@ -916,6 +916,15 @@ const CONST = {
         SEARCH_OPTION_LIST_DEBOUNCE_TIME: 300,
         RESIZE_DEBOUNCE_TIME: 100,
     },
+    SEARCH_TABLE_COLUMNS: {
+        DATE: 'date',
+        MERCHANT: 'merchant',
+        FROM: 'from',
+        TO: 'to',
+        TOTAL: 'total',
+        TYPE: 'type',
+        ACTION: 'action',
+    },
     PRIORITY_MODE: {
         GSD: 'gsd',
         DEFAULT: 'default',
@@ -3400,11 +3409,6 @@ const CONST = {
     },
     TAB_SEARCH: {
         ALL: 'all',
-        // @TODO: Uncomment when the queries below are implemented
-        // SHARED: 'shared',
-        // DRAFTS: 'drafts',
-        // WAITING_ON_YOU: 'waitingOnYou',
-        // FINISHED: 'finished',
     },
     STATUS_TEXT_MAX_LENGTH: 100,
 

src/components/Search.tsx

@@ -1,10 +1,7 @@
 import React, {useEffect} from 'react';
-import {View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
-import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
 import useThemeStyles from '@hooks/useThemeStyles';
-import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as SearchActions from '@libs/actions/Search';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
 import * as SearchUtils from '@libs/SearchUtils';
@@ -16,35 +13,16 @@ import ROUTES from '@src/ROUTES';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
 import isLoadingOnyxValue from '@src/types/utils/isLoadingOnyxValue';
 import SelectionList from './SelectionList';
+import SearchTableHeader from './SelectionList/SearchTableHeader';
 import TableListItemSkeleton from './Skeletons/TableListItemSkeleton';
-import Text from './Text';
-
-/**
- * Todo This is a temporary function that will pick search results from under `snapshot_` key
- * either api needs to be updated to key by `snapshot_hash` or app code calling search data needs to be refactored
- * remove this function once this is properly fixed
- */
-function getCleanSearchResults(searchResults: unknown) {
-    if (!searchResults) {
-        return {};
-    }
-
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-expect-error
-    // eslint-disable-next-line no-underscore-dangle,@typescript-eslint/no-unsafe-return
-    return searchResults?.data;
-}
 
 type SearchProps = {
     query: string;
 };
 
 function Search({query}: SearchProps) {
     const {isOffline} = useNetwork();
-    const {translate} = useLocalize();
     const styles = useThemeStyles();
-    const {isSmallScreenWidth, isMediumScreenWidth} = useWindowDimensions();
-    // const [selectedCategories, setSelectedCategories] = useState<Record<string, boolean>>({});
     useCustomBackHandler();
 
     const hash = SearchUtils.getQueryHash(query);
@@ -58,14 +36,8 @@ function Search({query}: SearchProps) {
         SearchActions.search(query);
     }, [query, isOffline]);
 
-    const cleanResults = getCleanSearchResults(searchResults);
-
-    useEffect(() => {
-        SearchActions.addPersonalDetailsFromSearch(cleanResults?.personalDetailsList ?? {});
-    }, [cleanResults]);
-
-    const isLoading = (!isOffline && isLoadingOnyxValue(searchResultsMeta)) || cleanResults === undefined;
-    const shouldShowEmptyState = !isLoading && isEmptyObject(cleanResults);
+    const isLoading = (!isOffline && isLoadingOnyxValue(searchResultsMeta)) || searchResults?.data === undefined;
+    const shouldShowEmptyState = !isLoading && isEmptyObject(searchResults?.data);
 
     if (isLoading) {
         return <TableListItemSkeleton shouldAnimate />;
@@ -75,33 +47,6 @@ function Search({query}: SearchProps) {
         return <EmptySearchView />;
     }
 
-    const displayNarrowVersion = isMediumScreenWidth || isSmallScreenWidth;
-
-    const getListHeader = () => {
-        if (displayNarrowVersion) {
-            return;
-        }
-
-        // const showMerchantColumn = ReportUtils.shouldShowMerchantColumn(data);
-        const showMerchantColumn = displayNarrowVersion && true;
-
-        return (
-            <View style={[styles.flex1, styles.flexRow, styles.justifyContentBetween, styles.pl3, styles.gap3]}>
-                {/* <Text style={styles.searchInputStyle}>{translate('common.receipt')}</Text> */}
-                <Text style={[styles.searchInputStyle, styles.flex1]}>{translate('common.date')}</Text>
-                {showMerchantColumn && <Text style={[styles.searchInputStyle]}>{translate('common.merchant')}</Text>}
-                <Text style={[styles.searchInputStyle, styles.flex1]}>{translate('common.description')}</Text>
-                <Text style={[styles.searchInputStyle, styles.flex2]}>{translate('common.from')}</Text>
-                <Text style={[styles.searchInputStyle, styles.flex2]}>{translate('common.to')}</Text>
-                <Text style={[styles.searchInputStyle, styles.flex1]}>{translate('common.category')}</Text>
-                <Text style={[styles.searchInputStyle, styles.flex1]}>{translate('common.tag')}</Text>
-                <Text style={[styles.searchInputStyle, styles.flex1, styles.textAlignRight]}>{translate('common.total')}</Text>
-                <Text style={[styles.searchInputStyle, styles.flex1]}>{translate('common.type')}</Text>
-                <Text style={[styles.searchInputStyle, styles.flex1]}>{translate('common.action')}</Text>
-            </View>
-        );
-    };
-
     const openReport = (reportID?: string) => {
         if (!reportID) {
             return;
@@ -111,19 +56,17 @@ function Search({query}: SearchProps) {
     };
 
     const ListItem = SearchUtils.getListItem();
-    const data = SearchUtils.getSections(cleanResults ?? {});
+    const data = SearchUtils.getSections(searchResults?.data ?? {});
+    const shouldShowMerchant = SearchUtils.getShouldShowMerchant(searchResults?.data ?? {});
 
     return (
         <SelectionList
-            canSelectMultiple
-            customListHeader={getListHeader()}
+            customListHeader={<SearchTableHeader shouldShowMerchant={shouldShowMerchant} />}
             ListItem={ListItem}
             sections={[{data, isDisabled: false}]}
             onSelectRow={(item) => {
                 openReport(item.transactionThreadReportID);
             }}
-            onSelectAll={!displayNarrowVersion ? () => {} : undefined}
-            onCheckboxPress={() => {}}
             shouldPreventDefaultFocusOnSelectRow={!DeviceCapabilities.canUseTouchScreen()}
             listHeaderWrapperStyle={[styles.ph9, styles.pv3, styles.pb5]}
         />

src/components/SelectionList/SearchTableHeader.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import {View} from 'react-native';
+import Text from '@components/Text';
+import useLocalize from '@hooks/useLocalize';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
+import useWindowDimensions from '@hooks/useWindowDimensions';
+import CONST from '@src/CONST';
+
+type SearchTableHeaderProps = {
+    /** Whether we should show the merchant or description column */
+    shouldShowMerchant: boolean;
+};
+
+function SearchTableHeader({shouldShowMerchant}: SearchTableHeaderProps) {
+    const styles = useThemeStyles();
+    const StyleUtils = useStyleUtils();
+    const {isSmallScreenWidth, isMediumScreenWidth} = useWindowDimensions();
+    const {translate} = useLocalize();
+    const displayNarrowVersion = isMediumScreenWidth || isSmallScreenWidth;
+
+    if (displayNarrowVersion) {
+        return;
+    }
+
+    return (
+        <View style={[styles.ph5, styles.pb3]}>
+            <View style={[styles.flex1, styles.flexRow, styles.gap3, styles.ph4]}>
+                <View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH_TABLE_COLUMNS.DATE)]}>
+                    <Text style={[styles.mutedNormalTextLabel]}>{translate('common.date')}</Text>
+                </View>
+                <View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH_TABLE_COLUMNS.MERCHANT)]}>
+                    <Text style={[styles.mutedNormalTextLabel]}>{translate(shouldShowMerchant ? 'common.merchant' : 'common.description')}</Text>
+                </View>
+                <View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH_TABLE_COLUMNS.FROM)]}>
+                    <Text style={[styles.mutedNormalTextLabel]}>{translate('common.from')}</Text>
+                </View>
+                <View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH_TABLE_COLUMNS.TO)]}>
+                    <Text style={[styles.mutedNormalTextLabel]}>{translate('common.to')}</Text>
+                </View>
+                <View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH_TABLE_COLUMNS.TOTAL)]}>
+                    <Text style={[styles.mutedNormalTextLabel]}>{translate('common.total')}</Text>
+                </View>
+                <View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH_TABLE_COLUMNS.TYPE)]}>
+                    <Text style={[styles.mutedNormalTextLabel]}>{translate('common.type')}</Text>
+                </View>
+                <View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH_TABLE_COLUMNS.ACTION)]}>
+                    <Text style={[styles.mutedNormalTextLabel, styles.textAlignCenter]}>{translate('common.action')}</Text>
+                </View>
+            </View>
+        </View>
+    );
+}
+
+SearchTableHeader.displayName = 'SearchTableHeader';
+
+export default SearchTableHeader;