alex/canvasManagement
1
0
Fork 0
mirror of https://github.com/alexmickelson/canvasManagement.git synced 2026-03-25 23:28:33 -06:00
Code Issues Packages Projects Releases Wiki Activity

working on hot reloading

Browse Source
This commit is contained in:
Alex Mickelson
2024-08-26 16:30:29 -06:00
parent 0af6ffa8f5
commit f7e13fb6aa
11 changed files with 57 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
nextjs/src/app/course/[courseName]/CalendarMonth.tsx → nextjs/src/app/course/[courseName]/calendarMonth.tsx
View File

@@ -1,7 +1,7 @@
import { useState } from "react"; import { useState } from "react";
import { CalendarMonthModel } from "./calendarMonthUtils"; import { CalendarMonthModel } from "./calendarMonthUtils";
import { DayOfWeek, LocalCourse } from "@/models/local/localCourse"; import { DayOfWeek, LocalCourse } from "@/models/local/localCourse";
import Day from "./Day"; import Day from "./day";
export default function CalendarMonth({ export default function CalendarMonth({
month, month,

17
nextjs/src/app/course/[courseName]/calendarMonthUtils.ts
View File

@@ -5,7 +5,7 @@ export interface CalendarMonthModel {
daysByWeek: (Date | undefined)[][]; daysByWeek: (Date | undefined)[][];
} }
const weeksInMonth = (year: number, month: number): number => { function weeksInMonth(year: number, month: number): number {
const firstDayOfMonth = new Date(year, month - 1, 1).getDay(); const firstDayOfMonth = new Date(year, month - 1, 1).getDay();
const daysInMonth = new Date(year, month, 0).getDate(); const daysInMonth = new Date(year, month, 0).getDate();
const longDaysInMonth = daysInMonth + firstDayOfMonth; const longDaysInMonth = daysInMonth + firstDayOfMonth;
@@ -14,12 +14,9 @@ const weeksInMonth = (year: number, month: number): number => {
weeks += 1; weeks += 1;
} }
return weeks; return weeks;
}; }
const createCalendarMonth = ( function createCalendarMonth(year: number, month: number): CalendarMonthModel {
year: number,
month: number
): CalendarMonthModel => {
const daysByWeek: (Date | undefined)[][] = []; const daysByWeek: (Date | undefined)[][] = [];
const weeksNumber = weeksInMonth(year, month); const weeksNumber = weeksInMonth(year, month);
const daysInMonth = new Date(year, month, 0).getDate(); const daysInMonth = new Date(year, month, 0).getDate();
@@ -57,12 +54,12 @@ const createCalendarMonth = (
); );
return { year, month, weeks, daysByWeek }; return { year, month, weeks, daysByWeek };
}; }
export const getMonthsBetweenDates = ( export function getMonthsBetweenDates(
startDate: Date, startDate: Date,
endDate: Date endDate: Date
): CalendarMonthModel[] => { ): CalendarMonthModel[] {
const monthsInTerm = const monthsInTerm =
1 + 1 +
(endDate.getFullYear() - startDate.getFullYear()) * 12 + (endDate.getFullYear() - startDate.getFullYear()) * 12 +
@@ -76,4 +73,4 @@ export const getMonthsBetweenDates = (
Math.floor((startDate.getMonth() + monthDiff) / 12); Math.floor((startDate.getMonth() + monthDiff) / 12);
return createCalendarMonth(year, month); return createCalendarMonth(year, month);
}); });
}; }

0
nextjs/src/app/course/[courseName]/Day.tsx → nextjs/src/app/course/[courseName]/day.tsx
View File

2
nextjs/src/app/course/[courseName]/page.tsx
View File

@@ -2,7 +2,7 @@
import { useLocalCourseDetailsQuery } from "@/hooks/localCoursesHooks"; import { useLocalCourseDetailsQuery } from "@/hooks/localCoursesHooks";
import { getDateFromStringOrThrow } from "@/models/local/timeUtils"; import { getDateFromStringOrThrow } from "@/models/local/timeUtils";
import { getMonthsBetweenDates } from "./calendarMonthUtils"; import { getMonthsBetweenDates } from "./calendarMonthUtils";
import CalendarMonth from "./CalendarMonth"; import CalendarMonth from "./calendarMonth";
export default function Page({ export default function Page({

8
nextjs/src/app/layout.tsx
View File

@@ -1,12 +1,10 @@
import type { Metadata } from "next"; import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css"; import "./globals.css";
import { dehydrate } from "@tanstack/react-query"; import { dehydrate } from "@tanstack/react-query";
import { MyQueryClientProvider } from "@/services/utils/MyQueryClientProvider";
import { hydrateCourses } from "@/hooks/hookHydration"; import { hydrateCourses } from "@/hooks/hookHydration";
import { createQueryClientForServer } from "@/services/utils/queryClientServer"; import { createQueryClientForServer } from "@/services/utils/queryClientServer";
import MyQueryClientProvider from "@/services/utils/MyQueryClientProvider";
const inter = Inter({ subsets: ["latin"] });
export const metadata: Metadata = { export const metadata: Metadata = {
title: "Canvas Manager 2.0", title: "Canvas Manager 2.0",
@@ -30,9 +28,7 @@ export default async function RootLayout({
return ( return (
<html lang="en"> <html lang="en">
<MyQueryClientProvider dehydratedState={dehydratedState}> <MyQueryClientProvider dehydratedState={dehydratedState}>
{/* <LoadingAndErrorHandling> */} <body className="bg-slate-950">{children}</body>
<body className={inter.className}>{children}</body>
{/* </LoadingAndErrorHandling> */}
</MyQueryClientProvider> </MyQueryClientProvider>
</html> </html>
); );

2
nextjs/src/app/page.tsx
View File

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

31
nextjs/src/components/LoadingAndErrorHandling.tsx
View File

@@ -1,31 +0,0 @@
import { QueryErrorResetBoundary } from "@tanstack/react-query";
import { FC, ReactNode, Suspense } from "react";
import { ErrorBoundary } from "react-error-boundary";
// not at top level?
export const LoadingAndErrorHandling: FC<{ children: ReactNode }> = ({
children,
}) => {
return (
<QueryErrorResetBoundary>
{({ reset }) => (
<ErrorBoundary
onReset={reset}
fallbackRender={(props) => (
<div className="text-center">
<div className="p-3">{JSON.stringify(props.error)}</div>
<button
className="btn btn-outline-secondary"
onClick={() => props.resetErrorBoundary()}
>
Try again
</button>
</div>
)}
>
<Suspense fallback={<div>loading...</div>}>{children}</Suspense>
</ErrorBoundary>
)}
</QueryErrorResetBoundary>
);
};

4
nextjs/src/services/fileStorage/fileStorageService.ts
View File

@@ -38,8 +38,8 @@ export const fileStorageService = {
async directoryExists(directoryPath: string): Promise<boolean> { async directoryExists(directoryPath: string): Promise<boolean> {
try { try {
const stat = await fs.stat(directoryPath); await fs.access(directoryPath);
return stat.isDirectory(); return true;
} catch { } catch {
return false; return false;
} }

11
nextjs/src/services/utils/MyQueryClientProvider.tsx
View File

@@ -9,15 +9,18 @@ import React from "react";
import { FC, ReactNode, useState } from "react"; import { FC, ReactNode, useState } from "react";
import { createQueryClient } from "./queryClient"; import { createQueryClient } from "./queryClient";
export const MyQueryClientProvider: FC<{ export default function MyQueryClientProvider({
children,
dehydratedState,
}: {
children: ReactNode; children: ReactNode;
dehydratedState: DehydratedState; dehydratedState: DehydratedState;
}> = ({ children, dehydratedState }) => { }) {
const [queryClient] = useState(createQueryClient()); const [queryClient] = useState(createQueryClient());
hydrate(queryClient, dehydratedState); hydrate(queryClient, dehydratedState);
return ( return (
<QueryClientProvider client={queryClient}>{children}</QueryClientProvider> <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
); );
}; }

34
nextjs/src/services/utils/queryClient.tsx
View File

@@ -123,21 +123,23 @@ export function createSuccessToast(message: string) {
); );
} }
export const createQueryClient = () => new QueryClient({ export function createQueryClient() {
defaultOptions: { return new QueryClient({
queries: { defaultOptions: {
refetchOnWindowFocus: false, queries: {
retry: 0, refetchOnWindowFocus: false,
retry: 0,
},
mutations: {
onError: addErrorAsToast,
retry: 0,
},
}, },
mutations: { queryCache: new QueryCache({
onError: addErrorAsToast, onError: addErrorAsToast,
retry: 0, }),
}, mutationCache: new MutationCache({
}, onError: addErrorAsToast,
queryCache: new QueryCache({ }),
onError: addErrorAsToast, });
}), }
mutationCache: new MutationCache({
onError: addErrorAsToast,
}),
});

34
nextjs/src/services/utils/queryClientServer.tsx
View File

@@ -1,20 +1,22 @@
import { MutationCache, QueryCache, QueryClient } from "@tanstack/react-query"; import { MutationCache, QueryCache, QueryClient } from "@tanstack/react-query";
export const createQueryClientForServer = () => new QueryClient({ export function createQueryClientForServer() {
defaultOptions: { return new QueryClient({
queries: { defaultOptions: {
refetchOnWindowFocus: false, queries: {
retry: 0, refetchOnWindowFocus: false,
retry: 0,
},
mutations: {
onError: (e) => console.log(e),
retry: 0,
},
}, },
mutations: { queryCache: new QueryCache({
onError: (e) => console.log(e), onError: (e) => console.log(e),
retry: 0, }),
}, mutationCache: new MutationCache({
}, onError: (e) => console.log(e),
queryCache: new QueryCache({ }),
onError: (e) => console.log(e), });
}), }
mutationCache: new MutationCache({
onError: (e) => console.log(e),
}),
});