Server render search results (search and channel pages)

frontends/api/src/ssr/prefetch.ts

@@ -12,7 +12,9 @@ export const prefetch = async (
   queryClient = queryClient || new QueryClient()
 
   await Promise.all(
-    queries.map((query) => queryClient.prefetchQuery(query as Query)),
+    queries
+      .filter(Boolean)
+      .map((query) => queryClient.prefetchQuery(query as Query)),
   )
 
   return { dehydratedState: dehydrate(queryClient), queryClient }

frontends/main/package.json

@@ -12,7 +12,7 @@
   "dependencies": {
     "@ebay/nice-modal-react": "^1.2.13",
     "@emotion/cache": "^11.13.1",
-    "@mitodl/course-search-utils": "^3.3.1",
+    "@mitodl/course-search-utils": "3.3.2",
     "@next/bundle-analyzer": "^14.2.15",
     "@remixicon/react": "^4.2.0",
     "@sentry/nextjs": "^8.36.0",

frontends/main/src/app-pages/ChannelPage/ChannelPage.tsx

@@ -6,13 +6,9 @@ import { useParams } from "next/navigation"
 import { ChannelPageTemplate } from "./ChannelPageTemplate"
 import { useChannelDetail } from "api/hooks/channels"
 import ChannelSearch from "./ChannelSearch"
-import type {
-  Facets,
-  FacetKey,
-  BooleanFacets,
-} from "@mitodl/course-search-utils"
 import { ChannelTypeEnum } from "api/v0"
 import { Typography } from "ol-components"
+import { getConstantSearchParams } from "./searchRequests"
 
 type RouteParams = {
   channelType: ChannelTypeEnum
@@ -22,20 +18,11 @@ type RouteParams = {
 const ChannelPage: React.FC = () => {
   const { channelType, name } = useParams<RouteParams>()
   const channelQuery = useChannelDetail(String(channelType), String(name))
-  const searchParams: Facets & BooleanFacets = {}
   const publicDescription = channelQuery.data?.public_description
 
-  if (channelQuery.data?.search_filter) {
-    const urlParams = new URLSearchParams(channelQuery.data.search_filter)
-    for (const [key, value] of urlParams.entries()) {
-      const paramEntry = searchParams[key as FacetKey]
-      if (paramEntry !== undefined) {
-        paramEntry.push(value)
-      } else {
-        searchParams[key as FacetKey] = [value]
-      }
-    }
-  }
+  const channelSearchFilter = channelQuery.data?.search_filter
+
+  const searchParams = getConstantSearchParams(channelSearchFilter)
 
   return (
     name &&
@@ -46,9 +33,9 @@ const ChannelPage: React.FC = () => {
           {publicDescription && (
             <Typography variant="body1">{publicDescription}</Typography>
           )}
-          {channelQuery.data?.search_filter && (
+          {channelSearchFilter && (
             <ChannelSearch
-              channelTitle={channelQuery.data.title}
+              channelTitle={channelQuery.data!.title}
               constantSearchParams={searchParams}
               channelType={channelType}
             />

frontends/main/src/app-pages/ChannelPage/ChannelSearch.tsx

@@ -1,23 +1,13 @@
 import React, { useCallback, useMemo } from "react"
-import { LearningResourceOfferor } from "api"
 import { ChannelTypeEnum } from "api/v0"
 import { useOfferorsList } from "api/hooks/learningResources"
-
-import {
-  useResourceSearchParams,
-  UseResourceSearchParamsProps,
-} from "@mitodl/course-search-utils"
-import type {
-  Facets,
-  BooleanFacets,
-  FacetManifest,
-} from "@mitodl/course-search-utils"
+import { useResourceSearchParams } from "@mitodl/course-search-utils"
+import type { Facets, BooleanFacets } from "@mitodl/course-search-utils"
 import { useSearchParams } from "@mitodl/course-search-utils/next"
 import SearchDisplay from "@/page-components/SearchDisplay/SearchDisplay"
 import { Container, styled, VisuallyHidden } from "ol-components"
 import { SearchField } from "@/page-components/SearchField/SearchField"
-
-import { getFacetManifest } from "@/app-pages/SearchPage/SearchPage"
+import { getFacets } from "./searchRequests"
 
 import _ from "lodash"
 
@@ -35,34 +25,6 @@ const StyledSearchField = styled(SearchField)({
   width: "624px",
 })
 
-const FACETS_BY_CHANNEL_TYPE: Record<ChannelTypeEnum, string[]> = {
-  [ChannelTypeEnum.Topic]: [
-    "free",
-    "resource_type",
-    "certification_type",
-    "delivery",
-    "offered_by",
-    "department",
-  ],
-  [ChannelTypeEnum.Department]: [
-    "free",
-    "resource_type",
-    "certification_type",
-    "topic",
-    "delivery",
-    "offered_by",
-  ],
-  [ChannelTypeEnum.Unit]: [
-    "free",
-    "resource_type",
-    "topic",
-    "certification_type",
-    "delivery",
-    "department",
-  ],
-  [ChannelTypeEnum.Pathway]: [],
-}
-
 const SHOW_PROFESSIONAL_TOGGLE_BY_CHANNEL_TYPE: Record<
   ChannelTypeEnum,
   boolean
@@ -73,24 +35,6 @@ const SHOW_PROFESSIONAL_TOGGLE_BY_CHANNEL_TYPE: Record<
   [ChannelTypeEnum.Pathway]: false,
 }
 
-const getFacetManifestForChannelType = (
-  channelType: ChannelTypeEnum,
-  offerors: Record<string, LearningResourceOfferor>,
-  constantSearchParams: Facets,
-  resourceCategory: string | null,
-): FacetManifest => {
-  const facets = FACETS_BY_CHANNEL_TYPE[channelType] || []
-  return getFacetManifest(offerors, resourceCategory)
-    .filter(
-      (facetSetting) =>
-        !Object.keys(constantSearchParams).includes(facetSetting.name) &&
-        facets.includes(facetSetting.name),
-    )
-    .sort(
-      (a, b) => facets.indexOf(a.name) - facets.indexOf(b.name),
-    ) as FacetManifest
-}
-
 interface ChannelSearchProps {
   constantSearchParams: Facets & BooleanFacets
   channelType: ChannelTypeEnum
@@ -110,14 +54,9 @@ const ChannelSearch: React.FC<ChannelSearchProps> = ({
   const [searchParams, setSearchParams] = useSearchParams()
   const resourceCategory = searchParams.get("resource_category")
 
-  const facetManifest = useMemo(
+  const { facetNames, facetManifest } = useMemo(
     () =>
-      getFacetManifestForChannelType(
-        channelType,
-        offerors,
-        constantSearchParams,
-        resourceCategory,
-      ),
+      getFacets(channelType, offerors, constantSearchParams, resourceCategory),
     [offerors, channelType, constantSearchParams, resourceCategory],
   )
 
@@ -140,18 +79,6 @@ const ChannelSearch: React.FC<ChannelSearchProps> = ({
     setPage(1)
   }, [setPage])
 
-  const facetNames = Array.from(
-    new Set(
-      facetManifest.flatMap((facet) => {
-        if (facet.type === "group") {
-          return facet.facets.map((subfacet) => subfacet.name)
-        } else {
-          return [facet.name]
-        }
-      }),
-    ),
-  ) as UseResourceSearchParamsProps["facets"]
-
   const {
     hasFacets,
     params,

frontends/main/src/app-pages/ChannelPage/searchRequests.ts

@@ -0,0 +1,102 @@
+import type {
+  Facets,
+  FacetKey,
+  BooleanFacets,
+  FacetManifest,
+  UseResourceSearchParamsProps,
+} from "@mitodl/course-search-utils"
+import { LearningResourceOfferor } from "api"
+import { ChannelTypeEnum } from "api/v0"
+import { getFacetManifest } from "@/page-components/SearchDisplay/getFacetManifest"
+
+export const getConstantSearchParams = (searchFilter?: string) => {
+  const searchParams: Facets & BooleanFacets = {}
+
+  if (searchFilter) {
+    const urlParams = new URLSearchParams(searchFilter)
+    for (const [key, value] of urlParams.entries()) {
+      const paramEntry = searchParams[key as FacetKey]
+      if (paramEntry !== undefined) {
+        paramEntry.push(value)
+      } else {
+        searchParams[key as FacetKey] = [value]
+      }
+    }
+  }
+
+  return searchParams
+}
+
+const FACETS_BY_CHANNEL_TYPE: Record<ChannelTypeEnum, string[]> = {
+  [ChannelTypeEnum.Topic]: [
+    "free",
+    "resource_type",
+    "certification_type",
+    "delivery",
+    "offered_by",
+    "department",
+  ],
+  [ChannelTypeEnum.Department]: [
+    "free",
+    "resource_type",
+    "certification_type",
+    "topic",
+    "delivery",
+    "offered_by",
+  ],
+  [ChannelTypeEnum.Unit]: [
+    "free",
+    "resource_type",
+    "topic",
+    "certification_type",
+    "delivery",
+    "department",
+  ],
+  [ChannelTypeEnum.Pathway]: [],
+}
+
+const getFacetManifestForChannelType = (
+  channelType: ChannelTypeEnum,
+  offerors: Record<string, LearningResourceOfferor>,
+  constantSearchParams: Facets,
+  resourceCategory: string | null,
+): FacetManifest => {
+  const facets = FACETS_BY_CHANNEL_TYPE[channelType] || []
+  return getFacetManifest(offerors, resourceCategory)
+    .filter(
+      (facetSetting) =>
+        !Object.keys(constantSearchParams).includes(facetSetting.name) &&
+        facets.includes(facetSetting.name),
+    )
+    .sort(
+      (a, b) => facets.indexOf(a.name) - facets.indexOf(b.name),
+    ) as FacetManifest
+}
+
+export const getFacets = (
+  channelType: ChannelTypeEnum,
+  offerors: Record<string, LearningResourceOfferor>,
+  constantSearchParams: Facets,
+  resourceCategory: string | null,
+) => {
+  const facetManifest = getFacetManifestForChannelType(
+    channelType,
+    offerors,
+    constantSearchParams,
+    resourceCategory,
+  )
+
+  const facetNames = Array.from(
+    new Set(
+      facetManifest.flatMap((facet) => {
+        if (facet.type === "group") {
+          return facet.facets.map((subFacet) => subFacet.name)
+        } else {
+          return [facet.name]
+        }
+      }),
+    ),
+  ) as UseResourceSearchParamsProps["facets"]
+
+  return { facetNames, facetManifest }
+}