trying to get page to load without error

nextjs/src/app/course/[courseName]/calendar/DayItemsInModule.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { useCourseContext } from "../context/courseContext";
 import { useModuleDataQuery } from "@/hooks/localCourse/localCoursesHooks";
 import { getDateFromStringOrThrow } from "@/models/local/timeUtils";
+import Link from "next/link";
 
 export default function DayItemsInModule({
   day,
@@ -63,7 +64,7 @@ export default function DayItemsInModule({
             }
             onDragEnd={endItemDrag}
           >
-            {q.name}
+            <Link href={`/course/${courseName}/modules/${moduleName}/quiz/${q.name}`}>{q.name}</Link>
           </li>
         ))}
         {todaysPages.map((p) => (

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

@@ -0,0 +1,21 @@
+import { dehydrate, HydrationBoundary, QueryClient } from "@tanstack/react-query";
+import { hydrateCourse } from "@/hooks/hookHydration";
+import { getQueryClient } from "@/app/providersQueryClientUtils";
+
+export default async function CourseLayout({
+  children,
+  params: { courseName },
+}: {
+  children: React.ReactNode;
+  params: { courseName: string };
+}) {
+  const queryClient = getQueryClient();
+
+  await hydrateCourse(queryClient, courseName);
+  const dehydratedState = dehydrate(queryClient);
+
+  console.log("hydrated course state", courseName, dehydratedState);
+  return (
+    <HydrationBoundary state={dehydratedState}>{children}</HydrationBoundary>
+  );
+}

nextjs/src/app/course/[courseName]/modules/[moduleName]/quiz/[quizName]/EditQuiz.tsx

@@ -0,0 +1,23 @@
+"use client";
+import MonacoEditor from "@/components/MonacoEditor";
+import { useQuizQuery } from "@/hooks/localCourse/quizHooks";
+
+export default function EditQuiz({
+  courseName,
+  moduleName,
+  quizName,
+}: {
+  courseName: string;
+  quizName: string;
+  moduleName: string;
+}) {
+  const { data: quiz } = useQuizQuery(courseName, moduleName, quizName);
+
+  return (
+    <div>
+      {quiz.name}
+
+      {/* <MonacoEditor /> */}
+    </div>
+  );
+}

nextjs/src/app/course/[courseName]/modules/[moduleName]/quiz/[quizName]/page.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import EditQuiz from "./EditQuiz";
+
+export default async function Page({
+  params: { courseName, moduleName, quizName },
+}: {
+  params: { courseName: string; quizName: string; moduleName: string };
+}) {
+  return (
+    <EditQuiz
+      courseName={courseName}
+      quizName={quizName}
+      moduleName={moduleName}
+    />
+  );
+}

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

@@ -1,36 +1,26 @@
 import CourseContextProvider from "./context/CourseContextProvider";
 import CourseCalendar from "./calendar/CourseCalendar";
-import { dehydrate, HydrationBoundary } from "@tanstack/react-query";
 import CourseSettings from "./CourseSettings";
 import ModuleList from "./modules/ModuleList";
-import { createQueryClientForServer } from "@/services/utils/queryClientServer";
-import { hydrateCourse } from "@/hooks/hookHydration";
 
 export default async function CoursePage({
   params: { courseName },
 }: {
   params: { courseName: string };
 }) {
-  const queryClient = createQueryClientForServer();
-
-  await hydrateCourse(queryClient, courseName);
-  const dehydratedState = dehydrate(queryClient);
-
   return (
-    <HydrationBoundary state={dehydratedState}>
-      <CourseContextProvider localCourseName={courseName}>
-        <div className="h-full flex flex-col">
-          <CourseSettings courseName={courseName} />
-          <div className="flex flex-row min-h-0">
-            <div className="flex-1 min-h-0">
-              <CourseCalendar />
-            </div>
-            <div className="w-96 p-3">
-              <ModuleList />
-            </div>
+    <CourseContextProvider localCourseName={courseName}>
+      <div className="h-full flex flex-col">
+        <CourseSettings courseName={courseName} />
+        <div className="flex flex-row min-h-0">
+          <div className="flex-1 min-h-0">
+            <CourseCalendar />
+          </div>
+          <div className="w-96 p-3">
+            <ModuleList />
           </div>
         </div>
-      </CourseContextProvider>
-    </HydrationBoundary>
+      </div>
+    </CourseContextProvider>
   );
 }

nextjs/src/app/page.tsx

@@ -1,18 +1,14 @@
-import { dehydrate, HydrationBoundary } from "@tanstack/react-query";
+import { dehydrate, HydrationBoundary, QueryClient } from "@tanstack/react-query";
 import CourseList from "./CourseList";
-import { createQueryClientForServer } from "@/services/utils/queryClientServer";
 import { hydrateCourses } from "@/hooks/hookHydration";
+import { getQueryClient } from "./providersQueryClientUtils";
 
-async function getDehydratedClient() {
-  const queryClient = createQueryClientForServer();
-
-  await hydrateCourses(queryClient);
-  const dehydratedState = dehydrate(queryClient);
-  return dehydratedState;
-}
 
 export default async function Home() {
-  const dehydratedState = await getDehydratedClient();
+  const queryClient = getQueryClient();
+  await hydrateCourses(queryClient);
+  const dehydratedState = dehydrate(queryClient);
+
   return (
     <main className="min-h-screen">
       <HydrationBoundary state={dehydratedState}>

nextjs/src/app/providers.tsx

@@ -1,39 +1,11 @@
 "use client";
 import {
-  isServer,
-  QueryClient,
   QueryClientProvider,
 } from "@tanstack/react-query";
 import { ReactNode } from "react";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+import { getQueryClient } from "./providersQueryClientUtils";
 
-function makeQueryClient() {
-  return new QueryClient({
-    defaultOptions: {
-      queries: {
-        // With SSR, we usually want to set some default staleTime
-        // above 0 to avoid refetching immediately on the client
-        staleTime: 1000,
-      },
-    },
-  });
-}
-
-let browserQueryClient: QueryClient | undefined = undefined;
-
-function getQueryClient() {
-  if (isServer) {
-    // Server: always make a new query client
-    return makeQueryClient();
-  } else {
-    // Browser: make a new query client if we don't already have one
-    // This is very important, so we don't re-make a new client if React
-    // suspends during the initial render. This may not be needed if we
-    // have a suspense boundary BELOW the creation of the query client
-    if (!browserQueryClient) browserQueryClient = makeQueryClient();
-    return browserQueryClient;
-  }
-}
 
 export default function Providers({ children }: { children: ReactNode }) {
   // NOTE: Avoid useState when initializing the query client if you don't

nextjs/src/app/providersQueryClientUtils.ts

@@ -0,0 +1,29 @@
+import { isServer, QueryClient } from "@tanstack/react-query";
+
+export function makeQueryClient() {
+  return new QueryClient({
+    defaultOptions: {
+      queries: {
+        // With SSR, we usually want to set some default staleTime
+        // above 0 to avoid refetching immediately on the client
+        staleTime: 1000,
+      },
+    },
+  });
+}
+
+let browserQueryClient: QueryClient | undefined = undefined;
+
+export function getQueryClient() {
+  if (isServer) {
+    // Server: always make a new query client
+    return makeQueryClient();
+  } else {
+    // Browser: make a new query client if we don't already have one
+    // This is very important, so we don't re-make a new client if React
+    // suspends during the initial render. This may not be needed if we
+    // have a suspense boundary BELOW the creation of the query client
+    if (!browserQueryClient) browserQueryClient = makeQueryClient();
+    return browserQueryClient;
+  }
+}