diff --git a/server.js b/server.js index c8c3ee2..31db149 100644 --- a/server.js +++ b/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: [], - username: "joe", + sticker_ids: ["38dafe9b-5563-4112-afa8-c895adc68e5b"], + 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; diff --git a/src/stores/stickerStore.ts b/src/stores/stickerStore.ts index d764d87..762ee7d 100644 --- a/src/stores/stickerStore.ts +++ b/src/stores/stickerStore.ts @@ -1,6 +1,13 @@ -import { defineStore } from 'pinia' +import {acceptHMRUpdate, defineStore} from 'pinia' -import { useUserStore } from "@/stores/userStore"; +import {useUserStore} from "@/stores/userStore"; + + +export interface Sticker { + color: string, + owner: string | null, + uuid: string, +} export const useStickerStore = defineStore('sticker', { actions: { @@ -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)) +} diff --git a/src/stores/stickersStore.ts b/src/stores/stickersStore.ts new file mode 100644 index 0000000..dcd88ad --- /dev/null +++ b/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)) +} diff --git a/src/stores/userStore.ts b/src/stores/userStore.ts index 1389067..ee4a684 100644 --- a/src/stores/userStore.ts +++ b/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) { - this.user.stickers.push(sticker); + addSticker(uuid: string) { + 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)) +} diff --git a/src/views/LoginView.vue b/src/views/LoginView.vue index 9d8f95c..b9e1cb1 100644 --- a/src/views/LoginView.vue +++ b/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); }); } diff --git a/src/views/ProfileView.vue b/src/views/ProfileView.vue index 124a758..6544d39 100644 --- a/src/views/ProfileView.vue +++ b/src/views/ProfileView.vue @@ -1,4 +1,5 @@