refactor: gebruik queries ipv controllers

frontend/src/views/classes/SingleClass.vue

@@ -4,27 +4,28 @@
     import { onMounted, ref } from "vue";
     import type { ClassDTO } from "@dwengo-1/common/interfaces/class";
     import { useRoute } from "vue-router";
-    import { ClassController, type ClassResponse } from "@/controllers/classes";
+    import { type ClassResponse } from "@/controllers/classes";
     import type { JoinRequestsResponse, StudentsResponse } from "@/controllers/students";
     import type { StudentDTO } from "@dwengo-1/common/interfaces/student";
     import UsingQueryResult from "@/components/UsingQueryResult.vue";
     import { useTeacherJoinRequestsQuery, useUpdateJoinRequestMutation } from "@/queries/teachers";
     import type { ClassJoinRequestDTO } from "@dwengo-1/common/interfaces/class-join-request";
+    import { useClassQuery, useClassStudentsQuery } from "@/queries/classes";
 
     const { t } = useI18n();
 
     // Username of logged in teacher
     const username = ref<string | undefined>(undefined);
-    const classController: ClassController = new ClassController();
 
     // Find class id from route
     const route = useRoute();
     const classId: string = route.params.id as string;
 
-    const isLoading = ref(true);
     const currentClass = ref<ClassDTO | undefined>(undefined);
     const students = ref<StudentDTO[]>([]);
 
+    const getClass = useClassQuery(classId);
+    const getStudents = useClassStudentsQuery(classId);
     const joinRequestsQuery = useTeacherJoinRequestsQuery(username, classId);
     const { mutate } = useUpdateJoinRequestMutation();
 
@@ -33,17 +34,6 @@
     onMounted(async () => {
         const userObject = await authState.loadUser();
         username.value = userObject?.profile?.preferred_username ?? undefined;
-
-        // Get class of which information should be shown
-        const classResponse: ClassResponse = await classController.getById(classId);
-        if (classResponse && classResponse.class) {
-            currentClass.value = classResponse.class;
-            isLoading.value = false;
-        }
-
-        // Fetch all students of the class
-        const studentsResponse: StudentsResponse = await classController.getStudents(classId);
-        if (studentsResponse && studentsResponse.students) students.value = studentsResponse.students as StudentDTO[];
     });
 
     // TODO: Boolean that handles visibility for dialogs
@@ -59,11 +49,6 @@
     // Remove student from class
     async function removeStudentFromclass(): Promise<void> {
         // TODO: replace by query
-        if (selectedStudent.value) await classController.deleteStudent(classId, selectedStudent.value.username);
-        dialog.value = false;
-
-        selectedStudent.value = null;
-        //TODO when query; reload table so student not longer in table
     }
 
     // TODO: query + relaoding
@@ -80,8 +65,7 @@
                     showSnackbar(t("sent"), "success");
                 },
                 onError: (e) => {
-                    // ShowSnackbar(t("failed") + ": " + e.message, "error");
-                    throw e;
+                    showSnackbar(t("failed") + ": " + e.message, "error");
                 },
             },
         );
@@ -100,18 +84,16 @@
 </script>
 <template>
     <main>
-        <div
-            v-if="isLoading"
-            class="text-center py-10"
+        <using-query-result
+            :query-result="getClass"
+            v-slot="classResponse: { data: ClassResponse }"
+        >
+            <div>
+                <h1 class="title">{{ classResponse.data.class.displayName }}</h1>
+                <using-query-result
+                    :query-result="getStudents"
+                    v-slot="studentsResponse: { data: StudentsResponse }"
                 >
-            <v-progress-circular
-                indeterminate
-                color="primary"
-            />
-            <p>Loading...</p>
-        </div>
-        <div v-else>
-            <h1 class="title">{{ currentClass!.displayName }}</h1>
                     <v-container
                         fluid
                         class="ma-4"
@@ -134,7 +116,7 @@
                                     </thead>
                                     <tbody>
                                         <tr
-                                    v-for="s in students"
+                                            v-for="s in studentsResponse.data.students as StudentDTO[]"
                                             :key="s.id"
                                         >
                                             <td>
@@ -195,6 +177,7 @@
                             </using-query-result>
                         </v-row>
                     </v-container>
+                </using-query-result>
             </div>
             <v-dialog
                 v-model="dialog"
@@ -226,6 +209,7 @@
             >
                 {{ snackbar.message }}
             </v-snackbar>
+        </using-query-result>
     </main>
 </template>
 <style scoped>

frontend/src/views/classes/TeacherClasses.vue

@@ -27,7 +27,7 @@
     const classesQuery = useTeacherClassesQuery(username, true);
     const allClassesQuery = useClassesQuery();
     const { mutate } = useCreateClassMutation();
-    const getInvitationsQuery = useClassTeacherInvitationsQuery(username);
+    const getInvitationsQuery = useClassTeacherInvitationsQuery(username); // TODO: use useTeacherInvitationsReceivedQuery
 
     // Boolean that handles visibility for dialogs
     // Creating a class will generate a popup with the generated code