Single request for all unit channel details

Author: jonkafton

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

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

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

@@ -1,8 +1,7 @@
 "use client"
 
 import React from "react"
-import { useChannelCounts } from "api/hooks/channels"
-import { useOfferorsList } from "api/hooks/learningResources"
+import { useChannelCounts, useChannelsList } from "api/hooks/channels"
 import {
   Banner,
   Container,
@@ -14,23 +13,23 @@ import {
 import { backgroundSrcSetCSS } from "ol-utilities"
 import backgroundSteps from "@/public/images/backgrounds/background_steps.jpg"
 import { RiBookOpenLine, RiSuitcaseLine } from "@remixicon/react"
-import type { LearningResourceOfferorDetail } from "api"
+import type { Channel, UnitChannel } from "api/v0"
 import { HOME } from "@/common/urls"
 import { UnitCards, UnitCardLoading } from "./UnitCard"
 import { aggregateProgramCounts, aggregateCourseCounts } from "@/common/utils"
 
 const DESKTOP_WIDTH = "1056px"
 
-const sortUnits = (
-  units: Array<LearningResourceOfferorDetail> | undefined,
+const sortUnitChannels = (
+  channels: Array<Channel> | undefined,
   courseCounts: Record<string, number>,
   programCounts: Record<string, number>,
 ) => {
-  return units?.sort((a, b) => {
-    const courseCountA = courseCounts[a.code] || 0
-    const programCountA = programCounts[a.code] || 0
-    const courseCountB = courseCounts[b.code] || 0
-    const programCountB = programCounts[b.code] || 0
+  return channels?.sort((a, b) => {
+    const courseCountA = courseCounts[a.name] || 0
+    const programCountA = programCounts[a.name] || 0
+    const courseCountB = courseCounts[b.name] || 0
+    const programCountB = programCounts[b.name] || 0
     const totalA = courseCountA + programCountA
     const totalB = courseCountB + programCountB
     return totalB - totalA
@@ -151,7 +150,7 @@ interface UnitSectionProps {
   icon: React.ReactNode
   title: string
   description: string
-  units: LearningResourceOfferorDetail[] | undefined
+  channels: UnitChannel[] | undefined
   courseCounts: Record<string, number>
   programCounts: Record<string, number>
   isLoading?: boolean
@@ -163,7 +162,7 @@ const UnitSection: React.FC<UnitSectionProps> = (props) => {
     icon,
     title,
     description,
-    units,
+    channels,
     courseCounts,
     programCounts,
     isLoading,
@@ -186,7 +185,7 @@ const UnitSection: React.FC<UnitSectionProps> = (props) => {
             .map((_null, i) => <UnitCardLoading key={`irrelevant-${i}`} />)
         ) : (
           <UnitCards
-            units={units}
+            channels={channels}
             courseCounts={courseCounts}
             programCounts={programCounts}
           />
@@ -197,8 +196,7 @@ const UnitSection: React.FC<UnitSectionProps> = (props) => {
 }
 
 const UnitsListingPage: React.FC = () => {
-  const unitsQuery = useOfferorsList()
-  const units = unitsQuery.data?.results
+  const channelsQuery = useChannelsList({ channel_type: "unit" })
   const channelCountQuery = useChannelCounts("unit")
 
   const courseCounts = channelCountQuery.data
@@ -207,33 +205,41 @@ const UnitsListingPage: React.FC = () => {
   const programCounts = channelCountQuery.data
     ? aggregateProgramCounts("name", channelCountQuery.data)
     : {}
-  const academicUnits = sortUnits(
-    units?.filter((unit) => unit.professional === false),
+
+  const channels = channelsQuery.data?.results
+  const academicUnits = sortUnitChannels(
+    channels?.filter(
+      (channel) =>
+        (channel as UnitChannel).unit_detail.unit.professional === false,
+    ),
     courseCounts,
     programCounts,
   )
-  const professionalUnits = sortUnits(
-    units?.filter((unit) => unit.professional === true),
+  const professionalUnits = sortUnitChannels(
+    channels?.filter(
+      (channel) =>
+        (channel as UnitChannel).unit_detail.unit.professional === true,
+    ),
     courseCounts,
     programCounts,
   )
 
-  const unitData = [
+  const sections = [
     {
       id: "academic",
       icon: <AcademicIcon />,
       title: "Academic Units",
       description:
         "MIT's Academic courses, programs, and materials mirror MIT curriculum and residential programs, making these available to a global audience. Approved by faculty committees, Academic content furnishes a comprehensive foundation of knowledge, skills, and abilities for students pursuing their academic objectives. Renowned for their rigor and challenge, MIT's Academic offerings deliver an experience on par with the campus environment.",
-      units: academicUnits,
+      channels: academicUnits as UnitChannel[],
     },
     {
       id: "professional",
       icon: <ProfessionalIcon />,
       title: "Professional Units",
       description:
         "MIT's Professional courses and programs are tailored for working professionals seeking essential practical skills across various industries. Led by MIT faculty and maintaining challenging standards, Professional courses and programs prioritize real-world applications, emphasize practical skills and are directly relevant to today's workforce.",
-      units: professionalUnits,
+      channels: professionalUnits as UnitChannel[],
     },
   ]
 
@@ -266,17 +272,17 @@ const UnitsListingPage: React.FC = () => {
               </PageHeaderText>
             </PageHeaderContainerInner>
           </PageHeaderContainer>
-          {unitData.map((unit) => (
+          {sections.map((section) => (
             <UnitSection
-              key={unit.id}
-              id={unit.id}
-              icon={unit.icon}
-              title={unit.title}
-              description={unit.description}
-              units={unit.units}
+              key={section.id}
+              id={section.id}
+              icon={section.icon}
+              title={section.title}
+              description={section.description}
+              channels={section.channels}
               courseCounts={courseCounts}
               programCounts={programCounts}
-              isLoading={unitsQuery.isLoading}
+              isLoading={channelsQuery.isLoading}
             />
           ))}
         </PageContent>

frontends/main/src/app/units/page.tsx

@@ -3,33 +3,19 @@ import { Metadata } from "next"
 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 = async () => {
-  const { queryClient } = await prefetch([
-    learningResources.offerors({}),
+  const { dehydratedState } = await prefetch([
     channels.countsByType("unit"),
+    channels.list({ channel_type: "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 />