diff --git a/frontends/main/src/app-pages/DepartmentListingPage/DepartmentListingPage.test.tsx b/frontends/main/src/app-pages/DepartmentListingPage/DepartmentListingPage.test.tsx index 3bea375333..aaec889849 100644 --- a/frontends/main/src/app-pages/DepartmentListingPage/DepartmentListingPage.test.tsx +++ b/frontends/main/src/app-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"], diff --git a/frontends/main/src/app-pages/DepartmentListingPage/DepartmentListingPage.tsx b/frontends/main/src/app-pages/DepartmentListingPage/DepartmentListingPage.tsx index 26e84e9771..d9ef72c143 100644 --- a/frontends/main/src/app-pages/DepartmentListingPage/DepartmentListingPage.tsx +++ b/frontends/main/src/app-pages/DepartmentListingPage/DepartmentListingPage.tsx @@ -14,14 +14,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, @@ -34,6 +28,9 @@ import { } from "@remixicon/react" import { HOME } from "@/common/urls" +import { aggregateProgramCounts, aggregateCourseCounts } from "@/common/utils" +import { useChannelCounts } from "api/hooks/channels" + const SCHOOL_ICONS: Record = { // School of Architecture and Planning "https://sap.mit.edu/": , @@ -141,8 +138,8 @@ const SchoolDepartments: React.FC = ({ {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) }, @@ -185,34 +182,17 @@ const SchoolList = styled.div(({ theme }) => ({ }, })) -const aggregateByDepartment = ( - data: LearningResourcesSearchResponse, -): Record => { - 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 ( <> { } values={formik.values.goals} onChange={(event) => { - console.log(event) formik.handleChange(event) }} /> diff --git a/frontends/main/src/app-pages/TopicsListingPage/TopicsListingPage.test.tsx b/frontends/main/src/app-pages/TopicsListingPage/TopicsListingPage.test.tsx index 13b8bafc2f..faf8c7be7c 100644 --- a/frontends/main/src/app-pages/TopicsListingPage/TopicsListingPage.test.tsx +++ b/frontends/main/src/app-pages/TopicsListingPage/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, diff --git a/frontends/main/src/app-pages/TopicsListingPage/TopicsListingPage.tsx b/frontends/main/src/app-pages/TopicsListingPage/TopicsListingPage.tsx index cf6e4cfba3..a1d542352d 100644 --- a/frontends/main/src/app-pages/TopicsListingPage/TopicsListingPage.tsx +++ b/frontends/main/src/app-pages/TopicsListingPage/TopicsListingPage.tsx @@ -16,13 +16,12 @@ import { import Link from "next/link" import { propsNotNil } from "ol-utilities" -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 = "/images/backgrounds/background_steps.jpeg" @@ -183,17 +182,6 @@ const TopicBoxLoading = () => { const Page = styled.div({}) -const aggregateByTopic = ( - data: LearningResourcesSearchResponse, -): Record => { - const buckets = data.metadata.aggregations["topic"] ?? [] - return Object.fromEntries( - buckets.map((bucket) => { - return [bucket.key, bucket.doc_count] - }), - ) -} - type TopicGroup = { id: number title: string @@ -259,28 +247,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 ( , -): Record => { - return Object.fromEntries( - Object.entries(data).map(([_key, value]) => { - return [value.name, value.counts.programs] - }), - ) -} - -const aggregateCourseCounts = ( - data: Array, -): Record => { - return Object.fromEntries( - Object.entries(data).map(([_key, value]) => { - return [value.name, value.counts.courses] - }), - ) -} - const sortUnits = ( units: Array | undefined, courseCounts: Record, @@ -222,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, diff --git a/frontends/main/src/common/utils.ts b/frontends/main/src/common/utils.ts index 462ac1d428..e72cc6f266 100644 --- a/frontends/main/src/common/utils.ts +++ b/frontends/main/src/common/utils.ts @@ -1,3 +1,4 @@ +import { ChannelCounts } from "api/v0" const getSearchParamMap = (urlParams: URLSearchParams) => { const params: Record = {} for (const [key] of urlParams.entries()) { @@ -6,4 +7,26 @@ const getSearchParamMap = (urlParams: URLSearchParams) => { return params } -export { getSearchParamMap } +const aggregateProgramCounts = ( + groupBy: string, + data: Array, +): Record => { + return Object.fromEntries( + Object.entries(data).map(([_key, value]) => { + return [value[groupBy as keyof ChannelCounts], value.counts.programs] + }), + ) +} + +const aggregateCourseCounts = ( + groupBy: string, + data: Array, +): Record => { + return Object.fromEntries( + Object.entries(data).map(([_key, value]) => { + return [value[groupBy as keyof ChannelCounts], value.counts.courses] + }), + ) +} + +export { getSearchParamMap, aggregateProgramCounts, aggregateCourseCounts }