From e87c8325c8d66a36cdd3340ca149145dc40c3597 Mon Sep 17 00:00:00 2001
From: Bram Reyniers <bram.reyniers@ugent.be>
Date: Wed, 22 May 2024 16:33:01 +0200
Subject: [PATCH] implement patch mutation

---
 .../modify/header/ModifySubjectHeaderCard.vue | 15 +++-
 frontend/src/models/Subject.ts                |  2 +-
 frontend/src/queries/Subject.ts               | 62 +++++++++++++-
 frontend/src/services/subject.ts              |  7 +-
 .../views/subject/modify/PatchSubjectView.vue | 80 +++++++++----------
 5 files changed, 116 insertions(+), 50 deletions(-)

diff --git a/frontend/src/components/subject/modify/header/ModifySubjectHeaderCard.vue b/frontend/src/components/subject/modify/header/ModifySubjectHeaderCard.vue
index 99fe1bbe..1b5631de 100644
--- a/frontend/src/components/subject/modify/header/ModifySubjectHeaderCard.vue
+++ b/frontend/src/components/subject/modify/header/ModifySubjectHeaderCard.vue
@@ -60,7 +60,8 @@
 </template>
 
 <script setup lang="ts">
-import { ref, toRefs, watch } from "vue";
+import useAcademicYear from "@/composables/useAcademicYear";
+import { computed, ref, toRefs, watch } from "vue";
 import { useI18n } from "vue-i18n";
 
 const { t } = useI18n();
@@ -86,8 +87,16 @@ watch(currentUserAsInstructor, (newValue) => {
 const subjectName = ref(props.subjectName);
 const activeAcademicYear = ref<number>(props.academicYear);
 const subjectMail = ref(props.subjectMail);
-
-const academicYearItems = [activeAcademicYear.value, activeAcademicYear.value + 1];
+const currentAcademicYear = useAcademicYear();
+
+const academicYearItems = computed(() => {
+    const years = [currentAcademicYear];
+    if (activeAcademicYear.value !== currentAcademicYear) {
+        years.push(activeAcademicYear.value);
+    }
+    years.push(activeAcademicYear.value + 1);
+    return years;
+});
 const rules = {
     required: (value: string) => !!value || t("create_subject.field_required"),
     length: (value: string) => value.length > 2 || t("create_subject.field_length"),
diff --git a/frontend/src/models/Subject.ts b/frontend/src/models/Subject.ts
index e965ed4c..f30fe78c 100644
--- a/frontend/src/models/Subject.ts
+++ b/frontend/src/models/Subject.ts
@@ -27,7 +27,7 @@ export interface SubjectDetails {
     role: SubjectRole;
 }
 
-export default interface SubjectForm {
+export interface SubjectForm {
     name: string;
     email: string;
     academic_year: number;
diff --git a/frontend/src/queries/Subject.ts b/frontend/src/queries/Subject.ts
index 70f330d3..59edb515 100644
--- a/frontend/src/queries/Subject.ts
+++ b/frontend/src/queries/Subject.ts
@@ -12,13 +12,15 @@ import {
     getSubjectUuid,
     createSubject,
     createSubjectInstructor,
+    updateSubject,
+    deleteSubjectInstructor,
 } from "@/services/subject";
 import { getSubjectProjects } from "@/services/project";
 import type User from "@/models/User";
 import type Subject from "@/models/Subject";
 import type { UserSubjectList } from "@/models/Subject";
 import type Project from "@/models/Project";
-import type SubjectForm from "@/models/Subject";
+import type { SubjectForm } from "@/models/Subject";
 
 function SUBJECT_QUERY_KEY(subjectId: number | string): (string | number)[] {
     return ["subject", subjectId];
@@ -172,6 +174,31 @@ export function useCreateSubjectMutation(): UseMutationReturnType<
     });
 }
 
+export function useUpdateSubjectMutation(): UseMutationReturnType<
+    void,
+    Error,
+    { subjectId: number; subject: SubjectForm },
+    Subject
+> {
+    const queryClient = useQueryClient();
+    return useMutation({
+        mutationFn: ({ subjectId, subject }) => updateSubject(subjectId, subject),
+        onMutate: ({ subjectId, subject }) => {
+            const previousSubject = queryClient.getQueryData<Subject>(SUBJECT_QUERY_KEY(subjectId));
+            queryClient.cancelQueries({ queryKey: SUBJECT_QUERY_KEY(subjectId) });
+            queryClient.setQueryData(SUBJECT_QUERY_KEY(subjectId), subject);
+            return previousSubject;
+        },
+        onSuccess: (_, { subjectId }) => {
+            queryClient.invalidateQueries({ queryKey: SUBJECT_QUERY_KEY(subjectId) });
+        },
+        onError: (_, { subjectId }, previousSubject) => {
+            queryClient.setQueryData(SUBJECT_QUERY_KEY(subjectId), previousSubject);
+            alert("Could not update subject. Please try again.");
+        },
+    });
+}
+
 /**
  * Mutation composable for creating subject instructor
  */
@@ -209,3 +236,36 @@ export function useCreateSubjectInstructorMutation(): UseMutationReturnType<
         },
     });
 }
+
+export function useDeleteSubjectInstructorMutation(): UseMutationReturnType<
+    void,
+    Error,
+    { user: User; subjectId: number },
+    { previousUsers: User[] }
+> {
+    const queryClient = useQueryClient();
+    return useMutation({
+        mutationFn: ({ user, subjectId }) => deleteSubjectInstructor(subjectId, user.uid),
+        onMutate: ({ user, subjectId }) => {
+            const previousUsers = queryClient.getQueryData<User[]>(
+                SUBJECT_INSTRUCTORS_QUERY_KEY(subjectId)
+            );
+            queryClient.cancelQueries({ queryKey: SUBJECT_INSTRUCTORS_QUERY_KEY(subjectId) });
+            const newUsers = previousUsers ? previousUsers.filter((u) => u.uid !== user.uid) : [];
+            queryClient.setQueryData(SUBJECT_INSTRUCTORS_QUERY_KEY(subjectId), newUsers);
+            return { previousUsers: previousUsers || [] };
+        },
+        onSuccess: (_, { subjectId }) => {
+            queryClient.invalidateQueries({
+                queryKey: SUBJECT_INSTRUCTORS_QUERY_KEY(subjectId),
+            });
+        },
+        onError: (_, { subjectId }, ctx) => {
+            queryClient.setQueryData<User[]>(
+                SUBJECT_INSTRUCTORS_QUERY_KEY(subjectId),
+                () => ctx!.previousUsers!
+            );
+            alert("Could not delete subject instructor. Please try again.");
+        },
+    });
+}
diff --git a/frontend/src/services/subject.ts b/frontend/src/services/subject.ts
index 9b6cba8b..d0a56843 100644
--- a/frontend/src/services/subject.ts
+++ b/frontend/src/services/subject.ts
@@ -2,7 +2,7 @@ import type User from "@/models/User";
 import type Subject from "@/models/Subject";
 import type { UserSubjectList } from "@/models/Subject";
 import { authorized_fetch } from "@/services";
-import type SubjectForm from "@/models/Subject";
+import type { SubjectForm } from "@/models/Subject";
 
 /**
  * Fetches the subject with the given ID.
@@ -51,7 +51,10 @@ export async function registerToSubject(subjectUuid: string): Promise<Subject> {
 }
 
 export async function getSubjectUuid(subjectId: number): Promise<string> {
-    const result = await authorized_fetch(`/api/subjects/${subjectId}/uuid`, { method: "GET" });
+    const result = await authorized_fetch<{ subject_uuid: string }>(
+        `/api/subjects/${subjectId}/uuid`,
+        { method: "GET" }
+    );
     return result.subject_uuid;
 }
 
diff --git a/frontend/src/views/subject/modify/PatchSubjectView.vue b/frontend/src/views/subject/modify/PatchSubjectView.vue
index 32742dde..5a537e82 100644
--- a/frontend/src/views/subject/modify/PatchSubjectView.vue
+++ b/frontend/src/views/subject/modify/PatchSubjectView.vue
@@ -56,7 +56,7 @@
                     >
                     </ModifySubjectHeaderContainer>
                     <ModifySubjectBody
-                        :current-user="currentUser"
+                        :current-user="currentUser!"
                         :instructors="shownInstructors"
                         @add-instructor="addInstructor"
                         @remove-instructor="removeInstructor"
@@ -79,8 +79,14 @@
 
 <script setup lang="ts">
 import { computed, ref, toRefs } from "vue";
-import { useSubjectInstructorsQuery, useSubjectQuery } from "@/queries/Subject";
-import type SubjectForm from "@/models/Subject";
+import {
+    useCreateSubjectInstructorMutation,
+    useDeleteSubjectInstructorMutation,
+    useSubjectInstructorsQuery,
+    useSubjectQuery,
+    useUpdateSubjectMutation,
+} from "@/queries/Subject";
+import type { SubjectForm } from "@/models/Subject";
 import type User from "@/models/User";
 import { useCurrentUserQuery } from "@/queries/User";
 import { useRouter } from "vue-router";
@@ -97,12 +103,12 @@ const snackbar = ref(false);
 const dialog = ref(false);
 const isSubjectNameError = ref(false);
 const isSubjectMailError = ref(false);
-const subjectName = ref(null);
-const subjectMail = ref(null);
+const subjectName = ref("");
+const subjectMail = ref("");
 const activeAcademicYear = ref<number | null>(null);
 const currentUserAsInstructor = ref(computed(() => isInstructor.value));
 const addedInstructors = ref<Set<User>>(new Set());
-const removedInstructorUIDs = ref<Set<string>>(new Set());
+const removedInstructors = ref<Set<User>>(new Set());
 const subjectNameChanged = ref(false);
 const subjectMailChanged = ref(false);
 
@@ -122,6 +128,10 @@ const {
     isError: isInstructorsError,
 } = useSubjectInstructorsQuery(subjectId);
 
+const { mutateAsync: updateSubject } = useUpdateSubjectMutation();
+const { mutateAsync: createSubjectInstructor } = useCreateSubjectInstructorMutation();
+const { mutateAsync: deleteSubjectInstructor } = useDeleteSubjectInstructorMutation();
+
 const isLoading = computed(
     () => isCurrentUserLoading.value || isSubjectLoading.value || isInstructorsLoading.value
 );
@@ -140,15 +150,9 @@ const isCurrentInstructor = (user: User) => {
     );
 };
 
-const name = computed<string | null>(() =>
-    subjectNameChanged.value ? subjectName.value : subject.value?.name
-);
-const academicYear = computed<number | null>(
-    () => activeAcademicYear.value || subject.value?.academic_year
-);
-const mail = computed<string | null>(() =>
-    subjectMailChanged.value ? subjectMail.value : subject.value?.email
-);
+const name = computed(() => (subjectNameChanged.value ? subjectName.value : subject.value!.name));
+const academicYear = computed(() => activeAcademicYear.value || subject.value!.academic_year);
+const mail = computed(() => (subjectMailChanged.value ? subjectMail.value : subject.value!.email));
 
 const router = useRouter();
 
@@ -156,7 +160,7 @@ const shownInstructors = computed(() => {
     return Array.from(
         new Set(
             [...(instructors.value || []), ...addedInstructors.value].filter((instructor: User) => {
-                return !removedInstructorUIDs.value.has(instructor.uid);
+                return !removedInstructors.value.has(instructor);
             })
         )
     ).sort((a, b) => {
@@ -172,24 +176,23 @@ const shownInstructors = computed(() => {
 
 const addInstructor = (instructor: User) => {
     if (isCurrentInstructor(instructor)) {
-        removedInstructorUIDs.value.delete(instructor.uid);
-    } else {
-        addedInstructors.value.add(instructor);
+        removedInstructors.value.delete(instructor);
     }
+    addedInstructors.value.add(instructor);
 };
 
 const removeInstructor = (instructor: User) => {
     if (isCurrentInstructor(instructor)) {
-        removedInstructorUIDs.value.add(instructor.uid);
+        removedInstructors.value.add(instructor);
     }
     addedInstructors.value.delete(instructor);
 };
 
 const onCurrentUserAsInstructorChanged = (isCurrentUserInstructor: boolean) => {
     if (isCurrentUserInstructor) {
-        removedInstructorUIDs.value.delete(currentUser.value.uid);
+        removedInstructors.value.delete(currentUser.value!);
     } else {
-        removedInstructorUIDs.value.add(currentUser.value.uid);
+        removedInstructors.value.add(currentUser.value!);
     }
 };
 
@@ -248,36 +251,27 @@ async function handleSubmit() {
         academic_year: academicYear.value,
     };
 
-    const addedInstructorUIDs = Array.from(addedInstructors.value).map(
-        (instructor) => instructor.uid
-    );
-
-    console.log(subjectData);
-    console.log(addedInstructorUIDs);
-    console.log(removedInstructorUIDs.value);
-
-    /*
     try {
-        await updateSubject({
-            subjectData
-        });
+        await updateSubject({ subject: subjectData, subjectId: subjectId.value });
 
-        for (const instructor of removedInstructorUIDs) {
-            await removeSubjectInstructorMutation.mutateAsync(instructor);
+        for (let instructor of removedInstructors.value) {
+            await deleteSubjectInstructor({
+                subjectId: subjectId.value,
+                user: instructor,
+            });
         }
 
-        for (const instructor of addedInstructorUIDs) {
-            await createSubjectInstructorMutation.mutateAsync(instructor);
+        for (let instructor of addedInstructors.value) {
+            await createSubjectInstructor({
+                subjectId: subjectId.value,
+                user: instructor,
+            });
         }
 
-        await router.push({name: 'subject', params: {subjectId: subjectId.value}});
-
-
+        await router.push({ name: "subject", params: { subjectId: subjectId.value } });
     } catch (error) {
         console.error("Error during subject alteration:", error);
     }
-
-     */
 }
 </script>