From a436136c945403e154a525107a7a05778e277bc8 Mon Sep 17 00:00:00 2001
From: Bram Reyniers <bram.reyniers@ugent.be>
Date: Tue, 21 May 2024 10:18:30 +0200
Subject: [PATCH] update mutations for create subject

---
 frontend/src/queries/Subject.ts               | 48 +++++++++++--------
 .../src/views/subject/CreateSubjectView.vue   | 13 +++--
 2 files changed, 33 insertions(+), 28 deletions(-)

diff --git a/frontend/src/queries/Subject.ts b/frontend/src/queries/Subject.ts
index c7c9a3c4..70f330d3 100644
--- a/frontend/src/queries/Subject.ts
+++ b/frontend/src/queries/Subject.ts
@@ -44,14 +44,6 @@ function SUBJECT_UUID_QUERY_KEY(subjectId: number): (string | number)[] {
     return ["subject", "uuid", subjectId];
 }
 
-function CREATE_SUBJECT_QUERY_KEY(): string[] {
-    return ["create", "subject"];
-}
-
-function CREATE_SUBJECT_INSTRUCTOR_QUERY_KEY(subjectId: number): (string | number)[] {
-    return ["create", "subject", "instructor", subjectId];
-}
-
 /**
  * Query composable for fetching a subject by id
  */
@@ -153,8 +145,7 @@ export function useRegisterToSubjectMutation(): UseMutationReturnType<
         onSettled: () => {
             queryClient.invalidateQueries({ queryKey: SUBJECTS_QUERY_KEY() });
         },
-        onError: (error) => {
-            console.error(error);
+        onError: () => {
             alert("Failed to register to subject");
         },
     });
@@ -173,10 +164,9 @@ export function useCreateSubjectMutation(): UseMutationReturnType<
     return useMutation<number, Error, SubjectForm, void>({
         mutationFn: createSubject,
         onSuccess: () => {
-            queryClient.invalidateQueries({ queryKey: CREATE_SUBJECT_QUERY_KEY() });
+            queryClient.invalidateQueries({ queryKey: SUBJECTS_QUERY_KEY() });
         },
-        onError: (error) => {
-            console.error("Subject creation failed", error);
+        onError: () => {
             alert("Could not create subject. Please try again.");
         },
     });
@@ -186,19 +176,35 @@ export function useCreateSubjectMutation(): UseMutationReturnType<
  * Mutation composable for creating subject instructor
  */
 
-export function useCreateSubjectInstructorMutation(
-    subjectId: MaybeRefOrGetter<number | undefined>
-): UseMutationReturnType<void, Error, string, void> {
+export function useCreateSubjectInstructorMutation(): UseMutationReturnType<
+    void,
+    Error,
+    { user: User; subjectId: number },
+    { previousUsers: User[] }
+> {
     const queryClient = useQueryClient();
     return useMutation({
-        mutationFn: (user_id) => createSubjectInstructor(toValue(subjectId)!, user_id),
-        onSuccess: () => {
+        mutationFn: ({ user, subjectId }) => createSubjectInstructor(subjectId, user.uid),
+        onMutate: ({ subjectId, user }) => {
+            const previousUsers = queryClient.getQueryData<User[]>(
+                SUBJECT_INSTRUCTORS_QUERY_KEY(subjectId)
+            );
+            queryClient.cancelQueries({ queryKey: SUBJECT_INSTRUCTORS_QUERY_KEY(subjectId) });
+            const newUsers = previousUsers ? [...previousUsers] : [];
+            newUsers.push(user);
+            queryClient.setQueryData(SUBJECT_INSTRUCTORS_QUERY_KEY(subjectId), newUsers);
+            return { previousUsers: previousUsers || [] };
+        },
+        onSuccess: (_, { subjectId }) => {
             queryClient.invalidateQueries({
-                queryKey: CREATE_SUBJECT_INSTRUCTOR_QUERY_KEY(toValue(subjectId)!),
+                queryKey: SUBJECT_INSTRUCTORS_QUERY_KEY(subjectId),
             });
         },
-        onError: (error) => {
-            console.error("Subject instructor creation failed", error);
+        onError: (_, { subjectId }, ctx) => {
+            queryClient.setQueryData<User[]>(
+                SUBJECT_INSTRUCTORS_QUERY_KEY(subjectId),
+                () => ctx!.previousUsers!
+            );
             alert("Could not create subject instructor. Please try again.");
         },
     });
diff --git a/frontend/src/views/subject/CreateSubjectView.vue b/frontend/src/views/subject/CreateSubjectView.vue
index 60b8b177..24ba3e30 100644
--- a/frontend/src/views/subject/CreateSubjectView.vue
+++ b/frontend/src/views/subject/CreateSubjectView.vue
@@ -85,9 +85,7 @@ const subjectId = ref<number | undefined>(undefined);
 
 const { data: currentUser, isLoading, isError } = useCurrentUserQuery();
 const createSubjectMutation = useCreateSubjectMutation();
-const createSubjectInstructorMutation = useCreateSubjectInstructorMutation(
-    computed(() => subjectId.value)
-);
+const createSubjectInstructorMutation = useCreateSubjectInstructorMutation();
 
 const router = useRouter();
 
@@ -152,12 +150,13 @@ async function handleSubmit() {
         academic_year: activeAcademicYear.value,
     };
 
-    const instructorIds = shownInstructors.value.map((instructor) => instructor.uid);
-
     try {
         subjectId.value = await createSubjectMutation.mutateAsync(subjectData);
-        for (const instructor of instructorIds) {
-            await createSubjectInstructorMutation.mutateAsync(instructor);
+        for (let instructor of shownInstructors.value!) {
+            await createSubjectInstructorMutation.mutateAsync({
+                user: instructor!,
+                subjectId: subjectId.value!,
+            });
         }
 
         await router.push({ name: "subject", params: { subjectId: subjectId.value } });