From 2ba961ce2a43ccff73e347b1f10a8fb07b10a8c4 Mon Sep 17 00:00:00 2001
From: Brian DeRocher <brian@derocher.org>
Date: Tue, 26 Nov 2024 14:35:39 -0500
Subject: [PATCH] Clicking on stickers on the profile page takes you to
 stickerview.

Home goes to profile page for now.

Create a menu item for an unclaimed sticker.

Only fetch an item if we don't have it yet.
---
 src/components/Navigation.vue |  2 +-
 src/components/TopBar.vue     | 17 ++++++++-----
 src/stores/stickerStore.ts    |  3 +++
 src/views/LoginView.vue       |  3 ++-
 src/views/ProfileView.vue     | 47 ++++++++++++++---------------------
 5 files changed, 36 insertions(+), 36 deletions(-)

diff --git a/src/components/Navigation.vue b/src/components/Navigation.vue
index ac395f8..25d5404 100644
--- a/src/components/Navigation.vue
+++ b/src/components/Navigation.vue
@@ -5,7 +5,7 @@
   <nav>
     <RouterLink
       class="nav-item"
-      to="/">
+      to="/profile">
       <i class="pi pi-home nav-icon" />
       <span>Home</span>
     </RouterLink>
diff --git a/src/components/TopBar.vue b/src/components/TopBar.vue
index 6433609..e3a1f28 100644
--- a/src/components/TopBar.vue
+++ b/src/components/TopBar.vue
@@ -1,13 +1,17 @@
 <script setup lang="ts">
+import { ref, watch } from 'vue';
+import { useRouter } from "vue-router";
+import { useRoute } from 'vue-router';
+
 import { useUserStore } from "@/stores/userStore";
 import { userActions } from "@/stores/userActionsStore";
-import { ref, watch } from 'vue';
-import { useRoute } from 'vue-router';
 
 import Button from 'primevue/button';
 import Menu from "primevue/menu";
 
+
 const route = useRoute();
+const router = useRouter();
 const page_title = ref();
 const userStore = useUserStore();
 
@@ -25,13 +29,14 @@ const logout = () => {
 
 const menu = ref();
 const localActions = [{
+  command: () => { router.push('/88ae126f-b19a-4287-abe0-a8f5ac763cb7'); },
+  icon: 'pi pi-tag',
+  label: 'Claim 88ae',
+  needsAuth: true,
+}, {
   icon: 'pi pi-question',
   label: 'About',
   needsAuth: false,
-}, {
-  icon: 'pi pi-question',
-  label: 'AboutFoo',
-  needsAuth: true,
 }];
 const allActions = [...userActions, ...localActions];
 allActions.map((item) => {
diff --git a/src/stores/stickerStore.ts b/src/stores/stickerStore.ts
index d1acabb..7790cf2 100644
--- a/src/stores/stickerStore.ts
+++ b/src/stores/stickerStore.ts
@@ -5,6 +5,9 @@ import { useUserStore } from "@/stores/userStore";
 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}`,
diff --git a/src/views/LoginView.vue b/src/views/LoginView.vue
index eef1cd7..70d4d25 100644
--- a/src/views/LoginView.vue
+++ b/src/views/LoginView.vue
@@ -19,7 +19,8 @@ function handleLogin({ valid }) {
     return;
   }
   userStore.login(username.value, username.value).then((data) => {
-    router.push('/88ae126f-b19a-4287-abe0-a8f5ac763cb7');
+    // TODO: Go back to original page.
+    router.push('/');
   });
 }
 
diff --git a/src/views/ProfileView.vue b/src/views/ProfileView.vue
index 1cc2ccb..ff48385 100644
--- a/src/views/ProfileView.vue
+++ b/src/views/ProfileView.vue
@@ -13,19 +13,6 @@ import { useUserStore } from "@/stores/userStore";
 
 const userStore = useUserStore();
 
-const route = useRoute();
-
-const uuid = ref<string>(route.params.uuid as string);
-
-const first = computed(() => {
-  const parts = uuid.value.split('-')
-  return [parts[0], parts[1], parts[2]].join('-');
-})
-const second = computed(() => {
-  const parts = uuid.value.split('-')
-  return [parts[3], parts[4]].join('-');
-})
-
 const meterValue = ref([
   { label: 'Apps', color: '#34d399', value: 20 },
   { label: 'Messages', color: '#fbbf24', value: 10 },
@@ -60,19 +47,18 @@ const events = [{
       <div class="flex flex-row content-end">
         <Avatar icon="pi pi-user" class="mr-2" size="xlarge" />
         <div>
-          <div class="font-mono text-sn tracking-wider col">
-            {{ first }}
-          </div>
-          <div class="font-mono text-sn tracking-wider col">
-            {{ second }}
-          </div>
+          {{ userStore.user.name }}
         </div>
       </div>
     </Panel>
-    <Panel class="bg-white" header="Stickers">
-      <Button as="router-link" to="/sticker" v-if="!userStore.isAnonymous">New sticker</Button>
-      <div id="StickerWrapper">
-        <Sticker color="#000088" layout="layout1" message1="I support M4A" />
+    <Panel header="My Stickers">
+      <div class="stickers">
+        <div class="stickerWrapper" v-for="sticker in userStore.user.stickers">
+          <RouterLink :to="{ name: 'sticker', params: { uuid: sticker.uuid }}">
+            <Sticker v-bind="sticker" />
+          </RouterLink>
+        </div>
+        <Button as="router-link" to="/sticker" v-if="!userStore.isAnonymous">New sticker</Button>
       </div>
     </Panel>
     <Panel header="Metrics">
@@ -127,14 +113,19 @@ const events = [{
 </template>
 
 <style scoped>
-#StickerWrapper {
-  background-color: #F2F2F2;
-  padding: 5px;
-  width: 300px;
-}
 .profilePage {
   @apply p-2 gap-2;
   display: flex;
   flex-direction: column;
 }
+.stickers {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+.stickerWrapper {
+  background-color: #F2F2F2;
+  padding: 10px;
+  width: 300px;
+}
 </style>