updating hooks to reuse more code

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

@@ -20,7 +20,7 @@ export const CalendarMonth = ({ month }: { month: CalendarMonthModel }) => {
     <>
       <Expandable
         defaultExpanded={!isInPast}
-        ExpandableElement={({ setIsExpanded, isExpanded }) => (
+        ExpandableElement={({ setIsExpanded }) => (
           <div className="flex justify-center">
             <h3
               className={

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

@@ -64,30 +64,30 @@ export default function DraggingContextProvider({
         const quiz = itemBeingDragged.item as LocalQuiz;
 
         updateQuizMutation.mutate({
-          quiz: quiz,
+          item: quiz,
-          quizName: quiz.name,
+          itemName: quiz.name,
           moduleName: dropModuleName,
           previousModuleName: itemBeingDragged.sourceModuleName,
-          previousQuizName: quiz.name,
+          previousItemName: quiz.name,
         });
       }
       function updateAssignment() {
         const assignment = itemBeingDragged.item as LocalAssignment;
         updateAssignmentMutation.mutate({
-          assignment,
+          item: assignment,
           previousModuleName: itemBeingDragged.sourceModuleName,
           moduleName: dropModuleName,
-          assignmentName: assignment.name,
+          itemName: assignment.name,
-          previousAssignmentName: assignment.name,
+          previousItemName: assignment.name,
         });
       }
       function updatePage() {
         const page = itemBeingDragged.item as LocalCoursePage;
         updatePageMutation.mutate({
-          page,
+          item: page,
           moduleName: dropModuleName,
-          pageName: page.name,
+          itemName: page.name,
-          previousPageName: page.name,
+          previousItemName: page.name,
           previousModuleName: itemBeingDragged.sourceModuleName,
         });
       }
@@ -129,11 +129,11 @@ export default function DraggingContextProvider({
           lockAt: getLaterDate(previousQuiz.lockAt, dayAsDate),
         };
         updateQuizMutation.mutate({
-          quiz: quiz,
+          item: quiz,
-          quizName: quiz.name,
+          itemName: quiz.name,
           moduleName: itemBeingDragged.sourceModuleName,
           previousModuleName: itemBeingDragged.sourceModuleName,
-          previousQuizName: quiz.name,
+          previousItemName: quiz.name,
         });
       }
       function updatePage(dayAsDate: Date) {
@@ -143,10 +143,10 @@ export default function DraggingContextProvider({
           dueAt: dateToMarkdownString(dayAsDate),
         };
         updatePageMutation.mutate({
-          page,
+          item: page,
           moduleName: itemBeingDragged.sourceModuleName,
-          pageName: page.name,
+          itemName: page.name,
-          previousPageName: page.name,
+          previousItemName: page.name,
           previousModuleName: itemBeingDragged.sourceModuleName,
         });
       }
@@ -165,11 +165,11 @@ export default function DraggingContextProvider({
               : dateToMarkdownString(dayAsDate)),
         };
         updateAssignmentMutation.mutate({
-          assignment,
+          item: assignment,
           previousModuleName: itemBeingDragged.sourceModuleName,
           moduleName: itemBeingDragged.sourceModuleName,
-          assignmentName: assignment.name,
+          itemName: assignment.name,
-          previousAssignmentName: assignment.name,
+          previousItemName: assignment.name,
         });
       }
     },

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

@@ -32,8 +32,6 @@ export default function ExpandableModule({
   const { data: quizzes } = useQuizzesQueries(moduleName);
   const { data: pages } = usePagesQueries(moduleName);
 
-  // const [expanded, setExpanded] = useState(false);
-
   const moduleItems: {
     type: "assignment" | "quiz" | "page";
     item: IModuleItem;
@@ -62,7 +60,6 @@ export default function ExpandableModule({
           "item due date in expandable module"
         ).getTime()
     );
-  // const expandRef = useRef<HTMLDivElement | null>(null);
 
   return (
     <div

nextjs/src/app/course/[courseName]/modules/[moduleName]/assignment/[assignmentName]/EditAssignment.tsx

@@ -58,11 +58,11 @@ export default function EditAssignment({
           console.log("updating assignment");
           updateAssignment
             .mutateAsync({
-              assignment: updatedAssignment,
+              item: updatedAssignment,
               moduleName,
-              assignmentName: updatedAssignment.name,
+              itemName: updatedAssignment.name,
               previousModuleName: moduleName,
-              previousAssignmentName: assignmentName,
+              previousItemName: assignmentName,
             })
             .then(() => {
               if (updatedAssignment.name !== assignmentName)

nextjs/src/app/course/[courseName]/modules/[moduleName]/page/[pageName]/EditPage.tsx

@@ -44,11 +44,11 @@ export default function EditPage({
           console.log("updating page");
           updatePage
             .mutateAsync({
-              page: updatedPage,
+              item: updatedPage,
               moduleName,
-              pageName: updatedPage.name,
+              itemName: updatedPage.name,
               previousModuleName: moduleName,
-              previousPageName: pageName,
+              previousItemName: pageName,
             })
             .then(() => {
               if (updatedPage.name !== pageName)

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

@@ -84,11 +84,11 @@ export default function EditQuiz({
           const updatedQuiz = quizMarkdownUtils.parseMarkdown(quizText);
           updateQuizMutation
             .mutateAsync({
-              quiz: updatedQuiz,
+              item: updatedQuiz,
               moduleName,
-              quizName: updatedQuiz.name,
+              itemName: updatedQuiz.name,
               previousModuleName: moduleName,
-              previousQuizName: quizName,
+              previousItemName: quizName,
             })
             .then(() => {
               if (updatedQuiz.name !== quizName)

nextjs/src/hooks/localCourse/assignmentHooks.ts

@@ -14,6 +14,7 @@ import {
   getItemQueryConfig,
   useItemQuery,
   useItemsQueries,
+  useUpdateItemMutation,
 } from "./courseItemHooks";
 
 export const getAllAssignmentsQueryConfig = (
@@ -35,85 +36,8 @@ export const useAssignmentQuery = (
 export const useAssignmentsQueries = (moduleName: string) =>
   useItemsQueries(moduleName, "Assignment");
 
-export const useUpdateAssignmentMutation = () => {
+export const useUpdateAssignmentMutation = () =>
-  const { courseName } = useCourseContext();
+  useUpdateItemMutation("Assignment");
-  const queryClient = useQueryClient();
-  return useMutation({
-    mutationFn: async ({
-      assignment,
-      moduleName,
-      previousModuleName,
-      previousAssignmentName,
-      assignmentName,
-    }: {
-      assignment: LocalAssignment;
-      moduleName: string;
-      previousModuleName: string;
-      previousAssignmentName: string;
-      assignmentName: string;
-    }) => {
-      if (
-        previousAssignmentName !== assignment.name ||
-        previousModuleName !== moduleName
-      ) {
-        queryClient.removeQueries({
-          queryKey: localCourseKeys.itemOfType(
-            courseName,
-            previousModuleName,
-            previousAssignmentName,
-            "Assignment"
-          ),
-        });
-        queryClient.removeQueries({
-          queryKey: localCourseKeys.allItemsOfType(
-            courseName,
-            previousModuleName,
-            "Assignment"
-          ),
-        });
-      }
-
-      queryClient.setQueryData(
-        localCourseKeys.itemOfType(
-          courseName,
-          moduleName,
-          assignmentName,
-          "Assignment"
-        ),
-        assignment
-      );
-      const url =
-        "/api/courses/" +
-        encodeURIComponent(courseName) +
-        "/modules/" +
-        encodeURIComponent(moduleName) +
-        "/assignments/" +
-        encodeURIComponent(assignmentName);
-      await axiosClient.put(url, {
-        assignment,
-        previousModuleName,
-        previousAssignmentName,
-      });
-    },
-    onSuccess: async (_, { moduleName, assignmentName }) => {
-      await queryClient.invalidateQueries({
-        queryKey: localCourseKeys.allItemsOfType(
-          courseName,
-          moduleName,
-          "Assignment"
-        ),
-      });
-      await queryClient.invalidateQueries({
-        queryKey: localCourseKeys.itemOfType(
-          courseName,
-          moduleName,
-          assignmentName,
-          "Assignment"
-        ),
-      });
-    },
-  });
-};
 
 export const useCreateAssignmentMutation = () => {
   const { courseName } = useCourseContext();

nextjs/src/hooks/localCourse/courseItemHooks.ts

@@ -6,7 +6,12 @@ import {
   typeToFolder,
 } from "@/models/local/courseItemTypes";
 import { useCourseContext } from "@/app/course/[courseName]/context/courseContext";
-import { useSuspenseQueries, useSuspenseQuery } from "@tanstack/react-query";
+import {
+  useMutation,
+  useQueryClient,
+  useSuspenseQueries,
+  useSuspenseQuery,
+} from "@tanstack/react-query";
 
 export const getAllItemsQueryConfig = <T extends CourseItemType>(
   courseName: string,
@@ -87,3 +92,86 @@ export const useItemsQueries = <T extends CourseItemType>(
     }),
   });
 };
+
+export const useUpdateItemMutation = <T extends CourseItemType>(type: T) => {
+  const { courseName } = useCourseContext();
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async ({
+      item,
+      moduleName,
+      previousModuleName,
+      previousItemName,
+      itemName,
+    }: {
+      item: CourseItemReturnType<T>;
+      moduleName: string;
+      previousModuleName: string;
+      previousItemName: string;
+      itemName: string;
+    }) => {
+      if (previousItemName !== item.name || previousModuleName !== moduleName) {
+        queryClient.removeQueries({
+          queryKey: localCourseKeys.itemOfType(
+            courseName,
+            previousModuleName,
+            previousItemName,
+            type
+          ),
+        });
+        queryClient.removeQueries({
+          queryKey: localCourseKeys.allItemsOfType(
+            courseName,
+            previousModuleName,
+            type
+          ),
+        });
+      }
+
+      queryClient.setQueryData(
+        localCourseKeys.itemOfType(courseName, moduleName, itemName, type),
+        item
+      );
+      const url =
+        "/api/courses/" +
+        encodeURIComponent(courseName) +
+        "/modules/" +
+        encodeURIComponent(moduleName) +
+        "/" +
+        typeToFolder[type] +
+        "/" +
+        encodeURIComponent(itemName);
+      if (type === "Assignment")
+        await axiosClient.put(url, {
+          assignment: item,
+          previousModuleName,
+          previousAssignmentName: previousItemName,
+        });
+      if (type === "Quiz")
+        await axiosClient.put(url, {
+          quiz: item,
+          previousModuleName,
+          previousQuizName: previousItemName,
+        });
+      if (type === "Page")
+        await axiosClient.put(url, {
+          page: item,
+          previousModuleName,
+          previousPageName: previousItemName,
+        });
+    },
+    onSuccess: async (_, { moduleName, itemName }) => {
+      await queryClient.invalidateQueries({
+        queryKey: localCourseKeys.allItemsOfType(courseName, moduleName, type),
+      });
+      await queryClient.invalidateQueries({
+        queryKey: localCourseKeys.itemOfType(
+          courseName,
+          moduleName,
+          itemName,
+          type
+        ),
+      });
+    },
+  });
+};

nextjs/src/hooks/localCourse/pageHooks.ts

@@ -1,9 +1,6 @@
 "use client";
 import { LocalCoursePage } from "@/models/local/page/localCoursePage";
-import {
+import { useMutation, useQueryClient } from "@tanstack/react-query";
-  useMutation,
-  useQueryClient,
-} from "@tanstack/react-query";
 import { localCourseKeys } from "./localCourseKeys";
 import { useCourseContext } from "@/app/course/[courseName]/context/courseContext";
 import { axiosClient } from "@/services/axiosUtils";
@@ -12,6 +9,7 @@ import {
   getItemQueryConfig,
   useItemQuery,
   useItemsQueries,
+  useUpdateItemMutation,
 } from "./courseItemHooks";
 
 export function getAllPagesQueryConfig(courseName: string, moduleName: string) {
@@ -32,82 +30,7 @@ export const usePageQuery = (moduleName: string, pageName: string) =>
 export const usePagesQueries = (moduleName: string) =>
   useItemsQueries(moduleName, "Page");
 
-export const useUpdatePageMutation = () => {
+export const useUpdatePageMutation = () => useUpdateItemMutation("Page");
-  const { courseName } = useCourseContext();
-  const queryClient = useQueryClient();
-  return useMutation({
-    mutationFn: async ({
-      page,
-      moduleName,
-      pageName,
-      previousModuleName,
-      previousPageName,
-    }: {
-      page: LocalCoursePage;
-      moduleName: string;
-      pageName: string;
-      previousModuleName: string;
-      previousPageName: string;
-    }) => {
-      if (
-        previousPageName &&
-        previousModuleName &&
-        (previousPageName !== page.name || previousModuleName !== moduleName)
-      ) {
-        queryClient.removeQueries({
-          queryKey: localCourseKeys.itemOfType(
-            courseName,
-            previousModuleName,
-            previousPageName,
-            "Page"
-          ),
-        });
-        queryClient.removeQueries({
-          queryKey: localCourseKeys.itemOfType(
-            courseName,
-            moduleName,
-            pageName,
-            "Page"
-          ),
-        });
-      }
-      queryClient.setQueryData(
-        localCourseKeys.itemOfType(courseName, moduleName, pageName, "Page"),
-        page
-      );
-      const url =
-        "/api/courses/" +
-        encodeURIComponent(courseName) +
-        "/modules/" +
-        encodeURIComponent(moduleName) +
-        "/pages/" +
-        encodeURIComponent(pageName);
-      await axiosClient.put(url, {
-        page,
-        previousModuleName,
-        previousPageName,
-      });
-    },
-    onSuccess: async (_, { moduleName, pageName }) => {
-      await queryClient.invalidateQueries({
-        queryKey: localCourseKeys.itemOfType(
-          courseName,
-          moduleName,
-          pageName,
-          "Page"
-        ),
-      });
-      await queryClient.invalidateQueries({
-        queryKey: localCourseKeys.itemOfType(
-          courseName,
-          moduleName,
-          pageName,
-          "Page"
-        ),
-      });
-    },
-  });
-};
 
 export const useCreatePageMutation = () => {
   const { courseName } = useCourseContext();

nextjs/src/hooks/localCourse/quizHooks.ts

@@ -12,6 +12,7 @@ import {
   getItemQueryConfig,
   useItemQuery,
   useItemsQueries,
+  useUpdateItemMutation,
 } from "./courseItemHooks";
 
 export function getAllQuizzesQueryConfig(
@@ -35,84 +36,7 @@ export const useQuizQuery = (moduleName: string, quizName: string) =>
 export const useQuizzesQueries = (moduleName: string) =>
   useItemsQueries(moduleName, "Quiz");
 
-export const useUpdateQuizMutation = () => {
+export const useUpdateQuizMutation = () => useUpdateItemMutation("Quiz")
-  const { courseName } = useCourseContext();
-  const queryClient = useQueryClient();
-  return useMutation({
-    mutationFn: async ({
-      quiz,
-      moduleName,
-      quizName,
-      previousModuleName,
-      previousQuizName,
-    }: {
-      quiz: LocalQuiz;
-      moduleName: string;
-      quizName: string;
-      previousModuleName: string;
-      previousQuizName: string;
-    }) => {
-      if (
-        previousQuizName &&
-        previousModuleName &&
-        (previousQuizName !== quiz.name || previousModuleName !== moduleName)
-      ) {
-        queryClient.removeQueries({
-          queryKey: localCourseKeys.itemOfType(
-            courseName,
-            previousModuleName,
-            previousQuizName,
-            "Quiz"
-          ),
-        });
-        queryClient.removeQueries({
-          queryKey: localCourseKeys.allItemsOfType(
-            courseName,
-            previousModuleName,
-            "Quiz"
-          ),
-        });
-      }
-      queryClient.setQueryData(
-        localCourseKeys.itemOfType(courseName, moduleName, quizName, "Quiz"),
-        quiz
-      );
-      const url =
-        "/api/courses/" +
-        encodeURIComponent(courseName) +
-        "/modules/" +
-        encodeURIComponent(moduleName) +
-        "/quizzes/" +
-        encodeURIComponent(quizName);
-      await axiosClient.put(url, {
-        quiz,
-        previousModuleName,
-        previousQuizName,
-      });
-
-      // queryClient.fetchQuery(
-      //   getQuizNamesQueryConfig(courseName, previousModuleName)
-      // );
-    },
-    onSuccess: async (_, { moduleName, quizName }) => {
-      await queryClient.invalidateQueries({
-        queryKey: localCourseKeys.allItemsOfType(
-          courseName,
-          moduleName,
-          "Quiz"
-        ),
-      });
-      await queryClient.invalidateQueries({
-        queryKey: localCourseKeys.itemOfType(
-          courseName,
-          moduleName,
-          quizName,
-          "Quiz"
-        ),
-      });
-    },
-  });
-};
 
 export const useCreateQuizMutation = () => {
   const { courseName } = useCourseContext();