feat: basecontroller

frontend/src/components/BrowseThemes.vue

@@ -3,7 +3,8 @@
     import { ref, onMounted, watch } from "vue";
     import { useI18n } from "vue-i18n";
     import {AGE_TO_THEMES, THEMESITEMS} from "@/utils/constants.ts";
-    import {getAllThemes} from "@/controller/themes.ts";
+    import {getAllThemes} from "@/controllers/themes.ts";
+    import {getThemeController} from "@/controllers/controllers.ts";
 
     // Receive the selectedTheme and selectedAge from the parent component
     const props = defineProps({
@@ -17,6 +18,8 @@
         }
     });
 
+    const themeController = getThemeController();
+
     const {locale} = useI18n();
 
     const allCards = ref<Array<{ key: string; title: string; description: string; image: string }>>([]);
@@ -29,7 +32,7 @@
             const language = locale.value;
 
             // Update the cards value with the fetched themes
-            allCards.value = await getAllThemes(language);
+            allCards.value = await themeController.getAll(language);
             cards.value = allCards.value;
         } catch (error) {
             console.error("Error fetching themes:", error);

frontend/src/controller/fetch.ts

@@ -1,20 +0,0 @@
-export const fetchJson = async <T = any>(url: string, init?: RequestInit): Promise<T> => {
-    const response = await fetch(url, init);
-
-    if (!response.ok) {
-        let errorMessage = `Error ${response.status} ${response.statusText}`;
-
-        try {
-            const errorData = await response.json();
-            if (errorData?.error) {
-                errorMessage = errorData.error;
-            }
-        } catch {
-            // No valid JSON or error property
-        }
-
-        throw new Error(errorMessage);
-    }
-
-    return await response.json();
-};

frontend/src/controller/themes.ts

@@ -1,14 +0,0 @@
-import {fetchJson} from "@/controller/fetch.ts";
-import {API_BASE} from "../../config.ts";
-
-export const getAllThemes = async (language: string | null = null) => {
-    const url = language
-        ? `${API_BASE}/theme?language=${encodeURIComponent(language)}`
-        : `${API_BASE}/theme`;
-    return await fetchJson(url);
-};
-
-export const getHruidsByTheme = async (theme: string) => {
-    const url = `${API_BASE}/theme/${encodeURIComponent(theme)}`;
-    return await fetchJson(url);
-};

frontend/src/controllers/base-controller.ts

@@ -0,0 +1,73 @@
+import { API_BASE } from "../../config.ts";
+
+export class BaseController {
+    protected baseUrl: string;
+
+    constructor(basePath: string) {
+        this.baseUrl = `${API_BASE}/${basePath}`;
+    }
+
+    protected async get<T>(path: string, queryParams?: Record<string, any>): Promise<T> {
+        let url = `${this.baseUrl}${path}`;
+        if (queryParams) {
+            const query = new URLSearchParams();
+            Object.entries(queryParams).forEach(([key, value]) => {
+                if (value !== undefined && value !== null) {
+                    query.append(key, value.toString());
+                }
+            });
+            url += `?${query.toString()}`;
+        }
+
+        const res = await fetch(url);
+        if (!res.ok) {
+            const errorData = await res.json().catch(() => ({}));
+            throw new Error(errorData?.error || `Error ${res.status}: ${res.statusText}`);
+        }
+
+        return res.json();
+    }
+
+    protected async post<T>(path: string, body: unknown): Promise<T> {
+        const res = await fetch(`${this.baseUrl}${path}`, {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify(body),
+        });
+
+        if (!res.ok) {
+            const errorData = await res.json().catch(() => ({}));
+            throw new Error(errorData?.error || `Error ${res.status}: ${res.statusText}`);
+        }
+
+        return res.json();
+    }
+
+    protected async delete<T>(path: string): Promise<T> {
+        const res = await fetch(`${this.baseUrl}${path}`, {
+            method: "DELETE",
+        });
+
+        if (!res.ok) {
+            const errorData = await res.json().catch(() => ({}));
+            throw new Error(errorData?.error || `Error ${res.status}: ${res.statusText}`);
+        }
+
+        return res.json();
+    }
+
+    protected async put<T>(path: string, body: unknown): Promise<T> {
+        const res = await fetch(`${this.baseUrl}${path}`, {
+            method: "PUT",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify(body),
+        });
+
+        if (!res.ok) {
+            const errorData = await res.json().catch(() => ({}));
+            throw new Error(errorData?.error || `Error ${res.status}: ${res.statusText}`);
+        }
+
+        return res.json();
+    }
+}

frontend/src/controllers/controllers.ts

@@ -0,0 +1,14 @@
+import {ThemeController} from "@/controllers/themes.ts";
+
+export function controllerGetter<T>(Factory: new () => T): () => T {
+    let instance: T | undefined;
+
+    return (): T => {
+        if (!instance) {
+            instance = new Factory();
+        }
+        return instance;
+    };
+}
+
+export const getThemeController = controllerGetter(ThemeController);

frontend/src/controllers/themes.ts

@@ -0,0 +1,16 @@
+import {BaseController} from "@/controllers/base-controller.ts";
+
+export class ThemeController extends BaseController {
+    constructor() {
+        super("theme");
+    }
+
+    getAll(language: string | null = null) {
+        const query = language ? { language } : undefined;
+        return this.get<any[]>("/", query);
+    }
+
+    getHruidsByKey(themeKey: string) {
+        return this.get<string[]>(`/${encodeURIComponent(themeKey)}`);
+    }
+}