From 2b509774b82ceae346b1c02e6d9895e4ecfa1f57 Mon Sep 17 00:00:00 2001
From: Gabriellvl <vanlangenhovefga@gmail.com>
Date: Sat, 22 Mar 2025 00:59:37 +0100
Subject: [PATCH] feat: tan stack theme query

---
 backend/src/controllers/themes.ts        |   6 ++
 frontend/package.json                    |   8 +-
 frontend/src/components/BrowseThemes.vue |  98 ++++++++------------
 frontend/src/main.ts                     |  13 +++
 frontend/src/queries/themes.ts           |  25 +++++
 package-lock.json                        | 111 +++++++++++++++++++++++
 6 files changed, 197 insertions(+), 64 deletions(-)
 create mode 100644 frontend/src/queries/themes.ts

diff --git a/backend/src/controllers/themes.ts b/backend/src/controllers/themes.ts
index 61a1a834..4cfbaa60 100644
--- a/backend/src/controllers/themes.ts
+++ b/backend/src/controllers/themes.ts
@@ -23,6 +23,12 @@ export function getThemes(req: Request, res: Response) {
 
 export function getThemeByTitle(req: Request, res: Response) {
     const themeKey = req.params.theme;
+
+    if (!theme) {
+        res.status(400).json({ error: 'Missing required field: theme' });
+        return;
+    }
+
     const theme = themes.find((t) => t.title === themeKey);
 
     if (theme) {
diff --git a/frontend/package.json b/frontend/package.json
index ac1efc4a..e8133004 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -16,12 +16,14 @@
         "test:e2e": "playwright test"
     },
     "dependencies": {
+        "@tanstack/react-query": "^5.69.0",
+        "@tanstack/vue-query": "^5.69.0",
+        "axios": "^1.8.2",
+        "oidc-client-ts": "^3.1.0",
         "vue": "^3.5.13",
         "vue-i18n": "^11.1.2",
         "vue-router": "^4.5.0",
-        "vuetify": "^3.7.12",
-        "oidc-client-ts": "^3.1.0",
-        "axios": "^1.8.2"
+        "vuetify": "^3.7.12"
     },
     "devDependencies": {
         "@playwright/test": "^1.50.1",
diff --git a/frontend/src/components/BrowseThemes.vue b/frontend/src/components/BrowseThemes.vue
index d3edcc89..eeea2c81 100644
--- a/frontend/src/components/BrowseThemes.vue
+++ b/frontend/src/components/BrowseThemes.vue
@@ -1,76 +1,52 @@
 <script setup lang="ts">
-    import ThemeCard from "@/components/ThemeCard.vue";
-    import { ref, onMounted, watch } from "vue";
-    import { useI18n } from "vue-i18n";
-    import {AGE_TO_THEMES, THEMESITEMS} from "@/utils/constants.ts";
-    import {getAllThemes} from "@/controllers/themes.ts";
-    import {getThemeController} from "@/controllers/controllers.ts";
+import ThemeCard from "@/components/ThemeCard.vue";
+import { ref, watchEffect, computed } from "vue";
+import { useI18n } from "vue-i18n";
+import { AGE_TO_THEMES, THEMESITEMS } from "@/utils/constants.ts";
+import { useThemeQuery } from "@/queries/themes.ts";
 
-    // Receive the selectedTheme and selectedAge from the parent component
-    const props = defineProps({
-        selectedTheme: {
-            type: String,
-            required: true
-        },
-        selectedAge: {
-            type: String,
-            required: true
-        }
-    });
+const props = defineProps({
+    selectedTheme: { type: String, required: true },
+    selectedAge: { type: String, required: true }
+});
 
-    const themeController = getThemeController();
+const { locale } = useI18n();
+const language = computed(() => locale.value);
 
-    const {locale} = useI18n();
+const { data: allThemes, isLoading, error } = useThemeQuery(language);
 
-    const allCards = ref<Array<{ key: string; title: string; description: string; image: string }>>([]);
-    const cards = ref<Array<{ key: string; title: string; description: string; image: string }>>([]);
+const allCards = ref([]);
+const cards = ref([]);
 
-    // Fetch all themes based on the current language
-    async function fetchThemes() {
-        try {
-            // Get the current selected language
-            const language = locale.value;
+watchEffect(() => {
+    const themes = allThemes.value ?? [];
+    allCards.value = themes;
 
-            // Update the cards value with the fetched themes
-            allCards.value = await themeController.getAll(language);
-            cards.value = allCards.value;
-        } catch (error) {
-            console.error("Error fetching themes:", error);
-        }
+    if (props.selectedTheme) {
+        cards.value = themes.filter((theme) =>
+            THEMESITEMS[props.selectedTheme]?.includes(theme.key) &&
+            AGE_TO_THEMES[props.selectedAge]?.includes(theme.key)
+        );
+    } else {
+        cards.value = themes;
     }
-
-    // Fetch on mount
-    onMounted(fetchThemes);
-
-    // Re-fetch themes when language changes
-    watch(locale, () => {
-        fetchThemes();
-    });
-
-    // Watch for selectedTheme change and filter themes
-    watch(() => props.selectedTheme, (newTheme) => {
-        if (newTheme) {
-            cards.value = allCards.value.filter(theme => THEMESITEMS[newTheme].includes(theme.key) && AGE_TO_THEMES[props.selectedAge]?.includes(theme.key));
-        } else {
-            cards.value = allCards.value;
-        }
-    });
-
-    // Watch for selectedAge change and filter themes
-    watch(() => props.selectedAge, (newAge) => {
-        if (newAge) {
-            cards.value = allCards.value.filter(theme => THEMESITEMS[props.selectedTheme].includes(theme.key) && AGE_TO_THEMES[newAge]?.includes(theme.key));
-        } else {
-            cards.value = allCards.value;
-        }
-    });
-
-
+});
 </script>
 
+
 <template>
     <v-container>
-        <v-row>
+        <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>
+
+        <v-row v-else>
             <v-col
                 v-for="card in cards"
                 :key="card.key"
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index e4843dae..fc531957 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -10,6 +10,7 @@ import i18n from "./i18n/i18n.ts";
 // Components
 import App from "./App.vue";
 import router from "./router";
+import { VueQueryPlugin, QueryClient } from '@tanstack/vue-query';
 
 const app = createApp(App);
 
@@ -24,6 +25,18 @@ const vuetify = createVuetify({
     components,
     directives,
 });
+
+const queryClient = new QueryClient({
+    defaultOptions: {
+        queries: {
+            retry: 1,
+            refetchOnWindowFocus: false,
+        },
+    },
+});
+
 app.use(vuetify);
 app.use(i18n);
+app.use(VueQueryPlugin, { queryClient });
+
 app.mount("#app");
diff --git a/frontend/src/queries/themes.ts b/frontend/src/queries/themes.ts
new file mode 100644
index 00000000..9892c141
--- /dev/null
+++ b/frontend/src/queries/themes.ts
@@ -0,0 +1,25 @@
+import { useQuery } from '@tanstack/vue-query';
+import { getThemeController } from '@/controllers/controllers';
+import {type MaybeRefOrGetter, toValue} from "vue";
+
+const themeController = getThemeController();
+
+export const useThemeQuery = (language: MaybeRefOrGetter<string>) => {
+    return useQuery({
+        queryKey: ['themes', language],
+        queryFn: () => {
+            const lang = toValue(language);
+            return themeController.getAll(lang);
+        },
+        enabled: () => !!toValue(language),
+    });
+};
+
+export const useThemeHruidsQuery = (themeKey: string | null) => {
+    return useQuery({
+        queryKey: ['theme-hruids', themeKey],
+        queryFn: () => themeController.getHruidsByKey(themeKey!),
+        enabled: !!themeKey,
+    });
+};
+
diff --git a/package-lock.json b/package-lock.json
index 05554162..671d9222 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -91,6 +91,8 @@
             "name": "dwengo-1-frontend",
             "version": "0.1.1",
             "dependencies": {
+                "@tanstack/react-query": "^5.69.0",
+                "@tanstack/vue-query": "^5.69.0",
                 "axios": "^1.8.2",
                 "oidc-client-ts": "^3.1.0",
                 "vue": "^3.5.13",
@@ -2532,6 +2534,99 @@
                 "url": "https://github.com/sponsors/sindresorhus"
             }
         },
+        "node_modules/@tanstack/match-sorter-utils": {
+            "version": "8.19.4",
+            "resolved": "https://registry.npmjs.org/@tanstack/match-sorter-utils/-/match-sorter-utils-8.19.4.tgz",
+            "integrity": "sha512-Wo1iKt2b9OT7d+YGhvEPD3DXvPv2etTusIMhMUoG7fbhmxcXCtIjJDEygy91Y2JFlwGyjqiBPRozme7UD8hoqg==",
+            "license": "MIT",
+            "dependencies": {
+                "remove-accents": "0.5.0"
+            },
+            "engines": {
+                "node": ">=12"
+            },
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/tannerlinsley"
+            }
+        },
+        "node_modules/@tanstack/query-core": {
+            "version": "5.69.0",
+            "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.69.0.tgz",
+            "integrity": "sha512-Kn410jq6vs1P8Nm+ZsRj9H+U3C0kjuEkYLxbiCyn3MDEiYor1j2DGVULqAz62SLZtUZ/e9Xt6xMXiJ3NJ65WyQ==",
+            "license": "MIT",
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/tannerlinsley"
+            }
+        },
+        "node_modules/@tanstack/react-query": {
+            "version": "5.69.0",
+            "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.69.0.tgz",
+            "integrity": "sha512-Ift3IUNQqTcaFa1AiIQ7WCb/PPy8aexZdq9pZWLXhfLcLxH0+PZqJ2xFImxCpdDZrFRZhLJrh76geevS5xjRhA==",
+            "license": "MIT",
+            "dependencies": {
+                "@tanstack/query-core": "5.69.0"
+            },
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/tannerlinsley"
+            },
+            "peerDependencies": {
+                "react": "^18 || ^19"
+            }
+        },
+        "node_modules/@tanstack/vue-query": {
+            "version": "5.69.0",
+            "resolved": "https://registry.npmjs.org/@tanstack/vue-query/-/vue-query-5.69.0.tgz",
+            "integrity": "sha512-JZecDd0b+hZChqV5O1wXBfKoxlEj3aGvRj7upuqWei+oGrT+ERuOU4uQn7/DDVA5TouIt88G3oMFBjE2wKO/6A==",
+            "license": "MIT",
+            "dependencies": {
+                "@tanstack/match-sorter-utils": "^8.19.4",
+                "@tanstack/query-core": "5.69.0",
+                "@vue/devtools-api": "^6.6.3",
+                "vue-demi": "^0.14.10"
+            },
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/tannerlinsley"
+            },
+            "peerDependencies": {
+                "@vue/composition-api": "^1.1.2",
+                "vue": "^2.6.0 || ^3.3.0"
+            },
+            "peerDependenciesMeta": {
+                "@vue/composition-api": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@tanstack/vue-query/node_modules/vue-demi": {
+            "version": "0.14.10",
+            "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
+            "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+            "hasInstallScript": true,
+            "license": "MIT",
+            "bin": {
+                "vue-demi-fix": "bin/vue-demi-fix.js",
+                "vue-demi-switch": "bin/vue-demi-switch.js"
+            },
+            "engines": {
+                "node": ">=12"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/antfu"
+            },
+            "peerDependencies": {
+                "@vue/composition-api": "^1.0.0-rc.1",
+                "vue": "^3.0.0-0 || ^2.6.0"
+            },
+            "peerDependenciesMeta": {
+                "@vue/composition-api": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/@tootallnate/once": {
             "version": "1.1.2",
             "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz",
@@ -9046,6 +9141,16 @@
                 "node": ">=0.10.0"
             }
         },
+        "node_modules/react": {
+            "version": "19.0.0",
+            "resolved": "https://registry.npmjs.org/react/-/react-19.0.0.tgz",
+            "integrity": "sha512-V8AVnmPIICiWpGfm6GLzCR/W5FXLchHop40W4nXBmdlEceh16rCN8O8LNWm5bh5XUX91fh7KpA+W0TgMKmgTpQ==",
+            "license": "MIT",
+            "peer": true,
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
         "node_modules/read-package-json-fast": {
             "version": "4.0.0",
             "resolved": "https://registry.npmjs.org/read-package-json-fast/-/read-package-json-fast-4.0.0.tgz",
@@ -9092,6 +9197,12 @@
             "integrity": "sha512-urBwgfrvVP/eAyXx4hluJivBKzuEbSQs9rKWCrCkbSxNv8mxPcUZKeuoF3Uy4mJl3Lwprp6yy5/39VWigZ4K6Q==",
             "license": "Apache-2.0"
         },
+        "node_modules/remove-accents": {
+            "version": "0.5.0",
+            "resolved": "https://registry.npmjs.org/remove-accents/-/remove-accents-0.5.0.tgz",
+            "integrity": "sha512-8g3/Otx1eJaVD12e31UbJj1YzdtVvzH85HV7t+9MJYk/u3XmkOUJ5Ys9wQrf9PCPK8+xn4ymzqYCiZl6QWKn+A==",
+            "license": "MIT"
+        },
         "node_modules/require-directory": {
             "version": "2.1.1",
             "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",