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>
   );
 }