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

@@ -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');

src/stores/stickerStore.ts

@@ -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))
-}

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) => {

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) {

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<string>(route.params.uuid as string);
-// const uuid = ref(route.params.uuid);
+const { getSticker } = stickersStore;
+let sticker = ref<StickerType>();
 
 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);
 }
 
 </script>
@@ -56,13 +61,13 @@ function claimSticker() {
         <div id="StickerWrapper">
           <Sticker
             class="sticker"
-            v-bind="stickerStore.sticker"
-            v-if="stickerStore.sticker"
+            v-bind="sticker"
+            v-if="sticker"
           />
         </div>
         <Button
             v-bind:disabled="sessionStore.isAnonymous"
-            v-if="stickerStore.sticker?.owner == null"
+            v-if="sticker?.owner == null"
             v-on:click="claimSticker">
           This is my sticker!
         </Button>