From 9547c76e801b6760d56472e8f68833ace62e18b8 Mon Sep 17 00:00:00 2001
From: Joyelle Ndagijimana <njoyelle2@gmail.com>
Date: Thu, 20 Mar 2025 11:59:42 +0100
Subject: [PATCH] feat: thema's worden gerefetched van de api als de taal
 veranderd

---
 frontend/src/components/BrowseThemes.vue | 52 +++++++++++++++---------
 frontend/src/components/ThemeCard.vue    |  4 +-
 frontend/src/i18n/locale/de.json         |  3 ++
 frontend/src/i18n/locale/en.json         |  6 ++-
 4 files changed, 42 insertions(+), 23 deletions(-)

diff --git a/frontend/src/components/BrowseThemes.vue b/frontend/src/components/BrowseThemes.vue
index 3ffcb865..19c4ba94 100644
--- a/frontend/src/components/BrowseThemes.vue
+++ b/frontend/src/components/BrowseThemes.vue
@@ -1,18 +1,30 @@
 <script setup lang="ts">
-    import ThemeCard from "@/components/ThemeCard.vue";
-    import {onMounted, ref} from "vue";
-    const cards = ref<Array<{ key: string; title: string; description: string; image: string }>>([]);
+import ThemeCard from "@/components/ThemeCard.vue";
+import { ref, onMounted, watch } from "vue";
+import { useI18n } from "vue-i18n";
 
-    const fetchThemes = async () => {
-        try {
-            const response = await fetch("http://localhost:3000/api/theme");
-            cards.value = await response.json();
-        } catch (error) {
-            console.error("Error fetching themes:", error);
-        }
-    };
+const { locale } = useI18n();
+const cards = ref<Array<{ key: string; title: string; description: string; image: string }>>([]);
+
+// Fetch themes based on the current language
+const fetchThemes = async () => {
+    try {
+        const language = localStorage.getItem("user-lang") || locale.value;
+        const response = await fetch(`http://localhost:3000/api/theme?language=${language}`);
+        cards.value = await response.json();
+        console.log(cards.value);
+    } catch (error) {
+        console.error("Error fetching themes:", error);
+    }
+};
+
+onMounted(fetchThemes);
+
+// Refetch themes when language changes
+watch(locale, () => {
+    fetchThemes();
+});
 
-    onMounted(fetchThemes);
 </script>
 
 <template>
@@ -25,15 +37,15 @@
                 sm="6"
                 md="4"
                 lg="4"
-            class="d-flex"
+                class="d-flex"
             >
-            <ThemeCard
-                :path="card.key"
-                :title="card.title"
-                :description="card.description"
-                :image="card.image"
-                class="fill-height"
-            />
+                <ThemeCard
+                    :path="card.key"
+                    :title="card.title"
+                    :description="card.description"
+                    :image="card.image"
+                    class="fill-height"
+                />
             </v-col>
         </v-row>
     </v-container>
diff --git a/frontend/src/components/ThemeCard.vue b/frontend/src/components/ThemeCard.vue
index f45c6814..2bafa2ce 100644
--- a/frontend/src/components/ThemeCard.vue
+++ b/frontend/src/components/ThemeCard.vue
@@ -22,9 +22,9 @@
                 contain
                 class="title-image"
             ></v-img>
-            <span class="title">{{ t(title) }}</span>
+            <span class="title">{{ title }}</span>
         </v-card-title>
-        <v-card-text class="description flex-grow-1">{{ t(description) }}</v-card-text>
+        <v-card-text class="description flex-grow-1">{{ description }}</v-card-text>
         <v-card-actions>
             <v-btn :to="`theme/${path}`" variant="text">
                 {{ t("read-more") }}
diff --git a/frontend/src/i18n/locale/de.json b/frontend/src/i18n/locale/de.json
index d2572b75..19ff92ee 100644
--- a/frontend/src/i18n/locale/de.json
+++ b/frontend/src/i18n/locale/de.json
@@ -28,5 +28,8 @@
         "upper-secondary": "14-16 jahre alt",
         "high-school": "16-18 jahre alt",
         "older": "18 und älter"
+    },
+    "basics-ai": {
+        "title": "Grundlegende Prinzipien der AI"
     }
 }
diff --git a/frontend/src/i18n/locale/en.json b/frontend/src/i18n/locale/en.json
index 18be114d..3f0bf04b 100644
--- a/frontend/src/i18n/locale/en.json
+++ b/frontend/src/i18n/locale/en.json
@@ -29,5 +29,9 @@
         "high-school": "16-18 years old",
         "older": "18 and older"
     },
-    "read-more": "read-more"
+    "read-more": "read-more",
+    "basics-ai": {
+        "title": "Basic principles of AI",
+        "description": "Under this teaching theme, we combine several activities that cover the basics of artificial intelligence (AI). Students learn what AI is, how it works and how it can be applied in different domains."
+    }
 }