From a681477b1aed103c449bd2b094054023a0cbecf2 Mon Sep 17 00:00:00 2001 From: Alex Mickelson Date: Mon, 26 Aug 2024 14:10:26 -0600 Subject: [PATCH] pre codemon --- nextjs/next.config.mjs | 5 +- .../app/course/[courseName]/CalendarMonth.tsx | 63 +++++++++ nextjs/src/app/course/[courseName]/Day.tsx | 9 ++ .../course/[courseName]/calendarMonthUtils.ts | 122 ++++++++++-------- nextjs/src/app/course/[courseName]/page.tsx | 7 +- .../fileStorage/utils/couresMarkdownLoader.ts | 1 - nextjs/tailwind.config.ts | 10 +- 7 files changed, 149 insertions(+), 68 deletions(-) create mode 100644 nextjs/src/app/course/[courseName]/CalendarMonth.tsx create mode 100644 nextjs/src/app/course/[courseName]/Day.tsx diff --git a/nextjs/next.config.mjs b/nextjs/next.config.mjs index 4678774..1b2621c 100644 --- a/nextjs/next.config.mjs +++ b/nextjs/next.config.mjs @@ -1,4 +1,7 @@ /** @type {import('next').NextConfig} */ -const nextConfig = {}; +const nextConfig = { + +}; +devServer.fastRefresh = true; export default nextConfig; diff --git a/nextjs/src/app/course/[courseName]/CalendarMonth.tsx b/nextjs/src/app/course/[courseName]/CalendarMonth.tsx new file mode 100644 index 0000000..71813aa --- /dev/null +++ b/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 ( + <> +

+ +

+ +
+
+ {weekDaysList.map((day) => ( +
+ {day} +
+ ))} +
+ + {month.daysByWeek.map((week, weekIndex) => ( +
+ {week.map((day, dayIndex) => ( + + ))} +
+ ))} +
+ + ); +}; diff --git a/nextjs/src/app/course/[courseName]/Day.tsx b/nextjs/src/app/course/[courseName]/Day.tsx new file mode 100644 index 0000000..ce62caf --- /dev/null +++ b/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
; + + return
{day.getDate()}
; +}; diff --git a/nextjs/src/app/course/[courseName]/calendarMonthUtils.ts b/nextjs/src/app/course/[courseName]/calendarMonthUtils.ts index 81c62af..db67185 100644 --- a/nextjs/src/app/course/[courseName]/calendarMonthUtils.ts +++ b/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); + }); }; diff --git a/nextjs/src/app/course/[courseName]/page.tsx b/nextjs/src/app/course/[courseName]/page.tsx index 2c0f68d..e13ea1c 100644 --- a/nextjs/src/app/course/[courseName]/page.tsx +++ b/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 (
{course.settings.name}
{months.map((month) => ( -
{month.month}
+ ))}
diff --git a/nextjs/src/services/fileStorage/utils/couresMarkdownLoader.ts b/nextjs/src/services/fileStorage/utils/couresMarkdownLoader.ts index 95b95d5..40a83c5 100644 --- a/nextjs/src/services/fileStorage/utils/couresMarkdownLoader.ts +++ b/nextjs/src/services/fileStorage/utils/couresMarkdownLoader.ts @@ -73,7 +73,6 @@ export const courseMarkdownLoader = { const settingsString = await fs.readFile(settingsPath, "utf-8"); const settings = localCourseYamlUtils.parseSettingYaml(settingsString); - console.log(settingsString, settings); const folderName = path.basename(courseDirectory); return { ...settings, name: folderName }; diff --git a/nextjs/tailwind.config.ts b/nextjs/tailwind.config.ts index e9a0944..d9394d1 100644 --- a/nextjs/tailwind.config.ts +++ b/nextjs/tailwind.config.ts @@ -6,15 +6,7 @@ const config: Config = { "./src/components/**/*.{js,ts,jsx,tsx,mdx}", "./src/app/**/*.{js,ts,jsx,tsx,mdx}", ], - theme: { - extend: { - backgroundImage: { - "gradient-radial": "radial-gradient(var(--tw-gradient-stops))", - "gradient-conic": - "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))", - }, - }, - }, + theme: {}, plugins: [], }; export default config;