Port createFilterOptions and useFilterOptions to App Router style [#1066

]

* formatting consistency with other code

static-site/components/list-resources/use-filter-options.ts

@@ -1,28 +1,46 @@
-import { useMemo, useState } from 'react';
-import { FilterOption, Group } from './types';
+"use client";
+
+import { useMemo, useState } from "react";
+import { FilterOption, Group } from "./types";
+
+/**
+ * Utility function that takes a provided `word` and returns a
+ *  `FilterOption` object based on the provided string.
+ *
+ * @param word - the string to make into a `FiterOption`
+ */
+export function createFilterOption(word: string): FilterOption {
+  return { label: word, value: word };
+}
 
 /**
- * React hook which recomputes the available search/filtering options (i.e.
- * those shown in the dropdown) according to the datasets that are currently
- * displayed. For instance, if you've previously filtered by "flu", then the
- * updated set of available filtering options should only consider keywords in
- * flu datasets.
+ * React hook that recomputes the available search/filtering options
+ * (i.e. those shown in the dropdown) according to the datasets that
+ * are currently displayed.
+ *
+ * For example, if you've previously filtered by "flu", then the
+ * updated set of available filtering options should only consider
+ * keywords in flu datasets.
  *
- * We use counts to order the options (as this recomputes each time we apply a
- * filter) but we don't include the count in the label because the React select
- * component doesn't update already-set options and thus we get out-of-sync.
+ * We use counts to order the options (as this recomputes each time we
+ * apply a filter) but we don't include the count in the label because
+ * the React select component doesn't update already-set options and
+ * thus we get out-of-sync.
+ *
+ * @param resourceGroups - the list of groups to create filter options from
  */
 export function useFilterOptions(resourceGroups: Group[]): FilterOption[] {
   const [state, setState] = useState<FilterOption[]>([]);
 
-  useMemo(() => {
+  useMemo((): void => {
     const counts: { [key: string]: number } = {};
+
     const increment = (key: string) => {
       if (!counts[key]) counts[key] = 0;
-      counts[key]++
-    }
+      counts[key]++;
+    };
 
-    let nResources = 0; // Number of individual resources displayed 
+    let nResources = 0; // Number of individual resources displayed
     for (const group of resourceGroups) {
       for (const resource of group.resources) {
         nResources++;
@@ -31,19 +49,13 @@ export function useFilterOptions(resourceGroups: Group[]): FilterOption[] {
     }
 
     const options = Object.entries(counts)
-      /* filter out search options present in every displayed resource */
-      .filter(([_, count]) => count!==nResources) /* eslint-disable-line */
-      .sort((a,b) => a[1]<b[1] ? 1 : -1)
-      .map(([word, ]) => createFilterOption(word));
+      // filter out search options present in every displayed resource
+      .filter(([_, count]) => count !== nResources) // eslint-disable-line @typescript-eslint/no-unused-vars
+      .sort((a, b) => (a[1] < b[1] ? 1 : -1))
+      .map(([word]) => createFilterOption(word));
 
     setState(options);
   }, [resourceGroups]);
-  return state
-}
 
-export function createFilterOption(word: string): FilterOption {
-  return {value: word, label: word};
+  return state;
 }
-
-
-