Claim sticker.

Make proxy generic.

server.js

@@ -5,6 +5,8 @@ const port = 8000;
 
 const user = JSON.stringify({
   name: "Joe User",
+  stickers: [],
+  username: "joe",
 });
 
 const stickers = {
@@ -12,12 +14,20 @@ const stickers = {
     color: "#000088",
     layout: "layout1",
     message1: "I am an activist!",
+    uuid: "88ae126f-b19a-4287-abe0-a8f5ac763cb7",
   },
 }
 
 const requestListener = function (req, res) {
   res.setHeader("Content-Type", "application/json");
   const urlParts = req.url.split("/");
+  let body = '';
+  req.on('data', chunk => {
+    body += chunk.toString();
+  });
+  req.on('end', () => {
+    console.log('body', body);
+  });
   console.log(urlParts);
   switch (urlParts[1]) {
     case "login":

src/stores/stickerStore.ts

@@ -6,7 +6,7 @@ export const useStickerStore = defineStore('sticker', {
       console.log('fetch');
       // TODO: Check if we have it already and if it's stale.
       const response = await fetch(
-        `/sticker/${uuid}`,
+        `/api/sticker/${uuid}`,
       );
       const json = await response.json();
       console.log(json);

src/stores/userStore.ts

@@ -2,28 +2,44 @@ import { defineStore } from 'pinia'
 
 const anonymous = {
   name: 'Anonymous',
+  stickers: [],
   username: null,
 };
 
 export const useUserStore = defineStore('user', {
   actions: {
+    async addSticker(sticker) {
+      const response = await fetch(
+        `/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(
-        "/login",
+        "/api/login",
         {
           method: 'POST',
         },
       );
       const json = await response.json();
+      console.log('login', json);
       // this.user.name = json.name;
       this.user = {
         name: json.name,
-        username: "username",
+        stickers: json.stickers,
+        username: json.username,
       }
       return json;
     },
     logout() {
-      console.log('logout2');
+      console.log('logout');
+      // TODO: Tell server.
       // this.user = anonymous;
       // this.hasChanged = true;
       // this.user.name = 'Anonymous';

src/views/StickerView.vue

@@ -13,7 +13,6 @@ const userStore = useUserStore();
 const route = useRoute();
 const uuid = ref<string>(route.params.uuid as string);
 // const uuid = ref(route.params.uuid);
-console.log('uuid', uuid.value);
 
 onBeforeMount(async () => {
   await stickerStore.fetch(uuid.value);
@@ -28,6 +27,10 @@ const second = computed(() => {
   return [parts[3], parts[4]].join('-');
 })
 
+function claimSticker() {
+  userStore.addSticker(stickerStore.sticker);
+}
+
 </script>
 
 <template>
@@ -52,7 +55,9 @@ const second = computed(() => {
             v-if="stickerStore.sticker"
           />
         </div>
-        <Button v-bind:disabled="userStore.isAnonymous">
+        <Button
+            v-bind:disabled="userStore.isAnonymous"
+            v-on:click="claimSticker">
           This is my sticker!
         </Button>
         <span v-if="userStore.isAnonymous">

vite.config.ts

@@ -17,17 +17,12 @@ export default defineConfig({
   },
   server: {
     proxy: {
-      '/login': {
+      '^/api/': {
         target: 'http://127.0.0.1:8000',
         changeOrigin: true,
         secure: false,
-        // rewrite: (path) => path.replace(/^\/api/, '')
-      },
-      '^/sticker/.*': {
-        target: 'http://127.0.0.1:8000',
-        changeOrigin: true,
-        secure: false,
-      },
+        rewrite: (path) => path.replace(/^\/api/, ''),
+      }
     },
   },
 })