refactoring quiz data fetching to simplify

nextjs/src/app/CourseList.tsx

@@ -14,7 +14,8 @@ export default function CourseList() {
             shallow={true}
             className="
               font-bold text-xl block
-              transition-all hover:scale-105 hover:underline
+              transition-all hover:scale-105 hover:underline hover:text-slate-200
+              mb-3
             "
           >
             {settings.name}

nextjs/src/app/course/[courseName]/context/drag/useItemDropOnDay.ts

@@ -6,7 +6,6 @@ import {
 } from "@/hooks/localCourse/lectureHooks";
 import { useLocalCourseSettingsQuery } from "@/hooks/localCourse/localCoursesHooks";
 import { useUpdatePageMutation } from "@/hooks/localCourse/pageHooks";
-import { useUpdateQuizMutation } from "@/hooks/localCourse/quizHooks";
 import { LocalAssignment } from "@/models/local/assignment/localAssignment";
 import { Lecture } from "@/models/local/lecture";
 import { getLectureForDay } from "@/models/local/lectureUtils";
@@ -20,6 +19,7 @@ import {
 import { Dispatch, SetStateAction, useCallback, DragEvent } from "react";
 import { DraggableItem } from "./draggingContext";
 import { getNewLockDate } from "./getNewLockDate";
+import { useUpdateItemMutation } from "@/hooks/localCourse/courseItemHooks";
 
 export function useItemDropOnDay({
   setIsDragging,
@@ -36,7 +36,7 @@ export function useItemDropOnDay({
 }) {
   const { data: settings } = useLocalCourseSettingsQuery();
   const { data: weeks } = useLecturesByWeekQuery();
-  const updateQuizMutation = useUpdateQuizMutation();
+  const updateQuizMutation = useUpdateItemMutation("Quiz");
   const updateLectureMutation = useLectureUpdateMutation();
   const updateAssignmentMutation = useUpdateAssignmentMutation();
   const updatePageMutation = useUpdatePageMutation();

nextjs/src/app/course/[courseName]/context/drag/useItemDropOnModule.ts

@@ -1,19 +1,19 @@
 "use client";
 import { useUpdateAssignmentMutation } from "@/hooks/localCourse/assignmentHooks";
 import { useUpdatePageMutation } from "@/hooks/localCourse/pageHooks";
-import { useUpdateQuizMutation } from "@/hooks/localCourse/quizHooks";
 import { LocalAssignment } from "@/models/local/assignment/localAssignment";
 import { LocalCoursePage } from "@/models/local/page/localCoursePage";
 import { LocalQuiz } from "@/models/local/quiz/localQuiz";
 import { Dispatch, SetStateAction, useCallback, DragEvent } from "react";
 import { DraggableItem } from "./draggingContext";
+import { useUpdateItemMutation } from "@/hooks/localCourse/courseItemHooks";
 
 export function useItemDropOnModule({
   setIsDragging,
 }: {
   setIsDragging: Dispatch<SetStateAction<boolean>>;
 }) {
-  const updateQuizMutation = useUpdateQuizMutation();
+  const updateQuizMutation = useUpdateItemMutation("Quiz");
   const updateAssignmentMutation = useUpdateAssignmentMutation();
   const updatePageMutation = useUpdatePageMutation();
 

nextjs/src/app/course/[courseName]/lecture/[lectureDay]/LecturePreview.tsx

@@ -10,7 +10,7 @@ export default function LecturePreview({ lecture }: { lecture: Lecture }) {
       </section>
       <section>
         <div
-          className="markdownPreview"
+          className="markdownPreview text-xl"
           dangerouslySetInnerHTML={{
             __html: markdownToHTMLSafe(lecture.content),
           }}

nextjs/src/app/course/[courseName]/lecture/[lectureDay]/preview/LecturePreviewPage.tsx

@@ -2,7 +2,7 @@
 
 import { useLecturesByWeekQuery } from "@/hooks/localCourse/lectureHooks";
 import LecturePreview from "../LecturePreview";
-import { getLectureUrl } from "@/services/urlUtils";
+import { getCourseUrl, getLectureUrl } from "@/services/urlUtils";
 import { useCourseContext } from "../../../context/courseContext";
 import Link from "next/link";
 
@@ -22,18 +22,29 @@ export default function LecturePreviewPage({
   }
   return (
     <div className="flex h-full xl:flex-row flex-col ">
-      <div className="flex-shrink flex-1 pb-1 ms-3 xl:ms-0">
-        <Link className="btn" href={getLectureUrl(courseName, lectureDay)}>
-          Edit Page
-        </Link>
+      <div className="flex-shrink flex-1 pb-1 ms-3 xl:ms-0 flex flex-row flex-wrap gap-3 content-start ">
+        <div className="">
+          <Link
+            className="btn"
+            href={getLectureUrl(courseName, lectureDay)}
+            shallow={true}
+          >
+            Edit Page
+          </Link>
+        </div>
+        <div className="">
+          <Link className="btn" href={getCourseUrl(courseName)} shallow={true}>
+            Course Calendar
+          </Link>
+        </div>
       </div>
       <div className="flex  justify-center min-h-0 px-2">
         <div
           className="
-          w-full max-w-screen-lg 
-          border-slate-700 border-4 rounded-md
-          p-3 overflow-auto
-        "
+            w-full max-w-screen-lg 
+            border-slate-700 border-4 rounded-md
+            p-3 overflow-auto
+          "
         >
           <LecturePreview lecture={lecture} />
         </div>

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

@@ -1,7 +1,6 @@
 "use client";
 import { useAssignmentsQueries } from "@/hooks/localCourse/assignmentHooks";
 import { usePagesQueries } from "@/hooks/localCourse/pageHooks";
-import { useQuizzesQueries } from "@/hooks/localCourse/quizHooks";
 import { IModuleItem } from "@/models/local/IModuleItem";
 import {
   getDateFromString,
@@ -20,6 +19,7 @@ import { getModuleItemUrl } from "@/services/urlUtils";
 import { useCourseContext } from "../context/courseContext";
 import { Expandable } from "../../../../components/Expandable";
 import { useDragStyleContext } from "../context/drag/dragStyleContext";
+import { useItemsQueries } from "@/hooks/localCourse/courseItemHooks";
 
 export default function ExpandableModule({
   moduleName,
@@ -29,7 +29,7 @@ export default function ExpandableModule({
   const { itemDropOnModule } = useDraggingContext();
 
   const { data: assignments } = useAssignmentsQueries(moduleName);
-  const { data: quizzes } = useQuizzesQueries(moduleName);
+  const { data: quizzes } = useItemsQueries(moduleName, "Quiz");
   const { data: pages } = usePagesQueries(moduleName);
   const modal = useModal();
 

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

@@ -4,11 +4,10 @@ import SelectInput from "@/components/form/SelectInput";
 import TextInput from "@/components/form/TextInput";
 import { Spinner } from "@/components/Spinner";
 import { useCreateAssignmentMutation } from "@/hooks/localCourse/assignmentHooks";
+import { useCreateItemMutation } from "@/hooks/localCourse/courseItemHooks";
 import { useModuleNamesQuery } from "@/hooks/localCourse/localCourseModuleHooks";
 import { useLocalCourseSettingsQuery } from "@/hooks/localCourse/localCoursesHooks";
 import { useCreatePageMutation } from "@/hooks/localCourse/pageHooks";
-import { useCreateQuizMutation } from "@/hooks/localCourse/quizHooks";
-import { AssignmentSubmissionType } from "@/models/local/assignment/assignmentSubmissionType";
 import { LocalAssignmentGroup } from "@/models/local/assignment/localAssignmentGroup";
 import {
   dateToMarkdownString,
@@ -53,7 +52,7 @@ export default function NewItemForm({
 
   const createAssignment = useCreateAssignmentMutation();
   const createPage = useCreatePageMutation();
-  const createQuiz = useCreateQuizMutation();
+  const createQuiz = useCreateItemMutation("Quiz");
 
   const isPending =
     createAssignment.isPending || createPage.isPending || createQuiz.isPending;

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

@@ -1,9 +1,5 @@
 "use client";
 import { MonacoEditor } from "@/components/editor/MonacoEditor";
-import {
-  useQuizQuery,
-  useUpdateQuizMutation,
-} from "@/hooks/localCourse/quizHooks";
 import { quizMarkdownUtils } from "@/models/local/quiz/utils/quizMarkdownUtils";
 import { useEffect, useState } from "react";
 import QuizPreview from "./QuizPreview";
@@ -13,6 +9,7 @@ import { SuspenseAndErrorHandling } from "@/components/SuspenseAndErrorHandling"
 import { useRouter } from "next/navigation";
 import { getModuleItemUrl } from "@/services/urlUtils";
 import { useCourseContext } from "@/app/course/[courseName]/context/courseContext";
+import { useItemQuery, useUpdateItemMutation } from "@/hooks/localCourse/courseItemHooks";
 
 const helpString = `QUESTION REFERENCE
 ---
@@ -64,8 +61,8 @@ export default function EditQuiz({
 }) {
   const router = useRouter();
   const { courseName } = useCourseContext();
-  const { data: quiz } = useQuizQuery(moduleName, quizName);
-  const updateQuizMutation = useUpdateQuizMutation();
+  const { data: quiz } = useItemQuery(moduleName, quizName, "Quiz");
+  const updateQuizMutation = useUpdateItemMutation("Quiz");
   const [quizText, setQuizText] = useState(quizMarkdownUtils.toMarkdown(quiz));
   const [error, setError] = useState("");
   const [showHelp, setShowHelp] = useState(false);
@@ -111,7 +108,15 @@ export default function EditQuiz({
     return () => {
       clearTimeout(handler);
     };
-  }, [courseName, moduleName, quiz, quizName, quizText, router, updateQuizMutation]);
+  }, [
+    courseName,
+    moduleName,
+    quiz,
+    quizName,
+    quizText,
+    router,
+    updateQuizMutation,
+  ]);
 
   return (
     <div className="h-full flex flex-col align-middle px-1">

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

@@ -6,11 +6,8 @@ import {
   useAddQuizToCanvasMutation,
   useDeleteQuizFromCanvasMutation,
 } from "@/hooks/canvas/canvasQuizHooks";
+import { useDeleteItemMutation, useItemQuery } from "@/hooks/localCourse/courseItemHooks";
 import { useLocalCourseSettingsQuery } from "@/hooks/localCourse/localCoursesHooks";
-import {
-  useDeleteQuizMutation,
-  useQuizQuery,
-} from "@/hooks/localCourse/quizHooks";
 import { baseCanvasUrl } from "@/services/canvas/canvasServiceUtils";
 import { getCourseUrl } from "@/services/urlUtils";
 import Link from "next/link";
@@ -29,10 +26,10 @@ export function QuizButtons({
   const { courseName } = useCourseContext();
   const { data: settings } = useLocalCourseSettingsQuery();
   const { data: canvasQuizzes } = useCanvasQuizzesQuery();
-  const { data: quiz } = useQuizQuery(moduleName, quizName);
+  const { data: quiz } = useItemQuery(moduleName, quizName, "Quiz");
   const addToCanvas = useAddQuizToCanvasMutation();
   const deleteFromCanvas = useDeleteQuizFromCanvasMutation();
-  const deleteLocal = useDeleteQuizMutation();
+  const deleteLocal = useDeleteItemMutation("Quiz");
   const modal = useModal();
 
   const quizInCanvas = canvasQuizzes.find((c) => c.title === quizName);

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

@@ -1,11 +1,9 @@
 import CheckIcon from "@/components/icons/CheckIcon";
-import { useQuizQuery } from "@/hooks/localCourse/quizHooks";
-import { LocalQuiz } from "@/models/local/quiz/localQuiz";
+import { useItemQuery } from "@/hooks/localCourse/courseItemHooks";
 import {
   LocalQuizQuestion,
   QuestionType,
 } from "@/models/local/quiz/localQuizQuestion";
-import { quizQuestionMarkdownUtils } from "@/models/local/quiz/utils/quizQuestionMarkdownUtils";
 import { markdownToHTMLSafe } from "@/services/htmlMarkdownUtils";
 
 export default function QuizPreview({
@@ -15,7 +13,7 @@ export default function QuizPreview({
   quizName: string;
   moduleName: string;
 }) {
-  const { data: quiz } = useQuizQuery(moduleName, quizName);
+  const { data: quiz } = useItemQuery(moduleName, quizName, "Quiz");
   return (
     <div style={{ overflow: "scroll", height: "100%" }}>
       <div className="columns-2">

nextjs/src/app/providersQueryClientUtils.ts

@@ -8,6 +8,7 @@ export function makeQueryClient() {
         // above 0 to avoid refetching immediately on the client
         // staleTime: 60_000,
         staleTime: 1000 * 60 * 60, // 1 hour
+        // refetchInterval: 5000, // debug only
         refetchOnWindowFocus: false,
         retry: 0,
         refetchOnMount: false,

nextjs/src/app/todaysLectures/OneCourseLectures.tsx

@@ -20,11 +20,13 @@ export default function OneCourseLectures() {
       href={getLecturePreviewUrl(courseName, dayAsString)}
       className="
         border-4 rounded-lg border-slate-500 
-        p-3 m-3 block text-end
+        px-3 py-1 m-3 block text-end
         bg-slate-950
         transition-all hover:scale-110 hover:shadow-md
       "
     >
+      <span className="text-end text-slate-500">lecture</span>
+      <br />
       <span className="font-bold text-xl">{todaysLecture?.name}</span>
       <br />
       <span className="text-slate-500">{courseName}</span>

nextjs/src/hooks/localCourse/courseItemServerActions.ts

@@ -33,8 +33,15 @@ export async function getAllItemsFromServer<T extends CourseItemType>({
     );
     return quizzes as CourseItemReturnType<T>[];
   }
-  const pages = await fileStorageService.pages.getPages(courseName, moduleName);
-  return pages as CourseItemReturnType<T>[];
+  if (type === "Page") {
+    const pages = await fileStorageService.pages.getPages(
+      courseName,
+      moduleName
+    );
+    return pages as CourseItemReturnType<T>[];
+  }
+
+  throw Error(`cannot get item from server, invalid type: ${type}`)
 }
 
 export async function getItemFromServer<T extends CourseItemType>({

nextjs/src/hooks/localCourse/localCourseModuleHooks.ts

@@ -7,7 +7,6 @@ import {
 } from "@tanstack/react-query";
 import { localCourseKeys } from "./localCourseKeys";
 import { getAllAssignmentsQueryConfig } from "./assignmentHooks";
-import { getAllQuizzesQueryConfig } from "./quizHooks";
 import { getAllItemsQueryConfig } from "./courseItemHooks";
 import {
   createModuleOnServer,
@@ -39,36 +38,6 @@ export const useCreateModuleMutation = () => {
   });
 };
 
-// // dangerous? really slowed down page...
-// // maybe it only slowed down with react query devtools...
-// export const useModuleDataQuery = (moduleName: string) => {
-//   console.log("running");
-//   const { data: assignmentNames } = useAssignmentNamesQuery(moduleName);
-//   const { data: quizNames } = useQuizNamesQuery(moduleName);
-//   const { data: pageNames } = usePageNamesQuery(moduleName);
-
-//   const { data: assignments } = useAssignmentsQueries(
-//     moduleName,
-//     assignmentNames
-//   );
-//   const { data: quizzes } = useQuizzesQueries(moduleName, quizNames);
-//   const { data: pages } = usePagesQueries(moduleName, pageNames);
-
-//   return {
-//     assignments,
-//     quizzes,
-//     pages,
-//   };
-//   // return useMemo(
-//   //   () => ({
-//   //     assignments,
-//   //     quizzes,
-//   //     pages,
-//   //   }),
-//   //   [assignments, pages, quizzes]
-//   // );
-// };
-
 export const useAllCourseDataQuery = () => {
   const { courseName } = useCourseContext();
   const { data: moduleNames } = useModuleNamesQuery();
@@ -90,7 +59,7 @@ export const useAllCourseDataQuery = () => {
 
   const { data: quizzesAndModules } = useSuspenseQueries({
     queries: moduleNames.map((moduleName) =>
-      getAllQuizzesQueryConfig(courseName, moduleName)
+      getAllItemsQueryConfig(courseName, moduleName, "Quiz")
     ),
     combine: (results) => ({
       data: results.flatMap((r, i) =>

nextjs/src/hooks/localCourse/quizHooks.ts

@@ -1,38 +0,0 @@
-"use client";
-import {
-  getAllItemsQueryConfig,
-  getItemQueryConfig,
-  useCreateItemMutation,
-  useDeleteItemMutation,
-  useItemQuery,
-  useItemsQueries,
-  useUpdateItemMutation,
-} from "./courseItemHooks";
-
-export function getAllQuizzesQueryConfig(
-  courseName: string,
-  moduleName: string
-) {
-  return getAllItemsQueryConfig(courseName, moduleName, "Quiz");
-}
-
-export function getQuizQueryConfig(
-  courseName: string,
-  moduleName: string,
-  quizName: string
-) {
-  return getItemQueryConfig(courseName, moduleName, quizName, "Quiz");
-}
-
-export const useQuizQuery = (moduleName: string, quizName: string) =>
-  useItemQuery(moduleName, quizName, "Quiz");
-
-export const useQuizzesQueries = (moduleName: string) =>
-  useItemsQueries(moduleName, "Quiz");
-
-export const useUpdateQuizMutation = () => useUpdateItemMutation("Quiz")
-
-export const useCreateQuizMutation = () => useCreateItemMutation("Quiz")
-
-export const useDeleteQuizMutation = () =>
-  useDeleteItemMutation("Quiz");