small changes

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

src/composables/useWishlistStore.ts

@@ -4,12 +4,12 @@ import { AxiosError } from 'axios'
 import { ref } from 'vue'
 const { client } = useAxios()
 
-const list = ref<Wishlist | null>(null)
+const state = ref<Wishlist | null>(null)
 
 const fetch = async (slugText: string): Promise<void> => {
   try {
     const { data } = await client.get(`/wishlist/${slugText}`)
-    list.value = data
+    state.value = data
   } catch (e: any) {
     if (e.isAxiosError && !(<AxiosError>e.ignore)) {
       throw e
@@ -18,12 +18,13 @@ const fetch = async (slugText: string): Promise<void> => {
 }
 
 const itemBought = async (item: WishlistItem): Promise<void> => {
-  await client.post(`/wishlist/${item.wishlistId}/item/${item.id}/bought`, item)
+  await client.post(`/wishlist/${item.wishlistId}/item/${item.id}/bought`)
+  item.bought = true
 }
 
 export const useWishlistStore = () => {
   return {
-    list,
+    state,
     fetch,
     itemBought,
   }

src/composables/useWishlistsStore.ts

@@ -1,19 +1,19 @@
 import useAxios from '@/composables/useAxios'
 import { Wishlist } from '@/types'
-import { ref } from 'vue'
+import { readonly, ref } from 'vue'
 const { client } = useAxios()
 const prefix = '/wishlist'
 
-const refState = ref<Wishlist[]>([])
+const state = ref<Wishlist[]>([])
 
 export const fetch = async (): Promise<void> => {
   const { data } = await client.get(prefix)
-  refState.value = data
+  state.value = data
 }
 
 export const useWishlistsStore = () => {
   return {
-    lists: refState,
+    state: readonly(state),
     fetch,
   }
 }

src/types.ts

@@ -1,5 +1,5 @@
 export interface WishlistItem {
-  id: string
+  id: number
   title: string
   url: string
   imageSrc: string

src/views/DetailView.vue

@@ -13,11 +13,11 @@ const modal = useModal()
 
 const { t } = useI18n()
 
-const { list, fetch, itemBought } = useWishlistStore()
+const { state, fetch, itemBought } = useWishlistStore()
 await fetch(route.params.slug as string)
 
 const notBoughtItems = computed(() => {
-  return list.value?.items?.filter(
+  return state.value?.items?.filter(
     (item: WishlistItemType) => item.bought === false
   )
 })
@@ -30,24 +30,23 @@ const bought = async (item: WishlistItemType): Promise<void> => {
     t('pages.detail-view.confirmation-modal.body.text')
   )
   if (confirmed) {
-    item.bought = true
     itemBought(item)
   }
 }
 </script>
 
 <template>
-  <div v-if="list !== null" class="h-full">
+  <div v-if="state !== null" class="h-full">
     <div
       class="flex flex-col items-center space-x-0 space-y-2 md:flex-row md:space-x-6 md:space-y-0"
     >
-      <Tile :image-src="list.imageSrc" class="shrink-0"></Tile>
+      <Tile :image-src="state.imageSrc" class="shrink-0"></Tile>
       <div>
         <h1 class="mb-2 text-center text-2xl font-bold md:text-left">
-          {{ list.title }}
+          {{ state.title }}
         </h1>
-        <p v-if="list.description" class="text-lg">
-          {{ list.description }}
+        <p v-if="state.description" class="text-lg">
+          {{ state.description }}
         </p>
       </div>
     </div>

src/views/HomeView.vue

@@ -4,7 +4,7 @@ import Tile from '@/components/Tile.vue'
 import { useWishlistsStore } from '@/composables'
 
 const { t } = useI18n()
-const { lists, fetch } = useWishlistsStore()
+const { state: wishlists, fetch } = useWishlistsStore()
 await fetch()
 </script>
 
@@ -12,9 +12,9 @@ await fetch()
   <h1 class="text-semibold text-center text-3xl">
     {{ t('common.app-title.text') }}
   </h1>
-  <div v-if="lists" class="flex flex-row flex-wrap justify-around p-10">
+  <div v-if="wishlists" class="flex flex-row flex-wrap justify-around p-10">
     <router-link
-      v-for="(item, index) in lists"
+      v-for="(item, index) in wishlists"
       :key="index"
       :to="'/' + item.slugUrlText"
     >