lots of hooks

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

@@ -1,6 +1,7 @@
 "use client";
 
-import { useLocalCourseSettingsQuery } from "@/hooks/localCoursesHooks";
+import { useLocalCourseSettingsQuery } from "@/hooks/localCourse/localCoursesHooks";
+
 
 export default function CourseSettings({ courseName }: { courseName: string }) {
   const { data: settings } = useLocalCourseSettingsQuery(courseName);

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

@@ -50,6 +50,7 @@ export default function CourseContextProvider({
   return (
     <CourseContext.Provider
       value={{
+        courseName: localCourseName,
         startItemDrag: (d) => {
           setItemBeingDragged(d);
         },

nextjs/src/app/course/[courseName]/context/courseContext.ts

@@ -8,15 +8,17 @@ export interface DraggableItem {
 }
 
 export interface CourseContextInterface {
+  courseName: string;
   startItemDrag: (dragging: DraggableItem) => void;
   endItemDrag: () => void;
   itemDrop: (droppedOnDay?: Date) => void;
 }
 
 const defaultValue: CourseContextInterface = {
-  startItemDrag: () => {},
-  endItemDrag: () => {},
-  itemDrop: () => {},
+  startItemDrag: () => { },
+  endItemDrag: () => { },
+  itemDrop: () => { },
+  courseName: ""
 };
 
 export const CourseContext =

nextjs/src/app/course/[courseName]/modules/ExpandableModule.tsx

@@ -2,14 +2,50 @@ import { IModuleItem } from "@/models/local/IModuleItem";
 import { LocalModule } from "@/models/local/localModules";
 import { getDateFromStringOrThrow } from "@/models/local/timeUtils";
 import React, { useState } from "react";
+import { useCourseContext } from "../context/courseContext";
+import {
+  useAssignmentNamesQuery,
+  useAssignmentsQueries,
+} from "@/hooks/localCourse/assignmentHooks";
+import {
+  useQuizNamesQuery,
+  useQuizzesQueries,
+} from "@/hooks/localCourse/quizHooks";
+import {
+  usePageNamesQuery,
+  usePagesQueries,
+} from "@/hooks/localCourse/pageHooks";
+
+export default function ExpandableModule({
+  moduleName,
+}: {
+  moduleName: string;
+}) {
+  const { courseName } = useCourseContext();
+  const { data: assignmentNames } = useAssignmentNamesQuery(
+    courseName,
+    moduleName
+  );
+  const { data: assignments } = useAssignmentsQueries(
+    courseName,
+    moduleName,
+    assignmentNames
+  );
+  const { data: quizNames } = useQuizNamesQuery(courseName, moduleName);
+  const { data: quizzes } = useQuizzesQueries(
+    courseName,
+    moduleName,
+    quizNames
+  );
+  const { data: pageNames } = usePageNamesQuery(courseName, moduleName);
+  const { data: pages } = usePagesQueries(courseName, moduleName, pageNames);
 
-export default function ExpandableModule({ module }: { module: LocalModule }) {
   const [expanded, setExpanded] = useState(false);
 
   const moduleItems: {
     type: "assignment" | "quiz" | "page";
     item: IModuleItem;
-  }[] = module.assignments
+  }[] = assignments
     .map(
       (
         a
@@ -21,8 +57,8 @@ export default function ExpandableModule({ module }: { module: LocalModule }) {
         item: a,
       })
     )
-    .concat(module.quizzes.map((q) => ({ type: "quiz", item: q })))
-    .concat(module.pages.map((p) => ({ type: "page", item: p })))
+    .concat(quizzes.map((q) => ({ type: "quiz", item: q })))
+    .concat(pages.map((p) => ({ type: "page", item: p })))
     .sort(
       (a, b) =>
         getDateFromStringOrThrow(
@@ -42,7 +78,7 @@ export default function ExpandableModule({ module }: { module: LocalModule }) {
         role="button"
         onClick={() => setExpanded((e) => !e)}
       >
-        {module.name}
+        {moduleName}
       </div>
       <div
         className={

nextjs/src/app/course/[courseName]/modules/ModuleList.tsx

@@ -1,14 +1,17 @@
 "use client";
+import { useModuleNamesQuery } from "@/hooks/localCourse/localCoursesHooks";
 import { useCourseContext } from "../context/courseContext";
 import ExpandableModule from "./ExpandableModule";
 
 export default function ModuleList() {
+  const { courseName } = useCourseContext();
+  const { data: moduleNames } = useModuleNamesQuery(courseName);
   return (
     <div>
       modules here
-      {/* {modules.map((m) => (
-        <ExpandableModule key={m.name} module={m} />
-      ))} */}
+      {moduleNames.map((m) => (
+        <ExpandableModule key={m} moduleName={m}/>
+      ))}
     </div>
   );
 }