handling iso date strings

This commit is contained in:
2024-08-26 13:37:23 -06:00
parent 1459655b90
commit 5d16cae417
11 changed files with 173 additions and 19 deletions

View File

@@ -0,0 +1,66 @@
interface CalendarMonth {
year: number;
month: number;
weeks: (number | null)[][];
daysByWeek: (Date | null)[][];
}
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;
},
createCalendarMonth: (year: number, month: number): CalendarMonth => {
const daysByWeek: (Date | null)[][] = [];
const weeksInMonth = calendarMonthUtils.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 < 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);
}
}
}
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);
});
}
};

View File

@@ -0,0 +1,27 @@
"use client";
import { useLocalCourseDetailsQuery } from "@/hooks/localCoursesHooks";
import { getDateFromStringOrThrow } from "@/models/local/timeUtils";
export default function Page({
params: { courseName },
}: {
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);
return (
<div>
{course.settings.name}
<div>
{months.map((month) => (
<div key={month.month + "" + month.year}>{month.month}</div>
))}
</div>
</div>
);
}

View File

@@ -4,7 +4,6 @@ import "./globals.css";
import { dehydrate } from "@tanstack/react-query";
import { MyQueryClientProvider } from "@/services/utils/MyQueryClientProvider";
import { hydrateCourses } from "@/hooks/hookHydration";
import { LoadingAndErrorHandling } from "@/components/LoadingAndErrorHandling";
import { createQueryClientForServer } from "@/services/utils/queryClientServer";
const inter = Inter({ subsets: ["latin"] });
@@ -31,9 +30,9 @@ export default async function RootLayout({
return (
<html lang="en">
<MyQueryClientProvider dehydratedState={dehydratedState}>
<LoadingAndErrorHandling>
{/* <LoadingAndErrorHandling> */}
<body className={inter.className}>{children}</body>
</LoadingAndErrorHandling>
{/* </LoadingAndErrorHandling> */}
</MyQueryClientProvider>
</html>
);

View File

@@ -1,12 +1,13 @@
"use client"
import { useLocalCoursesQuery } from "@/hooks/localCoursesHooks";
import Link from "next/link";
export default function Home() {
const { data: courses } = useLocalCoursesQuery();
return (
<main className="flex min-h-screen flex-col items-center justify-between p-24">
{courses.map((c) => (
<div key={c.settings.name}>{c.settings.name} </div>
<Link href={`/course/${c.settings.name}`} key={c.settings.name}>{c.settings.name} </Link>
))}
</main>
);