updating hooks to reuse more code

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 = () => {
-  const { courseName } = useCourseContext();
-  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 useUpdateAssignmentMutation = () =>
+  useUpdateItemMutation("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 {
-  useMutation,
-  useQueryClient,
-} from "@tanstack/react-query";
+import { 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 = () => {
-  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 useUpdatePageMutation = () => useUpdateItemMutation("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 = () => {
-  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 useUpdateQuizMutation = () => useUpdateItemMutation("Quiz")
 
 export const useCreateQuizMutation = () => {
   const { courseName } = useCourseContext();