pre codemon

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

@@ -0,0 +1,63 @@
+"use client"
+import { FC, useState } from "react";
+import { CalendarMonthModel } from "./calendarMonthUtils";
+import { DayOfWeek, LocalCourse } from "@/models/local/localCourse";
+import { Day } from "./Day";
+
+export const CalendarMonth: FC<{
+  month: CalendarMonthModel;
+  localCourse: LocalCourse;
+}> = ({ month, localCourse }) => {
+  const [isCollapsed, setIsCollapsed] = useState(false);
+
+  const isInPast =
+    new Date(month.year, month.month - 1, 1) < new Date(Date.now());
+  const monthName = new Date(month.year, month.month - 1, 1).toLocaleString(
+    "default",
+    { month: "long" }
+  );
+  const toggleCollapse = () => setIsCollapsed(!isCollapsed);
+  // const collapseClass = isInPast ? "collapse _hide" : "collapse _show";
+  const weekDaysList: DayOfWeek[] = Object.values(DayOfWeek);
+
+  return (
+    <>
+      <h3 className="text-center">
+        <button
+          type="button"
+          className="btn btn-link"
+          onClick={toggleCollapse}
+          aria-expanded={!isCollapsed}
+          aria-controls={monthName}
+        >
+          {monthName}
+        </button>
+      </h3>
+
+      <div id={monthName}>
+        <div className="grid grid-cols-7 text-center fw-bold">
+          {weekDaysList.map((day) => (
+            <div
+              key={day}
+              className={
+                localCourse?.settings.daysOfWeek.includes(day)
+                  ? "col"
+                  : "col text-secondary"
+              }
+            >
+              {day}
+            </div>
+          ))}
+        </div>
+
+        {month.daysByWeek.map((week, weekIndex) => (
+          <div className="grid grid-cols-7 m-3" key={weekIndex}>
+            {week.map((day, dayIndex) => (
+              <Day key={dayIndex} day={day} />
+            ))}
+          </div>
+        ))}
+      </div>
+    </>
+  );
+};

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

@@ -0,0 +1,9 @@
+"use client"
+import React, { FC } from "react";
+
+export const Day: FC<{ day?: Date }> = ({ day }) => {
+  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]/calendarMonthUtils.ts

@@ -1,66 +1,80 @@
-interface CalendarMonth {
+"use client";
+export interface CalendarMonthModel {
   year: number;
   month: number;
-  weeks: (number | null)[][];
-  daysByWeek: (Date | null)[][];
+  weeks: (number | undefined)[][];
+  daysByWeek: (Date | undefined)[][];
 }
 
-const calendarMonthUtils = {
-  weeksInMonth: (year: number, month: number): number => {
-    const firstDayOfMonth = new Date(year, month - 1, 1).getDay();
-    const daysInMonth = new Date(year, month, 0).getDate();
-    const longDaysInMonth = daysInMonth + firstDayOfMonth;
-    let weeks = Math.floor(longDaysInMonth / 7);
-    if (longDaysInMonth % 7 > 0) {
-      weeks += 1;
-    }
-    return weeks;
-  },
+const weeksInMonth = (year: number, month: number): number => {
+  const firstDayOfMonth = new Date(year, month - 1, 1).getDay();
+  const daysInMonth = new Date(year, month, 0).getDate();
+  const longDaysInMonth = daysInMonth + firstDayOfMonth;
+  let weeks = Math.floor(longDaysInMonth / 7);
+  if (longDaysInMonth % 7 > 0) {
+    weeks += 1;
+  }
+  return weeks;
+};
 
-  createCalendarMonth: (year: number, month: number): CalendarMonth => {
-    const daysByWeek: (Date | null)[][] = [];
-    const weeksInMonth = calendarMonthUtils.weeksInMonth(year, month);
-    const daysInMonth = new Date(year, month, 0).getDate();
+export const 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();
+  let currentDay = 1;
+  const firstDayOfMonth = new Date(year, month - 1, 1).getDay();
 
-    for (let i = 0; i < weeksInMonth; i++) {
-      const thisWeek: (Date | null)[] = [];
-      if (i === 0 && firstDayOfMonth !== 0) { // 0 is Sunday in JavaScript
-        for (let j = 0; j < 7; j++) {
-          if (j < firstDayOfMonth) {
-            thisWeek.push(null);
-          } else {
-            thisWeek.push(new Date(year, month - 1, currentDay));
-            currentDay++;
-          }
-        }
-      } else {
-        for (let j = 0; j < 7; j++) {
-          if (currentDay <= daysInMonth) {
-            thisWeek.push(new Date(year, month - 1, currentDay));
-            currentDay++;
-          } else {
-            thisWeek.push(null);
-          }
+  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++;
+        }
+      }
+    } 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() : null));
-
-    return { year, month, weeks, daysByWeek };
-  },
-
-  getMonthsBetweenDates: (startDate: Date, endDate: Date): CalendarMonth[] => {
-    const monthsInTerm = 1 + (endDate.getFullYear() - startDate.getFullYear()) * 12 + endDate.getMonth() - startDate.getMonth();
-
-    return Array.from({ length: monthsInTerm }, (_, monthDiff) => {
-      const month = ((startDate.getMonth() + monthDiff) % 12) + 1;
-      const year = startDate.getFullYear() + Math.floor((startDate.getMonth() + monthDiff) / 12);
-      return calendarMonthUtils.createCalendarMonth(year, month);
-    });
+    daysByWeek.push(thisWeek);
   }
+
+  const weeks = daysByWeek.map((week) =>
+    week.map((day) => (day ? day.getDate() : undefined))
+  );
+
+  return { year, month, weeks, daysByWeek };
+};
+
+export const getMonthsBetweenDates = (
+  startDate: Date,
+  endDate: Date
+): CalendarMonthModel[] => {
+  const monthsInTerm =
+    1 +
+    (endDate.getFullYear() - startDate.getFullYear()) * 12 +
+    endDate.getMonth() -
+    startDate.getMonth();
+
+  return Array.from({ length: monthsInTerm }, (_, monthDiff) => {
+    const month = ((startDate.getMonth() + monthDiff) % 12) + 1;
+    const year =
+      startDate.getFullYear() +
+      Math.floor((startDate.getMonth() + monthDiff) / 12);
+    return createCalendarMonth(year, month);
+  });
 };

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

@@ -1,6 +1,8 @@
 "use client";
 import { useLocalCourseDetailsQuery } from "@/hooks/localCoursesHooks";
 import { getDateFromStringOrThrow } from "@/models/local/timeUtils";
+import { getMonthsBetweenDates } from "./calendarMonthUtils";
+import { CalendarMonth } from "./CalendarMonth";
 
 export default function Page({
   params: { courseName },
@@ -8,18 +10,17 @@ export default function Page({
   params: { courseName: string };
 }) {
   const { data: course } = useLocalCourseDetailsQuery(courseName);
-  console.log(course);
 
   const startDate = getDateFromStringOrThrow(course.settings.startDate);
   const endDate = getDateFromStringOrThrow(course.settings.endDate);
 
-  const months = calendarMonthUtils.getMonthsBetweenDates(startDate, endDate);
+  const months = getMonthsBetweenDates(startDate, endDate);
   return (
     <div>
       {course.settings.name}
       <div>
         {months.map((month) => (
-          <div key={month.month + "" + month.year}>{month.month}</div>
+          <CalendarMonth key={month.month + "" + month.year} month={month} localCourse={course} />
         ))}
       </div>
     </div>