Merge pull request #46804 from software-mansion-labs/kicu/46720-fix-s…

…orting
Expensify · Aug 6, 2024 · 0988e7a · 0988e7a
2 parents e624365 + 0a20964
commit 0988e7a
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 5 deletions.
diff --git 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}`);
 
@@ -264,7 +265,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;
@@ -291,6 +293,7 @@ function Search({queryJSON, policyIDs, isCustomQuery}: SearchProps) {
  };
 
  const shouldShowYear = SearchUtils.shouldShowYear(searchResults?.data);
+ const shouldShowSorting = sortableSearchStatuses.includes(status);
 
  const canSelectMultiple = isSmallScreenWidth ? selectionMode?.isEnabled : true;
 
@@ -321,6 +324,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
@@ -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)}
  />
  );