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,34 @@
-import { useMemo, useState } from 'react';
-import { FilterOption, Group } from './types';
-
-/**
- * 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.
- *
- * 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.
- */
+"use client";
+
+import { useMemo, useState } from "react";
+import { FilterOption, Group } from "./types";
+
+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.
+//
+// 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.
 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 +37,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)
+      .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;
 }
-
-
-