From b0077e49117f94ca87d62459cfe649d12c8ac4ba Mon Sep 17 00:00:00 2001
From: laurejablonski <laure.jablonski@ugent.be>
Date: Thu, 17 Apr 2025 09:59:17 +0200
Subject: [PATCH 1/8] refactor: gebruik queries ipv controllers

---
 frontend/src/views/classes/SingleClass.vue    | 266 ++++++++----------
 frontend/src/views/classes/TeacherClasses.vue |   2 +-
 2 files changed, 126 insertions(+), 142 deletions(-)

diff --git a/frontend/src/views/classes/SingleClass.vue b/frontend/src/views/classes/SingleClass.vue
index ea413282..0e165fa3 100644
--- a/frontend/src/views/classes/SingleClass.vue
+++ b/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,15 +49,10 @@
     // 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
-    function handleJoinRequest(c: ClassJoinRequestDTO, accepted: boolean) : void {
+    function handleJoinRequest(c: ClassJoinRequestDTO, accepted: boolean): void {
         mutate(
             {
                 teacherUsername: username.value!,
@@ -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,132 +84,132 @@
 </script>
 <template>
     <main>
-        <div
-            v-if="isLoading"
-            class="text-center py-10"
+        <using-query-result
+            :query-result="getClass"
+            v-slot="classResponse: { data: ClassResponse }"
         >
-            <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"
-            >
-                <v-row
-                    no-gutters
-                    fluid
+            <div>
+                <h1 class="title">{{ classResponse.data.class.displayName }}</h1>
+                <using-query-result
+                    :query-result="getStudents"
+                    v-slot="studentsResponse: { data: StudentsResponse }"
                 >
-                    <v-col
-                        cols="12"
-                        sm="6"
-                        md="6"
+                    <v-container
+                        fluid
+                        class="ma-4"
                     >
-                        <v-table class="table">
-                            <thead>
-                                <tr>
-                                    <th class="header">{{ t("students") }}</th>
-                                    <th class="header"></th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                <tr
-                                    v-for="s in students"
-                                    :key="s.id"
-                                >
-                                    <td>
-                                        {{ s.firstName + " " + s.lastName }}
-                                    </td>
-                                    <td>
-                                        <v-btn @click="showPopup(s)"> {{ t("remove") }} </v-btn>
-                                    </td>
-                                </tr>
-                            </tbody>
-                        </v-table>
-                    </v-col>
-                    <using-query-result
-                        :query-result="joinRequestsQuery"
-                        v-slot="joinRequests: { data: JoinRequestsResponse }"
-                    >
-                        <v-col
-                            cols="12"
-                            sm="6"
-                            md="6"
+                        <v-row
+                            no-gutters
+                            fluid
                         >
-                            <v-table class="table">
-                                <thead>
-                                    <tr>
-                                        <th class="header">{{ t("classJoinRequests") }}</th>
-                                        <th class="header">{{ t("accept") + "/" + t("reject") }}</th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    <tr
-                                        v-for="jr in joinRequests.data.joinRequests as ClassJoinRequestDTO[]"
-                                        :key="(jr.class, jr.requester, jr.status)"
-                                    >
-                                        <td>
-                                            {{ jr.requester.firstName + " " + jr.requester.lastName }}
-                                        </td>
-                                        <td>
-                                            <v-btn
-                                                @click="handleJoinRequest(jr, true)"
-                                                class="mr-2"
-                                                color="green"
-                                            >
-                                                {{ t("accept") }}</v-btn
+                            <v-col
+                                cols="12"
+                                sm="6"
+                                md="6"
+                            >
+                                <v-table class="table">
+                                    <thead>
+                                        <tr>
+                                            <th class="header">{{ t("students") }}</th>
+                                            <th class="header"></th>
+                                        </tr>
+                                    </thead>
+                                    <tbody>
+                                        <tr
+                                            v-for="s in studentsResponse.data.students as StudentDTO[]"
+                                            :key="s.id"
+                                        >
+                                            <td>
+                                                {{ s.firstName + " " + s.lastName }}
+                                            </td>
+                                            <td>
+                                                <v-btn @click="showPopup(s)"> {{ t("remove") }} </v-btn>
+                                            </td>
+                                        </tr>
+                                    </tbody>
+                                </v-table>
+                            </v-col>
+                            <using-query-result
+                                :query-result="joinRequestsQuery"
+                                v-slot="joinRequests: { data: JoinRequestsResponse }"
+                            >
+                                <v-col
+                                    cols="12"
+                                    sm="6"
+                                    md="6"
+                                >
+                                    <v-table class="table">
+                                        <thead>
+                                            <tr>
+                                                <th class="header">{{ t("classJoinRequests") }}</th>
+                                                <th class="header">{{ t("accept") + "/" + t("reject") }}</th>
+                                            </tr>
+                                        </thead>
+                                        <tbody>
+                                            <tr
+                                                v-for="jr in joinRequests.data.joinRequests as ClassJoinRequestDTO[]"
+                                                :key="(jr.class, jr.requester, jr.status)"
                                             >
+                                                <td>
+                                                    {{ jr.requester.firstName + " " + jr.requester.lastName }}
+                                                </td>
+                                                <td>
+                                                    <v-btn
+                                                        @click="handleJoinRequest(jr, true)"
+                                                        class="mr-2"
+                                                        color="green"
+                                                    >
+                                                        {{ t("accept") }}</v-btn
+                                                    >
 
-                                            <v-btn
-                                                @click="handleJoinRequest(jr, false)"
-                                                class="mr-2"
-                                                color="red"
-                                            >
-                                                {{ t("reject") }}
-                                            </v-btn>
-                                        </td>
-                                    </tr>
-                                </tbody>
-                            </v-table>
-                        </v-col>
-                    </using-query-result>
-                </v-row>
-            </v-container>
-        </div>
-        <v-dialog
-            v-model="dialog"
-            max-width="400px"
-        >
-            <v-card>
-                <v-card-title class="headline">{{ t("areusure") }}</v-card-title>
+                                                    <v-btn
+                                                        @click="handleJoinRequest(jr, false)"
+                                                        class="mr-2"
+                                                        color="red"
+                                                    >
+                                                        {{ t("reject") }}
+                                                    </v-btn>
+                                                </td>
+                                            </tr>
+                                        </tbody>
+                                    </v-table>
+                                </v-col>
+                            </using-query-result>
+                        </v-row>
+                    </v-container>
+                </using-query-result>
+            </div>
+            <v-dialog
+                v-model="dialog"
+                max-width="400px"
+            >
+                <v-card>
+                    <v-card-title class="headline">{{ t("areusure") }}</v-card-title>
 
-                <v-card-actions>
-                    <v-spacer></v-spacer>
-                    <v-btn
-                        text
-                        @click="dialog = false"
-                    >
-                        {{ t("cancel") }}
-                    </v-btn>
-                    <v-btn
-                        text
-                        @click="removeStudentFromclass"
-                        >{{ t("yes") }}</v-btn
-                    >
-                </v-card-actions>
-            </v-card>
-        </v-dialog>
-        <v-snackbar
-            v-model="snackbar.visible"
-            :color="snackbar.color"
-            timeout="3000"
-        >
-            {{ snackbar.message }}
-        </v-snackbar>
+                    <v-card-actions>
+                        <v-spacer></v-spacer>
+                        <v-btn
+                            text
+                            @click="dialog = false"
+                        >
+                            {{ t("cancel") }}
+                        </v-btn>
+                        <v-btn
+                            text
+                            @click="removeStudentFromclass"
+                            >{{ t("yes") }}</v-btn
+                        >
+                    </v-card-actions>
+                </v-card>
+            </v-dialog>
+            <v-snackbar
+                v-model="snackbar.visible"
+                :color="snackbar.color"
+                timeout="3000"
+            >
+                {{ snackbar.message }}
+            </v-snackbar>
+        </using-query-result>
     </main>
 </template>
 <style scoped>
diff --git a/frontend/src/views/classes/TeacherClasses.vue b/frontend/src/views/classes/TeacherClasses.vue
index 940e67cb..b676e73f 100644
--- a/frontend/src/views/classes/TeacherClasses.vue
+++ b/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

From de5248fd70f9c729594a5b03716c7e4de8c07497 Mon Sep 17 00:00:00 2001
From: laurejablonski <laure.jablonski@ugent.be>
Date: Thu, 17 Apr 2025 10:17:50 +0200
Subject: [PATCH 2/8] feat: accepteren en weigeren join requests werkt

---
 frontend/src/i18n/locale/de.json           |  4 +++-
 frontend/src/i18n/locale/en.json           |  4 +++-
 frontend/src/i18n/locale/fr.json           |  4 +++-
 frontend/src/i18n/locale/nl.json           |  4 +++-
 frontend/src/queries/teachers.ts           |  2 +-
 frontend/src/views/classes/SingleClass.vue | 12 ++++++++++--
 6 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/frontend/src/i18n/locale/de.json b/frontend/src/i18n/locale/de.json
index 15975e97..3988575d 100644
--- a/frontend/src/i18n/locale/de.json
+++ b/frontend/src/i18n/locale/de.json
@@ -82,5 +82,7 @@
     "reject": "zurückweisen",
     "areusure": "Sind Sie sicher?",
     "yes": "ja",
-    "teachers": "Lehrer"
+    "teachers": "Lehrer",
+    "rejected": "abgelehnt",
+    "accepted": "akzeptiert"
 }
diff --git a/frontend/src/i18n/locale/en.json b/frontend/src/i18n/locale/en.json
index 76a9bcf2..630790ad 100644
--- a/frontend/src/i18n/locale/en.json
+++ b/frontend/src/i18n/locale/en.json
@@ -82,5 +82,7 @@
     "reject": "reject",
     "areusure": "Are you sure?",
     "yes": "yes",
-    "teachers": "teachers"
+    "teachers": "teachers",
+    "accepted": "accepted",
+    "rejected": "rejected"
 }
diff --git a/frontend/src/i18n/locale/fr.json b/frontend/src/i18n/locale/fr.json
index d5eed78a..777d0a9a 100644
--- a/frontend/src/i18n/locale/fr.json
+++ b/frontend/src/i18n/locale/fr.json
@@ -82,5 +82,7 @@
     "reject": "rejeter",
     "areusure": "Êtes-vous sûr?",
     "yes": "oui",
-    "teachers": "enseignants"
+    "teachers": "enseignants",
+    "accepted": "acceptée",
+    "rejected": "rejetée"
 }
diff --git a/frontend/src/i18n/locale/nl.json b/frontend/src/i18n/locale/nl.json
index 1c2b2b37..754592cd 100644
--- a/frontend/src/i18n/locale/nl.json
+++ b/frontend/src/i18n/locale/nl.json
@@ -82,5 +82,7 @@
     "reject": "weiger",
     "areusure": "Bent u zeker?",
     "yes": "ja",
-    "teachers": "leerkrachten"
+    "teachers": "leerkrachten",
+    "accepted": "geaccepteerd",
+    "rejected": "geweigerd"
 }
diff --git a/frontend/src/queries/teachers.ts b/frontend/src/queries/teachers.ts
index 3e77f819..59da84f4 100644
--- a/frontend/src/queries/teachers.ts
+++ b/frontend/src/queries/teachers.ts
@@ -137,7 +137,7 @@ export function useUpdateJoinRequestMutation(): UseMutationReturnType<
         mutationFn: async ({ teacherUsername, classId, studentUsername, accepted }) =>
             teacherController.updateStudentJoinRequest(teacherUsername, classId, studentUsername, accepted),
         onSuccess: async (deletedJoinRequest) => {
-            const username = deletedJoinRequest.request.requester;
+            const username = deletedJoinRequest.request.requester.username;
             const classId = deletedJoinRequest.request.class;
             await queryClient.invalidateQueries({ queryKey: studentJoinRequestsQueryKey(username) });
             await queryClient.invalidateQueries({ queryKey: studentJoinRequestQueryKey(username, classId) });
diff --git a/frontend/src/views/classes/SingleClass.vue b/frontend/src/views/classes/SingleClass.vue
index 0e165fa3..196115e2 100644
--- a/frontend/src/views/classes/SingleClass.vue
+++ b/frontend/src/views/classes/SingleClass.vue
@@ -61,8 +61,16 @@
                 accepted: accepted,
             },
             {
-                onSuccess: () => {
-                    showSnackbar(t("sent"), "success");
+                onSuccess: async () => {
+                    if (accepted){
+                        await joinRequestsQuery.refetch();
+                        await getStudents.refetch();
+
+                        showSnackbar(t("accepted"), "success");
+                    } else {
+                        await joinRequestsQuery.refetch();
+                        showSnackbar(t("rejected"), "success");
+                    }
                 },
                 onError: (e) => {
                     showSnackbar(t("failed") + ": " + e.message, "error");

From 25bf592eca123bcab6f9fd0d1d095d6bd6dcdd6f Mon Sep 17 00:00:00 2001
From: laurejablonski <laure.jablonski@ugent.be>
Date: Thu, 17 Apr 2025 10:29:04 +0200
Subject: [PATCH 3/8] feat: verwijderen student uit klas

---
 frontend/src/views/classes/SingleClass.vue | 21 ++++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/frontend/src/views/classes/SingleClass.vue b/frontend/src/views/classes/SingleClass.vue
index 196115e2..94b381d6 100644
--- a/frontend/src/views/classes/SingleClass.vue
+++ b/frontend/src/views/classes/SingleClass.vue
@@ -10,7 +10,8 @@
     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";
+    import { useClassDeleteStudentMutation, useClassQuery, useClassStudentsQuery } from "@/queries/classes";
+import { RefSymbol } from "@vue/reactivity";
 
     const { t } = useI18n();
 
@@ -21,13 +22,11 @@
     const route = useRoute();
     const classId: string = route.params.id as string;
 
-    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();
+    const { mutate: deleteStudentMutation } = useClassDeleteStudentMutation();
 
     // Find the username of the logged in user so it can be used to fetch other information
     // When loading the page
@@ -36,7 +35,6 @@
         username.value = userObject?.profile?.preferred_username ?? undefined;
     });
 
-    // TODO: Boolean that handles visibility for dialogs
     // Popup to verify removing student
     const dialog = ref(false);
     const selectedStudent = ref<StudentDTO | null>(null);
@@ -48,10 +46,19 @@
 
     // Remove student from class
     async function removeStudentFromclass(): Promise<void> {
-        // TODO: replace by query
+        deleteStudentMutation({id: classId, username: selectedStudent.value!.username}, {
+                onSuccess: async () => {
+                    dialog.value = false;
+                    await getStudents.refetch();
+                    showSnackbar(t("success"), "success");
+                },
+                onError: (e) => {
+                    dialog.value = false;
+                    showSnackbar(t("failed") + ": " + e.message, "error");
+                },
+            },)
     }
 
-    // TODO: query + relaoding
     function handleJoinRequest(c: ClassJoinRequestDTO, accepted: boolean): void {
         mutate(
             {

From 464b888e16e2ea267f26e4a88d7a6553c51fd755 Mon Sep 17 00:00:00 2001
From: laurejablonski <laure.jablonski@ugent.be>
Date: Thu, 17 Apr 2025 10:37:07 +0200
Subject: [PATCH 4/8] docs: commentaar code

---
 frontend/src/views/classes/SingleClass.vue | 28 ++++++++++++++--------
 1 file changed, 18 insertions(+), 10 deletions(-)

diff --git a/frontend/src/views/classes/SingleClass.vue b/frontend/src/views/classes/SingleClass.vue
index 94b381d6..e35387e0 100644
--- a/frontend/src/views/classes/SingleClass.vue
+++ b/frontend/src/views/classes/SingleClass.vue
@@ -2,7 +2,6 @@
     import { useI18n } from "vue-i18n";
     import authState from "@/services/auth/auth-service.ts";
     import { onMounted, ref } from "vue";
-    import type { ClassDTO } from "@dwengo-1/common/interfaces/class";
     import { useRoute } from "vue-router";
     import { type ClassResponse } from "@/controllers/classes";
     import type { JoinRequestsResponse, StudentsResponse } from "@/controllers/students";
@@ -11,41 +10,46 @@
     import { useTeacherJoinRequestsQuery, useUpdateJoinRequestMutation } from "@/queries/teachers";
     import type { ClassJoinRequestDTO } from "@dwengo-1/common/interfaces/class-join-request";
     import { useClassDeleteStudentMutation, useClassQuery, useClassStudentsQuery } from "@/queries/classes";
-import { RefSymbol } from "@vue/reactivity";
 
     const { t } = useI18n();
 
-    // Username of logged in teacher
-    const username = ref<string | undefined>(undefined);
-
-    // Find class id from route
     const route = useRoute();
     const classId: string = route.params.id as string;
+    const username = ref<string | undefined>(undefined);
 
+    // queries used to access the backend and catch loading or errors
+
+    // gets the class a teacher wants to manage
     const getClass = useClassQuery(classId);
+    // get all students part of the class
     const getStudents = useClassStudentsQuery(classId);
+    // get all join requests for this class
     const joinRequestsQuery = useTeacherJoinRequestsQuery(username, classId);
+    // handle accepting or rejecting join requests
     const { mutate } = useUpdateJoinRequestMutation();
+    // handle deletion of a student from the class
     const { mutate: deleteStudentMutation } = useClassDeleteStudentMutation();
 
-    // Find the username of the logged in user so it can be used to fetch other information
-    // When loading the page
+    // load current user before rendering the page
     onMounted(async () => {
         const userObject = await authState.loadUser();
         username.value = userObject?.profile?.preferred_username ?? undefined;
     });
 
-    // Popup to verify removing student
+    // used to set the visibility of the dialog
     const dialog = ref(false);
+    // student selected for deletion
     const selectedStudent = ref<StudentDTO | null>(null);
 
+    // let the teacher verify deletion of a student
     function showPopup(s: StudentDTO): void {
         selectedStudent.value = s;
         dialog.value = true;
     }
 
-    // Remove student from class
+
     async function removeStudentFromclass(): Promise<void> {
+        // delete student from class
         deleteStudentMutation({id: classId, username: selectedStudent.value!.username}, {
                 onSuccess: async () => {
                     dialog.value = false;
@@ -60,6 +64,7 @@ import { RefSymbol } from "@vue/reactivity";
     }
 
     function handleJoinRequest(c: ClassJoinRequestDTO, accepted: boolean): void {
+        // handle acception or rejection of a join request
         mutate(
             {
                 teacherUsername: username.value!,
@@ -85,12 +90,15 @@ import { RefSymbol } from "@vue/reactivity";
             },
         );
     }
+
+    // default of snackbar values
     const snackbar = ref({
         visible: false,
         message: "",
         color: "success",
     });
 
+    // function to show snackbar on success or failure
     function showSnackbar(message: string, color: string): void {
         snackbar.value.message = message;
         snackbar.value.color = color;

From 569adf6518b101b2ca58bed5607d2c22bffae073 Mon Sep 17 00:00:00 2001
From: laurejablonski <laure.jablonski@ugent.be>
Date: Thu, 17 Apr 2025 10:42:27 +0200
Subject: [PATCH 5/8] style: lint + format

---
 frontend/src/views/classes/SingleClass.vue    | 40 ++++++------
 frontend/src/views/classes/StudentClasses.vue |  6 +-
 frontend/src/views/classes/TeacherClasses.vue | 63 ++++++++++---------
 3 files changed, 59 insertions(+), 50 deletions(-)

diff --git a/frontend/src/views/classes/SingleClass.vue b/frontend/src/views/classes/SingleClass.vue
index e35387e0..500a25f4 100644
--- a/frontend/src/views/classes/SingleClass.vue
+++ b/frontend/src/views/classes/SingleClass.vue
@@ -3,7 +3,7 @@
     import authState from "@/services/auth/auth-service.ts";
     import { onMounted, ref } from "vue";
     import { useRoute } from "vue-router";
-    import { 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";
@@ -17,40 +17,41 @@
     const classId: string = route.params.id as string;
     const username = ref<string | undefined>(undefined);
 
-    // queries used to access the backend and catch loading or errors
+    // Queries used to access the backend and catch loading or errors
 
-    // gets the class a teacher wants to manage
+    // Gets the class a teacher wants to manage
     const getClass = useClassQuery(classId);
-    // get all students part of the class
+    // Get all students part of the class
     const getStudents = useClassStudentsQuery(classId);
-    // get all join requests for this class
+    // Get all join requests for this class
     const joinRequestsQuery = useTeacherJoinRequestsQuery(username, classId);
-    // handle accepting or rejecting join requests
+    // Handle accepting or rejecting join requests
     const { mutate } = useUpdateJoinRequestMutation();
-    // handle deletion of a student from the class
+    // Handle deletion of a student from the class
     const { mutate: deleteStudentMutation } = useClassDeleteStudentMutation();
 
-    // load current user before rendering the page
+    // Load current user before rendering the page
     onMounted(async () => {
         const userObject = await authState.loadUser();
         username.value = userObject?.profile?.preferred_username ?? undefined;
     });
 
-    // used to set the visibility of the dialog
+    // Used to set the visibility of the dialog
     const dialog = ref(false);
-    // student selected for deletion
+    // Student selected for deletion
     const selectedStudent = ref<StudentDTO | null>(null);
 
-    // let the teacher verify deletion of a student
+    // Let the teacher verify deletion of a student
     function showPopup(s: StudentDTO): void {
         selectedStudent.value = s;
         dialog.value = true;
     }
 
-
     async function removeStudentFromclass(): Promise<void> {
-        // delete student from class
-        deleteStudentMutation({id: classId, username: selectedStudent.value!.username}, {
+        // Delete student from class
+        deleteStudentMutation(
+            { id: classId, username: selectedStudent.value!.username },
+            {
                 onSuccess: async () => {
                     dialog.value = false;
                     await getStudents.refetch();
@@ -60,11 +61,12 @@
                     dialog.value = false;
                     showSnackbar(t("failed") + ": " + e.message, "error");
                 },
-            },)
+            },
+        );
     }
 
     function handleJoinRequest(c: ClassJoinRequestDTO, accepted: boolean): void {
-        // handle acception or rejection of a join request
+        // Handle acception or rejection of a join request
         mutate(
             {
                 teacherUsername: username.value!,
@@ -74,7 +76,7 @@
             },
             {
                 onSuccess: async () => {
-                    if (accepted){
+                    if (accepted) {
                         await joinRequestsQuery.refetch();
                         await getStudents.refetch();
 
@@ -91,14 +93,14 @@
         );
     }
 
-    // default of snackbar values
+    // Default of snackbar values
     const snackbar = ref({
         visible: false,
         message: "",
         color: "success",
     });
 
-    // function to show snackbar on success or failure
+    // Function to show snackbar on success or failure
     function showSnackbar(message: string, color: string): void {
         snackbar.value.message = message;
         snackbar.value.color = color;
diff --git a/frontend/src/views/classes/StudentClasses.vue b/frontend/src/views/classes/StudentClasses.vue
index ba3294f0..920ba9aa 100644
--- a/frontend/src/views/classes/StudentClasses.vue
+++ b/frontend/src/views/classes/StudentClasses.vue
@@ -7,7 +7,7 @@
     import { useCreateJoinRequestMutation, useStudentClassesQuery } from "@/queries/students";
     import type { StudentDTO } from "@dwengo-1/common/interfaces/student";
     import type { TeacherDTO } from "@dwengo-1/common/interfaces/teacher";
-    import { type ClassesResponse } from "@/controllers/classes";
+    import type { ClassesResponse } from "@/controllers/classes";
     import UsingQueryResult from "@/components/UsingQueryResult.vue";
     import { useClassStudentsQuery, useClassTeachersQuery } from "@/queries/classes";
     import type { StudentsResponse } from "@/controllers/students";
@@ -44,7 +44,7 @@
     async function openStudentDialog(c: ClassDTO): Promise<void> {
         selectedClass.value = c;
 
-        // let the component know it should show the students in a class
+        // Let the component know it should show the students in a class
         getStudents.value = true;
         await getStudentsQuery.refetch();
         dialog.value = true;
@@ -53,7 +53,7 @@
     async function openTeacherDialog(c: ClassDTO): Promise<void> {
         selectedClass.value = c;
 
-        // let the component know it should show teachers of a class
+        // Let the component know it should show teachers of a class
         getStudents.value = false;
         await getTeachersQuery.refetch();
         dialog.value = true;
diff --git a/frontend/src/views/classes/TeacherClasses.vue b/frontend/src/views/classes/TeacherClasses.vue
index b676e73f..81079356 100644
--- a/frontend/src/views/classes/TeacherClasses.vue
+++ b/frontend/src/views/classes/TeacherClasses.vue
@@ -6,7 +6,7 @@
     import type { ClassDTO } from "@dwengo-1/common/interfaces/class";
     import type { TeacherInvitationDTO } from "@dwengo-1/common/interfaces/teacher-invitation";
     import { useTeacherClassesQuery } from "@/queries/teachers";
-    import { type ClassesResponse, type ClassResponse } from "@/controllers/classes";
+    import type { ClassesResponse } from "@/controllers/classes";
     import UsingQueryResult from "@/components/UsingQueryResult.vue";
     import { useClassesQuery, useClassTeacherInvitationsQuery, useCreateClassMutation } from "@/queries/classes";
     import type { TeacherInvitationsResponse } from "@/controllers/teacher-invitations";
@@ -252,34 +252,41 @@
                         :query-result="getInvitationsQuery"
                         v-slot="invitationsResponse: { data: TeacherInvitationsResponse }"
                     >
-                    <using-query-result :query-result="allClassesQuery" v-slot="classesResponse: {data: ClassesResponse}">
-                        <tr
-                            v-for="i in invitationsResponse.data.invitations as TeacherInvitationDTO[]"
-                            :key="i.classId"
+                        <using-query-result
+                            :query-result="allClassesQuery"
+                            v-slot="classesResponse: { data: ClassesResponse }"
                         >
-                            <td>
-                                {{ (classesResponse.data.classes as ClassDTO[]).filter((c) => c.id == i.classId)[0] }}
-                            </td>
-                            <td>{{ (i.sender as TeacherDTO).firstName + " " + (i.sender as TeacherDTO).lastName }}</td>
-                            <td class="text-right">
-                                <div>
-                                    <v-btn
-                                        color="green"
-                                        @click="acceptRequest"
-                                        class="mr-2"
-                                    >
-                                        {{ t("accept") }}
-                                    </v-btn>
-                                    <v-btn
-                                        color="red"
-                                        @click="denyRequest"
-                                    >
-                                        {{ t("deny") }}
-                                    </v-btn>
-                                </div>
-                            </td>
-                        </tr>
-                    </using-query-result>
+                            <tr
+                                v-for="i in invitationsResponse.data.invitations as TeacherInvitationDTO[]"
+                                :key="i.classId"
+                            >
+                                <td>
+                                    {{
+                                        (classesResponse.data.classes as ClassDTO[]).filter((c) => c.id == i.classId)[0]
+                                    }}
+                                </td>
+                                <td>
+                                    {{ (i.sender as TeacherDTO).firstName + " " + (i.sender as TeacherDTO).lastName }}
+                                </td>
+                                <td class="text-right">
+                                    <div>
+                                        <v-btn
+                                            color="green"
+                                            @click="acceptRequest"
+                                            class="mr-2"
+                                        >
+                                            {{ t("accept") }}
+                                        </v-btn>
+                                        <v-btn
+                                            color="red"
+                                            @click="denyRequest"
+                                        >
+                                            {{ t("deny") }}
+                                        </v-btn>
+                                    </div>
+                                </td>
+                            </tr>
+                        </using-query-result>
                     </using-query-result>
                 </tbody>
             </v-table>

From e21f11185b983fa40f4056035a9e4e5cf0592e8d Mon Sep 17 00:00:00 2001
From: laurejablonski <laure.jablonski@ugent.be>
Date: Thu, 17 Apr 2025 10:43:43 +0200
Subject: [PATCH 6/8] style: bestand niet nodig

---
 frontend/src/views/classes/CreateClass.vue | 7 -------
 1 file changed, 7 deletions(-)
 delete mode 100644 frontend/src/views/classes/CreateClass.vue

diff --git a/frontend/src/views/classes/CreateClass.vue b/frontend/src/views/classes/CreateClass.vue
deleted file mode 100644
index 1a35a59f..00000000
--- a/frontend/src/views/classes/CreateClass.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<script setup lang="ts"></script>
-
-<template>
-    <main></main>
-</template>
-
-<style scoped></style>

From feb6bc3d9dacd0cf1ba1877143688b749c9f6df7 Mon Sep 17 00:00:00 2001
From: laurejablonski <laure.jablonski@ugent.be>
Date: Thu, 17 Apr 2025 11:17:50 +0200
Subject: [PATCH 7/8] feat: laad pagina na laden van user

---
 frontend/src/views/classes/SingleClass.vue    | 28 ++++++++++++++--
 frontend/src/views/classes/StudentClasses.vue | 33 ++++++++++++++++---
 frontend/src/views/classes/TeacherClasses.vue | 31 ++++++++++++++---
 3 files changed, 81 insertions(+), 11 deletions(-)

diff --git a/frontend/src/views/classes/SingleClass.vue b/frontend/src/views/classes/SingleClass.vue
index 500a25f4..f058d6be 100644
--- a/frontend/src/views/classes/SingleClass.vue
+++ b/frontend/src/views/classes/SingleClass.vue
@@ -16,6 +16,9 @@
     const route = useRoute();
     const classId: string = route.params.id as string;
     const username = ref<string | undefined>(undefined);
+    const isLoading = ref(false);
+    const isError = ref(false);
+    const errorMessage = ref<string>("");
 
     // Queries used to access the backend and catch loading or errors
 
@@ -32,8 +35,16 @@
 
     // Load current user before rendering the page
     onMounted(async () => {
-        const userObject = await authState.loadUser();
-        username.value = userObject?.profile?.preferred_username ?? undefined;
+        isLoading.value = true;
+        try {
+            const userObject = await authState.loadUser();
+            username.value = userObject!.profile!.preferred_username;
+        } catch (error) {
+            isError.value = true;
+            errorMessage.value = error instanceof Error ? error.message : String(error);
+        } finally {
+            isLoading.value = false;
+        }
     });
 
     // Used to set the visibility of the dialog
@@ -109,6 +120,19 @@
 </script>
 <template>
     <main>
+        <div
+            class="loading-div"
+            v-if="isLoading"
+        >
+            <v-progress-circular indeterminate></v-progress-circular>
+        </div>
+        <div v-if="isError">
+            <v-empty-state
+                icon="mdi-alert-circle-outline"
+                :text="errorMessage"
+                :title="t('error_title')"
+            ></v-empty-state>
+        </div>
         <using-query-result
             :query-result="getClass"
             v-slot="classResponse: { data: ClassResponse }"
diff --git a/frontend/src/views/classes/StudentClasses.vue b/frontend/src/views/classes/StudentClasses.vue
index 920ba9aa..d3333b50 100644
--- a/frontend/src/views/classes/StudentClasses.vue
+++ b/frontend/src/views/classes/StudentClasses.vue
@@ -17,16 +17,26 @@
 
     // Username of logged in student
     const username = ref<string | undefined>(undefined);
+    const isLoading = ref(false);
+    const isError = ref(false);
+    const errorMessage = ref<string>("");
 
     // Students of selected class are shown when logged in student presses on the member count
     const selectedClass = ref<ClassDTO | null>(null);
     const getStudents = ref(false);
 
-    // Find the username of the logged in user so it can be used to fetch other information
-    // When loading the page
+    // Load current user before rendering the page
     onMounted(async () => {
-        const userObject = await authState.loadUser();
-        username.value = userObject?.profile?.preferred_username ?? undefined;
+        isLoading.value = true;
+        try {
+            const userObject = await authState.loadUser();
+            username.value = userObject!.profile!.preferred_username;
+        } catch (error) {
+            isError.value = true;
+            errorMessage.value = error instanceof Error ? error.message : String(error);
+        } finally {
+            isLoading.value = false;
+        }
     });
 
     // Fetch all classes of the logged in student
@@ -111,7 +121,20 @@
 </script>
 <template>
     <main>
-        <div>
+        <div
+            class="loading-div"
+            v-if="isLoading"
+        >
+            <v-progress-circular indeterminate></v-progress-circular>
+        </div>
+        <div v-if="isError">
+            <v-empty-state
+                icon="mdi-alert-circle-outline"
+                :text="errorMessage"
+                :title="t('error_title')"
+            ></v-empty-state>
+        </div>
+        <div v-else>
             <h1 class="title">{{ t("classes") }}</h1>
             <using-query-result
                 :query-result="classesQuery"
diff --git a/frontend/src/views/classes/TeacherClasses.vue b/frontend/src/views/classes/TeacherClasses.vue
index 81079356..021ead1c 100644
--- a/frontend/src/views/classes/TeacherClasses.vue
+++ b/frontend/src/views/classes/TeacherClasses.vue
@@ -15,12 +15,22 @@
 
     // Username of logged in teacher
     const username = ref<string | undefined>(undefined);
+    const isLoading = ref(false);
+    const isError = ref(false);
+    const errorMessage = ref<string>("");
 
-    // Find the username of the logged in user so it can be used to fetch other information
-    // When loading the page
+    // Load current user before rendering the page
     onMounted(async () => {
-        const userObject = await authState.loadUser();
-        username.value = userObject?.profile?.preferred_username ?? undefined;
+        isLoading.value = true;
+        try {
+            const userObject = await authState.loadUser();
+            username.value = userObject!.profile!.preferred_username;
+        } catch (error) {
+            isError.value = true;
+            errorMessage.value = error instanceof Error ? error.message : String(error);
+        } finally {
+            isLoading.value = false;
+        }
     });
 
     // Fetch all classes of the logged in teacher
@@ -111,6 +121,19 @@
 </script>
 <template>
     <main>
+        <div
+        class="loading-div"
+        v-if="isLoading"
+    >
+        <v-progress-circular indeterminate></v-progress-circular>
+    </div>
+    <div v-if="isError">
+        <v-empty-state
+            icon="mdi-alert-circle-outline"
+            :text="errorMessage"
+            :title="t('error_title')"
+        ></v-empty-state>
+    </div v-else>
         <div>
             <h1 class="title">{{ t("classes") }}</h1>
             <using-query-result

From ad852603debc0e3cff58e66cdcd376609c00b14d Mon Sep 17 00:00:00 2001
From: laurejablonski <laure.jablonski@ugent.be>
Date: Thu, 17 Apr 2025 11:17:59 +0200
Subject: [PATCH 8/8] fix: verwijderde file

---
 frontend/src/router/index.ts | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index 23695680..0277dd64 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -3,7 +3,6 @@ import SingleAssignment from "@/views/assignments/SingleAssignment.vue";
 import SingleClass from "@/views/classes/SingleClass.vue";
 import SingleDiscussion from "@/views/discussions/SingleDiscussion.vue";
 import NotFound from "@/components/errors/NotFound.vue";
-import CreateClass from "@/views/classes/CreateClass.vue";
 import CreateAssignment from "@/views/assignments/CreateAssignment.vue";
 import CreateDiscussion from "@/views/discussions/CreateDiscussion.vue";
 import CallbackPage from "@/views/CallbackPage.vue";
@@ -84,12 +83,6 @@ const router = createRouter({
             component: SingleAssignment,
             meta: { requiresAuth: true },
         },
-        {
-            path: "/class/create",
-            name: "CreateClass",
-            component: CreateClass,
-            meta: { requiresAuth: true },
-        },
         {
             path: "/class/:id",
             name: "SingleClass",