Fetch the user and their stickers.

Add useStickersStore.

Rename stickers to sticker_ids.

server.js

@@ -6,13 +6,13 @@ const port = 8000;
 const users = {
   "joe": {
     name: "Joe User",
-    stickers: [],
+    sticker_ids: [],
     username: "joe",
   },
   "jen": {
     name: "Jen User",
-    stickers: [],
+    sticker_ids: ["38dafe9b-5563-4112-afa8-c895adc68e5b"],
-    username: "joe",
+    username: "jen",
   }
 };
 
@@ -20,10 +20,17 @@ const stickers = {
   "88ae126f-b19a-4287-abe0-a8f5ac763cb7": {
     color: "#000088",
     layout: "layout1",
-    message1: "I am an activist!",
+    message1: "I ♥ universal healthcare!",
     owner: null,
     uuid: "88ae126f-b19a-4287-abe0-a8f5ac763cb7",
   },
+  "38dafe9b-5563-4112-afa8-c895adc68e5b": {
+    color: "#008800",
+    layout: "layout1",
+    message1: "I am a treehugger!",
+    owner: null,
+    uuid: "38dafe9b-5563-4112-afa8-c895adc68e5b",
+  },
 }
 
 const requestListener = function (req, res) {
@@ -54,6 +61,11 @@ const requestListener = function (req, res) {
       res.end(response);
       break;
     case "user":
+      if (!(urlParts[2] in users)) {
+        res.writeHead(404);
+        res.end('not found')
+        break;
+      }
       res.writeHead(200);
       res.end(JSON.stringify(users[urlParts[2]]));
       break;

src/stores/stickerStore.ts

@@ -1,7 +1,14 @@
-import { defineStore } from 'pinia'
+import {acceptHMRUpdate, defineStore} from 'pinia'
 
 import {useUserStore} from "@/stores/userStore";
 
+
+export interface Sticker {
+  color: string,
+  owner: string | null,
+  uuid: string,
+}
+
 export const useStickerStore = defineStore('sticker', {
   actions: {
     async fetch(uuid: string) {
@@ -13,7 +20,6 @@ export const useStickerStore = defineStore('sticker', {
         `/api/sticker/${uuid}`,
       );
       const json = await response.json();
-      // this.stickers.push(json);
       this.sticker = json;
     },
     async put(uuid: string) {
@@ -39,13 +45,16 @@ export const useStickerStore = defineStore('sticker', {
       }
       this.put(this.sticker.uuid);
       const userStore= useUserStore();
-      userStore.addSticker(this.sticker);
+      userStore.addSticker(this.sticker.uuid);
     },
   },
   state: () =>  {
     return {
-      // stickers: [],
       sticker: null,
     };
   },
 })
+
+if (import.meta.hot) {
+  import.meta.hot.accept(acceptHMRUpdate(useStickerStore, import.meta.hot))
+}

src/stores/stickersStore.ts

@@ -0,0 +1,40 @@
+import {acceptHMRUpdate, defineStore} from 'pinia'
+
+import type {Sticker} from "@/stores/stickerStore";
+
+
+export interface State {
+  stickers: Sticker[];
+}
+
+export const useStickersStore = defineStore('stickers', {
+  actions: {
+    async fetch(uuid: string) {
+      if (this.getSticker(uuid)) {
+        return;
+      }
+      // TODO: Check if we have it already and if it's stale.
+      const response = await fetch(
+        `/api/sticker/${uuid}`,
+      );
+      const json = await response.json();
+      this.stickers.push(json);
+    },
+  },
+  getters: {
+    getSticker: (state: State) => {
+      return (uuid: string): Sticker | null => {
+        return state.stickers.find((sticker: Sticker) => sticker.uuid === uuid)
+      };
+    },
+  },
+  state: () =>  {
+    return {
+      stickers: [],
+    };
+  },
+})
+
+if (import.meta.hot) {
+  import.meta.hot.accept(acceptHMRUpdate(useStickersStore, import.meta.hot))
+}

src/stores/userStore.ts

@@ -1,15 +1,46 @@
-import { defineStore } from 'pinia'
+import {acceptHMRUpdate, defineStore} from 'pinia'
 
-const anonymous = {
+import {useStickersStore} from "@/stores/stickersStore";
+
+
+export interface User {
+  name: string,
+  sticker_ids: string[],
+  username: string | null,
+};
+
+const anonymous: User = {
   name: 'Anonymous',
-  stickers: [],
+  sticker_ids: [],
   username: null,
 };
 
+export interface State {
+  user: User,
+  users: User[],
+}
+
 export const useUserStore = defineStore('user', {
   actions: {
-    addSticker(sticker) {
+    addSticker(uuid: string) {
-      this.user.stickers.push(sticker);
+      this.user.sticker_ids.push(uuid);
+    },
+    async fetch(username: string) {
+      let user = this.getUser(username);
+      if (user) {
+        return user;
+      }
+      // TODO: Check if we have it already and if it's stale.
+      const response = await fetch(
+        `/api/user/${username}`,
+      );
+      const json = await response.json();
+      this.users.push(json);
+
+      const stickersStore = useStickersStore();
+      json.sticker_ids.forEach((sticker_id) => {
+        stickersStore.fetch(sticker_id);
+      })
     },
     async login(username: string, password: string) {
       const response = await fetch(
@@ -23,32 +54,41 @@ export const useUserStore = defineStore('user', {
       // this.user.name = json.name;
       this.user = {
         name: json.name,
-        stickers: json.stickers,
+        sticker_ids: json.sticker_ids,
         username: json.username,
-      }
+      };
-      return json;
     },
     logout() {
       console.log('logout');
       // TODO: Tell server.
-      // this.user = anonymous;
+      this.user = anonymous;
       // this.hasChanged = true;
       // this.user.name = 'Anonymous';
-      this.$reset();
+      // this.$reset();
       // this.$patch({user: anonymous});
     },
   },
   getters: {
-    initials: (state): string => {
+    initials: (state: State): string => {
       return state.user.name[0] || '';
     },
-    isAnonymous: (state): boolean => {
+    isAnonymous: (state: State): boolean => {
       return state.user.name === 'Anonymous';
     },
+    getUser: (state: State) => {
+      return (username: string): User | null => {
+        return state.users.find((user: User) => user.username === username)
+      };
     },
-  state: () =>  {
+  },
+  state: (): State =>  {
     return {
       user: anonymous,
+      users: [],
     };
   },
 })
+
+if (import.meta.hot) {
+  import.meta.hot.accept(acceptHMRUpdate(useUserStore, import.meta.hot))
+}

src/views/LoginView.vue

@@ -22,7 +22,7 @@ function handleLogin({ valid }) {
   if (!valid) {
     return;
   }
-  userStore.login(username.value, username.value).then((data) => {
+  userStore.login(username.value, username.value).then(() => {
     router.push(next);
   });
 }

src/views/ProfileView.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { storeToRefs } from "pinia";
 import {computed, onMounted, ref} from 'vue';
 import {useRoute} from 'vue-router';
 
@@ -11,22 +12,26 @@ import Panel from 'primevue/panel';
 import Timeline from 'primevue/timeline';
 
 import Sticker from "@/components/Sticker.vue";
-import { useUserStore } from "@/stores/userStore";
+import {type User, useUserStore} from "@/stores/userStore";
+import { useStickersStore } from "@/stores/stickersStore";
 
 
 const userStore = useUserStore();
+const { getUser } = userStore;
 const route = useRoute();
 const username = ref<string>(route.params.username as string);
-const user = ref([]);
+let user = ref<User>();
+const stickersStore = useStickersStore();
 
 onMounted(async () => {
-  const response = await fetch(`/api/user/${username.value}`);
+  await userStore.fetch(username.value);
-  const json = await response.json();
+  const res = getUser(username.value);
-  user.value = json;
+  user.value = res;
 });
 
 const myPage = computed(() => {
-  return !userStore.isAnonymous && userStore.user.username == user.value.username;
+  return false;
+  // return !userStore.isAnonymous && userStore.user.username == user.value.username;
 });
 
 const meterValue = ref([
@@ -63,15 +68,15 @@ const events = [{
       <div class="flex flex-row content-end">
         <Avatar icon="pi pi-user" class="mr-2" size="xlarge" />
         <div>
-          {{ user.name }}
+          {{ user?.name }}
         </div>
       </div>
     </Panel>
     <Panel header="Stickers">
       <div class="stickers">
-        <div class="stickerWrapper" v-for="sticker in user.stickers">
+        <div class="stickerWrapper" v-for="sticker_id in user?.sticker_ids">
-          <RouterLink :to="{ name: 'sticker', params: { uuid: sticker.uuid }}">
+          <RouterLink :to="{ name: 'sticker', params: { uuid: sticker_id }}">
-            <Sticker v-bind="sticker" />
+            <Sticker v-bind="stickersStore.getSticker(sticker_id)" />
           </RouterLink>
         </div>
         <Button