Extract the table sorting code to a common file

mozilla · Jan 9, 2025 · 587cdd0 · 587cdd0
1 parent 0a070f5
commit 587cdd0
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 83 deletions.
diff --git a/src/components/CompareResults/SubtestsResults/SubtestsResultsTable.tsx b/src/components/CompareResults/SubtestsResults/SubtestsResultsTable.tsx
@@ -6,7 +6,7 @@ import SubtestsTableContent from './SubtestsTableContent';
 import NoResultsFound from '.././NoResultsFound';
 import TableHeader from '.././TableHeader';
 import useTableFilters, { filterResults } from '../../../hooks/useTableFilters';
-import useTableSort from '../../../hooks/useTableSort';
+import useTableSort, { sortResults } from '../../../hooks/useTableSort';
 import type { CompareResultsItem } from '../../../types/state';
 import type { CompareResultsTableConfig } from '../../../types/types';
 
@@ -46,14 +46,19 @@ const stringComparisonCollator = new Intl.Collator('en', {
   numeric: true,
   sensitivity: 'base',
 });
+function defaultSortFunction(
+  resultA: CompareResultsItem,
+  resultB: CompareResultsItem,
+) {
+  return stringComparisonCollator.compare(resultA.test, resultB.test);
+}
+
 const columnsConfiguration: CompareResultsTableConfig = [
   {
     name: 'Subtests',
     key: 'subtests',
     gridWidth: '4fr',
-    sortFunction(resultA, resultB) {
-      return stringComparisonCollator.compare(resultA.test, resultB.test);
-    },
+    sortFunction: defaultSortFunction,
   },
   {
     name: 'Base',
@@ -150,44 +155,6 @@ function resultMatchesSearchTerm(
   return result.test.toLowerCase().includes(searchTerm.toLowerCase());
 }
 
-// This function sorts the results array in accordance to the specified column
-// and direction. If no column is specified, the first column (the subtests)
-// is used.
-function sortResults(
-  results: CompareResultsItem[],
-  columnId: string | null,
-  direction: 'asc' | 'desc' | null,
-) {
-  let columnConfiguration;
-  if (columnId && direction) {
-    columnConfiguration = columnsConfiguration.find(
-      (column) => column.key === columnId,
-    );
-  }
-
-  if (!columnConfiguration) {
-    columnConfiguration = columnsConfiguration[0];
-  }
-
-  if (!('sortFunction' in columnConfiguration)) {
-    console.warn(
-      `No sortFunction information for the columnConfiguration ${String(
-        columnConfiguration.name ?? columnId,
-      )}`,
-    );
-    return results;
-  }
-
-  const { sortFunction } = columnConfiguration;
-  const directionedSortFunction =
-    direction === 'desc'
-      ? (itemA: CompareResultsItem, itemB: CompareResultsItem) =>
-          sortFunction(itemB, itemA)
-      : sortFunction;
-
-  return results.toSorted(directionedSortFunction);
-}
-
 type ResultsTableProps = {
   filteringSearchTerm: string;
   results: CompareResultsItem[];
@@ -215,7 +182,13 @@ function SubtestsResultsTable({
   }, [results, filteringSearchTerm, tableFilters]);
 
   const filteredAndSortedResults = useMemo(() => {
-    return sortResults(filteredResults, sortColumn, sortDirection);
+    return sortResults(
+      columnsConfiguration,
+      filteredResults,
+      sortColumn,
+      sortDirection,
+      defaultSortFunction,
+    );
   }, [sortColumn, sortDirection, filteredResults]);
 
   const processedResults = useMemo(() => {

diff --git a/src/components/CompareResults/TableContent.tsx b/src/components/CompareResults/TableContent.tsx
@@ -7,6 +7,7 @@ import TableRevisionContent from './TableRevisionContent';
 import type { compareView, compareOverTimeView } from '../../common/constants';
 import { useAppSelector } from '../../hooks/app';
 import { filterResults } from '../../hooks/useTableFilters';
+import { sortResults } from '../../hooks/useTableSort';
 import { Strings } from '../../resources/Strings';
 import type { CompareResultsItem } from '../../types/state';
 import type { CompareResultsTableConfig } from '../../types/types';
@@ -120,46 +121,6 @@ function defaultSortFunction(
   return stringComparisonCollator.compare(keyA, keyB);
 }
 
-// This function sorts the results array in accordance to the specified column
-// and direction. If no column is specified, the first column (the subtests)
-// is used.
-function sortResults(
-  columnsConfiguration: CompareResultsTableConfig,
-  results: CompareResultsItem[],
-  columnId: string | null,
-  direction: 'asc' | 'desc' | null,
-) {
-  let sortFunction = defaultSortFunction;
-
-  let columnConfiguration: CompareResultsTableConfig[number] | undefined;
-  if (columnId && direction) {
-    columnConfiguration = columnsConfiguration.find(
-      (column) => column.key === columnId,
-    );
-  }
-
-  if (columnConfiguration) {
-    if (!('sortFunction' in columnConfiguration)) {
-      console.warn(
-        `No sortFunction information for the columnConfiguration ${String(
-          columnConfiguration.name ?? columnId,
-        )}`,
-      );
-      return results;
-    }
-
-    sortFunction = columnConfiguration.sortFunction;
-  }
-
-  const directionedSortFunction =
-    direction === 'desc'
-      ? (itemA: CompareResultsItem, itemB: CompareResultsItem) =>
-          sortFunction(itemB, itemA)
-      : sortFunction;
-
-  return results.toSorted(directionedSortFunction);
-}
-
 const allRevisionsOption =
   Strings.components.comparisonRevisionDropdown.allRevisions.key;
 
@@ -223,6 +184,7 @@ function TableContent({
       filteredResults,
       sortColumn,
       sortDirection,
+      defaultSortFunction,
     );
   }, [columnsConfiguration, filteredResults, sortColumn, sortDirection]);
 

diff --git a/src/hooks/useTableSort.ts b/src/hooks/useTableSort.ts
@@ -1,6 +1,7 @@
 import { useState, useMemo } from 'react';
 
 import useRawSearchParams from './useRawSearchParams';
+import type { CompareResultsItem } from '../types/state';
 import type { CompareResultsTableConfig } from '../types/types';
 
 // This hook handles the state that handles table sorting, and also takes care
@@ -62,3 +63,47 @@ const useTableSort = (columnsConfiguration: CompareResultsTableConfig) => {
 };
 
 export default useTableSort;
+
+// This function sorts the results array in accordance to the specified column
+// and direction. If no column is specified, the first column (the subtests)
+// is used.
+export function sortResults(
+  columnsConfiguration: CompareResultsTableConfig,
+  results: CompareResultsItem[],
+  columnId: string | null,
+  direction: 'asc' | 'desc' | null,
+  defaultSortFunction: (
+    resultA: CompareResultsItem,
+    resultB: CompareResultsItem,
+  ) => number,
+) {
+  let sortFunction = defaultSortFunction;
+
+  let columnConfiguration: CompareResultsTableConfig[number] | undefined;
+  if (columnId && direction) {
+    columnConfiguration = columnsConfiguration.find(
+      (column) => column.key === columnId,
+    );
+  }
+
+  if (columnConfiguration) {
+    if (!('sortFunction' in columnConfiguration)) {
+      console.warn(
+        `No sortFunction information for the columnConfiguration ${String(
+          columnConfiguration.name ?? columnId,
+        )}`,
+      );
+      return results;
+    }
+
+    sortFunction = columnConfiguration.sortFunction;
+  }
+
+  const directionedSortFunction =
+    direction === 'desc'
+      ? (itemA: CompareResultsItem, itemB: CompareResultsItem) =>
+          sortFunction(itemB, itemA)
+      : sortFunction;
+
+  return results.toSorted(directionedSortFunction);
+}