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 }
+})

frontend/rabbi_gerzi/src/views/ElementPage.vue

@@ -1,9 +1,13 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { storeToRefs } from 'pinia'
+import { computed, watch } from 'vue'
 import { useRoute } from 'vue-router'
 import SiteHeader from '@/components/SiteHeader.vue'
+import { useElementsStore } from '@/stores/elements'
 
 const route = useRoute()
+const elementsStore = useElementsStore()
+const { element, isLoading, error } = storeToRefs(elementsStore)
 
 const elementId = computed(() => {
   const routeElementId = route.params.id
@@ -14,13 +18,35 @@ const elementId = computed(() => {
 
   return routeElementId
 })
+
+watch(
+  elementId,
+  (currentElementId) => {
+    if (typeof currentElementId !== 'string' || currentElementId === '') {
+      return
+    }
+
+    void elementsStore.fetchElement(currentElementId)
+  },
+  { immediate: true },
+)
 </script>
 
 <template>
   <div class="element-page">
     <SiteHeader />
     <main class="element-page__main" data-cy="element-page">
-      <h1 class="element-page__heading">Element {{ elementId }}</h1>
+      <p v-if="isLoading" class="element-page__status">Loading element...</p>
+      <p
+        v-else-if="error"
+        class="element-page__status element-page__status--error"
+        data-cy="element-error"
+      >
+        {{ error }}
+      </p>
+      <h1 v-else-if="element" class="element-page__heading">
+        {{ element.title }}
+      </h1>
     </main>
   </div>
 </template>
@@ -46,6 +72,22 @@ const elementId = computed(() => {
   text-align: center;
 }
 
+.element-page__status {
+  max-width: 48rem;
+  margin: 0 auto;
+  padding: 1rem 1.25rem;
+  color: var(--color-text-muted);
+  background: var(--color-white);
+  border: 1px solid var(--color-border);
+  border-radius: 8px;
+  font-size: 0.95rem;
+}
+
+.element-page__status--error {
+  color: #7c2d2d;
+  border-color: #e5b8b8;
+}
+
 @media (max-width: 768px) {
   .element-page__main {
     padding: 3rem 1rem;