diff --git a/frontends/mit-learn/src/common/utils.ts b/frontends/mit-learn/src/common/utils.ts index 462ac1d428..e72cc6f266 100644 --- a/frontends/mit-learn/src/common/utils.ts +++ b/frontends/mit-learn/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 } diff --git a/frontends/mit-learn/src/pages/DepartmentListingPage/DepartmentListingPage.test.tsx b/frontends/mit-learn/src/pages/DepartmentListingPage/DepartmentListingPage.test.tsx index 8138a4bb73..c70eb0ee36 100644 --- a/frontends/mit-learn/src/pages/DepartmentListingPage/DepartmentListingPage.test.tsx +++ b/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"], diff --git a/frontends/mit-learn/src/pages/DepartmentListingPage/DepartmentListingPage.tsx b/frontends/mit-learn/src/pages/DepartmentListingPage/DepartmentListingPage.tsx index b7165eb714..7606c5742e 100644 --- a/frontends/mit-learn/src/pages/DepartmentListingPage/DepartmentListingPage.tsx +++ b/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 = { // School of Architecture and Planning @@ -140,8 +136,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) }, @@ -183,34 +179,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 ( <> diff --git a/frontends/mit-learn/src/pages/OnboardingPage/OnboardingPage.tsx b/frontends/mit-learn/src/pages/OnboardingPage/OnboardingPage.tsx index 8ff211063c..4395489f79 100644 --- a/frontends/mit-learn/src/pages/OnboardingPage/OnboardingPage.tsx +++ b/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) }} /> diff --git a/frontends/mit-learn/src/pages/TopicListingPage/TopicsListingPage.test.tsx b/frontends/mit-learn/src/pages/TopicListingPage/TopicsListingPage.test.tsx index 91802d56df..b9d157000b 100644 --- a/frontends/mit-learn/src/pages/TopicListingPage/TopicsListingPage.test.tsx +++ b/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, diff --git a/frontends/mit-learn/src/pages/TopicListingPage/TopicsListingPage.tsx b/frontends/mit-learn/src/pages/TopicListingPage/TopicsListingPage.tsx index 9e535856b2..207a424f58 100644 --- a/frontends/mit-learn/src/pages/TopicListingPage/TopicsListingPage.tsx +++ b/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 => { - 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 ( diff --git a/frontends/mit-learn/src/pages/UnitsListingPage/UnitsListingPage.tsx b/frontends/mit-learn/src/pages/UnitsListingPage/UnitsListingPage.tsx index c594d7a442..a981904808 100644 --- a/frontends/mit-learn/src/pages/UnitsListingPage/UnitsListingPage.tsx +++ b/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, -): 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, @@ -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,