hot reloading is better

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

@@ -1,7 +1,8 @@
+"use client"
 import { useState } from "react";
 import { CalendarMonthModel } from "./calendarMonthUtils";
 import { DayOfWeek, LocalCourse } from "@/models/local/localCourse";
-import Day from "./day";
+import Day from "./Day";
 
 export default function CalendarMonth({
   month,
@@ -55,7 +56,7 @@ export default function CalendarMonth({
         {month.daysByWeek.map((week, weekIndex) => (
           <div className="grid grid-cols-7 m-3" key={weekIndex}>
             {week.map((day, dayIndex) => (
-              <Day key={dayIndex} day={day} />
+              <Day key={dayIndex} day={day} month={month.month} />
             ))}
           </div>
         ))}

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

@@ -0,0 +1,19 @@
+"use client"
+import { ReactNode } from "react";
+import { CourseContext } from "./courseContext";
+import { useLocalCourseDetailsQuery } from "@/hooks/localCoursesHooks";
+
+export default function CourseContextProvider({
+  localCourseName,
+  children,
+}: {
+  children: ReactNode;
+  localCourseName: string;
+}) {
+  const { data: course } = useLocalCourseDetailsQuery(localCourseName);
+  return (
+    <CourseContext.Provider value={{ localCourse: course }}>
+      {children}
+    </CourseContext.Provider>
+  );
+}

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

@@ -0,0 +1,42 @@
+"use client";
+import { getDateFromStringOrThrow } from "@/models/local/timeUtils";
+import { useCourseContext } from "./courseContext";
+import { getMonthsBetweenDates } from "./calendarMonthUtils";
+import CalendarMonth from "./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]/Day.tsx

@@ -0,0 +1,13 @@
+"use client"
+export default function Day({ day, month }: { day: Date; month: number }) {
+  const classes = "border rounded rounded-3 p-2 pb-4 m-1 ";
+
+  const backgroundClass = day.getMonth() + 1 != month ? "" : "bg-slate-900";
+
+  return (
+    <div className={classes + " " + backgroundClass}>
+      {day.getDate()}
+      {/* <div>{day.getMonth()}</div> */}
+    </div>
+  );
+}

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

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

nextjs/src/app/course/[courseName]/calendarMonthUtils.ts

@@ -1,8 +1,9 @@
+"use client"
 export interface CalendarMonthModel {
   year: number;
   month: number;
-  weeks: (number | undefined)[][];
-  daysByWeek: (Date | undefined)[][];
+  weeks: number[][];
+  daysByWeek: (Date)[][];
 }
 
 function weeksInMonth(year: number, month: number): number {
@@ -17,42 +18,27 @@ function weeksInMonth(year: number, month: number): number {
 }
 
 function createCalendarMonth(year: number, month: number): CalendarMonthModel {
-  const daysByWeek: (Date | undefined)[][] = [];
   const weeksNumber = weeksInMonth(year, month);
   const daysInMonth = new Date(year, month, 0).getDate();
 
   let currentDay = 1;
   const firstDayOfMonth = new Date(year, month - 1, 1).getDay();
 
-  for (let i = 0; i < weeksNumber; i++) {
-    const thisWeek: (Date | undefined)[] = [];
-    if (i === 0 && firstDayOfMonth !== 0) {
-      // 0 is Sunday in JavaScript
-      for (let j = 0; j < 7; j++) {
-        if (j < firstDayOfMonth) {
-          thisWeek.push(undefined);
-        } else {
-          thisWeek.push(new Date(year, month - 1, currentDay));
-          currentDay++;
-        }
+  const daysByWeek = Array.from({ length: weeksNumber }).map((_, weekIndex) =>
+    Array.from({ length: 7 }).map((_, dayIndex) => {
+      if (weekIndex === 0 && dayIndex < firstDayOfMonth) {
+        return new Date(year, month - 1, dayIndex - firstDayOfMonth + 1);
+      } else if (currentDay <= daysInMonth) {
+        return new Date(year, month - 1, currentDay++);
+      } else {
+        currentDay++;
+        return new Date(year, month, currentDay - daysInMonth);
       }
-    } else {
-      for (let j = 0; j < 7; j++) {
-        if (currentDay <= daysInMonth) {
-          thisWeek.push(new Date(year, month - 1, currentDay));
-          currentDay++;
-        } else {
-          thisWeek.push(undefined);
-        }
-      }
-    }
-    daysByWeek.push(thisWeek);
-  }
-
-  const weeks = daysByWeek.map((week) =>
-    week.map((day) => (day ? day.getDate() : undefined))
+    })
   );
 
+  const weeks = daysByWeek.map((week) => week.map((day) => day.getDate()));
+
   return { year, month, weeks, daysByWeek };
 }
 

nextjs/src/app/course/[courseName]/courseContext.ts

@@ -0,0 +1,31 @@
+"use client";
+import { LocalCourse } from "@/models/local/localCourse";
+import { createContext, useContext } from "react";
+
+export interface CourseContextInterface {
+  localCourse: LocalCourse;
+}
+
+const defaultValue: CourseContextInterface = {
+  localCourse: {
+    modules: [],
+    settings: {
+      name: "",
+      assignmentGroups: [],
+      daysOfWeek: [],
+      startDate: "",
+      endDate: "",
+      defaultDueTime: {
+        hour: 0,
+        minute: 0,
+      },
+    },
+  },
+};
+
+export const CourseContext =
+  createContext<CourseContextInterface>(defaultValue);
+
+export function useCourseContext() {
+  return useContext(CourseContext);
+}

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

@@ -1,6 +0,0 @@
-export default function Day({ day }: { day?: Date }) {
-  const classes = "border rounded rounded-3 p-2 pb-4 m-1 ";
-  if (!day) return <div className={classes + ""}></div>;
-
-  return <div className={classes + " bg-slate-900"}>{day.getDate()}</div>;
-}

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

@@ -1,29 +1,16 @@
-"use client";
-import { useLocalCourseDetailsQuery } from "@/hooks/localCoursesHooks";
-import { getDateFromStringOrThrow } from "@/models/local/timeUtils";
-import { getMonthsBetweenDates } from "./calendarMonthUtils";
-import CalendarMonth from "./calendarMonth";
+import CourseDetailsWrapper from "@/app/CourseDetailsWrapper";
+import { getDehydratedClient } from "@/app/layout";
+import { HydrationBoundary } from "@tanstack/react-query";
 
-
-export default function Page({
+export default async function CoursePage({
   params: { courseName },
 }: {
   params: { courseName: string };
 }) {
-  const { data: course } = useLocalCourseDetailsQuery(courseName);
-
-  const startDate = getDateFromStringOrThrow(course.settings.startDate);
-  const endDate = getDateFromStringOrThrow(course.settings.endDate);
-
-  const months = getMonthsBetweenDates(startDate, endDate);
+  const dehydratedState = await getDehydratedClient();
   return (
-    <div>
-      {course.settings.name}
-      <div>
-        {months.map((month) => (
-          <CalendarMonth key={month.month + "" + month.year} month={month} localCourse={course} />
-        ))}
-      </div>
-    </div>
+    <HydrationBoundary state={dehydratedState}>
+      <CourseDetailsWrapper courseName={courseName} />
+    </HydrationBoundary>
   );
 }