updating hooks to reuse more code

2026-03-26 07:38:33 -06:00 · 2024-09-27 12:07:42 -06:00
parent 5667c8ba9e
commit 3a69222ddc
10 changed files with 125 additions and 269 deletions
--- a/nextjs/src/app/course/[courseName]/calendar/CalendarMonth.tsx
+++ b/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={
--- a/nextjs/src/app/course/[courseName]/context/DraggingContextProvider.tsx
+++ b/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,
-          quizName: quiz.name,
+          item: quiz,
+          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,
-          previousAssignmentName: assignment.name,
+          itemName: assignment.name,
+          previousItemName: assignment.name,
        });
      }
      function updatePage() {
        const page = itemBeingDragged.item as LocalCoursePage;
        updatePageMutation.mutate({
-          page,
+          item: page,
          moduleName: dropModuleName,
-          pageName: page.name,
-          previousPageName: page.name,
+          itemName: 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,
-          quizName: quiz.name,
+          item: quiz,
+          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,
-          previousPageName: page.name,
+          itemName: 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,
-          previousAssignmentName: assignment.name,
+          itemName: assignment.name,
+          previousItemName: assignment.name,
        });
      }
    },
--- a/nextjs/src/app/course/[courseName]/modules/ExpandableModule.tsx
+++ b/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
--- a/nextjs/src/app/course/[courseName]/modules/[moduleName]/assignment/[assignmentName]/EditAssignment.tsx
+++ b/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)
--- a/nextjs/src/app/course/[courseName]/modules/[moduleName]/page/[pageName]/EditPage.tsx
+++ b/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)
--- a/nextjs/src/app/course/[courseName]/modules/[moduleName]/quiz/[quizName]/EditQuiz.tsx
+++ b/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)
--- a/nextjs/src/hooks/localCourse/assignmentHooks.ts
+++ b/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();
--- a/nextjs/src/hooks/localCourse/courseItemHooks.ts
+++ b/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
+        ),
+      });
+    },
+  });
+};
--- a/nextjs/src/hooks/localCourse/pageHooks.ts
+++ b/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();
--- a/nextjs/src/hooks/localCourse/quizHooks.ts
+++ b/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();