Cached department and topic page counts

frontends/mit-learn/src/common/utils.ts

@@ -1,3 +1,4 @@
+import { ChannelCounts } from "api/v0"
 const getSearchParamMap = (urlParams: URLSearchParams) => {
   const params: Record<string, string[] | string> = {}
   for (const [key] of urlParams.entries()) {
@@ -6,4 +7,26 @@ const getSearchParamMap = (urlParams: URLSearchParams) => {
   return params
 }
 
-export { getSearchParamMap }
+const aggregateProgramCounts = (
+  groupBy: string,
+  data: Array<ChannelCounts>,
+): Record<string, number> => {
+  return Object.fromEntries(
+    Object.entries(data).map(([_key, value]) => {
+      return [value[groupBy as keyof ChannelCounts], value.counts.programs]
+    }),
+  )
+}
+
+const aggregateCourseCounts = (
+  groupBy: string,
+  data: Array<ChannelCounts>,
+): Record<string, number> => {
+  return Object.fromEntries(
+    Object.entries(data).map(([_key, value]) => {
+      return [value[groupBy as keyof ChannelCounts], value.counts.courses]
+    }),
+  )
+}
+
+export { getSearchParamMap, aggregateProgramCounts, aggregateCourseCounts }

frontends/mit-learn/src/pages/DepartmentListingPage/DepartmentListingPage.test.tsx

@@ -62,6 +62,48 @@ describe("DepartmentListingPage", () => {
     }
 
     setMockResponse.get(urls.schools.list(), schools)
+    setMockResponse.get(urls.channels.counts("department"), [
+      {
+        name: department1.name,
+        title: department1.name,
+        counts: {
+          programs: 1,
+          courses: 10,
+        },
+      },
+      {
+        name: department2.name,
+        title: department2.name,
+        counts: {
+          programs: 2,
+          courses: 20,
+        },
+      },
+      {
+        name: department3.name,
+        title: department3.name,
+        counts: {
+          programs: 0,
+          courses: 1,
+        },
+      },
+      {
+        name: department4.name,
+        title: department4.name,
+        counts: {
+          programs: 4,
+          courses: 40,
+        },
+      },
+      {
+        name: department5.name,
+        title: department5.name,
+        counts: {
+          programs: 5,
+          courses: 50,
+        },
+      },
+    ])
     setMockResponse.get(
       urls.search.resources({
         resource_type: ["course"],

frontends/mit-learn/src/pages/DepartmentListingPage/DepartmentListingPage.tsx

@@ -12,14 +12,8 @@ import {
   Breadcrumbs,
 } from "ol-components"
 import { pluralize } from "ol-utilities"
-import type {
-  LearningResourceSchool,
-  LearningResourcesSearchResponse,
-} from "api"
-import {
-  useLearningResourcesSearch,
-  useSchoolsList,
-} from "api/hooks/learningResources"
+import type { LearningResourceSchool } from "api"
+import { useSchoolsList } from "api/hooks/learningResources"
 import {
   RiPaletteLine,
   RiArrowRightSLine,
@@ -32,6 +26,8 @@ import {
 } from "@remixicon/react"
 import { HOME } from "@/common/urls"
 import MetaTags from "@/page-components/MetaTags/MetaTags"
+import { aggregateProgramCounts, aggregateCourseCounts } from "@/common/utils"
+import { useChannelCounts } from "api/hooks/channels"
 
 const SCHOOL_ICONS: Record<string, React.ReactNode> = {
   // School of Architecture and Planning
@@ -140,8 +136,8 @@ const SchoolDepartments: React.FC<SchoolDepartmentProps> = ({
       </SchoolTitle>
       <List disablePadding>
         {school.departments.map((department) => {
-          const courses = courseCounts[department.department_id] ?? 0
-          const programs = programCounts[department.department_id] ?? 0
+          const courses = courseCounts[department.name] ?? 0
+          const programs = programCounts[department.name] ?? 0
           const counts = [
             { count: courses, label: pluralize("Course", courses) },
             { count: programs, label: pluralize("Program", programs) },
@@ -183,34 +179,17 @@ const SchoolList = styled.div(({ theme }) => ({
   },
 }))
 
-const aggregateByDepartment = (
-  data: LearningResourcesSearchResponse,
-): Record<string, number> => {
-  const buckets = data.metadata.aggregations["department"] ?? []
-  return Object.fromEntries(
-    buckets.map((bucket) => {
-      return [bucket.key, bucket.doc_count]
-    }),
-  )
-}
-
 const DepartmentListingPage: React.FC = () => {
-  const schoolsQuery = useSchoolsList()
-  const courseQuery = useLearningResourcesSearch({
-    resource_type: ["course"],
-    aggregations: ["department"],
-  })
-  const programQuery = useLearningResourcesSearch({
-    resource_type: ["program"],
-    aggregations: ["department"],
-  })
-  const courseCounts = courseQuery.data
-    ? aggregateByDepartment(courseQuery.data)
+  const channelCountQuery = useChannelCounts("department")
+  const courseCounts = channelCountQuery.data
+    ? aggregateCourseCounts("title", channelCountQuery.data)
     : {}
-  const programCounts = programQuery.data
-    ? aggregateByDepartment(programQuery.data)
+  const programCounts = channelCountQuery.data
+    ? aggregateProgramCounts("title", channelCountQuery.data)
     : {}
 
+  const schoolsQuery = useSchoolsList()
+
   return (
     <>
       <MetaTags title="Departments" />

frontends/mit-learn/src/pages/OnboardingPage/OnboardingPage.tsx

@@ -229,7 +229,6 @@ const OnboardingPage: React.FC = () => {
         }
         values={formik.values.goals}
         onChange={(event) => {
-          console.log(event)
           formik.handleChange(event)
         }}
       />

frontends/mit-learn/src/pages/TopicListingPage/TopicsListingPage.test.tsx

@@ -51,6 +51,25 @@ describe("TopicsListingPage", () => {
       [t2.name]: 20,
     }
 
+    setMockResponse.get(urls.channels.counts("topic"), [
+      {
+        name: t1.name,
+        title: t1.name,
+        counts: {
+          programs: 10,
+          courses: 100,
+        },
+      },
+      {
+        name: t2.name,
+        title: t2.name,
+        counts: {
+          programs: 20,
+          courses: 200,
+        },
+      },
+    ])
+
     setMockResponse.get(urls.topics.list(), {
       count: Object.values(topics).length,
       next: null,

frontends/mit-learn/src/pages/TopicListingPage/TopicsListingPage.tsx

@@ -15,13 +15,12 @@ import { Link } from "react-router-dom"
 import { propsNotNil } from "ol-utilities"
 import MetaTags from "@/page-components/MetaTags/MetaTags"
 
-import {
-  useLearningResourceTopics,
-  useLearningResourcesSearch,
-} from "api/hooks/learningResources"
-import { LearningResourcesSearchResponse, LearningResourceTopic } from "api"
+import { useLearningResourceTopics } from "api/hooks/learningResources"
+import { LearningResourceTopic } from "api"
 import RootTopicIcon from "@/components/RootTopicIcon/RootTopicIcon"
 import { HOME } from "@/common/urls"
+import { aggregateProgramCounts, aggregateCourseCounts } from "@/common/utils"
+import { useChannelCounts } from "api/hooks/channels"
 
 const TOPICS_BANNER_IMAGE = "/static/images/background_steps.jpeg"
 
@@ -182,17 +181,6 @@ const TopicBoxLoading = () => {
 
 const Page = styled.div({})
 
-const aggregateByTopic = (
-  data: LearningResourcesSearchResponse,
-): Record<string, number> => {
-  const buckets = data.metadata.aggregations["topic"] ?? []
-  return Object.fromEntries(
-    buckets.map((bucket) => {
-      return [bucket.key, bucket.doc_count]
-    }),
-  )
-}
-
 type TopicGroup = {
   id: number
   title: string
@@ -258,28 +246,23 @@ const RootTopicList = styled(PlainList)(({ theme }) => ({
 }))
 
 const ToopicsListingPage: React.FC = () => {
+  const channelCountQuery = useChannelCounts("topic")
   const topicsQuery = useLearningResourceTopics()
-  const courseQuery = useLearningResourcesSearch({
-    resource_type: ["course"],
-    aggregations: ["topic"],
-  })
-  const programQuery = useLearningResourcesSearch({
-    resource_type: ["program"],
-    aggregations: ["topic"],
-  })
+
   const channelsGroups = useMemo(() => {
-    const courseCounts = courseQuery.data
-      ? aggregateByTopic(courseQuery.data)
+    const courseCounts = channelCountQuery.data
+      ? aggregateCourseCounts("title", channelCountQuery.data)
       : {}
-    const programCounts = programQuery.data
-      ? aggregateByTopic(programQuery.data)
+    const programCounts = channelCountQuery.data
+      ? aggregateProgramCounts("title", channelCountQuery.data)
       : {}
     return groupTopics(
       topicsQuery.data?.results ?? [],
       courseCounts,
       programCounts,
     )
-  }, [topicsQuery.data?.results, courseQuery.data, programQuery.data])
+  }, [topicsQuery.data?.results, channelCountQuery.data])
+
   return (
     <Page>
       <MetaTags title="Topics" />

frontends/mit-learn/src/pages/UnitsListingPage/UnitsListingPage.tsx

@@ -15,31 +15,12 @@ import { LearningResourceOfferorDetail } from "api"
 import { HOME } from "@/common/urls"
 import { UnitCards, UnitCardLoading } from "./UnitCard"
 import MetaTags from "@/page-components/MetaTags/MetaTags"
-import { ChannelCounts } from "api/v0"
+
+import { aggregateProgramCounts, aggregateCourseCounts } from "@/common/utils"
 
 const UNITS_BANNER_IMAGE = "/static/images/background_steps.jpeg"
 const DESKTOP_WIDTH = "1056px"
 
-const aggregateProgramCounts = (
-  data: Array<ChannelCounts>,
-): Record<string, number> => {
-  return Object.fromEntries(
-    Object.entries(data).map(([_key, value]) => {
-      return [value.name, value.counts.programs]
-    }),
-  )
-}
-
-const aggregateCourseCounts = (
-  data: Array<ChannelCounts>,
-): Record<string, number> => {
-  return Object.fromEntries(
-    Object.entries(data).map(([_key, value]) => {
-      return [value.name, value.counts.courses]
-    }),
-  )
-}
-
 const sortUnits = (
   units: Array<LearningResourceOfferorDetail> | undefined,
   courseCounts: Record<string, number>,
@@ -221,12 +202,11 @@ const UnitsListingPage: React.FC = () => {
   const channelCountQuery = useChannelCounts("unit")
 
   const courseCounts = channelCountQuery.data
-    ? aggregateCourseCounts(channelCountQuery.data)
+    ? aggregateCourseCounts("name", channelCountQuery.data)
     : {}
   const programCounts = channelCountQuery.data
-    ? aggregateProgramCounts(channelCountQuery.data)
+    ? aggregateProgramCounts("name", channelCountQuery.data)
     : {}
-
   const academicUnits = sortUnits(
     units?.filter((unit) => unit.professional === false),
     courseCounts,