Revert "Server rendering for homepage, units and topics listing pages (#1822)" (#1838)

This reverts commit c09f9b5.

Author: jonkafton

frontends/api/src/hooks/channels/index.ts

@@ -55,5 +55,5 @@ export {
   useChannelsList,
   useChannelPartialUpdate,
   useChannelCounts,
-  channels,
+  channels as channelsKeyFactory,
 }

frontends/api/src/hooks/learningResources/index.ts

@@ -531,5 +531,5 @@ export {
   useListItemMove,
   usePlatformsList,
   useSchoolsList,
-  learningResources,
+  learningResources as learningResourcesKeyFactory,
 }

frontends/api/src/hooks/learningResources/keyFactory.ts

@@ -33,11 +33,6 @@ import type {
 
 import { createQueryKeys } from "@lukemorales/query-key-factory"
 
-/* TODO we can add this back in once resource user list membership is implemented in the front end
- * Currently we fetch on the server for public resources and then refetch on the client for the
- * user lists parents. Randomizing therefore causes a content flicker as the client loaded
- * sequence replaces the server rendered sequence.
-
 const shuffle = ([...arr]) => {
   let m = arr.length
   while (m) {
@@ -66,7 +61,6 @@ const randomizeResults = ([...results]) => {
     })
   return randomizedResults
 }
-*/
 
 const learningResources = createQueryKeys("learningResources", {
   detail: (id: number) => ({
@@ -87,7 +81,7 @@ const learningResources = createQueryKeys("learningResources", {
     queryKey: [params],
     queryFn: () => {
       return featuredApi.featuredList(params).then((res) => {
-        // res.data.results = randomizeResults(res.data?.results)
+        res.data.results = randomizeResults(res.data?.results)
         return res.data
       })
     },

frontends/api/src/hooks/newsEvents/index.ts

@@ -19,5 +19,5 @@ export {
   useNewsEventsList,
   useNewsEventsDetail,
   NewsEventsListFeedTypeEnum,
-  newsEvents,
+  newsEvents as newsEventsKeyFactory,
 }

frontends/api/src/hooks/testimonials/index.ts

@@ -23,4 +23,8 @@ const useTestimonialDetail = (id: number | undefined) => {
   })
 }
 
-export { useTestimonialDetail, useTestimonialList, testimonials }
+export {
+  useTestimonialDetail,
+  useTestimonialList,
+  testimonials as testimonialsKeyFactory,
+}

frontends/api/src/ssr/prefetch.ts

@@ -1,19 +1,13 @@
 import { QueryClient, dehydrate } from "@tanstack/react-query"
 import type { Query } from "@tanstack/react-query"
 
-/* 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()
+// Utility to avoid repetition in server components
+export const prefetch = async (queries: (Query | unknown)[]) => {
+  const queryClient = new QueryClient()
 
   await Promise.all(
     queries.map((query) => queryClient.prefetchQuery(query as Query)),
   )
 
-  return { dehydratedState: dehydrate(queryClient), queryClient }
+  return dehydrate(queryClient)
 }

frontends/api/src/ssr/usePrefetchWarnings.test.ts

@@ -4,7 +4,7 @@ import { usePrefetchWarnings } from "./usePrefetchWarnings"
 import { setupReactQueryTest } from "../hooks/test-utils"
 import { urls, factories, setMockResponse } from "../test-utils"
 import {
-  learningResources,
+  learningResourcesKeyFactory,
   useLearningResourcesDetail,
 } from "../hooks/learningResources"
 
@@ -45,7 +45,7 @@ describe("SSR prefetch warnings", () => {
         expect.objectContaining({
           disabled: false,
           initialStatus: "loading",
-          key: learningResources.detail(1).queryKey,
+          key: learningResourcesKeyFactory.detail(1).queryKey,
           observerCount: 1,
         }),
       ],
@@ -65,7 +65,7 @@ describe("SSR prefetch warnings", () => {
       wrapper,
       initialProps: {
         queryClient,
-        exemptions: [learningResources.detail(1).queryKey],
+        exemptions: [learningResourcesKeyFactory.detail(1).queryKey],
       },
     })
 
@@ -83,7 +83,7 @@ describe("SSR prefetch warnings", () => {
     const { unmount } = renderHook(
       () =>
         useQuery({
-          ...learningResources.detail(1),
+          ...learningResourcesKeyFactory.detail(1),
           initialData: data,
         }),
       { wrapper },
@@ -105,9 +105,9 @@ describe("SSR prefetch warnings", () => {
       [
         {
           disabled: false,
-          hash: JSON.stringify(learningResources.detail(1).queryKey),
+          hash: JSON.stringify(learningResourcesKeyFactory.detail(1).queryKey),
           initialStatus: "success",
-          key: learningResources.detail(1).queryKey,
+          key: learningResourcesKeyFactory.detail(1).queryKey,
           observerCount: 0,
           status: "success",
         },

frontends/api/src/ssr/usePrefetchWarnings.ts

@@ -45,13 +45,6 @@ export const usePrefetchWarnings = ({
    */
   useEffect(
     () => {
-      /* Invalidate all learning resource queries so they are re-fetched in the client
-       * for session specific data (user list memberships).
-       * This is interim, until the memberships endpoint is implemented in the frontend
-       * TODO remove once complete (see https://github.com/mitodl/hq/issues/5159)
-       */
-      queryClient.invalidateQueries(["learningResources"])
-
       if (process.env.NODE_ENV === "production") {
         return
       }

frontends/api/src/test-utils/factories/channels.ts

@@ -148,7 +148,6 @@ const _channelShared = (): Partial<Omit<Channel, "channel_type">> => {
       key: faker.lorem.slug(),
       value: faker.lorem.slug(),
     }),
-    channel_url: `${faker.internet.url({ appendSlash: false })}${faker.system.directoryPath()}`,
   }
 }
 

frontends/api/src/test-utils/urls.ts

@@ -8,7 +8,6 @@
 import type {
   NewsEventsApiNewsEventsListRequest,
   TestimonialsApi,
-  ChannelsApi,
 } from "../generated/v0"
 import type {
   LearningResourcesApi as LRApi,
@@ -180,8 +179,6 @@ const channels = {
   details: (channelType: string, name: string) =>
     `${API_BASE_URL}/api/v0/channels/type/${channelType}/${name}/`,
   patch: (id: number) => `${API_BASE_URL}/api/v0/channels/${id}/`,
-  list: (params?: Paramsv0<ChannelsApi, "channelsList">) =>
-    `${API_BASE_URL}/api/v0/channels/${query(params)}`,
 }
 
 const widgetLists = {

frontends/main/src/app-pages/UnitsListingPage/UnitCard.tsx

@@ -1,6 +1,5 @@
 import React from "react"
-import type { OfferedByEnum } from "api"
-import type { UnitChannel } from "api/v0"
+import { LearningResourceOfferorDetail, OfferedByEnum } from "api"
 import {
   Card,
   Skeleton,
@@ -9,6 +8,7 @@ import {
   theme,
   UnitLogo,
 } from "ol-components"
+import { useChannelDetail } from "api/hooks/channels"
 import Link from "next/link"
 
 const CardStyled = styled(Card)({
@@ -102,23 +102,25 @@ const CountsText = styled(Typography)(({ theme }) => ({
 }))
 
 interface UnitCardsProps {
-  channels: UnitChannel[] | undefined
+  units: LearningResourceOfferorDetail[] | undefined
   courseCounts: Record<string, number>
   programCounts: Record<string, number>
 }
 
 interface UnitCardProps {
-  channel: UnitChannel
+  unit: LearningResourceOfferorDetail
   courseCount: number
   programCount: number
 }
 
 const UnitCard: React.FC<UnitCardProps> = (props) => {
-  const { channel, courseCount, programCount } = props
-  const unit = channel.unit_detail.unit
+  const { unit, courseCount, programCount } = props
+  const channelDetailQuery = useChannelDetail("unit", unit.code)
+  const channelDetail = channelDetailQuery.data
+  const unitUrl = channelDetail?.channel_url
 
-  if (!channel.channel_url) return null
-  const href = new URL(channel.channel_url).pathname
+  if (!unitUrl) return null
+  const href = unitUrl && new URL(unitUrl).pathname
 
   return (
     <CardStyled forwardClicksToLink data-testid={`unit-card-${unit.code}`}>
@@ -132,7 +134,9 @@ const UnitCard: React.FC<UnitCardProps> = (props) => {
             </LogoContainer>
             <CardBottom>
               <ValuePropContainer>
-                <HeadingText>{channel?.configuration?.heading}</HeadingText>
+                <HeadingText>
+                  {channelDetail?.configuration?.heading}
+                </HeadingText>
               </ValuePropContainer>
               <CountsTextContainer>
                 <CountsText data-testid={`course-count-${unit.code}`}>
@@ -170,18 +174,17 @@ export const UnitCardLoading = () => {
 }
 
 export const UnitCards: React.FC<UnitCardsProps> = (props) => {
-  const { channels, courseCounts, programCounts } = props
+  const { units, courseCounts, programCounts } = props
   return (
     <>
-      {channels?.map((channel) => {
-        const unit = channel.unit_detail.unit
+      {units?.map((unit) => {
         const courseCount = courseCounts[unit.code] || 0
         const programCount = programCounts[unit.code] || 0
 
         return unit.value_prop ? (
           <UnitCard
             key={unit.code}
-            channel={channel}
+            unit={unit}
             courseCount={courseCount}
             programCount={programCount}
           />