some improvments

Signed-off-by: Benny Samir Hierl <bennysamir@posteo.de>

src/App.vue

@@ -11,19 +11,7 @@
             <IconError class="h-4 w-4 fill-red-500" />
             <span>{{ t('errors.generic.text') }}</span>
           </div>
-          <suspense v-else>
+          <component v-else :is="Component"></component>
-            <template #default>
-              <component :is="Component"></component>
-            </template>
-            <template #fallback>
-              <div
-                class="m-20 flex flex-row content-center items-center justify-center space-x-2"
-              >
-                <IconSpinner class="h-4 w-4" />
-                <span> {{ t('common.loading.text') }} </span>
-              </div>
-            </template>
-          </suspense>
         </template>
       </router-view>
     </main>
@@ -31,6 +19,7 @@
   </div>
 </template>
 <script setup lang="ts">
+import { useTitle } from '@vueuse/core'
 import { onErrorCaptured, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 const { t } = useI18n()
@@ -40,6 +29,8 @@ const error = ref()
 onErrorCaptured((e: unknown) => {
   console.error(e)
   error.value = e
+
+  useTitle(t('errors.generic.text'))
   return false
 })
 </script>

src/composables/useFetch.ts

@@ -1,13 +1,14 @@
 import { apiConfig } from '@/config'
 import { useAuth } from './useAuth'
 import { createFetch } from '@vueuse/core'
+import router from '../router'
 
 const { token } = useAuth()
 
 export const useFetch = createFetch({
   baseUrl: apiConfig.baseURL,
   options: {
-    async beforeFetch({ options }) {
+    beforeFetch({ options }) {
       if (token.value) {
         options.headers = {
           ...options.headers,
@@ -17,5 +18,12 @@ export const useFetch = createFetch({
 
       return { options }
     },
+    onFetchError(ctx) {
+      if (ctx.data && ctx.data.statusCode === 404) {
+        router.push({ name: 'notFound' })
+      }
+
+      return ctx
+    },
   },
 })

src/composables/useWishlistStore.ts

@@ -13,7 +13,10 @@ const update = async (updatedData: Wishlist): Promise<void> => {
     ...state.value,
     ...updatedData,
   }
-  const { data } = await useFetch(`/wishlist/${id}`).put(payload).json()
+  const { data, error } = await useFetch(`/wishlist/${id}`).put(payload).json()
+  if (error.value) {
+    throw error.value
+  }
   state.value = {
     ...state.value,
     ...(<Wishlist>data.value),
@@ -25,7 +28,12 @@ const createItem = async (values: WishlistItem): Promise<void> => {
   const payload = {
     ...values,
   }
-  const { data } = await useFetch(`/wishlist/${id}/item`).post(payload).json()
+  const { data, error } = await useFetch(`/wishlist/${id}/item`)
+    .post(payload)
+    .json()
+  if (error.value) {
+    throw error.value
+  }
   state.value?.items?.push(unref(data))
 }
 
@@ -39,9 +47,14 @@ const updateItem = async (
     ...newValues,
   }
 
-  const { data } = await useFetch(`/wishlist/${id}/item/${currentValues.id}`)
+  const { data, error } = await useFetch(
+    `/wishlist/${id}/item/${currentValues.id}`
+  )
     .put(payload)
     .json()
+  if (error.value) {
+    throw error.value
+  }
   state.value?.items?.splice(
     state.value.items.indexOf(currentValues),
     1,
@@ -50,12 +63,22 @@ const updateItem = async (
 }
 
 const itemBought = async (item: WishlistItem): Promise<void> => {
-  await useFetch(`/wishlist/${item.wishlistId}/item/${item.id}/bought`).post()
+  const { error } = await useFetch(
+    `/wishlist/${item.wishlistId}/item/${item.id}/bought`
+  ).post()
+  if (error.value) {
+    throw error.value
+  }
   item.bought = true
 }
 
 const itemDelete = async (item: WishlistItem): Promise<void> => {
-  await useFetch(`/wishlist/${item.wishlistId}/item/${item.id}`).delete()
+  const { error } = await useFetch(
+    `/wishlist/${item.wishlistId}/item/${item.id}`
+  ).delete()
+  if (error.value) {
+    throw error.value
+  }
   state.value?.items?.splice(state.value.items.indexOf(item), 1)
 }
 

src/views/DetailView.vue

@@ -87,10 +87,17 @@ const handleDeleteItem = async (item: WishlistItemType): Promise<void> => {
 </script>
 
 <template>
-  <div v-if="isFinished" class="h-full">
+  <div class="h-full">
+    <div
+      v-if="!isFinished"
+      class="m-20 flex flex-row content-center items-center justify-center space-x-2"
+    >
+      <IconSpinner class="h-4 w-4" />
+      <span> {{ t('common.loading.text') }} </span>
+    </div>
+    <div v-else-if="state !== undefined">
       <div
         class="flex flex-col items-center space-x-0 space-y-2 md:flex-row md:space-x-6 md:space-y-0"
-      v-if="state !== undefined"
       >
         <ImageTile :image-src="state.imageSrc" class="shrink-0"></ImageTile>
         <div v-if="!editModeIsActive">
@@ -132,9 +139,9 @@ const handleDeleteItem = async (item: WishlistItemType): Promise<void> => {
           class="flex flex-col flex-wrap items-center justify-center text-center text-xl text-gray-600/75 dark:text-white/70 sm:flex-row sm:space-x-2 sm:text-left"
         >
           <IconNoGift class="h-10 w-10 fill-gray-600/75 dark:fill-white/70" />
-
           <span>{{ t('pages.detail-view.main.empty-list.text') }}</span>
         </div>
       </div>
     </div>
+  </div>
 </template>

src/views/NotFoundView.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
+import { useTitle } from '@vueuse/core'
 import { useI18n } from 'vue-i18n'
 const { t } = useI18n()
+useTitle(t('errors.not-found.text'))
 </script>
 
 <template>