working on hot reloading

2026-03-26 07:38:33 -06:00 · 2024-08-26 16:30:29 -06:00
parent 0af6ffa8f5
commit f7e13fb6aa
11 changed files with 57 additions and 88 deletions
--- a/nextjs/src/app/course/[courseName]/calendarMonth.tsx
+++ b/nextjs/src/app/course/[courseName]/calendarMonth.tsx
@@ -1,7 +1,7 @@
 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,
--- a/nextjs/src/app/course/[courseName]/calendarMonthUtils.ts
+++ b/nextjs/src/app/course/[courseName]/calendarMonthUtils.ts
@@ -5,7 +5,7 @@ export interface CalendarMonthModel {
  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 daysInMonth = new Date(year, month, 0).getDate();
  const longDaysInMonth = daysInMonth + firstDayOfMonth;
@@ -14,12 +14,9 @@ const weeksInMonth = (year: number, month: number): number => {
    weeks += 1;
  }
  return weeks;
-};
+}

-const createCalendarMonth = (
-  year: number,
-  month: number
-): CalendarMonthModel => {
+function createCalendarMonth(year: number, month: number): CalendarMonthModel {
  const daysByWeek: (Date | undefined)[][] = [];
  const weeksNumber = weeksInMonth(year, month);
  const daysInMonth = new Date(year, month, 0).getDate();
@@ -57,12 +54,12 @@ const createCalendarMonth = (
  );

  return { year, month, weeks, daysByWeek };
-};
+}

-export const getMonthsBetweenDates = (
+export function getMonthsBetweenDates(
  startDate: Date,
  endDate: Date
-): CalendarMonthModel[] => {
+): CalendarMonthModel[] {
  const monthsInTerm =
    1 +
    (endDate.getFullYear() - startDate.getFullYear()) * 12 +
@@ -76,4 +73,4 @@ export const getMonthsBetweenDates = (
      Math.floor((startDate.getMonth() + monthDiff) / 12);
    return createCalendarMonth(year, month);
  });
-};
+}
--- a/nextjs/src/app/course/[courseName]/day.tsx
+++ b/nextjs/src/app/course/[courseName]/day.tsx
--- a/nextjs/src/app/course/[courseName]/page.tsx
+++ b/nextjs/src/app/course/[courseName]/page.tsx
@@ -2,7 +2,7 @@
 import { useLocalCourseDetailsQuery } from "@/hooks/localCoursesHooks";
 import { getDateFromStringOrThrow } from "@/models/local/timeUtils";
 import { getMonthsBetweenDates } from "./calendarMonthUtils";
-import CalendarMonth from "./CalendarMonth";
+import CalendarMonth from "./calendarMonth";


 export default function Page({
--- a/nextjs/src/app/layout.tsx
+++ b/nextjs/src/app/layout.tsx
@@ -1,12 +1,10 @@
 import type { Metadata } from "next";
-import { Inter } from "next/font/google";
 import "./globals.css";
 import { dehydrate } from "@tanstack/react-query";
-import { MyQueryClientProvider } from "@/services/utils/MyQueryClientProvider";
 import { hydrateCourses } from "@/hooks/hookHydration";
 import { createQueryClientForServer } from "@/services/utils/queryClientServer";
+import MyQueryClientProvider from "@/services/utils/MyQueryClientProvider";

-const inter = Inter({ subsets: ["latin"] });

 export const metadata: Metadata = {
  title: "Canvas Manager 2.0",
@@ -30,9 +28,7 @@ export default async function RootLayout({
  return (
    <html lang="en">
      <MyQueryClientProvider dehydratedState={dehydratedState}>
-        {/* <LoadingAndErrorHandling> */}
-          <body className={inter.className}>{children}</body>
-        {/* </LoadingAndErrorHandling> */}
+          <body className="bg-slate-950">{children}</body>
      </MyQueryClientProvider>
    </html>
  );
--- a/nextjs/src/app/page.tsx
+++ b/nextjs/src/app/page.tsx
@@ -5,7 +5,7 @@ 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">
+    <main className="min-h-screen">
      {courses.map((c) => (
        <Link href={`/course/${c.settings.name}`} key={c.settings.name}>{c.settings.name} </Link>
      ))}
--- a/nextjs/src/components/LoadingAndErrorHandling.tsx
+++ b/nextjs/src/components/LoadingAndErrorHandling.tsx
@@ -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>
-  );
-};
--- a/nextjs/src/services/fileStorage/fileStorageService.ts
+++ b/nextjs/src/services/fileStorage/fileStorageService.ts
@@ -38,8 +38,8 @@ export const fileStorageService = {

  async directoryExists(directoryPath: string): Promise<boolean> {
    try {
-      const stat = await fs.stat(directoryPath);
-      return stat.isDirectory();
+      await fs.access(directoryPath);
+      return true;
    } catch {
      return false;
    }
--- a/nextjs/src/services/utils/MyQueryClientProvider.tsx
+++ b/nextjs/src/services/utils/MyQueryClientProvider.tsx
@@ -9,15 +9,18 @@ import React from "react";
 import { FC, ReactNode, useState } from "react";
 import { createQueryClient } from "./queryClient";

-export const MyQueryClientProvider: FC<{
+export default function MyQueryClientProvider({
+  children,
+  dehydratedState,
+}: {
  children: ReactNode;
  dehydratedState: DehydratedState;
-}> = ({ children, dehydratedState }) => {
+}) {
  const [queryClient] = useState(createQueryClient());

  hydrate(queryClient, dehydratedState);
-  
+
  return (
    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
  );
-};
+}
--- a/nextjs/src/services/utils/queryClient.tsx
+++ b/nextjs/src/services/utils/queryClient.tsx
@@ -123,21 +123,23 @@ export function createSuccessToast(message: string) {
  );
 }

-export const createQueryClient = () => new QueryClient({
-  defaultOptions: {
-    queries: {
-      refetchOnWindowFocus: false,
-      retry: 0,
+export function createQueryClient() {
+  return new QueryClient({
+    defaultOptions: {
+      queries: {
+        refetchOnWindowFocus: false,
+        retry: 0,
+      },
+      mutations: {
+        onError: addErrorAsToast,
+        retry: 0,
+      },
    },
-    mutations: {
+    queryCache: new QueryCache({
      onError: addErrorAsToast,
-      retry: 0,
-    },
-  },
-  queryCache: new QueryCache({
-    onError: addErrorAsToast,
-  }),
-  mutationCache: new MutationCache({
-    onError: addErrorAsToast,
-  }),
-});
+    }),
+    mutationCache: new MutationCache({
+      onError: addErrorAsToast,
+    }),
+  });
+}
--- a/nextjs/src/services/utils/queryClientServer.tsx
+++ b/nextjs/src/services/utils/queryClientServer.tsx
@@ -1,20 +1,22 @@
 import { MutationCache, QueryCache, QueryClient } from "@tanstack/react-query";

-export const createQueryClientForServer = () => new QueryClient({
-  defaultOptions: {
-    queries: {
-      refetchOnWindowFocus: false,
-      retry: 0,
+export function createQueryClientForServer() {
+  return new QueryClient({
+    defaultOptions: {
+      queries: {
+        refetchOnWindowFocus: false,
+        retry: 0,
+      },
+      mutations: {
+        onError: (e) => console.log(e),
+        retry: 0,
+      },
    },
-    mutations: {
+    queryCache: new QueryCache({
      onError: (e) => console.log(e),
-      retry: 0,
-    },
-  },
-  queryCache: new QueryCache({
-    onError: (e) => console.log(e),
-  }),
-  mutationCache: new MutationCache({
-    onError: (e) => console.log(e),
-  }),
-});
+    }),
+    mutationCache: new MutationCache({
+      onError: (e) => console.log(e),
+    }),
+  });
+}