From b89e0784feef6624e9ddd053fd6d4d198da8084e Mon Sep 17 00:00:00 2001 From: shankar ambady Date: Wed, 4 Sep 2024 12:49:30 -0400 Subject: [PATCH 1/9] forcing default selected date to be closest one to current --- .../LearningResourceExpanded.tsx | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/frontends/ol-components/src/components/LearningResourceExpanded/LearningResourceExpanded.tsx b/frontends/ol-components/src/components/LearningResourceExpanded/LearningResourceExpanded.tsx index 636568943f..89a4c8f8af 100644 --- a/frontends/ol-components/src/components/LearningResourceExpanded/LearningResourceExpanded.tsx +++ b/frontends/ol-components/src/components/LearningResourceExpanded/LearningResourceExpanded.tsx @@ -33,7 +33,7 @@ const Container = styled.div<{ padTop?: boolean }>` } ` -const Date = styled.div` +const DateContainer = styled.div` display: flex; justify-content: start; align-self: stretch; @@ -324,7 +324,14 @@ const LearningResourceExpanded: React.FC = ({ useEffect(() => { if (resource) { - setSelectedRun(resource!.runs![0]) + const closest = resource?.runs?.reduce(function (prev, current) { + const now = Date.now() + return prev.start_date && + Date.parse(prev.start_date) - now > current.start_date - now + ? prev + : current + }) + setSelectedRun(closest) } }, [resource]) @@ -357,14 +364,14 @@ const LearningResourceExpanded: React.FC = ({ multipleRuns ) { return ( - + {label} - + ) } From c1210e6796774848e142473ac88e5406c8e16a07 Mon Sep 17 00:00:00 2001 From: shankar ambady Date: Wed, 4 Sep 2024 12:53:13 -0400 Subject: [PATCH 2/9] fixing date comparison --- .../LearningResourceExpanded/LearningResourceExpanded.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/frontends/ol-components/src/components/LearningResourceExpanded/LearningResourceExpanded.tsx b/frontends/ol-components/src/components/LearningResourceExpanded/LearningResourceExpanded.tsx index 89a4c8f8af..7c01c3bcb4 100644 --- a/frontends/ol-components/src/components/LearningResourceExpanded/LearningResourceExpanded.tsx +++ b/frontends/ol-components/src/components/LearningResourceExpanded/LearningResourceExpanded.tsx @@ -327,7 +327,8 @@ const LearningResourceExpanded: React.FC = ({ const closest = resource?.runs?.reduce(function (prev, current) { const now = Date.now() return prev.start_date && - Date.parse(prev.start_date) - now > current.start_date - now + Date.parse(prev.start_date) - now < + Date.parse(current.start_date) - now ? prev : current }) From 31d6b06eadb395e5a7f497b32416fe9349e29977 Mon Sep 17 00:00:00 2001 From: shankar ambady Date: Wed, 4 Sep 2024 14:57:04 -0400 Subject: [PATCH 3/9] fixing test issue --- .../LearningResourceExpanded/LearningResourceExpanded.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontends/ol-components/src/components/LearningResourceExpanded/LearningResourceExpanded.tsx b/frontends/ol-components/src/components/LearningResourceExpanded/LearningResourceExpanded.tsx index 7c01c3bcb4..698dff483f 100644 --- a/frontends/ol-components/src/components/LearningResourceExpanded/LearningResourceExpanded.tsx +++ b/frontends/ol-components/src/components/LearningResourceExpanded/LearningResourceExpanded.tsx @@ -60,7 +60,7 @@ const DateContainer = styled.div` } ` -const DateSingle = styled(Date)` +const DateSingle = styled(DateContainer)` margin-top: 10px; ` @@ -331,7 +331,7 @@ const LearningResourceExpanded: React.FC = ({ Date.parse(current.start_date) - now ? prev : current - }) + }, resource!.runs![0]) setSelectedRun(closest) } }, [resource]) From 31ad89d44faca3c0e67dc26f68116c07d9d4a9da Mon Sep 17 00:00:00 2001 From: shankar ambady Date: Wed, 4 Sep 2024 15:12:48 -0400 Subject: [PATCH 4/9] fixing typecheck --- .../LearningResourceExpanded/LearningResourceExpanded.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/frontends/ol-components/src/components/LearningResourceExpanded/LearningResourceExpanded.tsx b/frontends/ol-components/src/components/LearningResourceExpanded/LearningResourceExpanded.tsx index 698dff483f..891a8bd7a9 100644 --- a/frontends/ol-components/src/components/LearningResourceExpanded/LearningResourceExpanded.tsx +++ b/frontends/ol-components/src/components/LearningResourceExpanded/LearningResourceExpanded.tsx @@ -327,6 +327,7 @@ const LearningResourceExpanded: React.FC = ({ const closest = resource?.runs?.reduce(function (prev, current) { const now = Date.now() return prev.start_date && + current.start_date && Date.parse(prev.start_date) - now < Date.parse(current.start_date) - now ? prev From 90e3bd423ec95f5a440e4d5922ed279995bcda7d Mon Sep 17 00:00:00 2001 From: shankar ambady Date: Thu, 5 Sep 2024 12:57:29 -0400 Subject: [PATCH 5/9] sorting by date --- .../LearningResourceExpanded.tsx | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/frontends/ol-components/src/components/LearningResourceExpanded/LearningResourceExpanded.tsx b/frontends/ol-components/src/components/LearningResourceExpanded/LearningResourceExpanded.tsx index 891a8bd7a9..4f918fbeb5 100644 --- a/frontends/ol-components/src/components/LearningResourceExpanded/LearningResourceExpanded.tsx +++ b/frontends/ol-components/src/components/LearningResourceExpanded/LearningResourceExpanded.tsx @@ -351,13 +351,16 @@ const LearningResourceExpanded: React.FC = ({ if (!resource) { return } + const dateOptions: SimpleSelectProps["options"] = - resource.runs?.map((run) => { - return { - value: run.id.toString(), - label: formatRunDate(run, asTaughtIn), - } - }) ?? [] + resource.runs + ?.sort((a, b) => Date.parse(a.start_date) - Date.parse(b.start_date)) + .map((run) => { + return { + value: run.id.toString(), + label: formatRunDate(run, asTaughtIn), + } + }) ?? [] if ( [ResourceTypeEnum.Course, ResourceTypeEnum.Program].includes( From 04cca339d0f9a67d05ad64baf3ad2d08cbf8b656 Mon Sep 17 00:00:00 2001 From: shankar ambady Date: Thu, 5 Sep 2024 13:44:53 -0400 Subject: [PATCH 6/9] adding tests --- .../LearningResourceExpanded.test.tsx | 56 ++++++++++++++++++- .../LearningResourceExpanded.tsx | 1 + 2 files changed, 56 insertions(+), 1 deletion(-) diff --git a/frontends/ol-components/src/components/LearningResourceExpanded/LearningResourceExpanded.test.tsx b/frontends/ol-components/src/components/LearningResourceExpanded/LearningResourceExpanded.test.tsx index 89ae3fad75..1136743071 100644 --- a/frontends/ol-components/src/components/LearningResourceExpanded/LearningResourceExpanded.test.tsx +++ b/frontends/ol-components/src/components/LearningResourceExpanded/LearningResourceExpanded.test.tsx @@ -6,6 +6,7 @@ import { LearningResourceExpanded } from "./LearningResourceExpanded" import type { LearningResourceExpandedProps } from "./LearningResourceExpanded" import { ResourceTypeEnum, PodcastEpisodeResource, AvailabilityEnum } from "api" import { factories } from "api/test-utils" +import { formatDate } from "ol-utilities" import { ThemeProvider } from "../ThemeProvider/ThemeProvider" import invariant from "tiny-invariant" import type { LearningResource } from "api" @@ -248,7 +249,7 @@ describe("Learning Resource Expanded", () => { }), ], }), - expectedDates: ["Fall 2020", "Spring 2021", "May, 2022"], + expectedDates: ["Spring 2021", "May, 2022", "Fall 2020"], }, ])( "Renders a dropdown for run picker", @@ -267,6 +268,59 @@ describe("Learning Resource Expanded", () => { }, ) + test("Dates are ordered in dropdown and closest is selected", async () => { + const nextFutureDate = new Date( + new Date().getFullYear(), + new Date().getMonth() + 1, + 1, + ).toISOString() + const farFutureDate = new Date( + new Date().getFullYear(), + new Date().getMonth() + 8, + 1, + ).toISOString() + const resource = factories.learningResources.resource({ + resource_type: ResourceTypeEnum.Course, + runs: [ + factories.learningResources.run({ + semester: "Spring", + year: null, + start_date: "2021-02-03", + }), + factories.learningResources.run({ + semester: null, + year: null, + start_date: "2022-05-06", + }), + factories.learningResources.run({ + semester: "Spring", + year: null, + start_date: formatDate(nextFutureDate, "YYYY-MM-DD"), + }), + factories.learningResources.run({ + semester: "Spring", + year: null, + start_date: formatDate(farFutureDate, "YYYY-MM-DD"), + }), + ], + }) + setup(resource) + const select = screen.getByRole("combobox") + await user.click(select) + + const options = screen.getAllByRole("option") + expect(options[0]).toHaveTextContent( + formatDate("2021-02-03", "MMMM DD, YYYY"), + ) + expect(options[3]).toHaveTextContent( + formatDate(farFutureDate, "MMMM DD, YYYY"), + ) + const selected = options.find((option) => option.selected === true) + expect(selected).toHaveTextContent( + formatDate(nextFutureDate, "MMMM DD, YYYY"), + ) + }) + test("Renders info section topics correctly", () => { const resource = factories.learningResources.resource({ resource_type: ResourceTypeEnum.Course, diff --git a/frontends/ol-components/src/components/LearningResourceExpanded/LearningResourceExpanded.tsx b/frontends/ol-components/src/components/LearningResourceExpanded/LearningResourceExpanded.tsx index 4f918fbeb5..b710440136 100644 --- a/frontends/ol-components/src/components/LearningResourceExpanded/LearningResourceExpanded.tsx +++ b/frontends/ol-components/src/components/LearningResourceExpanded/LearningResourceExpanded.tsx @@ -328,6 +328,7 @@ const LearningResourceExpanded: React.FC = ({ const now = Date.now() return prev.start_date && current.start_date && + Date.parse(prev.start_date) > now && Date.parse(prev.start_date) - now < Date.parse(current.start_date) - now ? prev From 6a02ec665b740ea5cfa551aed9614d3e19bcdd10 Mon Sep 17 00:00:00 2001 From: shankar ambady Date: Thu, 5 Sep 2024 14:06:58 -0400 Subject: [PATCH 7/9] fixing typecheck and test --- .../LearningResourceExpanded.test.tsx | 3 ++- .../LearningResourceExpanded.tsx | 15 ++++++++------- 2 files changed, 10 insertions(+), 8 deletions(-) diff --git a/frontends/ol-components/src/components/LearningResourceExpanded/LearningResourceExpanded.test.tsx b/frontends/ol-components/src/components/LearningResourceExpanded/LearningResourceExpanded.test.tsx index 1136743071..4848ea4785 100644 --- a/frontends/ol-components/src/components/LearningResourceExpanded/LearningResourceExpanded.test.tsx +++ b/frontends/ol-components/src/components/LearningResourceExpanded/LearningResourceExpanded.test.tsx @@ -315,7 +315,8 @@ describe("Learning Resource Expanded", () => { expect(options[3]).toHaveTextContent( formatDate(farFutureDate, "MMMM DD, YYYY"), ) - const selected = options.find((option) => option.selected === true) + + const selected = screen.getByRole("option", { selected: true }) expect(selected).toHaveTextContent( formatDate(nextFutureDate, "MMMM DD, YYYY"), ) diff --git a/frontends/ol-components/src/components/LearningResourceExpanded/LearningResourceExpanded.tsx b/frontends/ol-components/src/components/LearningResourceExpanded/LearningResourceExpanded.tsx index b710440136..f47879198a 100644 --- a/frontends/ol-components/src/components/LearningResourceExpanded/LearningResourceExpanded.tsx +++ b/frontends/ol-components/src/components/LearningResourceExpanded/LearningResourceExpanded.tsx @@ -355,7 +355,12 @@ const LearningResourceExpanded: React.FC = ({ const dateOptions: SimpleSelectProps["options"] = resource.runs - ?.sort((a, b) => Date.parse(a.start_date) - Date.parse(b.start_date)) + ?.sort((a, b) => { + if (a?.start_date && b?.start_date) { + return Date.parse(a.start_date) - Date.parse(b.start_date) + } + return 0 + }) .map((run) => { return { value: run.id.toString(), @@ -383,15 +388,11 @@ const LearningResourceExpanded: React.FC = ({ if (!selectedRun) return - const formatted = formatRunDate(selectedRun, asTaughtIn) - if (!formatted) { - return - } - + const formatted = formatRunDate(selectedRun, asTaughtIn) ?? "" return ( {label} - {formatted} + {formatted ?? ""} ) } From 1a2d54438d82c352d670ad388728b44d0614c504 Mon Sep 17 00:00:00 2001 From: shankar ambady Date: Thu, 5 Sep 2024 14:17:08 -0400 Subject: [PATCH 8/9] adding datespacer back in --- .../LearningResourceExpanded/LearningResourceExpanded.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontends/ol-components/src/components/LearningResourceExpanded/LearningResourceExpanded.tsx b/frontends/ol-components/src/components/LearningResourceExpanded/LearningResourceExpanded.tsx index f47879198a..dd8f832a96 100644 --- a/frontends/ol-components/src/components/LearningResourceExpanded/LearningResourceExpanded.tsx +++ b/frontends/ol-components/src/components/LearningResourceExpanded/LearningResourceExpanded.tsx @@ -392,7 +392,7 @@ const LearningResourceExpanded: React.FC = ({ return ( {label} - {formatted ?? ""} + {formatted ?? } ) } From 4fad4bacbdee8dafa552415a29764d9cd59141c7 Mon Sep 17 00:00:00 2001 From: shankar ambady Date: Thu, 5 Sep 2024 14:19:19 -0400 Subject: [PATCH 9/9] adding datespacer back in --- .../LearningResourceExpanded/LearningResourceExpanded.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/frontends/ol-components/src/components/LearningResourceExpanded/LearningResourceExpanded.tsx b/frontends/ol-components/src/components/LearningResourceExpanded/LearningResourceExpanded.tsx index dd8f832a96..a76f386725 100644 --- a/frontends/ol-components/src/components/LearningResourceExpanded/LearningResourceExpanded.tsx +++ b/frontends/ol-components/src/components/LearningResourceExpanded/LearningResourceExpanded.tsx @@ -388,11 +388,14 @@ const LearningResourceExpanded: React.FC = ({ if (!selectedRun) return - const formatted = formatRunDate(selectedRun, asTaughtIn) ?? "" + const formatted = formatRunDate(selectedRun, asTaughtIn) + if (!formatted) { + return + } return ( {label} - {formatted ?? } + {formatted ?? ""} ) }