From 17dce65127b65f9906de8b574d9eed7eb308338d Mon Sep 17 00:00:00 2001 From: Benny Samir Hierl Date: Wed, 2 Feb 2022 21:37:08 +0100 Subject: [PATCH] remove await functions on pages Signed-off-by: Benny Samir Hierl --- package-lock.json | 98 ++++++++++++++++++++++++++++ package.json | 1 + src/App.vue | 21 +----- src/components/icons/IconError.vue | 8 +++ src/components/icons/index.ts | 5 ++ src/composables/useWishlistStore.ts | 33 +++++++--- src/composables/useWishlistsStore.ts | 31 ++++++--- src/views/DetailView.vue | 66 ++++++++++++------- src/views/HomeView.vue | 20 +++++- 9 files changed, 218 insertions(+), 65 deletions(-) create mode 100644 src/components/icons/IconError.vue create mode 100644 src/components/icons/index.ts diff --git a/package-lock.json b/package-lock.json index 23719a6..f9c97fd 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index bff752f..0b33687 100644 --- a/package.json +++ b/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", diff --git a/src/App.vue b/src/App.vue index 0954f69..852d51b 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,27 +1,8 @@ - diff --git a/src/components/icons/IconError.vue b/src/components/icons/IconError.vue new file mode 100644 index 0000000..350a573 --- /dev/null +++ b/src/components/icons/IconError.vue @@ -0,0 +1,8 @@ + diff --git a/src/components/icons/index.ts b/src/components/icons/index.ts new file mode 100644 index 0000000..d4ca792 --- /dev/null +++ b/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' diff --git a/src/composables/useWishlistStore.ts b/src/composables/useWishlistStore.ts index fa93a98..3505791 100644 --- a/src/composables/useWishlistStore.ts +++ b/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 => { - const { data } = await apiClient.get(`/wishlist/${slugText}`) - return data +const refState = ref({}) +const isLoading = ref(false) +const hasError = ref(false) + +const fetchBySlugUrl = async (slugText: string): Promise => { + 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 => { 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, - }) + } } diff --git a/src/composables/useWishlistsStore.ts b/src/composables/useWishlistsStore.ts index e176636..4d87206 100644 --- a/src/composables/useWishlistsStore.ts +++ b/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 => { - const { data } = await apiClient.get(prefix) - return data +const refState = ref([]) +const isLoading = ref(false) +const hasError = ref(false) + +export const loadAll = async (): Promise => { + 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, + } } diff --git a/src/views/DetailView.vue b/src/views/DetailView.vue index bdb2d0a..0d5ef4f 100644 --- a/src/views/DetailView.vue +++ b/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 => { ) if (confirmed) { item.bought = true - wishlistStore.updateItem(item) + updateItem(item) } } diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue index e990869..fad7b60 100644 --- a/src/views/HomeView.vue +++ b/src/views/HomeView.vue @@ -1,13 +1,27 @@