Set owner of sticker.

Owner is property of sticker.  Stickers are a reference for users, so flip the API.

server.js

@@ -14,6 +14,7 @@ const stickers = {
     color: "#000088",
     layout: "layout1",
     message1: "I am an activist!",
+    owner: null,
     uuid: "88ae126f-b19a-4287-abe0-a8f5ac763cb7",
   },
 }

src/stores/stickerStore.ts

@@ -1,18 +1,42 @@
 import { defineStore } from 'pinia'
 
+import { useUserStore } from "@/stores/userStore";
+
 export const useStickerStore = defineStore('sticker', {
   actions: {
     async fetch(uuid: string) {
-      console.log('fetch');
       // TODO: Check if we have it already and if it's stale.
       const response = await fetch(
         `/api/sticker/${uuid}`,
       );
       const json = await response.json();
-      console.log(json);
       // this.stickers.push(json);
       this.sticker = json;
-      console.log('done in fetch');
+    },
+    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) {
+      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(this.sticker);
     },
   },
   state: () =>  {

src/stores/userStore.ts

@@ -8,17 +8,8 @@ const anonymous = {
 
 export const useUserStore = defineStore('user', {
   actions: {
-    async addSticker(sticker) {
+    addSticker(sticker) {
-      const response = await fetch(
+     this.user.stickers.push(sticker);
-        `/api/user/${this.user.username}/stickers`,
-        {
-          body: JSON.stringify({uuid: sticker.uuid}),
-          method: 'POST',
-        },
-      );
-      if (response.ok) {
-        this.user.stickers.push(sticker);
-      }
     },
     async login(username: string, password: string) {
       const response = await fetch(

src/views/StickerView.vue

@@ -28,7 +28,7 @@ const second = computed(() => {
 })
 
 function claimSticker() {
-  userStore.addSticker(stickerStore.sticker);
+  stickerStore.setOwner(userStore.user);
 }
 
 </script>
@@ -57,6 +57,7 @@ function claimSticker() {
         </div>
         <Button
             v-bind:disabled="userStore.isAnonymous"
+            v-if="stickerStore.sticker?.owner == null"
             v-on:click="claimSticker">
           This is my sticker!
         </Button>