Units page prefetch

jonkafton · jonkafton · commit 0c46451dad58 · 2024-11-14T19:00:16.000+01:00
diff --git a/frontends/api/src/ssr/prefetch.ts b/frontends/api/src/ssr/prefetch.ts
@@ -1,13 +1,19 @@
 import { QueryClient, dehydrate } from "@tanstack/react-query"
 import type { Query } from "@tanstack/react-query"
 
-// Utility to avoid repetition in server components
-export const prefetch = async (queries: (Query | unknown)[]) => {
-  const queryClient = new QueryClient()
+/* Utility to avoid repetition in server components
+ * Optionally pass the queryClient returned from a previous prefetch
+ * where queries are dependent on previous results
+ */
+export const prefetch = async (
+  queries: (Query | unknown)[],
+  queryClient?: QueryClient,
+) => {
+  queryClient = queryClient || new QueryClient()
 
   await Promise.all(
     queries.map((query) => queryClient.prefetchQuery(query as Query)),
   )
 
-  return dehydrate(queryClient)
+  return { dehydratedState: dehydrate(queryClient), queryClient }
 }
diff --git a/frontends/main/src/app-pages/UnitsListingPage/UnitCard.tsx b/frontends/main/src/app-pages/UnitsListingPage/UnitCard.tsx
@@ -1,5 +1,5 @@
 import React from "react"
-import { LearningResourceOfferorDetail, OfferedByEnum } from "api"
+import type { LearningResourceOfferorDetail, OfferedByEnum } from "api"
 import {
   Card,
   Skeleton,
diff --git a/frontends/main/src/app-pages/UnitsListingPage/UnitsListingPage.tsx b/frontends/main/src/app-pages/UnitsListingPage/UnitsListingPage.tsx
@@ -14,7 +14,7 @@ import {
 import { backgroundSrcSetCSS } from "ol-utilities"
 import backgroundSteps from "@/public/images/backgrounds/background_steps.jpg"
 import { RiBookOpenLine, RiSuitcaseLine } from "@remixicon/react"
-import { LearningResourceOfferorDetail } from "api"
+import type { LearningResourceOfferorDetail } from "api"
 import { HOME } from "@/common/urls"
 import { UnitCards, UnitCardLoading } from "./UnitCard"
 import { aggregateProgramCounts, aggregateCourseCounts } from "@/common/utils"
@@ -168,7 +168,6 @@ const UnitSection: React.FC<UnitSectionProps> = (props) => {
     programCounts,
     isLoading,
   } = props
-
   return (
     <UnitContainer data-testid={`UnitSection-${id}`}>
       <div>
diff --git a/frontends/main/src/app/departments/page.tsx b/frontends/main/src/app/departments/page.tsx
@@ -1,18 +1,18 @@
 import React from "react"
 import { Metadata } from "next"
-import DepartmentListingPage from "@/app-pages/DepartmentListingPage/DepartmentListingPage"
-import { standardizeMetadata } from "@/common/metadata"
 import { Hydrate } from "@tanstack/react-query"
+import { standardizeMetadata } from "@/common/metadata"
 import { learningResources } from "api/hooks/learningResources"
 import { channels } from "api/hooks/channels"
 import { prefetch } from "api/ssr/prefetch"
+import DepartmentListingPage from "@/app-pages/DepartmentListingPage/DepartmentListingPage"
 
 export const metadata: Metadata = standardizeMetadata({
   title: "Departments",
 })
 
 const Page: React.FC = async () => {
-  const dehydratedState = await prefetch([
+  const { dehydratedState } = await prefetch([
     channels.countsByType("department"),
     learningResources.schools(),
   ])
diff --git a/frontends/main/src/app/learningpaths/[id]/page.tsx b/frontends/main/src/app/learningpaths/[id]/page.tsx
@@ -1,7 +1,7 @@
 import React from "react"
-import LearningPathDetailsPage from "@/app-pages/LearningPathDetailsPage/LearningPathDetailsPage"
-import RestrictedRoute from "@/components/RestrictedRoute/RestrictedRoute"
 import { Permissions } from "@/common/permissions"
+import RestrictedRoute from "@/components/RestrictedRoute/RestrictedRoute"
+import LearningPathDetailsPage from "@/app-pages/LearningPathDetailsPage/LearningPathDetailsPage"
 
 const Page: React.FC = () => {
   return (
diff --git a/frontends/main/src/app/learningpaths/page.tsx b/frontends/main/src/app/learningpaths/page.tsx
@@ -1,10 +1,9 @@
 import React from "react"
-import LearningPathListingPage from "@/app-pages/LearningPathListingPage/LearningPathListingPage"
-
 import { Metadata } from "next"
 import { standardizeMetadata } from "@/common/metadata"
-import RestrictedRoute from "@/components/RestrictedRoute/RestrictedRoute"
 import { Permissions } from "@/common/permissions"
+import RestrictedRoute from "@/components/RestrictedRoute/RestrictedRoute"
+import LearningPathListingPage from "@/app-pages/LearningPathListingPage/LearningPathListingPage"
 
 export const metadata: Metadata = standardizeMetadata({
   title: "Learning Paths",
diff --git a/frontends/main/src/app/onboarding/page.tsx b/frontends/main/src/app/onboarding/page.tsx
@@ -1,9 +1,9 @@
 import React from "react"
 import { Metadata } from "next"
-import OnboardingPage from "@/app-pages/OnboardingPage/OnboardingPage"
 import { standardizeMetadata } from "@/common/metadata"
-import RestrictedRoute from "@/components/RestrictedRoute/RestrictedRoute"
 import { Permissions } from "@/common/permissions"
+import RestrictedRoute from "@/components/RestrictedRoute/RestrictedRoute"
+import OnboardingPage from "@/app-pages/OnboardingPage/OnboardingPage"
 
 export const metadata: Metadata = standardizeMetadata({
   title: "Onboarding",
diff --git a/frontends/main/src/app/page.tsx b/frontends/main/src/app/page.tsx
@@ -24,7 +24,7 @@ export async function generateMetadata({
 }
 
 const Page: React.FC = async () => {
-  const dehydratedState = await prefetch([
+  const { dehydratedState } = await prefetch([
     // Featured Courses carousel "All"
     learningResources.featured({
       limit: 12,
diff --git a/frontends/main/src/app/privacy/page.tsx b/frontends/main/src/app/privacy/page.tsx
@@ -1,8 +1,8 @@
 import React from "react"
 import { Metadata } from "next"
-
-import PrivacyPage from "@/app-pages/PrivacyPage/PrivacyPage"
 import { standardizeMetadata } from "@/common/metadata"
+import PrivacyPage from "@/app-pages/PrivacyPage/PrivacyPage"
+
 export const metadata: Metadata = standardizeMetadata({
   title: "Privacy Policy",
 })
diff --git a/frontends/main/src/app/terms/page.tsx b/frontends/main/src/app/terms/page.tsx
@@ -1,8 +1,8 @@
 import React from "react"
 import { Metadata } from "next"
-
-import TermsPage from "@/app-pages/TermsPage/TermsPage"
 import { standardizeMetadata } from "@/common/metadata"
+import TermsPage from "@/app-pages/TermsPage/TermsPage"
+
 export const metadata: Metadata = standardizeMetadata({
   title: "Terms of Service",
 })
diff --git a/frontends/main/src/app/topics/page.tsx b/frontends/main/src/app/topics/page.tsx
@@ -4,16 +4,15 @@ import { Hydrate } from "@tanstack/react-query"
 import { prefetch } from "api/ssr/prefetch"
 import { learningResources } from "api/hooks/learningResources"
 import { channels } from "api/hooks/channels"
+import TopicsListingPage from "@/app-pages/TopicsListingPage/TopicsListingPage"
 
 import { standardizeMetadata } from "@/common/metadata"
 export const metadata: Metadata = standardizeMetadata({
   title: "Topics",
 })
 
-import TopicsListingPage from "@/app-pages/TopicsListingPage/TopicsListingPage"
-
 const Page: React.FC = async () => {
-  const dehydratedState = await prefetch([
+  const { dehydratedState } = await prefetch([
     learningResources.topics({}),
     channels.countsByType("topic"),
   ])
diff --git a/frontends/main/src/app/units/page.tsx b/frontends/main/src/app/units/page.tsx
@@ -1,14 +1,40 @@
 import React from "react"
 import { Metadata } from "next"
-
-import UnitsListingPage from "@/app-pages/UnitsListingPage/UnitsListingPage"
+import { Hydrate } from "@tanstack/react-query"
+import { prefetch } from "api/ssr/prefetch"
 import { standardizeMetadata } from "@/common/metadata"
+import { learningResources } from "api/hooks/learningResources"
+import { channels } from "api/hooks/channels"
+import type { PaginatedLearningResourceOfferorDetailList } from "api"
+import UnitsListingPage from "@/app-pages/UnitsListingPage/UnitsListingPage"
+
 export const metadata: Metadata = standardizeMetadata({
   title: "Units",
 })
 
-const Page: React.FC = () => {
-  return <UnitsListingPage />
+const Page: React.FC = async () => {
+  const { queryClient } = await prefetch([
+    learningResources.offerors({}),
+    channels.countsByType("unit"),
+  ])
+
+  const units = queryClient
+    .getQueryData<PaginatedLearningResourceOfferorDetailList>(
+      learningResources.offerors({}).queryKey,
+    )!
+    .results.filter((unit) => !!unit.value_prop)
+    .map((unit) => unit.code)
+
+  const { dehydratedState } = await prefetch(
+    units.map((unit) => channels.detailByType("unit", unit)),
+    queryClient,
+  )
+
+  return (
+    <Hydrate state={dehydratedState}>
+      <UnitsListingPage />
+    </Hydrate>
+  )
 }
 
 export default Page
diff --git a/frontends/main/src/page-components/LearningResourceDrawer/LearningResourceDrawer.tsx b/frontends/main/src/page-components/LearningResourceDrawer/LearningResourceDrawer.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import React, { useCallback } from "react"
 import { RESOURCE_DRAWER_QUERY_PARAM } from "@/common/urls"
 import { ReadonlyURLSearchParams, useSearchParams } from "next/navigation"
@@ -25,7 +27,7 @@ const useResourceDrawerHref = () => {
 
   return useCallback(
     (resourceId: number) => {
-      const hash = window?.location.hash
+      const hash = typeof window !== "undefined" && window?.location.hash
       return `?${getOpenDrawerSearchParams(searchParams, resourceId)}${hash || ""}`
     },
     [searchParams],

Original file line number	Diff line number	Diff line change
`@@ -24,7 +24,7 @@ export async function generateMetadata({`
`24`	`24`	`}`
`25`	`25`
`26`	`26`	`const Page: React.FC = async () => {`
`27`		`- const dehydratedState = await prefetch([`
	`27`	`+ const { dehydratedState } = await prefetch([`
`28`	`28`	`// Featured Courses carousel "All"`
`29`	`29`	`learningResources.featured({`
`30`	`30`	`limit: 12,`