useResourceSearchParams and export AvailableFacets component

README.md

@@ -35,42 +35,40 @@ git push --tags # and it tags it too
 
 ### Hooks
 
-`@mitodl/course-search-utils` exports two hooks to assist in making search requests to MIT Open's APIs. They are:
+`@mitodl/course-search-utils` exports a few hooks to assist in making search requests to MIT Open's APIs. They are:
 
-1. `useSearchQueryParams({ searchParams, setSearchParams, ...opts? })`: Derive search API parameters (facets, search text, ...) from a `URLSearchParams` object. Often, the `URLSearchParams` object will be derived from the browser URL, though it could be state internal to react.
+1. `useResourceSearchParams({ searchParams, setSearchParams, ...opts? })` and `useContentFileSearchParams`: Derive search API parameters from a `URLSearchParams` object. Often, the `URLSearchParams` object will be derived from the browser URL, though it could be state internal to react.
 
    The hook extracts validated API parameters from the `URLSearchParams` object and returns setters that can be used to manipulate the `URLSearchParams` (e.g., toggling a search facet on or off).
 
-   The `URLSearchParams` keys are mapped to API parameters internally, e.g., `?d=physics&d=chemistry` maps to `departments: ["physics", "chemistry"]`. This mapping is not configurable.
+   The `URLSearchParams` keys are mapped directly to API parameters.
 
-2. `useInfiniteSearch({ params, baseUrl, ...opts? })`: Assists in making search API calls used in an infinite scrolling UI. The initial page is loaded by the hook, susbsequent pages via returm value `{ fetchNextPage }`. The hook's result is based on [useInfiniteQuery](https://tanstack.com/query/v4/docs/framework/react/reference/useInfiniteQuery).
+2. `useInfiniteSearch({ params, endpoint, baseUrl, ...opts? })`: Assists in making search API calls used in an infinite scrolling UI. The initial page is loaded by the hook, susbsequent pages via returm value `{ fetchNextPage }`. The hook's result is based on [useInfiniteQuery](https://tanstack.com/query/v4/docs/framework/react/reference/useInfiniteQuery).
 
 See Typescript annotations and docstrings for more information on hook props and results. Typical usage might look like:
 
 ```tsx
 import { useSearchQueryParams, useInfiniteSearch, } from "@mitodl/course-search-utils"
 import type { UseInfiniteSearchProps } from "@mitodl/course-search-utils"
 
-// set aggregations to be returned for resources and content_files endpoints
-const AGGREGATIONS: UseInfiniteSearchProps["aggregations"] = {
-  resources: ["department", "level", "topic", "course_feature"],
-  content_files: ["topic", "offered_by", "content_feature_type"]
+const CONSTANT_PARAMETERS = {
+  platform: ["ocw"],
+  aggregations: ["topic", "offered_by"]
 }
 
-const CONSTANT_FACETS = { platform: ["ocw"] }
-
 const SearchPage: React.FC = () => {
   const [searchParams, setSearchParams] = useSearchParams()
   const {
     params,
-    setFacetActive,
-    clearFacets,
+    toggleParamValue,
+    clearAllFacets,
     currentText,
     setCurrentText,
     setCurrentTextAndQuery,
   } = useSearchQueryParams({
     searchParams,
     setSearchParams,
+    facets: FACETS
   })
 
   // If necessary
@@ -79,9 +77,8 @@ const SearchPage: React.FC = () => {
   }, [params])
 
   const { pages, hasNextPage, fetchNextPage } = useInfiniteSearch({
-    params: allParams
+    params: allParams,
     baseUrl: "http://mitopen.odl.mit.edu/",
-    aggregations: AGGREGATIONS,
     keepPreviousData: true,
   })
 

jest.config.ts

@@ -1,31 +1,31 @@
-import { Config } from "@jest/types";
+import { Config } from "@jest/types"
 
 const common = {
   testEnvironment: "jsdom",
-  transform: {
+  transform:       {
     "^.+\\.(t)sx?$": "@swc/jest",
   },
   setupFilesAfterEnv: ["<rootDir>src/test_setup.ts"],
-  testMatch: ["<rootDir>/src/**/*.(spec|test).ts?(x)"],
-};
+  testMatch:          ["<rootDir>/src/**/*.(spec|test).ts?(x)"],
+}
 
 const config: Config.InitialOptions = {
   projects: [
     {
-      displayName: "history-v4",
+      displayName:      "history-v4",
       moduleNameMapper: {
         history$: "history-v4",
       },
       ...common,
     },
     {
-      displayName: "history-v5",
+      displayName:      "history-v5",
       moduleNameMapper: {
         history$: "history",
       },
       ...common,
     },
   ],
-};
+}
 
-export default config;
+export default config

package.json

@@ -37,6 +37,7 @@
   },
   "homepage": "https://github.com/mitodl/course-search-utils#readme",
   "dependencies": {
+    "@mitodl/open-api-axios": "^2024.3.22",
     "axios": "^1.6.7",
     "fuse.js": "^7.0.0",
     "query-string": "^6.13.1",

src/facet_display/Facet.tsx

@@ -45,7 +45,7 @@ function SearchFacet(props: Props) {
                 i < MAX_DISPLAY_COUNT ||
                 results.length < FACET_COLLAPSE_THRESHOLD ? (
                   <SearchFacetItem
-                    key={i}
+                    key={`${name}-${facet.key}`}
                     facet={facet}
                     isChecked={contains(facet.key, selected || [])}
                     onUpdate={onUpdate}

src/facet_display/FacetDisplay.test.tsx

@@ -3,6 +3,7 @@ import { shallow } from "enzyme"
 
 import {
   default as FacetDisplay,
+  AvailableFacets,
   getDepartmentName,
   getLevelName
 } from "./FacetDisplay"
@@ -61,9 +62,9 @@ describe("FacetDisplay component", () => {
   test("renders a FacetDisplay with expected FilterableFacets", async () => {
     const { render } = setup()
     const wrapper = render()
-    const facets = wrapper.children()
-    expect(facets).toHaveLength(5)
-    facets.slice(1, 5).map((facet, key) => {
+    const facets = wrapper.find(AvailableFacets).dive().children()
+    expect(facets).toHaveLength(4)
+    facets.map((facet, key) => {
       expect(facet.prop("name")).toBe(facetMap[key].name)
       expect(facet.prop("title")).toBe(facetMap[key].title)
       expect(facet.prop("expandedOnLoad")).toBe(facetMap[key].expandedOnLoad)

src/facet_display/FacetDisplay.tsx

@@ -7,7 +7,7 @@ import { LEVELS, DEPARTMENTS } from "../constants"
 
 export type BucketWithLabel = Bucket & { label: string }
 
-interface Props {
+interface FacetDisplayProps {
   facetMap: FacetManifest
   facetOptions: (group: string) => Aggregation | null
   activeFacets: Facets
@@ -47,8 +47,53 @@ const resultsWithLabels = (
   return newResults
 }
 
+const AvailableFacets: React.FC<Omit<FacetDisplayProps, "clearAllFilters">> = ({
+  facetMap,
+  facetOptions,
+  activeFacets,
+  onFacetChange
+}) => {
+  return (
+    <>
+      {facetMap.map(facetSetting =>
+        facetSetting.useFilterableFacet ? (
+          <FilterableFacet
+            key={facetSetting.name}
+            results={resultsWithLabels(
+              facetOptions(facetSetting.name) || [],
+              facetSetting.labelFunction
+            )}
+            name={facetSetting.name}
+            title={facetSetting.title}
+            selected={activeFacets[facetSetting.name] || []}
+            onUpdate={e =>
+              onFacetChange(e.target.name, e.target.value, e.target.checked)
+            }
+            expandedOnLoad={facetSetting.expandedOnLoad}
+          />
+        ) : (
+          <Facet
+            key={facetSetting.name}
+            title={facetSetting.title}
+            name={facetSetting.name}
+            results={resultsWithLabels(
+              facetOptions(facetSetting.name) || [],
+              facetSetting.labelFunction
+            )}
+            onUpdate={e =>
+              onFacetChange(e.target.name, e.target.value, e.target.checked)
+            }
+            selected={activeFacets[facetSetting.name] || []}
+            expandedOnLoad={facetSetting.expandedOnLoad}
+          />
+        )
+      )}
+    </>
+  )
+}
+
 const FacetDisplay = React.memo(
-  function FacetDisplay(props: Props) {
+  function FacetDisplay(props: FacetDisplayProps) {
     const {
       facetMap,
       facetOptions,
@@ -83,39 +128,12 @@ const FacetDisplay = React.memo(
             ))
           )}
         </div>
-        {facetMap.map((facetSetting, key) =>
-          facetSetting.useFilterableFacet ? (
-            <FilterableFacet
-              key={key}
-              results={resultsWithLabels(
-                facetOptions(facetSetting.name) || [],
-                facetSetting.labelFunction
-              )}
-              name={facetSetting.name}
-              title={facetSetting.title}
-              selected={activeFacets[facetSetting.name] || []}
-              onUpdate={e =>
-                onFacetChange(e.target.name, e.target.value, e.target.checked)
-              }
-              expandedOnLoad={facetSetting.expandedOnLoad}
-            />
-          ) : (
-            <Facet
-              key={key}
-              title={facetSetting.title}
-              name={facetSetting.name}
-              results={resultsWithLabels(
-                facetOptions(facetSetting.name) || [],
-                facetSetting.labelFunction
-              )}
-              onUpdate={e =>
-                onFacetChange(e.target.name, e.target.value, e.target.checked)
-              }
-              selected={activeFacets[facetSetting.name] || []}
-              expandedOnLoad={facetSetting.expandedOnLoad}
-            />
-          )
-        )}
+        <AvailableFacets
+          facetMap={facetMap}
+          facetOptions={facetOptions}
+          activeFacets={activeFacets}
+          onFacetChange={onFacetChange}
+        />
       </>
     )
   },
@@ -130,3 +148,4 @@ const FacetDisplay = React.memo(
 )
 
 export default FacetDisplay
+export { AvailableFacets }

src/facet_display/FilterableFacet.tsx

@@ -88,9 +88,9 @@ function FilterableFacet(props: Props) {
             )}
           </div>
           <div className="facet-list">
-            {facets.map((facet, i) => (
+            {facets.map(facet => (
               <SearchFacetItem
-                key={i}
+                key={`${name}-${facet.key}`}
                 facet={facet}
                 isChecked={contains(facet.key, selected || [])}
                 onUpdate={onUpdate}