From 8c252bf9e83fe6fb87cc3f5a0cbaad10629e4c43 Mon Sep 17 00:00:00 2001 From: shankar ambady Date: Mon, 7 Oct 2024 11:09:53 -0400 Subject: [PATCH 1/7] adding counts to department page --- frontends/mit-learn/src/common/utils.ts | 26 +++++++++- .../DepartmentListingPage.tsx | 47 +++++-------------- .../UnitsListingPage/UnitsListingPage.tsx | 36 ++++---------- 3 files changed, 46 insertions(+), 63 deletions(-) diff --git a/frontends/mit-learn/src/common/utils.ts b/frontends/mit-learn/src/common/utils.ts index 462ac1d428..12af72fb41 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,27 @@ const getSearchParamMap = (urlParams: URLSearchParams) => { return params } -export { getSearchParamMap } +const aggregateProgramCounts = ( + groupBy: string, + data: Array, +): Record => { + return Object.fromEntries( + Object.entries(data).map(([_key, value]) => { + console.log("value", value) + return [value[groupBy], value.counts.programs] + }), + ) +} + +const aggregateCourseCounts = ( + groupBy: string, + data: Array, +): Record => { + return Object.fromEntries( + Object.entries(data).map(([_key, value]) => { + return [value[groupBy], value.counts.courses] + }), + ) +} + +export { getSearchParamMap, aggregateProgramCounts, aggregateCourseCounts } 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/UnitsListingPage/UnitsListingPage.tsx b/frontends/mit-learn/src/pages/UnitsListingPage/UnitsListingPage.tsx index c594d7a442..d4ea4eb01a 100644 --- a/frontends/mit-learn/src/pages/UnitsListingPage/UnitsListingPage.tsx +++ b/frontends/mit-learn/src/pages/UnitsListingPage/UnitsListingPage.tsx @@ -15,41 +15,22 @@ 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, programCounts: Record, ) => { 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 + const courseCountA = courseCounts[a.id] || 0 + const programCountA = programCounts[a.id] || 0 + const courseCountB = courseCounts[b.id] || 0 + const programCountB = programCounts[b.id] || 0 const totalA = courseCountA + programCountA const totalB = courseCountB + programCountB return totalB - totalA @@ -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, From f73b353840162fd8c99b5e26f8f9a0759c2cf7bf Mon Sep 17 00:00:00 2001 From: shankar ambady Date: Mon, 7 Oct 2024 11:10:43 -0400 Subject: [PATCH 2/7] removing log statement --- frontends/mit-learn/src/common/utils.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/frontends/mit-learn/src/common/utils.ts b/frontends/mit-learn/src/common/utils.ts index 12af72fb41..c02e486eae 100644 --- a/frontends/mit-learn/src/common/utils.ts +++ b/frontends/mit-learn/src/common/utils.ts @@ -13,7 +13,6 @@ const aggregateProgramCounts = ( ): Record => { return Object.fromEntries( Object.entries(data).map(([_key, value]) => { - console.log("value", value) return [value[groupBy], value.counts.programs] }), ) From ac2923898c35be20c0a4b3f3acef0a31c0914c5a Mon Sep 17 00:00:00 2001 From: shankar ambady Date: Mon, 7 Oct 2024 14:47:52 -0400 Subject: [PATCH 3/7] adding cached counts to topic page --- .../TopicListingPage/TopicsListingPage.tsx | 26 +++++++------------ 1 file changed, 10 insertions(+), 16 deletions(-) diff --git a/frontends/mit-learn/src/pages/TopicListingPage/TopicsListingPage.tsx b/frontends/mit-learn/src/pages/TopicListingPage/TopicsListingPage.tsx index 9e535856b2..e01cc776f5 100644 --- a/frontends/mit-learn/src/pages/TopicListingPage/TopicsListingPage.tsx +++ b/frontends/mit-learn/src/pages/TopicListingPage/TopicsListingPage.tsx @@ -19,9 +19,11 @@ import { useLearningResourceTopics, useLearningResourcesSearch, } from "api/hooks/learningResources" -import { LearningResourcesSearchResponse, LearningResourceTopic } from "api" +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 +184,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,6 +249,7 @@ const RootTopicList = styled(PlainList)(({ theme }) => ({ })) const ToopicsListingPage: React.FC = () => { + const channelCountQuery = useChannelCounts("topic") const topicsQuery = useLearningResourceTopics() const courseQuery = useLearningResourcesSearch({ resource_type: ["course"], @@ -267,12 +259,13 @@ const ToopicsListingPage: React.FC = () => { 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 ?? [], @@ -280,6 +273,7 @@ const ToopicsListingPage: React.FC = () => { programCounts, ) }, [topicsQuery.data?.results, courseQuery.data, programQuery.data]) + return ( From 8b6dd83863d4ceae8cea6fd6b922229283f7e344 Mon Sep 17 00:00:00 2001 From: shankar ambady Date: Mon, 7 Oct 2024 14:53:46 -0400 Subject: [PATCH 4/7] fixing typecheck --- frontends/mit-learn/src/common/utils.ts | 4 ++-- .../src/pages/UnitsListingPage/UnitsListingPage.tsx | 8 ++++---- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/frontends/mit-learn/src/common/utils.ts b/frontends/mit-learn/src/common/utils.ts index c02e486eae..e72cc6f266 100644 --- a/frontends/mit-learn/src/common/utils.ts +++ b/frontends/mit-learn/src/common/utils.ts @@ -13,7 +13,7 @@ const aggregateProgramCounts = ( ): Record => { return Object.fromEntries( Object.entries(data).map(([_key, value]) => { - return [value[groupBy], value.counts.programs] + return [value[groupBy as keyof ChannelCounts], value.counts.programs] }), ) } @@ -24,7 +24,7 @@ const aggregateCourseCounts = ( ): Record => { return Object.fromEntries( Object.entries(data).map(([_key, value]) => { - return [value[groupBy], value.counts.courses] + return [value[groupBy as keyof ChannelCounts], value.counts.courses] }), ) } diff --git a/frontends/mit-learn/src/pages/UnitsListingPage/UnitsListingPage.tsx b/frontends/mit-learn/src/pages/UnitsListingPage/UnitsListingPage.tsx index d4ea4eb01a..a981904808 100644 --- a/frontends/mit-learn/src/pages/UnitsListingPage/UnitsListingPage.tsx +++ b/frontends/mit-learn/src/pages/UnitsListingPage/UnitsListingPage.tsx @@ -27,10 +27,10 @@ const sortUnits = ( programCounts: Record, ) => { return units?.sort((a, b) => { - const courseCountA = courseCounts[a.id] || 0 - const programCountA = programCounts[a.id] || 0 - const courseCountB = courseCounts[b.id] || 0 - const programCountB = programCounts[b.id] || 0 + const courseCountA = courseCounts[a.code] || 0 + const programCountA = programCounts[a.code] || 0 + const courseCountB = courseCounts[b.code] || 0 + const programCountB = programCounts[b.code] || 0 const totalA = courseCountA + programCountA const totalB = courseCountB + programCountB return totalB - totalA From d9f57b53bc4e2d97fa5fbf0a08c1bb05b420b388 Mon Sep 17 00:00:00 2001 From: shankar ambady Date: Mon, 7 Oct 2024 14:54:11 -0400 Subject: [PATCH 5/7] removing unrelated (but stray) console.log --- frontends/mit-learn/src/pages/OnboardingPage/OnboardingPage.tsx | 1 - 1 file changed, 1 deletion(-) 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) }} /> From 334951f3029dfa1abd1a92d6d0cd4394fe0802e4 Mon Sep 17 00:00:00 2001 From: shankar ambady Date: Mon, 7 Oct 2024 15:27:49 -0400 Subject: [PATCH 6/7] test fixes --- .../DepartmentListingPage.test.tsx | 42 +++++++++++++++++++ .../TopicsListingPage.test.tsx | 19 +++++++++ 2 files changed, 61 insertions(+) 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/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, From 65af19fd2773e224412d7041bc4543ded2fcf26f Mon Sep 17 00:00:00 2001 From: shankar ambady Date: Mon, 7 Oct 2024 15:49:37 -0400 Subject: [PATCH 7/7] removing old aggregation requests --- .../pages/TopicListingPage/TopicsListingPage.tsx | 15 ++------------- 1 file changed, 2 insertions(+), 13 deletions(-) diff --git a/frontends/mit-learn/src/pages/TopicListingPage/TopicsListingPage.tsx b/frontends/mit-learn/src/pages/TopicListingPage/TopicsListingPage.tsx index e01cc776f5..207a424f58 100644 --- a/frontends/mit-learn/src/pages/TopicListingPage/TopicsListingPage.tsx +++ b/frontends/mit-learn/src/pages/TopicListingPage/TopicsListingPage.tsx @@ -15,10 +15,7 @@ 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 { useLearningResourceTopics } from "api/hooks/learningResources" import { LearningResourceTopic } from "api" import RootTopicIcon from "@/components/RootTopicIcon/RootTopicIcon" import { HOME } from "@/common/urls" @@ -251,14 +248,6 @@ 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 = channelCountQuery.data @@ -272,7 +261,7 @@ const ToopicsListingPage: React.FC = () => { courseCounts, programCounts, ) - }, [topicsQuery.data?.results, courseQuery.data, programQuery.data]) + }, [topicsQuery.data?.results, channelCountQuery.data]) return (