Revert "Server render search results (search and channel pages) (#1833)"

This reverts commit c92adf0.

Author: jonkafton

frontends/api/src/ssr/prefetch.ts

@@ -12,9 +12,7 @@ export const prefetch = async (
   queryClient = queryClient || new QueryClient()
 
   await Promise.all(
-    queries
-      .filter(Boolean)
-      .map((query) => queryClient.prefetchQuery(query as Query)),
+    queries.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": "git://github.com/mitodl/course-search-utils.git#jk/6035-export-validation",
+    "@mitodl/course-search-utils": "^3.3.1",
     "@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,9 +6,13 @@ 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
@@ -18,11 +22,20 @@ 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
 
-  const channelSearchFilter = channelQuery.data?.search_filter
-
-  const searchParams = getConstantSearchParams(channelSearchFilter)
+  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]
+      }
+    }
+  }
 
   return (
     name &&
@@ -33,9 +46,9 @@ const ChannelPage: React.FC = () => {
           {publicDescription && (
             <Typography variant="body1">{publicDescription}</Typography>
           )}
-          {channelSearchFilter && (
+          {channelQuery.data?.search_filter && (
             <ChannelSearch
-              channelTitle={channelQuery.data!.title}
+              channelTitle={channelQuery.data.title}
               constantSearchParams={searchParams}
               channelType={channelType}
             />

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

@@ -1,13 +1,23 @@
 import React, { useCallback, useMemo } from "react"
+import { LearningResourceOfferor } from "api"
 import { ChannelTypeEnum } from "api/v0"
 import { useOfferorsList } from "api/hooks/learningResources"
-import { useResourceSearchParams } from "@mitodl/course-search-utils"
-import type { Facets, BooleanFacets } from "@mitodl/course-search-utils"
+
+import {
+  useResourceSearchParams,
+  UseResourceSearchParamsProps,
+} from "@mitodl/course-search-utils"
+import type {
+  Facets,
+  BooleanFacets,
+  FacetManifest,
+} 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 { getFacets } from "./searchRequests"
+
+import { getFacetManifest } from "@/app-pages/SearchPage/SearchPage"
 
 import _ from "lodash"
 
@@ -25,6 +35,34 @@ 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
@@ -35,6 +73,24 @@ 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
@@ -54,9 +110,14 @@ const ChannelSearch: React.FC<ChannelSearchProps> = ({
   const [searchParams, setSearchParams] = useSearchParams()
   const resourceCategory = searchParams.get("resource_category")
 
-  const { facetNames, facetManifest } = useMemo(
+  const facetManifest = useMemo(
     () =>
-      getFacets(channelType, offerors, constantSearchParams, resourceCategory),
+      getFacetManifestForChannelType(
+        channelType,
+        offerors,
+        constantSearchParams,
+        resourceCategory,
+      ),
     [offerors, channelType, constantSearchParams, resourceCategory],
   )
 
@@ -79,6 +140,18 @@ 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,