monaco editor in progress

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

@@ -1,12 +1,20 @@
 "use client";
 import React, { useMemo } from "react";
 import { useCourseContext } from "../context/courseContext";
-import { useModuleDataQuery } from "@/hooks/localCourse/localCoursesHooks";
 import { getDateFromStringOrThrow } from "@/models/local/timeUtils";
 import Link from "next/link";
-import { usePageNamesQuery, usePagesQueries } from "@/hooks/localCourse/pageHooks";
-import { useQuizNamesQuery, useQuizzesQueries } from "@/hooks/localCourse/quizHooks";
-import { useAssignmentNamesQuery, useAssignmentsQueries } from "@/hooks/localCourse/assignmentHooks";
+import {
+  usePageNamesQuery,
+  usePagesQueries,
+} from "@/hooks/localCourse/pageHooks";
+import {
+  useQuizNamesQuery,
+  useQuizzesQueries,
+} from "@/hooks/localCourse/quizHooks";
+import {
+  useAssignmentNamesQuery,
+  useAssignmentsQueries,
+} from "@/hooks/localCourse/assignmentHooks";
 
 export default function DayItemsInModule({
   day,
@@ -74,7 +82,7 @@ function Pages({ moduleName, day }: { moduleName: string; day: string }) {
 function Quizzes({ moduleName, day }: { moduleName: string; day: string }) {
   const { data: quizNames } = useQuizNamesQuery(moduleName);
   const { data: quizzes } = useQuizzesQueries(moduleName, quizNames);
-  
+
   const { courseName } = useCourseContext();
   const todaysQuizzes = useMemo(
     () =>
@@ -115,7 +123,14 @@ function Quizzes({ moduleName, day }: { moduleName: string; day: string }) {
           onDragEnd={(e) => e.preventDefault()}
         >
           <Link
-            href={`/course/${courseName}/modules/${moduleName}/quiz/${q.name}`}
+            href={
+              "/course/" +
+              encodeURIComponent(courseName) +
+              "/modules/" +
+              encodeURIComponent(moduleName) +
+              "/quiz/" +
+              encodeURIComponent(q.name)
+            }
           >
             {q.name}
           </Link>

nextjs/src/app/course/[courseName]/context/DraggingContextProvider.tsx

@@ -17,7 +17,6 @@ export default function DraggingContextProvider({
   children,
 }: {
   children: ReactNode;
-  localCourseName: string;
 }) {
   const updateQuizMutation = useUpdateQuizMutation();
   const updateAssignmentMutation = useUpdateAssignmentMutation();
@@ -73,7 +72,8 @@ export default function DraggingContextProvider({
         const assignment: LocalAssignment = {
           ...previousAssignment,
           dueAt: dateToMarkdownString(dayAsDate),
-          lockAt: previousAssignment.lockAt &&
+          lockAt:
+            previousAssignment.lockAt &&
             (getDateFromStringOrThrow(
               previousAssignment.lockAt,
               "lockAt date"
@@ -92,6 +92,7 @@ export default function DraggingContextProvider({
       settings.defaultDueTime.hour,
       settings.defaultDueTime.minute,
       updateAssignmentMutation,
+      updatePageMutation,
       updateQuizMutation,
     ]
   );

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

@@ -1,9 +1,7 @@
-import {
-  dehydrate,
-  HydrationBoundary,
-} from "@tanstack/react-query";
+import { dehydrate, HydrationBoundary } from "@tanstack/react-query";
 import { getQueryClient } from "@/app/providersQueryClientUtils";
 import { hydrateCourse } from "@/hooks/hookHydration";
+import CourseContextProvider from "./context/CourseContextProvider";
 
 export default async function CourseLayout({
   children,
@@ -12,17 +10,20 @@ export default async function CourseLayout({
   children: React.ReactNode;
   params: { courseName: string };
 }) {
+  const decodedCourseName = decodeURIComponent(courseName)
   if (courseName.includes(".js.map")) {
-    console.log("cannot load course that is .js.map " + courseName);
+    console.log("cannot load course that is .js.map " + decodedCourseName);
     return <div></div>;
   }
   const queryClient = getQueryClient();
 
-  await hydrateCourse(queryClient, courseName);
+  await hydrateCourse(queryClient, decodedCourseName);
   const dehydratedState = dehydrate(queryClient);
 
   // console.log("hydrated course state", courseName, dehydratedState);
   return (
-    <HydrationBoundary state={dehydratedState}>{children}</HydrationBoundary>
+    <CourseContextProvider localCourseName={decodedCourseName}>
+      <HydrationBoundary state={dehydratedState}>{children}</HydrationBoundary>
+    </CourseContextProvider>
   );
 }

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

@@ -1,5 +1,5 @@
 "use client";
-import MonacoEditor from "@/components/MonacoEditor";
+import { MonacoEditor } from "@/components/editor/MonacoEditor";
 import { useQuizQuery } from "@/hooks/localCourse/quizHooks";
 
 export default function EditQuiz({
@@ -15,7 +15,12 @@ export default function EditQuiz({
     <div>
       {quiz.name}
 
-      {/* <MonacoEditor /> */}
+      <MonacoEditor
+        value={""}
+        onChange={function (value: string): void {
+          throw new Error("Function not implemented.");
+        }}
+      />
     </div>
   );
 }

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

@@ -6,5 +6,7 @@ export default async function Page({
 }: {
   params: { quizName: string; moduleName: string };
 }) {
-  return <EditQuiz quizName={quizName} moduleName={moduleName} />;
+  const decodedQuizName = decodeURIComponent(quizName)
+  const decodedModuleName = decodeURIComponent(moduleName)
+  return <EditQuiz quizName={decodedQuizName} moduleName={decodedModuleName} />;
 }

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

@@ -1,29 +1,22 @@
-import CourseContextProvider from "./context/CourseContextProvider";
 import CourseCalendar from "./calendar/CourseCalendar";
 import CourseSettings from "./CourseSettings";
 import ModuleList from "./modules/ModuleList";
 import DraggingContextProvider from "./context/DraggingContextProvider";
 
-export default async function CoursePage({
-  params: { courseName },
-}: {
-  params: { courseName: string };
-}) {
+export default async function CoursePage({}: {}) {
   return (
-    <CourseContextProvider localCourseName={courseName}>
-      <div className="h-full flex flex-col">
-        <CourseSettings />
-        <div className="flex flex-row min-h-0">
-          <DraggingContextProvider localCourseName={courseName}>
-            <div className="flex-1 min-h-0">
-              <CourseCalendar />
-            </div>
-            <div className="w-96 p-3">
-              <ModuleList />
-            </div>
-          </DraggingContextProvider>
-        </div>
+    <div className="h-full flex flex-col">
+      <CourseSettings />
+      <div className="flex flex-row min-h-0">
+        <DraggingContextProvider>
+          <div className="flex-1 min-h-0">
+            <CourseCalendar />
+          </div>
+          <div className="w-96 p-3">
+            <ModuleList />
+          </div>
+        </DraggingContextProvider>
       </div>
-    </CourseContextProvider>
+    </div>
   );
 }