From ed8b5c919de9167feaf7abe29e152a6c53642cd9 Mon Sep 17 00:00:00 2001
From: Gerald Schmittinger <gerald.schmittinger@ugent.be>
Date: Tue, 1 Apr 2025 16:34:30 +0200
Subject: [PATCH] fix(frontend): Typeringsproblemen opgelost.

---
 frontend/src/components/BrowseThemes.vue               |  9 +++++----
 frontend/src/components/LearningPathsGrid.vue          |  2 +-
 frontend/src/data-objects/theme.ts                     |  8 ++++++++
 frontend/src/queries/learning-objects.ts               |  8 ++++----
 frontend/src/queries/learning-paths.ts                 |  4 ++--
 frontend/src/queries/themes.ts                         |  3 ++-
 frontend/src/views/SingleTheme.vue                     | 10 ++++------
 frontend/src/views/learning-paths/LearningPathPage.vue |  6 +++---
 .../views/learning-paths/LearningPathSearchPage.vue    |  2 +-
 9 files changed, 30 insertions(+), 22 deletions(-)
 create mode 100644 frontend/src/data-objects/theme.ts

diff --git a/frontend/src/components/BrowseThemes.vue b/frontend/src/components/BrowseThemes.vue
index 97ff8352..341f1866 100644
--- a/frontend/src/components/BrowseThemes.vue
+++ b/frontend/src/components/BrowseThemes.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
     import ThemeCard from "@/components/ThemeCard.vue";
-    import { ref, watchEffect, computed } from "vue";
+    import {ref, watchEffect, computed, type Ref} from "vue";
     import { useI18n } from "vue-i18n";
     import { AGE_TO_THEMES, THEMESITEMS } from "@/utils/constants.ts";
     import { useThemeQuery } from "@/queries/themes.ts";
+    import type {Theme} from "@/data-objects/theme.ts";
 
     const props = defineProps({
         selectedTheme: { type: String, required: true },
@@ -15,11 +16,11 @@
 
     const { data: allThemes, isLoading, error } = useThemeQuery(language);
 
-    const allCards = ref([]);
-    const cards = ref([]);
+    const allCards: Ref<Theme[]> = ref([]);
+    const cards: Ref<Theme[]>  = ref([]);
 
     watchEffect(() => {
-        const themes = allThemes.value ?? [];
+        const themes: Theme[] = allThemes.value ?? [];
         allCards.value = themes;
 
         if (props.selectedTheme) {
diff --git a/frontend/src/components/LearningPathsGrid.vue b/frontend/src/components/LearningPathsGrid.vue
index 11aab575..c7c3e1ff 100644
--- a/frontend/src/components/LearningPathsGrid.vue
+++ b/frontend/src/components/LearningPathsGrid.vue
@@ -15,7 +15,7 @@ const props = defineProps<{learningPaths: LearningPath[]}>();
             class="learning-path-card"
             link
             :to="`/learningPath/${learningPath.hruid}/${learningPath.language}/${learningPath.startNode.learningobjectHruid}`"
-            :key="[learningPath.hruid, learningPath.language]"
+            :key="`${learningPath.hruid}/${learningPath.language}`"
             v-for="learningPath in props.learningPaths"
         >
             <v-img
diff --git a/frontend/src/data-objects/theme.ts b/frontend/src/data-objects/theme.ts
new file mode 100644
index 00000000..c54f1cec
--- /dev/null
+++ b/frontend/src/data-objects/theme.ts
@@ -0,0 +1,8 @@
+export interface Theme {
+    key: string;
+    title: string;
+    description: string;
+
+    // URL of the image
+    image: string;
+}
diff --git a/frontend/src/queries/learning-objects.ts b/frontend/src/queries/learning-objects.ts
index df858a36..a721c6b7 100644
--- a/frontend/src/queries/learning-objects.ts
+++ b/frontend/src/queries/learning-objects.ts
@@ -39,13 +39,13 @@ export function useLearningObjectHTMLQuery(
 }
 
 export function useLearningObjectListForPathQuery(
-    learningPath: MaybeRefOrGetter<LearningPath>
-): UseQueryReturnType<LearningObject, Error> {
+    learningPath: MaybeRefOrGetter<LearningPath | undefined>
+): UseQueryReturnType<LearningObject[], Error> {
     return useQuery({
         queryKey: [LEARNING_OBJECT_KEY, "onPath", learningPath],
         queryFn: async () => {
-            const learningObjects = [];
-            for (const node of toValue(learningPath).nodesAsList) {
+            const learningObjects: Promise<LearningObject>[] = [];
+            for (const node of toValue(learningPath)!.nodesAsList) {
                 learningObjects.push(
                     learningObjectController.getMetadata(node.learningobjectHruid, node.language, node.version)
                 );
diff --git a/frontend/src/queries/learning-paths.ts b/frontend/src/queries/learning-paths.ts
index 032aa493..f731d80f 100644
--- a/frontend/src/queries/learning-paths.ts
+++ b/frontend/src/queries/learning-paths.ts
@@ -33,12 +33,12 @@ export function useGetAllLearningPathsByThemeQuery(
 }
 
 export function useSearchLearningPathQuery(
-    query: MaybeRefOrGetter<string>
+    query: MaybeRefOrGetter<string | undefined>
 ): UseQueryReturnType<LearningPath[], Error>  {
     return useQuery({
         queryKey: [LEARNING_PATH_KEY, "search", query],
         queryFn: async () => {
-            const queryVal = toValue(query);
+            const queryVal = toValue(query)!;
             return learningPathController.search(queryVal);
         },
         enabled: () => Boolean(toValue(query)),
diff --git a/frontend/src/queries/themes.ts b/frontend/src/queries/themes.ts
index a8c2a87c..fe7be611 100644
--- a/frontend/src/queries/themes.ts
+++ b/frontend/src/queries/themes.ts
@@ -1,10 +1,11 @@
 import { useQuery, type UseQueryReturnType } from "@tanstack/vue-query";
 import { getThemeController } from "@/controllers/controllers";
 import { type MaybeRefOrGetter, toValue } from "vue";
+import type {Theme} from "@/data-objects/theme.ts";
 
 const themeController = getThemeController();
 
-export function useThemeQuery(language: MaybeRefOrGetter<string>): UseQueryReturnType<unknown, Error> {
+export function useThemeQuery(language: MaybeRefOrGetter<string>): UseQueryReturnType<Theme[], Error> {
     return useQuery({
         queryKey: ["themes", language],
         queryFn: async () => {
diff --git a/frontend/src/views/SingleTheme.vue b/frontend/src/views/SingleTheme.vue
index 0f347cf2..96e7cd18 100644
--- a/frontend/src/views/SingleTheme.vue
+++ b/frontend/src/views/SingleTheme.vue
@@ -14,9 +14,7 @@ const language = computed(() => locale.value);
 
 const themeQueryResult = useThemeQuery(language);
 
-const currentThemeInfo = computed(() =>
-    themeQueryResult.isSuccess.value ? themeQueryResult.data.value.filter(it => it.key === props.theme)[0] : undefined
-);
+const currentThemeInfo = computed(() => themeQueryResult.data.value?.find(it => it.key === props.theme));
 
 const learningPathsForThemeQueryResult = useGetAllLearningPathsByThemeQuery(() => props.theme);
 
@@ -26,7 +24,7 @@ const searchFilter = ref("");
 function filterLearningPaths(learningPaths: LearningPath[]): LearningPath[] {
     return learningPaths.filter(it =>
         it.title.toLowerCase().includes(searchFilter.value.toLowerCase())
-        || it.description.toLowerCase().includes(searchFilter.value.toLowerCase)
+        || it.description.toLowerCase().includes(searchFilter.value.toLowerCase())
     );
 }
 
@@ -35,8 +33,8 @@ function filterLearningPaths(learningPaths: LearningPath[]): LearningPath[] {
 <template>
     <div class="container">
         <using-query-result :query-result="themeQueryResult">
-            <h1>{{ currentThemeInfo.title }}</h1>
-            <p>{{ currentThemeInfo.description }}</p>
+            <h1>{{ currentThemeInfo!!.title }}</h1>
+            <p>{{ currentThemeInfo!!.description }}</p>
             <div class="search-field-container">
                 <v-text-field
                     class="search-field"
diff --git a/frontend/src/views/learning-paths/LearningPathPage.vue b/frontend/src/views/learning-paths/LearningPathPage.vue
index 5b1a1392..50c3ab34 100644
--- a/frontend/src/views/learning-paths/LearningPathPage.vue
+++ b/frontend/src/views/learning-paths/LearningPathPage.vue
@@ -45,7 +45,7 @@
     const learningObjectListQueryResult = useLearningObjectListForPathQuery(learningPathQueryResult.data);
 
     const nodesList: ComputedRef<LearningPathNode[] | null> = computed(() =>
-        learningPathQueryResult.isSuccess ? learningPathQueryResult.data.value?.nodesAsList : null
+        learningPathQueryResult.data.value?.nodesAsList ?? null
     );
 
     const currentNode = computed(() => {
@@ -71,11 +71,11 @@
 
     function isLearningObjectCompleted(learningObject: LearningObject): boolean {
         if (learningObjectListQueryResult.isSuccess) {
-            return learningPathQueryResult.data.value.nodesAsList.find(it =>
+            return learningPathQueryResult.data.value?.nodesAsList?.find(it =>
                 it.learningobjectHruid === learningObject.key
                 && it.version === learningObject.version
                 && it.language === learningObject.language
-            ).done;
+            )?.done ?? false;
         }
         return false;
     }
diff --git a/frontend/src/views/learning-paths/LearningPathSearchPage.vue b/frontend/src/views/learning-paths/LearningPathSearchPage.vue
index 4220457d..476f2aa2 100644
--- a/frontend/src/views/learning-paths/LearningPathSearchPage.vue
+++ b/frontend/src/views/learning-paths/LearningPathSearchPage.vue
@@ -11,7 +11,7 @@
     const route = useRoute();
     const { t } = useI18n();
 
-    const query = computed(() => route.query.query as string | null);
+    const query = computed(() => route.query.query as string | undefined);
 
     const searchQueryResults = useSearchLearningPathQuery(query);
 </script>