Shanbady/fix course panel start date

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,60 @@ 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 = screen.getByRole("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,

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;
@@ -60,7 +60,7 @@ const Date = styled.div`
   }
 `
 
-const DateSingle = styled(Date)`
+const DateSingle = styled(DateContainer)`
   margin-top: 10px;
 `
 
@@ -324,7 +324,17 @@ const LearningResourceExpanded: React.FC<LearningResourceExpandedProps> = ({
 
   useEffect(() => {
     if (resource) {
-      setSelectedRun(resource!.runs![0])
+      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(prev.start_date) - now <
+            Date.parse(current.start_date) - now
+          ? prev
+          : current
+      }, resource!.runs![0])
+      setSelectedRun(closest)
     }
   }, [resource])
 
@@ -342,13 +352,21 @@ const LearningResourceExpanded: React.FC<LearningResourceExpandedProps> = ({
     if (!resource) {
       return <Skeleton height={40} style={{ marginTop: 0, width: "60%" }} />
     }
+
     const dateOptions: SimpleSelectProps["options"] =
-      resource.runs?.map((run) => {
-        return {
-          value: run.id.toString(),
-          label: formatRunDate(run, asTaughtIn),
-        }
-      }) ?? []
+      resource.runs
+        ?.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(),
+            label: formatRunDate(run, asTaughtIn),
+          }
+        }) ?? []
 
     if (
       [ResourceTypeEnum.Course, ResourceTypeEnum.Program].includes(
@@ -357,14 +375,14 @@ const LearningResourceExpanded: React.FC<LearningResourceExpandedProps> = ({
       multipleRuns
     ) {
       return (
-        <Date>
+        <DateContainer>
           <DateLabel>{label}</DateLabel>
           <SimpleSelect
             value={selectedRun?.id.toString() ?? ""}
             onChange={onDateChange}
             options={dateOptions}
           />
-        </Date>
+        </DateContainer>
       )
     }
 
@@ -374,11 +392,10 @@ const LearningResourceExpanded: React.FC<LearningResourceExpandedProps> = ({
     if (!formatted) {
       return <NoDateSpacer />
     }
-
     return (
       <DateSingle>
         <DateLabel>{label}</DateLabel>
-        {formatted}
+        {formatted ?? ""}
       </DateSingle>
     )
   }