remove await functions on pages

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

package-lock.json

@@ -8,6 +8,7 @@
       "version": "0.1.0",
       "dependencies": {
         "@prisma/client": "^3.8.1",
+        "@vueuse/core": "^7.5.5",
         "axios": "^0.25.0",
         "fastify": "^3.27.0",
         "fastify-compress": "^4.0.1",
@@ -895,6 +896,78 @@
         "vue": "^3.0.1"
       }
     },
+    "node_modules/@vueuse/core": {
+      "version": "7.5.5",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-7.5.5.tgz",
+      "integrity": "sha512-RBDqmIoGfak4h3xdXa/Av+ibkb8NY044wEy6+PG2FAWNaID8/FkqmSFjbxogrbmpSX1yZ1PBHrM8DUp/FrIpbg==",
+      "dependencies": {
+        "@vueuse/shared": "7.5.5",
+        "vue-demi": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.1.0",
+        "vue": "^2.6.0 || ^3.2.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        },
+        "vue": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vueuse/core/node_modules/@vueuse/shared": {
+      "version": "7.5.5",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-7.5.5.tgz",
+      "integrity": "sha512-mzzTsotHQRPnPAChy8iCv6ek/90CKYhAFyMRgNsMxpT0afZJkbMO/X0OaOu/1NuGbgb8UVjlsWKmCUgKTOF5hA==",
+      "dependencies": {
+        "vue-demi": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.1.0",
+        "vue": "^2.6.0 || ^3.2.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        },
+        "vue": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vueuse/core/node_modules/vue-demi": {
+      "version": "0.12.1",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.12.1.tgz",
+      "integrity": "sha512-QL3ny+wX8c6Xm1/EZylbgzdoDolye+VpCXRhI2hug9dJTP3OUJ3lmiKN3CsVV3mOJKwFi0nsstbgob0vG7aoIw==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/abab": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.5.tgz",
@@ -7585,6 +7658,31 @@
       "dev": true,
       "requires": {}
     },
+    "@vueuse/core": {
+      "version": "7.5.5",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-7.5.5.tgz",
+      "integrity": "sha512-RBDqmIoGfak4h3xdXa/Av+ibkb8NY044wEy6+PG2FAWNaID8/FkqmSFjbxogrbmpSX1yZ1PBHrM8DUp/FrIpbg==",
+      "requires": {
+        "@vueuse/shared": "7.5.5",
+        "vue-demi": "*"
+      },
+      "dependencies": {
+        "@vueuse/shared": {
+          "version": "7.5.5",
+          "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-7.5.5.tgz",
+          "integrity": "sha512-mzzTsotHQRPnPAChy8iCv6ek/90CKYhAFyMRgNsMxpT0afZJkbMO/X0OaOu/1NuGbgb8UVjlsWKmCUgKTOF5hA==",
+          "requires": {
+            "vue-demi": "*"
+          }
+        },
+        "vue-demi": {
+          "version": "0.12.1",
+          "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.12.1.tgz",
+          "integrity": "sha512-QL3ny+wX8c6Xm1/EZylbgzdoDolye+VpCXRhI2hug9dJTP3OUJ3lmiKN3CsVV3mOJKwFi0nsstbgob0vG7aoIw==",
+          "requires": {}
+        }
+      }
+    },
     "abab": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.5.tgz",

package.json

@@ -18,6 +18,7 @@
   },
   "dependencies": {
     "@prisma/client": "^3.8.1",
+    "@vueuse/core": "^7.5.5",
     "axios": "^0.25.0",
     "fastify": "^3.27.0",
     "fastify-compress": "^4.0.1",

src/App.vue

@@ -1,27 +1,8 @@
 <template>
   <div class="app max-w-[900px] mx-auto p-10">
     <main>
-      <router-view v-slot="{ Component }">
-        <template v-if="Component">
-          <keep-alive>
-            <suspense>
-              <component :is="Component"></component>
-              <template #fallback>
-                <div
-                  class="flex flex-row space-x-2 items-center content-center justify-center m-20"
-                >
-                  <IconSpinner class="w-4 h-4" />
-                  <span> Lade Daten... </span>
-                </div>
-              </template>
-            </suspense>
-          </keep-alive>
-        </template>
-      </router-view>
+      <router-view />
     </main>
     <modal-overlay />
   </div>
 </template>
-<script setup lang="ts">
-import IconSpinner from '@/components/icons/IconSpinner.vue'
-</script>

src/components/icons/IconError.vue

@@ -0,0 +1,8 @@
+<template>
+  <svg viewBox="0 0 24 24">
+    <path
+      fill="currentColor"
+      d="M11,15H13V17H11V15M11,7H13V13H11V7M12,2C6.47,2 2,6.5 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20Z"
+    />
+  </svg>
+</template>

src/components/icons/index.ts

@@ -0,0 +1,5 @@
+export { default as IconError } from './IconError.vue'
+export { default as IconCart } from './IconCart.vue'
+export { default as IconImagePlaceholder } from './IconImagePlaceholder.vue'
+export { default as IconLink } from './IconLink.vue'
+export { default as IconSpinner } from './IconSpinner.vue'

src/composables/useWishlistStore.ts

@@ -1,21 +1,36 @@
 import apiService from '@/services/apiService'
 import { Wishlist, WishlistItem } from '@/types'
-import { reactive } from 'vue'
+import { ref } from 'vue'
+import { toReactive } from '@vueuse/core'
 const apiClient = apiService.getClient()
 
-const getBySlugUrl = async (slugText: string): Promise<Wishlist> => {
-  const { data } = await apiClient.get(`/wishlist/${slugText}`)
-  return data
+const refState = ref<Wishlist | any>({})
+const isLoading = ref(false)
+const hasError = ref(false)
+
+const fetchBySlugUrl = async (slugText: string): Promise<void> => {
+  isLoading.value = true
+  try {
+    const { data } = await apiClient.get(`/wishlist/${slugText}`)
+    refState.value = data
+  } catch (error: any) {
+    console.error(error)
+    hasError.value = true
+  } finally {
+    isLoading.value = false
+  }
 }
 
 const updateItem = async (item: WishlistItem): Promise<void> => {
   await apiClient.put(`/wishlist/${item.wishlistId}/item/${item.id}`, item)
 }
 
-export const useWishlistStore = async (slugText: string) => {
-  const list = reactive(await getBySlugUrl(slugText))
-  return reactive({
-    list,
+export const useWishlistStore = (slugText: string) => {
+  fetchBySlugUrl(slugText)
+  return {
+    list: toReactive(refState),
+    isLoading,
+    hasError,
     updateItem,
-  })
+  }
 }

src/composables/useWishlistsStore.ts

@@ -1,17 +1,30 @@
 import apiService from '@/services/apiService'
 import { Wishlist } from '@/types'
-import { reactive } from 'vue'
+import { ref } from 'vue'
 const apiClient = apiService.getClient()
 const prefix = '/wishlist'
 
-export const getAll = async (): Promise<Wishlist[]> => {
-  const { data } = await apiClient.get(prefix)
-  return data
+const refState = ref<Wishlist[]>([])
+const isLoading = ref(false)
+const hasError = ref(false)
+
+export const loadAll = async (): Promise<void> => {
+  isLoading.value = true
+  try {
+    const { data } = await apiClient.get(prefix)
+    refState.value = data
+  } catch (error: any) {
+    hasError.value = true
+  } finally {
+    isLoading.value = false
+  }
 }
 
-export const useWishlistsStore = async () => {
-  const lists = reactive(await getAll())
-  return reactive({
-    lists,
-  })
+export const useWishlistsStore = () => {
+  loadAll()
+  return {
+    lists: refState,
+    hasError,
+    isLoading,
+  }
 }

src/views/DetailView.vue

@@ -2,14 +2,16 @@
 import { WishlistItem as WishlistItemType } from '@/types'
 import { useRoute } from 'vue-router'
 import Tile from '@/components/Tile.vue'
+import { IconSpinner, IconError } from '@/components/icons'
 import WishlistItem from '@/components/WishlistItem.vue'
 import { useWishlistStore, useModal } from '@/composables'
 import { computed } from 'vue'
 
 const route = useRoute()
 const modal = useModal()
-const wishlistStore = await useWishlistStore(route.params.slug as string)
-const list = wishlistStore.list
+const { list, isLoading, hasError, updateItem } = useWishlistStore(
+  route.params.slug as string
+)
 const notBoughtItems = computed(() => {
   return list.items.filter((item: WishlistItemType) => item.bought === false)
 })
@@ -21,35 +23,51 @@ const bought = async (item: WishlistItemType): Promise<void> => {
   )
   if (confirmed) {
     item.bought = true
-    wishlistStore.updateItem(item)
+    updateItem(item)
   }
 }
 </script>
 
 <template>
   <div
-    class="flex flex-col md:flex-row space-x-0 md:space-x-6 space-y-2 md:space-y-0 items-center"
+    v-if="isLoading"
+    class="flex flex-row space-x-2 items-center content-center justify-center m-20"
   >
-    <Tile :image-src="list.imageSrc" class="shrink-0"></Tile>
-    <div>
-      <h1 class="text-2xl font-bold text-center md:text-left mb-2">
-        {{ list.title }}
-      </h1>
-      <p v-if="list.description" class="text-lg">
-        {{ list.description }}
-      </p>
+    <IconSpinner class="w-4 h-4" />
+    <span> Lade Wunschliste... </span>
+  </div>
+  <div
+    v-else-if="hasError"
+    class="flex flex-row space-x-2 items-center content-center justify-center m-20 text-red-500"
+  >
+    <IconError class="w-4 - h-4" />
+    <span> Es ist ein Fehler aufgetreten... </span>
+  </div>
+  <div v-else>
+    <div
+      class="flex flex-col md:flex-row space-x-0 md:space-x-6 space-y-2 md:space-y-0 items-center"
+    >
+      <Tile :image-src="list.imageSrc" class="shrink-0"></Tile>
+      <div>
+        <h1 class="text-2xl font-bold text-center md:text-left mb-2">
+          {{ list.title }}
+        </h1>
+        <p v-if="list.description" class="text-lg">
+          {{ list.description }}
+        </p>
+      </div>
+    </div>
+    <div class="flex flex-col space-y-14 md:space-y-8 my-10">
+      <WishlistItem
+        v-for="(item, index) in notBoughtItems"
+        :key="index"
+        :title="item.title"
+        :url="item.url"
+        :image="item.imageSrc"
+        :description="item.description"
+        :comment="item.comment"
+        @bought="bought(item)"
+      />
     </div>
   </div>
-  <div class="flex flex-col space-y-14 md:space-y-8 my-10">
-    <WishlistItem
-      v-for="(item, index) in notBoughtItems"
-      :key="index"
-      :title="item.title"
-      :url="item.url"
-      :image="item.imageSrc"
-      :description="item.description"
-      :comment="item.comment"
-      @bought="bought(item)"
-    />
-  </div>
 </template>

src/views/HomeView.vue

@@ -1,13 +1,27 @@
 <script setup lang="ts">
 import Tile from '@/components/Tile.vue'
+import { IconSpinner, IconError } from '@/components/icons'
 import { useWishlistsStore } from '@/composables'
-const wishlistStore = await useWishlistsStore()
-const lists = wishlistStore.lists
+const { lists, isLoading, hasError } = useWishlistsStore()
 </script>
 
 <template>
   <h1 class="text-3xl text-center">Wunschlisten</h1>
-  <div class="flex flex-row flex-wrap justify-around p-10">
+  <div
+    v-if="isLoading"
+    class="flex flex-row space-x-2 items-center content-center justify-center m-20"
+  >
+    <IconSpinner class="w-4 h-4" />
+    <span> Lade Wunschlisten... </span>
+  </div>
+  <div
+    v-else-if="hasError"
+    class="flex flex-row space-x-2 items-center content-center justify-center m-20 text-red-500"
+  >
+    <IconError class="w-4 - h-4" />
+    <span> Es ist ein Fehler aufgetreten... </span>
+  </div>
+  <div v-else class="flex flex-row flex-wrap justify-around p-10">
     <router-link
       v-for="(item, index) in lists"
       :key="index"