From ec72d72f32d3796cf64eec42bdb360ac07cb84c9 Mon Sep 17 00:00:00 2001
From: Victor Lin <13424970+victorlin@users.noreply.github.com>
Date: Wed, 2 Oct 2024 11:30:54 -0700
Subject: [PATCH] Add types to useSortAndFilter

---
 .../src/components/ListResources/index.tsx    |  4 +-
 ...seSortAndFilter.js => useSortAndFilter.ts} | 38 ++++++++++++-------
 2 files changed, 27 insertions(+), 15 deletions(-)
 rename static-site/src/components/ListResources/{useSortAndFilter.js => useSortAndFilter.ts} (51%)

diff --git a/static-site/src/components/ListResources/index.tsx b/static-site/src/components/ListResources/index.tsx
index c100eaddd..3e5e0a9f0 100644
--- a/static-site/src/components/ListResources/index.tsx
+++ b/static-site/src/components/ListResources/index.tsx
@@ -49,9 +49,9 @@ function ListResources({
   );
   const showcaseTiles = useShowcaseTiles(showcase, groups);
   const [selectedFilterOptions, setSelectedFilterOptions] = useState<readonly FilterOption[]>([]);
-  const [sortMethod, changeSortMethod] = useState("alphabetical");
+  const [sortMethod, changeSortMethod] = useState<"lastUpdated" | "alphabetical">("alphabetical");
   const [resourceGroups, setResourceGroups] = useState<Group[]>([]);
-  useSortAndFilter(sortMethod, selectedFilterOptions, groups, setResourceGroups)
+  useSortAndFilter(sortMethod, selectedFilterOptions, setResourceGroups, groups)
   const availableFilterOptions = useFilterOptions(resourceGroups);
   const [modalResource, setModalResource ] = useState<Resource>();
 
diff --git a/static-site/src/components/ListResources/useSortAndFilter.js b/static-site/src/components/ListResources/useSortAndFilter.ts
similarity index 51%
rename from static-site/src/components/ListResources/useSortAndFilter.js
rename to static-site/src/components/ListResources/useSortAndFilter.ts
index d4616f324..f4f6e8acf 100644
--- a/static-site/src/components/ListResources/useSortAndFilter.js
+++ b/static-site/src/components/ListResources/useSortAndFilter.ts
@@ -1,30 +1,42 @@
 import { useMemo } from 'react';
+import { FilterOption, Group, Resource } from './types';
 
 
-export const useSortAndFilter = (sortMethod, selectedFilterOptions, originalData, setState) => {
+export const useSortAndFilter = (
+    sortMethod: "lastUpdated" | "alphabetical",
+    selectedFilterOptions: readonly FilterOption[],
+    setState: React.Dispatch<React.SetStateAction<Group[]>>,
+    originalData?: Group[],
+  ) => {
   useMemo(() => {
     if (!originalData) return;
     /* Following console log is really useful for development */
     // console.log(`useSortAndFilter() sortMethod "${sortMethod}" ` + (selectedFilterOptions.length ? `filtering to ${selectedFilterOptions.map((el) => el.value).join(", ")}` : '(no filtering)'))
 
-    let _sortGroups, _sortResources;
+    let _sortGroups: (groupA: Group, groupB: Group) => 1 | -1 | 0,
+        _sortResources: (a: Resource, b: Resource) => 1 | -1 | 0;
     switch (sortMethod) {
       case "lastUpdated":
-        _sortGroups = (groupA, groupB) => _newestFirstSort(groupA.lastUpdated, groupB.lastUpdated);
-        _sortResources = (a, b) => a.lastUpdated === b.lastUpdated ?
-          _lexicographicSort(a.name, b.name) : // resources updated on the same day sort alphabetically
-          _newestFirstSort(a.lastUpdated, b.lastUpdated); // newest updated resources first
+        _sortGroups = (groupA: Group, groupB: Group) => _newestFirstSort(groupA.lastUpdated, groupB.lastUpdated);
+        _sortResources = (a: Resource, b: Resource) => {
+          if (!a.lastUpdated || !b.lastUpdated || a.lastUpdated === b.lastUpdated) {
+            // resources updated on the same day or without a last updated date
+            // sort alphabetically
+            return _lexicographicSort(a.name, b.name)
+          }
+          else {
+            return _newestFirstSort(a.lastUpdated, b.lastUpdated);
+          }
+        }
         break;
       case "alphabetical":
-        _sortGroups = (groupA, groupB) => _lexicographicSort(groupA.groupName.toLowerCase(), groupB.groupName.toLowerCase()),
-        _sortResources = (a, b) => _lexicographicSort(a.name, b.name)
+        _sortGroups = (groupA: Group, groupB: Group) => _lexicographicSort(groupA.groupName.toLowerCase(), groupB.groupName.toLowerCase()),
+        _sortResources = (a: Resource, b: Resource) => _lexicographicSort(a.name, b.name)
         break;
-      default:
-        throw new Error(`Unknown sorting method "${sortMethod}"`)
     }
 
     const searchValues = selectedFilterOptions.map((o) => o.value);
-    function _filterResources(resource) {
+    function _filterResources(resource: Resource) {
       if (searchValues.length===0) return true;
       return searchValues
         .map((searchString) => resource.nameParts.includes(searchString))
@@ -49,13 +61,13 @@ export const useSortAndFilter = (sortMethod, selectedFilterOptions, originalData
 /* helper function to sort alphabetically. If provided with YYYY-MM-DD strings
  * this is the same as a chronological sort (oldest to newest)
  */
-function _lexicographicSort(a,b) {
+function _lexicographicSort(a: string, b: string): 1 | -1 | 0 {
   return a<b ? -1 : a>b ? 1 : 0;
 }
 
 /* If provided with YYYY-MM-DD strings this sorts chronologically with newest
  * first (this is just reverse lexicographic sort)
  */
-function _newestFirstSort(a,b) {
+function _newestFirstSort(a: string, b: string): 1 | -1 | 0 {
   return a<b ? 1 : a>b ? -1 : 0;
 }
\ No newline at end of file