From 0a209642569d294e8cfd11513ee839718aad0cbf Mon Sep 17 00:00:00 2001
From: Mateusz Titz <titzmateusz@gmail.com>
Date: Mon, 5 Aug 2024 14:00:10 +0200
Subject: [PATCH] Fix sorting not working on Search

---
 src/components/Search/index.tsx                    | 10 +++++++---
 src/components/SelectionList/SearchTableHeader.tsx |  6 ++++--
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/components/Search/index.tsx b/src/components/Search/index.tsx
index af952613f48f6..ac33a986a9468 100644
--- a/src/components/Search/index.tsx
+++ b/src/components/Search/index.tsx
@@ -30,7 +30,7 @@ import ROUTES from '@src/ROUTES';
 import type SearchResults from '@src/types/onyx/SearchResults';
 import {useSearchContext} from './SearchContext';
 import SearchPageHeader from './SearchPageHeader';
-import type {SearchColumnType, SearchQueryJSON, SelectedTransactionInfo, SelectedTransactions, SortOrder} from './types';
+import type {SearchColumnType, SearchQueryJSON, SearchStatus, SelectedTransactionInfo, SelectedTransactions, SortOrder} from './types';
 
 type SearchProps = {
     queryJSON: SearchQueryJSON;
@@ -42,6 +42,7 @@ const transactionItemMobileHeight = 100;
 const reportItemTransactionHeight = 52;
 const listItemPadding = 12; // this is equivalent to 'mb3' on every transaction/report list item
 const searchHeaderHeight = 54;
+const sortableSearchStatuses: SearchStatus[] = [CONST.SEARCH.STATUS.ALL];
 
 function mapTransactionItemToSelectedEntry(item: TransactionListItemType): [string, SelectedTransactionInfo] {
     return [item.keyForList, {isSelected: true, canDelete: item.canDelete, canHold: item.canHold, canUnhold: item.canUnhold, action: item.action}];
@@ -86,7 +87,7 @@ function Search({queryJSON, policyIDs, isCustomQuery}: SearchProps) {
     const [selectedTransactionsToDelete, setSelectedTransactionsToDelete] = useState<string[]>([]);
     const [deleteExpensesConfirmModalVisible, setDeleteExpensesConfirmModalVisible] = useState(false);
     const [downloadErrorModalVisible, setDownloadErrorModalVisible] = useState(false);
-    const {sortBy, sortOrder, hash} = queryJSON;
+    const {status, sortBy, sortOrder, hash} = queryJSON;
 
     const [currentSearchResults] = useOnyx(`${ONYXKEYS.COLLECTION.SNAPSHOT}${hash}`);
 
@@ -265,7 +266,8 @@ function Search({queryJSON, policyIDs, isCustomQuery}: SearchProps) {
     const ListItem = SearchUtils.getListItem(type);
 
     const data = SearchUtils.getSections(searchResults?.data ?? {}, searchResults?.search ?? {}, type);
-    const sortedSelectedData = data.map((item) => mapToItemWithSelectionInfo(item, selectedTransactions));
+    const sortedData = SearchUtils.getSortedSections(type, data, sortBy, sortOrder);
+    const sortedSelectedData = sortedData.map((item) => mapToItemWithSelectionInfo(item, selectedTransactions));
 
     const toggleAllTransactions = () => {
         const areItemsOfReportType = searchResults?.search.type === CONST.SEARCH.DATA_TYPES.REPORT;
@@ -292,6 +294,7 @@ function Search({queryJSON, policyIDs, isCustomQuery}: SearchProps) {
     };
 
     const shouldShowYear = SearchUtils.shouldShowYear(searchResults?.data);
+    const shouldShowSorting = sortableSearchStatuses.includes(status);
 
     const canSelectMultiple = isSmallScreenWidth ? selectionMode?.isEnabled : true;
 
@@ -322,6 +325,7 @@ function Search({queryJSON, policyIDs, isCustomQuery}: SearchProps) {
                             sortOrder={sortOrder}
                             sortBy={sortBy}
                             shouldShowYear={shouldShowYear}
+                            shouldShowSorting={shouldShowSorting}
                         />
                     )
                 }
diff --git a/src/components/SelectionList/SearchTableHeader.tsx b/src/components/SelectionList/SearchTableHeader.tsx
index a260ee6bd0f09..8529d3aa34ec4 100644
--- a/src/components/SelectionList/SearchTableHeader.tsx
+++ b/src/components/SelectionList/SearchTableHeader.tsx
@@ -92,9 +92,10 @@ type SearchTableHeaderProps = {
     sortOrder?: SortOrder;
     onSortPress: (column: SearchColumnType, order: SortOrder) => void;
     shouldShowYear: boolean;
+    shouldShowSorting: boolean;
 };
 
-function SearchTableHeader({data, metadata, sortBy, sortOrder, onSortPress, shouldShowYear}: SearchTableHeaderProps) {
+function SearchTableHeader({data, metadata, sortBy, sortOrder, onSortPress, shouldShowYear, shouldShowSorting}: SearchTableHeaderProps) {
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
     const {isSmallScreenWidth, isMediumScreenWidth} = useWindowDimensions();
@@ -113,6 +114,7 @@ function SearchTableHeader({data, metadata, sortBy, sortOrder, onSortPress, shou
                         return null;
                     }
 
+                    const isSortable = shouldShowSorting && isColumnSortable;
                     const isActive = sortBy === columnName;
                     const textStyle = columnName === CONST.SEARCH.TABLE_COLUMNS.RECEIPT ? StyleUtils.getTextOverflowStyle('clip') : null;
 
@@ -124,7 +126,7 @@ function SearchTableHeader({data, metadata, sortBy, sortOrder, onSortPress, shou
                             sortOrder={sortOrder ?? CONST.SEARCH.SORT_ORDER.ASC}
                             isActive={isActive}
                             containerStyle={[StyleUtils.getSearchTableColumnStyles(columnName, shouldShowYear)]}
-                            isSortable={isColumnSortable}
+                            isSortable={isSortable}
                             onPress={(order: SortOrder) => onSortPress(columnName, order)}
                         />
                     );