refactor: gebruik query component

frontend/src/views/classes/TeacherClasses.vue

@@ -1,12 +1,13 @@
 <script setup lang="ts">
     import { useI18n } from "vue-i18n";
     import authState from "@/services/auth/auth-service.ts";
-    import { computed, onMounted, ref, type ComputedRef } from "vue";
+    import { onMounted, ref } from "vue";
     import type { TeacherDTO } from "@dwengo-1/common/interfaces/teacher";
     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 { ClassController, type ClassResponse } from "@/controllers/classes";
+    import { ClassController, type ClassesResponse, type ClassResponse } from "@/controllers/classes";
+    import UsingQueryResult from "@/components/UsingQueryResult.vue";
 
     const { t } = useI18n();
     const classController = new ClassController();
@@ -22,20 +23,7 @@
     });
 
     // Fetch all classes of the logged in teacher
-    const { data: classesResponse, isLoading, error, refetch } = useTeacherClassesQuery(username, true);
+    const classesQuery = useTeacherClassesQuery(username, true);
-
-    // Empty list when classes are not yet loaded, else the list of classes of the user
-    const classes: ComputedRef<ClassDTO[]> = computed(() => {
-        // The classes are not yet fetched
-        if (!classesResponse.value) {
-            return [];
-        }
-        // The user has no classes
-        if (classesResponse.value.classes.length === 0) {
-            return [];
-        }
-        return classesResponse.value.classes as ClassDTO[];
-    });
 
     // Boolean that handles visibility for dialogs
     // Creating a class will generate a popup with the generated code
@@ -82,7 +70,6 @@
                     displayName: className.value,
                     teachers: [username.value!],
                     students: [],
-                    joinRequests: [],
                 };
                 const classResponse: ClassResponse = await classController.createClass(classDto);
                 const createdClass: ClassDTO = classResponse.class;
@@ -91,7 +78,6 @@
                 showSnackbar(t("created"), "success");
 
                 // Reload the table with classes so the new class appears
-                await refetch();
             } catch (_) {
                 showSnackbar(t("wrong"), "error");
             }
@@ -124,26 +110,12 @@
 </script>
 <template>
     <main>
-        <div
+        <div>
-            v-if="isLoading"
-            class="text-center py-10"
-        >
-            <v-progress-circular
-                indeterminate
-                color="primary"
-            />
-            <p>Loading...</p>
-        </div>
-
-        <div
-            v-else-if="error"
-            class="text-center py-10 text-error"
-        >
-            <v-icon large>mdi-alert-circle</v-icon>
-            <p>Error loading: {{ error.message }}</p>
-        </div>
-        <div v-else>
             <h1 class="title">{{ t("classes") }}</h1>
+            <using-query-result
+                :query-result="classesQuery"
+                v-slot="classesResponse: { data: ClassesResponse }"
+            >
                 <v-container
                     fluid
                     class="ma-4"
@@ -169,7 +141,7 @@
                                 </thead>
                                 <tbody>
                                     <tr
-                                    v-for="c in classes"
+                                        v-for="c in (classesResponse.data.classes as ClassDTO[])"
                                         :key="c.id"
                                     >
                                         <td>
@@ -261,6 +233,7 @@
                         </v-col>
                     </v-row>
                 </v-container>
+            </using-query-result>
 
             <h1 class="title">
                 {{ t("invitations") }}