fixing date formatting to month day year

nextjs/src/app/course/[courseName]/CourseDetails.tsx

@@ -1,42 +0,0 @@
-"use client";
-import { getDateFromStringOrThrow } from "@/models/local/timeUtils";
-import { useCourseContext } from "./context/courseContext";
-import { getMonthsBetweenDates } from "./calendar/calendarMonthUtils";
-import CalendarMonth from "./calendar/CalendarMonth";
-
-export default function CourseDetails() {
-  const context = useCourseContext();
-
-  const startDate = getDateFromStringOrThrow(
-    context.localCourse.settings.startDate,
-    "course start date"
-  );
-  const endDate = getDateFromStringOrThrow(
-    context.localCourse.settings.endDate,
-    "course end date"
-  );
-
-  const months = getMonthsBetweenDates(startDate, endDate);
-  return (
-    <div>
-      {context.localCourse.settings.name}
-      <div className="flex flex-row">
-        <div className="grow">
-          {months.map((month) => (
-            <CalendarMonth
-              key={month.month + "" + month.year}
-              month={month}
-              localCourse={context.localCourse}
-            />
-          ))}
-        </div>
-        <div className="w-96">
-          <details>
-            <summary role="button">first module</summary>
-            <div>here are the module items</div>
-          </details>
-        </div>
-      </div>
-    </div>
-  );
-}

nextjs/src/app/course/[courseName]/CourseSettings.tsx

@@ -0,0 +1,8 @@
+"use client";
+
+import { useCourseContext } from "./context/courseContext";
+
+export default function CourseSettings() {
+  const context = useCourseContext();
+  return <div>{context.localCourse.settings.name}</div>;
+}

nextjs/src/app/course/[courseName]/ModuleList.tsx

@@ -1,4 +1,3 @@
-"use client"
 export default function ModuleList() {
   return <div></div>
 }

nextjs/src/app/course/[courseName]/calendar/CalendarMonth.tsx

@@ -4,13 +4,13 @@ import { CalendarMonthModel } from "./calendarMonthUtils";
 import { DayOfWeek, LocalCourse } from "@/models/local/localCourse";
 import Day from "./Day";
 
-export default function CalendarMonth({
+export const CalendarMonth = ({
   month,
   localCourse,
 }: {
   month: CalendarMonthModel;
   localCourse: LocalCourse;
-}) {
+}) => {
   const [isCollapsed, setIsCollapsed] = useState(false);
 
   const isInPast =

nextjs/src/app/course/[courseName]/calendar/CourseCalendar.tsx

@@ -0,0 +1,32 @@
+"use client";
+import { getDateFromStringOrThrow } from "@/models/local/timeUtils";
+import { useCourseContext } from "../context/courseContext";
+import { getMonthsBetweenDates } from "./calendarMonthUtils";
+import { CalendarMonth } from "./CalendarMonth";
+
+export default function CourseCalendar() {
+  const context = useCourseContext();
+
+  const startDate = getDateFromStringOrThrow(
+    context.localCourse.settings.startDate,
+    "course start date"
+  );
+  const endDate = getDateFromStringOrThrow(
+    context.localCourse.settings.endDate,
+    "course end date"
+  );
+
+  const months = getMonthsBetweenDates(startDate, endDate);
+
+  return (
+    <>
+      {months.map((month) => (
+        <CalendarMonth
+          key={month.month + "" + month.year}
+          month={month}
+          localCourse={context.localCourse}
+        />
+      ))}
+    </>
+  );
+}

nextjs/src/app/course/[courseName]/calendar/Day.tsx

@@ -1,13 +1,68 @@
-"use client"
+"use client";
+
+import { getDateFromStringOrThrow } from "@/models/local/timeUtils";
+import { useCourseContext } from "../context/courseContext";
+
 export default function Day({ day, month }: { day: Date; month: number }) {
-  const classes = "border rounded rounded-3 p-2 pb-4 m-1 ";
+  const context = useCourseContext();
 
   const backgroundClass = day.getMonth() + 1 != month ? "" : "bg-slate-900";
 
+  const todaysAssignments = context.localCourse.modules
+    .flatMap((m) => m.assignments)
+    .filter((a) => {
+      const dueDate = getDateFromStringOrThrow(
+        a.dueAt,
+        "due at for assignment in day"
+      );
+
+      const isSame =
+        dueDate.getFullYear() === day.getFullYear() &&
+        dueDate.getMonth() === day.getMonth() &&
+        dueDate.getDate() === day.getDate();
+      if (a.name === "Chapter 3") console.log(a.name, dueDate, day, isSame);
+      return isSame;
+    });
+  const todaysQuizzes = context.localCourse.modules
+    .flatMap((m) => m.quizzes)
+    .filter((q) => {
+      const dueDate = getDateFromStringOrThrow(
+        q.dueAt,
+        "due at for quiz in day"
+      );
+      return (
+        dueDate.getFullYear() === day.getFullYear() &&
+        dueDate.getMonth() === day.getMonth() &&
+        dueDate.getDate() === day.getDate()
+      );
+    });
+  const todaysPages = context.localCourse.modules
+    .flatMap((m) => m.pages)
+    .filter((p) => {
+      const dueDate = getDateFromStringOrThrow(
+        p.dueAt,
+        "due at for page in day"
+      );
+      return (
+        dueDate.getFullYear() === day.getFullYear() &&
+        dueDate.getMonth() === day.getMonth() &&
+        dueDate.getDate() === day.getDate()
+      );
+    });
   return (
-    <div className={classes + " " + backgroundClass}>
+    <div className={"border rounded rounded-3 p-2 pb-4 m-1 " + backgroundClass}>
       {day.getDate()}
-      {/* <div>{day.getMonth()}</div> */}
+      <ul className="list-disc ms-4">
+        {todaysAssignments.map((a) => (
+          <li key={a.name}> {a.name}</li>
+        ))}
+        {todaysQuizzes.map((q) => (
+          <li key={q.name}> {q.name}</li>
+        ))}
+        {todaysPages.map((p) => (
+          <li key={p.name}> {p.name}</li>
+        ))}
+      </ul>
     </div>
   );
 }

nextjs/src/app/course/[courseName]/page.tsx

@@ -1,7 +1,9 @@
 import { getDehydratedClient } from "@/app/layout";
-import { HydrationBoundary } from "@tanstack/react-query";
 import CourseContextProvider from "./context/CourseContextProvider";
-import CourseDetails from "./CourseDetails";
+import CourseCalendar from "./calendar/CourseCalendar";
+import { HydrationBoundary } from "@tanstack/react-query";
+import CourseSettings from "./CourseSettings";
+import ModuleList from "./ModuleList";
 
 export default async function CoursePage({
   params: { courseName },
@@ -12,7 +14,17 @@ export default async function CoursePage({
   return (
     <HydrationBoundary state={dehydratedState}>
       <CourseContextProvider localCourseName={courseName}>
-        <CourseDetails />
+        <div>
+          <CourseSettings />
+          <div className="flex flex-row">
+            <div className="grow">
+              <CourseCalendar />
+            </div>
+            <div className="w-96">
+              <ModuleList />
+            </div>
+          </div>
+        </div>
       </CourseContextProvider>
     </HydrationBoundary>
   );