add child creation

frontend/rabbi_gerzi/src/stores/elements.ts

@@ -29,6 +29,10 @@ export interface UpdateElementInput {
   youtubeUrl: string
 }
 
+export interface CreateChildElementInput {
+  title: string
+}
+
 interface UpdateElementResponse {
   element: Element
 }
@@ -48,6 +52,7 @@ interface ErrorResponse {
 }
 
 const API_BASE_URL = import.meta.env.VITE_API_BASE_URL as string
+const ELEMENTS_URL = `${API_BASE_URL}/api/elements`
 const ELEMENT_UPDATE_URL = `${API_BASE_URL}/api/element/update`
 
 export const useElementsStore = defineStore('elements', () => {
@@ -59,7 +64,9 @@ export const useElementsStore = defineStore('elements', () => {
   const isUploadingIconImage = ref(false)
   const isUploadingShortPdf = ref(false)
   const isUploadingLongPdf = ref(false)
+  const isManagingChildren = ref(false)
   const saveError = ref<string | null>(null)
+  const childActionError = ref<string | null>(null)
 
   async function fetchElement(elementId: string): Promise<void> {
     element.value = null
@@ -101,6 +108,37 @@ export const useElementsStore = defineStore('elements', () => {
     return await saveElementPatch(elementId, input, 'Could not save element')
   }
 
+  async function createChildElement(
+    parentElementId: string,
+    input: CreateChildElementInput,
+  ): Promise<Element | null> {
+    childActionError.value = null
+    isManagingChildren.value = true
+
+    try {
+      const encodedParentElementId = encodeURIComponent(parentElementId)
+      const response = await fetch(
+        `${ELEMENTS_URL}/${encodedParentElementId}/children`,
+        {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          credentials: 'include',
+          body: JSON.stringify(input),
+        },
+      )
+
+      return await handleChildElementResponse(
+        response,
+        'Could not add child element',
+      )
+    } catch {
+      childActionError.value = 'Network error - could not add child element'
+      return null
+    } finally {
+      isManagingChildren.value = false
+    }
+  }
+
   async function clearElementIconImage(elementId: string): Promise<boolean> {
     return await saveElementPatch(
       elementId,
@@ -253,6 +291,29 @@ export const useElementsStore = defineStore('elements', () => {
     return true
   }
 
+  async function handleChildElementResponse(
+    response: Response,
+    failureMessage: string,
+  ): Promise<Element | null> {
+    if (response.status === 401) {
+      childActionError.value = 'Please log in again'
+      return null
+    }
+
+    if (response.status === 400 || response.status === 404) {
+      childActionError.value = await errorMessage(response, failureMessage)
+      return null
+    }
+
+    if (!response.ok) {
+      childActionError.value = failureMessage
+      return null
+    }
+
+    const data: UpdateElementResponse = await response.json()
+    return data.element
+  }
+
   async function errorMessage(
     response: Response,
     fallbackMessage: string,
@@ -274,9 +335,12 @@ export const useElementsStore = defineStore('elements', () => {
     isUploadingIconImage,
     isUploadingShortPdf,
     isUploadingLongPdf,
+    isManagingChildren,
     saveError,
+    childActionError,
     fetchElement,
     updateElement,
+    createChildElement,
     uploadElementIconImage,
     uploadElementShortPdf,
     uploadElementLongPdf,