From bec85c23c8b2d9df55d81e007d1338f448ceb75b Mon Sep 17 00:00:00 2001
From: Bram Reyniers <bram.reyniers@ugent.be>
Date: Mon, 13 May 2024 16:16:18 +0200
Subject: [PATCH] fix subjects query

---
 frontend/src/components/home/cards/SubjectsCard.vue |  2 +-
 frontend/src/queries/Subject.ts                     |  5 +++--
 frontend/src/services/subject.ts                    | 13 +++++--------
 frontend/src/views/CreateProjectView.vue            |  3 +--
 frontend/src/views/subject/SubjectsView.vue         | 11 +++++++++--
 5 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/frontend/src/components/home/cards/SubjectsCard.vue b/frontend/src/components/home/cards/SubjectsCard.vue
index 1364b42b..eb712afa 100644
--- a/frontend/src/components/home/cards/SubjectsCard.vue
+++ b/frontend/src/components/home/cards/SubjectsCard.vue
@@ -3,7 +3,7 @@
     <!-- TODO: Add error handling -->
     <h1 v-else-if="isSubjectsError">Error loading subjects</h1>
     <HomeScreenCard v-else :title="'homescreen.subjects'">
-        <SubjectItem v-for="subject in subjects" :subject="subject" :key="subject.id" />
+        <SubjectItem v-for="subject in [...subjects!.as_student, ...subjects!.as_instructor]" :subject="subject" :key="subject.id" />
     </HomeScreenCard>
 </template>
 
diff --git a/frontend/src/queries/Subject.ts b/frontend/src/queries/Subject.ts
index bde216bd..e598543f 100644
--- a/frontend/src/queries/Subject.ts
+++ b/frontend/src/queries/Subject.ts
@@ -13,6 +13,7 @@ import {
 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";
 
 function SUBJECT_QUERY_KEY(subjectId: number | string): (string | number)[] {
@@ -65,8 +66,8 @@ export function useSubjectUuidQuery(
 /**
  * Query composable for fetching all subjects of the current user
  */
-export function useSubjectsQuery(): UseQueryReturnType<Subject[], Error> {
-    return useQuery<Subject[], Error>({
+export function useSubjectsQuery(): UseQueryReturnType<UserSubjectList, Error> {
+    return useQuery<UserSubjectList, Error>({
         queryKey: SUBJECTS_QUERY_KEY(),
         queryFn: getSubjects,
     });
diff --git a/frontend/src/services/subject.ts b/frontend/src/services/subject.ts
index d12e9719..fea50723 100644
--- a/frontend/src/services/subject.ts
+++ b/frontend/src/services/subject.ts
@@ -1,5 +1,6 @@
 import type User from "@/models/User";
 import type Subject from "@/models/Subject";
+import type { UserSubjectList } from "@/models/Subject";
 import { authorized_fetch } from "@/services";
 
 /**
@@ -19,14 +20,10 @@ export async function getSubjectByUuid(subjectUuid: string): Promise<Subject> {
 /**
  * Fetches all subjects the current user is enrolled in.
  */
-export async function getSubjects(): Promise<Subject[]> {
-    const result = await authorized_fetch<{ as_instructor: Subject[]; as_student: Subject[] }>(
-        "/api/users/me/subjects",
-        {
-            method: "GET",
-        }
-    );
-    return [...result.as_instructor, ...result.as_student];
+export async function getSubjects(): Promise<UserSubjectList> {
+    return await authorized_fetch<UserSubjectList>("/api/users/me/subjects", {
+        method: "GET",
+    });
 }
 
 /**
diff --git a/frontend/src/views/CreateProjectView.vue b/frontend/src/views/CreateProjectView.vue
index d4ef1e87..e491032a 100644
--- a/frontend/src/views/CreateProjectView.vue
+++ b/frontend/src/views/CreateProjectView.vue
@@ -134,8 +134,7 @@ const assistants = computed(
 );
 const subjects = computed(
     () =>
-        // mySubjectsData.value?.as_instructor.map(({ name, id }) => ({ text: name, value: id })) || []
-        subjectsData.value?.map(({ name, id }) => ({ text: name, value: id })) || []
+        subjectsData.value?.as_instructor.map(({ name, id }) => ({ text: name, value: id })) || []
 );
 
 const groupProjectOptions = [
diff --git a/frontend/src/views/subject/SubjectsView.vue b/frontend/src/views/subject/SubjectsView.vue
index df21e02e..88bd257a 100644
--- a/frontend/src/views/subject/SubjectsView.vue
+++ b/frontend/src/views/subject/SubjectsView.vue
@@ -2,6 +2,9 @@
     <div v-if="isError" class="v-container">
         <p>Error: {{ error }}</p>
     </div>
+    <div v-if="isLoading">
+        Loading...
+    </div>
 
     <BackgroundContainer v-else>
         <v-row>
@@ -12,7 +15,7 @@
         <v-row>
             <v-col>
                 <SubjectCard
-                    v-for="(subject, index) in data"
+                    v-for="(subject, index) in subjectsList"
                     :subject="subject"
                     :is-loading="isLoading"
                     :key="index"
@@ -28,8 +31,12 @@ import { useSubjectsQuery } from "@/queries/Subject";
 import BackgroundContainer from "@/components/BackgroundContainer.vue";
 import SubjectsHeaderContainer from "@/components/subjects/SubjectsHeaderContainer.vue";
 import SubjectCard from "@/components/subjects/SubjectCard.vue";
+import {computed} from "vue";
 
-const { data, error, isLoading, isError } = useSubjectsQuery();
+const { data: subjects, error, isLoading, isError } = useSubjectsQuery();
+const subjectsList = computed(() => {
+    return [...subjects.value!.as_student, ...subjects.value!.as_instructor] || [];
+});
 </script>
 
 <style scoped></style>