fetch element title

frontend/rabbi_gerzi/src/stores/elements.ts

@@ -0,0 +1,50 @@
+import { ref } from 'vue'
+import { defineStore } from 'pinia'
+
+export interface Element {
+  id: number
+  title: string
+}
+
+interface ElementResponse {
+  element: Element
+}
+
+const API_BASE_URL = import.meta.env.VITE_API_BASE_URL as string
+
+export const useElementsStore = defineStore('elements', () => {
+  const element = ref<Element | null>(null)
+  const isLoading = ref(false)
+  const error = ref<string | null>(null)
+
+  async function fetchElement(elementId: string): Promise<void> {
+    element.value = null
+    error.value = null
+    isLoading.value = true
+
+    try {
+      const encodedElementId = encodeURIComponent(elementId)
+      const elementUrl = `${API_BASE_URL}/api/elements/${encodedElementId}`
+      const response = await fetch(elementUrl)
+
+      if (response.status === 404) {
+        error.value = 'Element not found'
+        return
+      }
+
+      if (!response.ok) {
+        error.value = 'Could not load element'
+        return
+      }
+
+      const data: ElementResponse = await response.json()
+      element.value = data.element
+    } catch {
+      error.value = 'Network error - could not load element'
+    } finally {
+      isLoading.value = false
+    }
+  }
+
+  return { element, isLoading, error, fetchElement }
+})