From ebbfc3549637590676b802ae3b7c69538dc41785 Mon Sep 17 00:00:00 2001 From: Brian DeRocher Date: Wed, 4 Dec 2024 00:20:41 -0500 Subject: [PATCH] Drop StickerStore. Move everything to StickersStore. Reason is because after setting the sticker owner, it was updating the sticker in the sticker store, but it should update the store that has all the stickers. Profile page will lookup stickers in the stickers store. --- src/stores/sessionStore.ts | 3 ++ src/stores/stickerStore.ts | 64 ------------------------------------- src/stores/stickersStore.ts | 31 +++++++++++++++++- src/stores/userStore.ts | 3 ++ src/views/StickerView.vue | 21 +++++++----- 5 files changed, 49 insertions(+), 73 deletions(-) delete mode 100644 src/stores/stickerStore.ts diff --git a/src/stores/sessionStore.ts b/src/stores/sessionStore.ts index 129bdc1..f169bf4 100644 --- a/src/stores/sessionStore.ts +++ b/src/stores/sessionStore.ts @@ -1,4 +1,5 @@ import {acceptHMRUpdate, defineStore} from 'pinia' +import { useUserStore } from '@/stores/userStore' export interface User { @@ -35,6 +36,8 @@ export const useSessionStore = defineStore('session', { sticker_ids: json.sticker_ids, username: json.username, }; + const userStore= useUserStore(); + userStore.addUser(this.user); }, logout() { console.log('logout'); diff --git a/src/stores/stickerStore.ts b/src/stores/stickerStore.ts deleted file mode 100644 index a965a4a..0000000 --- a/src/stores/stickerStore.ts +++ /dev/null @@ -1,64 +0,0 @@ -import { acceptHMRUpdate, defineStore } from 'pinia' - -import { useUserStore } from "@/stores/userStore"; -import { type User } from '@/stores/types'; - - -export interface Sticker { - color: string, - owner: string | null, - uuid: string, -} - -export interface State { - sticker: Sticker | null; -} - -export const useStickerStore = defineStore('sticker', { - actions: { - async fetch(uuid: string) { - if (this.sticker) { - return; - } - // TODO: Check if we have it already and if it's stale. - const response = await fetch( - `/api/sticker/${uuid}`, - ); - this.sticker = await response.json(); - }, - async put(uuid: string) { - const response = await fetch( - `/api/sticker/${uuid}`, - { - body: JSON.stringify(this.sticker), - method: 'PUT', - }, - ); - const json = await response.json(); - // Disable this for now so we don't clobber the new owner. - // this.sticker = json; - }, - setOwner(user: User) { - if (!this.sticker) { - return; - } -// this.sticker.owner = user.username; does not work - this.sticker = { - ...this.sticker, - owner: user.username, - } - this.put(this.sticker.uuid); - const userStore= useUserStore(); - userStore.addSticker(user.username, this.sticker.uuid); - }, - }, - state: (): State => { - return { - sticker: null, - }; - }, -}) - -if (import.meta.hot) { - import.meta.hot.accept(acceptHMRUpdate(useStickerStore, import.meta.hot)) -} diff --git a/src/stores/stickersStore.ts b/src/stores/stickersStore.ts index cd50f4e..9f675e6 100644 --- a/src/stores/stickersStore.ts +++ b/src/stores/stickersStore.ts @@ -1,8 +1,15 @@ import {acceptHMRUpdate, defineStore} from 'pinia' -import type {Sticker} from "@/stores/stickerStore"; +import type { User } from '@/stores/types' +import { useUserStore } from '@/stores/userStore' +export interface Sticker { + color: string, + owner: string | null, + uuid: string, +} + export interface State { stickers: Sticker[]; } @@ -20,6 +27,28 @@ export const useStickersStore = defineStore('stickers', { const json = await response.json(); this.stickers.push(json); }, + async put(uuid: string) { + const sticker = this.getSticker(uuid) + if (!sticker) { + return; + } + const response = await fetch( + `/api/sticker/${uuid}`, + { + body: JSON.stringify(sticker), + method: 'PUT', + }, + ); + const json = await response.json(); + // Disable this for now so we don't clobber the new owner. + // this.sticker = json; + }, + setOwner(sticker: Sticker, user: User) { + sticker.owner = user.username; + this.put(sticker.uuid); + const userStore= useUserStore(); + userStore.addSticker(user.username, sticker.uuid); + }, }, getters: { getSticker: (state: State) => { diff --git a/src/stores/userStore.ts b/src/stores/userStore.ts index 5402cfc..f3f1ccd 100644 --- a/src/stores/userStore.ts +++ b/src/stores/userStore.ts @@ -16,6 +16,9 @@ export const useUserStore = defineStore('user', { user.sticker_ids.push(uuid); } }, + addUser(user: User) { + this.users.push(user); + }, async fetch(username: string) { let user = this.getUser(username); if (user) { diff --git a/src/views/StickerView.vue b/src/views/StickerView.vue index e3ac590..f7d3ce0 100644 --- a/src/views/StickerView.vue +++ b/src/views/StickerView.vue @@ -8,18 +8,23 @@ import Panel from 'primevue/panel'; import Sticker from "@/components/Sticker.vue"; import { type User } from "@/stores/types"; import { useSessionStore } from "@/stores/sessionStore"; -import { useStickerStore } from "@/stores/stickerStore"; +import { + type Sticker as StickerType, + useStickersStore +} from "@/stores/stickersStore"; const sessionStore = useSessionStore(); -const stickerStore = useStickerStore(); +const stickersStore = useStickersStore(); const route = useRoute(); const uuid = ref(route.params.uuid as string); -// const uuid = ref(route.params.uuid); +const { getSticker } = stickersStore; +let sticker = ref(); onBeforeMount(async () => { - await stickerStore.fetch(uuid.value); + await stickersStore.fetch(uuid.value); + sticker.value = getSticker(uuid.value); }); const first = computed(() => { @@ -32,7 +37,7 @@ const second = computed(() => { }) function claimSticker() { - stickerStore.setOwner(sessionStore.user as User); + stickersStore.setOwner(sticker.value, sessionStore.user as User); } @@ -56,13 +61,13 @@ function claimSticker() {