From 0ed7a3969e168396754c7dca3daaf01354202d45 Mon Sep 17 00:00:00 2001
From: Brian DeRocher <brian@derocher.org>
Date: Mon, 2 Dec 2024 19:35:53 -0500
Subject: [PATCH] cleanups

---
 src/components/Sidebar.vue       |  6 +++---
 src/components/Sticker.vue       |  6 ++----
 src/components/TopBar.vue        |  6 +++---
 src/router/index.ts              |  2 +-
 src/stores/stickerStore.ts       |  5 +++--
 src/stores/types.ts              |  5 +++++
 src/stores/userActionsStore.ts   | 10 +++++++++-
 src/stores/userStore.ts          |  7 +------
 src/views/LoginView.vue          |  2 +-
 src/views/ProfileView.vue        | 29 ++++++++++++++---------------
 src/views/StickerBuilderView.vue | 14 +++++++-------
 src/views/StickerView.vue        |  8 ++++++--
 12 files changed, 55 insertions(+), 45 deletions(-)
 create mode 100644 src/stores/types.ts

diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index 6d0426b..2507efc 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -5,7 +5,7 @@ import {useRouter} from "vue-router";
 import Avatar from 'primevue/avatar';
 import Menu from "primevue/menu";
 
-import { userActions } from "@/stores/userActionsStore";
+import { type UserAction, userActions } from "@/stores/userActionsStore";
 import { useSessionStore } from "@/stores/sessionStore";
 import Navigation from "@/components/Navigation.vue";
 
@@ -21,7 +21,7 @@ const profile = () => {
 };
 
 // Attach handlers.
-userActions.map((item) => {
+userActions.map((item: UserAction) => {
   switch (item.cmd) {
     case "logout":
       item.command = logout;
@@ -34,7 +34,7 @@ userActions.map((item) => {
 const items = ref(userActions);
 const menu = ref();
 
-const toggle = (event) => { menu.value.toggle(event); };
+const toggle = (event: Event) => { menu.value.toggle(event); };
 </script>
 
 <template>
diff --git a/src/components/Sticker.vue b/src/components/Sticker.vue
index 5dc5bcd..1a696f6 100644
--- a/src/components/Sticker.vue
+++ b/src/components/Sticker.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import QRCode from "@/components/QRCode.vue";
-import {computed, reactive} from "vue";
+import {computed} from "vue";
 
 const {
   layout, color,
@@ -71,7 +71,7 @@ const layout4Class = computed(() => ({
     padding: 5px;
     width: 100%;
     > div > div {
-      //outline: 1px solid #CCC;
+      /* outline: 1px solid #CCC; */
       padding-left: 4px;
       padding-right: 4px;
     }
@@ -106,8 +106,6 @@ const layout4Class = computed(() => ({
       font-size: 70%;
       grid-template-columns: 50% 50%;
       gap: 5px;
-      //grid-auto-rows: minmax(100px, auto);
-      //grid-auto-rows: auto;
       height: 100%;
     }
   }
diff --git a/src/components/TopBar.vue b/src/components/TopBar.vue
index 408413a..3c7378f 100644
--- a/src/components/TopBar.vue
+++ b/src/components/TopBar.vue
@@ -4,7 +4,7 @@ import { useRouter } from "vue-router";
 import { useRoute } from 'vue-router';
 
 import { useSessionStore } from "@/stores/sessionStore";
-import { userActions } from "@/stores/userActionsStore";
+import { type UserAction, userActions } from "@/stores/userActionsStore";
 
 import Button from 'primevue/button';
 import Menu from "primevue/menu";
@@ -19,7 +19,7 @@ watch(() => route.meta, (newVal, oldVal) => {
   page_title.value = newVal.title;
 })
 
-const toggle = (event) => {
+const toggle = (event: Event) => {
   menu.value.toggle(event);
 };
 const logout = () => {
@@ -42,7 +42,7 @@ const localActions = [{
   needsAuth: false,
 }];
 const allActions = [...userActions, ...localActions];
-allActions.map((item) => {
+allActions.map((item: UserAction) => {
   switch (item.cmd) {
     case "logout":
       item.command = logout;
diff --git a/src/router/index.ts b/src/router/index.ts
index 8129a6f..caefe53 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -72,7 +72,7 @@ const router = createRouter({
   ],
 })
 
-router.beforeEach((to, from) => {
+router.beforeEach((to, _from) => {
   const sessionStore= useSessionStore();
   if (sessionStore.isAnonymous && to.name == 'home') {
     return {name: 'welcome'};
diff --git a/src/stores/stickerStore.ts b/src/stores/stickerStore.ts
index c4db07b..a965a4a 100644
--- a/src/stores/stickerStore.ts
+++ b/src/stores/stickerStore.ts
@@ -1,6 +1,7 @@
-import {acceptHMRUpdate, defineStore} from 'pinia'
+import { acceptHMRUpdate, defineStore } from 'pinia'
 
-import {type User, useUserStore} from "@/stores/userStore";
+import { useUserStore } from "@/stores/userStore";
+import { type User } from '@/stores/types';
 
 
 export interface Sticker {
diff --git a/src/stores/types.ts b/src/stores/types.ts
new file mode 100644
index 0000000..dfed515
--- /dev/null
+++ b/src/stores/types.ts
@@ -0,0 +1,5 @@
+export interface User {
+  name: string,
+  sticker_ids: string[],
+  username: string,
+}
diff --git a/src/stores/userActionsStore.ts b/src/stores/userActionsStore.ts
index 3bc6c21..f7c9803 100644
--- a/src/stores/userActionsStore.ts
+++ b/src/stores/userActionsStore.ts
@@ -1,4 +1,12 @@
-export const userActions = [{
+export interface UserAction {
+  cmd?: string,
+  command?: () => void,
+  icon: string,
+  label: string,
+  needsAuth: boolean,
+}
+
+export const userActions: UserAction[] = [{
   cmd: 'profile',
   icon: 'pi pi-user',
   label: 'Profile',
diff --git a/src/stores/userStore.ts b/src/stores/userStore.ts
index f3fc7b4..5402cfc 100644
--- a/src/stores/userStore.ts
+++ b/src/stores/userStore.ts
@@ -1,14 +1,9 @@
 import {acceptHMRUpdate, defineStore} from 'pinia'
 
 import {useStickersStore} from "@/stores/stickersStore";
+import { type User } from '@/stores/types';
 
 
-export interface User {
-  name: string,
-  sticker_ids: string[],
-  username: string,
-}
-
 export interface State {
   users: User[],
 }
diff --git a/src/views/LoginView.vue b/src/views/LoginView.vue
index 8006642..a7e518d 100644
--- a/src/views/LoginView.vue
+++ b/src/views/LoginView.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, reactive, ref } from 'vue';
+import { reactive, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
 import Button from 'primevue/button';
diff --git a/src/views/ProfileView.vue b/src/views/ProfileView.vue
index 5408d6b..ea6376c 100644
--- a/src/views/ProfileView.vue
+++ b/src/views/ProfileView.vue
@@ -1,19 +1,19 @@
 <script setup lang="ts">
-import {computed, onMounted, ref} from 'vue';
-import {useRoute} from 'vue-router';
+import { computed, onMounted, ref } from 'vue'
+import { useRoute } from 'vue-router'
 
-import Avatar from 'primevue/avatar';
-import Button from 'primevue/button';
-import Card from 'primevue/card';
-import Chip from 'primevue/chip';
-import MeterGroup from 'primevue/metergroup';
-import Panel from 'primevue/panel';
-import Timeline from 'primevue/timeline';
+import Avatar from 'primevue/avatar'
+import Button from 'primevue/button'
+import Card from 'primevue/card'
+import Chip from 'primevue/chip'
+import MeterGroup from 'primevue/metergroup'
+import Panel from 'primevue/panel'
+import Timeline from 'primevue/timeline'
 
-import Sticker from "@/components/Sticker.vue";
-import {useSessionStore} from "@/stores/sessionStore";
-import {type User, useUserStore} from "@/stores/userStore";
-import { useStickersStore } from "@/stores/stickersStore";
+import Sticker from '@/components/Sticker.vue'
+import { useSessionStore } from '@/stores/sessionStore'
+import { type User, useUserStore } from '@/stores/userStore'
+import { useStickersStore } from '@/stores/stickersStore'
 
 
 const sessionStore = useSessionStore();
@@ -26,8 +26,7 @@ const stickersStore = useStickersStore();
 
 onMounted(async () => {
   await userStore.fetch(username.value);
-  const res = getUser(username.value);
-  user.value = res;
+  user.value = getUser(username.value);
 });
 
 const myPage = computed(() => {
diff --git a/src/views/StickerBuilderView.vue b/src/views/StickerBuilderView.vue
index 257cb62..83d8db2 100644
--- a/src/views/StickerBuilderView.vue
+++ b/src/views/StickerBuilderView.vue
@@ -45,17 +45,17 @@ const resolver = () => {
   return {};
 };
 
-const layout = defineModel('layout');
+const layout = defineModel<string>('layout');
 layout.value = 'layout1';
-const message1 = defineModel('message1');
+const message1 = defineModel<string>('message1');
 message1.value = "I SUPPORT M4A";
-const message2 = defineModel('message2');
+const message2 = defineModel<string>('message2');
 message2.value = "m2";
-const message3 = defineModel('message3');
+const message3 = defineModel<string>('message3');
 message3.value = "m3";
-const message4 = defineModel('message4');
+const message4 = defineModel<string>('message4');
 message4.value = "";
-const color = defineModel('background-color');
+const color = defineModel<string>('background-color');
 color.value = '000088';
 
 const color2 = computed(() => {
@@ -147,7 +147,7 @@ function onFormSubmit() {
                 <Select id="country2" v-model="selectedCountry" :options="countries" option-label="name" :filter="true" filter-by="name" :show-clear="true" placeholder="Select a Country" class="w-full">
                   <template #option="slotProps">
                     <div class="flex items-center">
-                      <img src="https://fqjltiegiezfetthbags.supabase.co/storage/v1/render/image/public/block.images/blocks/flag/flag_placeholder.png" :class="'mr-2 w-[18px]' + slotProps.option.code.toLowerCase()" />
+                      <div>[flag]</div>
                       <div>{{ slotProps.option.name }}</div>
                     </div>
                   </template>
diff --git a/src/views/StickerView.vue b/src/views/StickerView.vue
index bcc5427..dfbd0db 100644
--- a/src/views/StickerView.vue
+++ b/src/views/StickerView.vue
@@ -1,12 +1,16 @@
 <script setup lang="ts">
 import {computed, onBeforeMount, ref} from 'vue';
+import { useRoute } from 'vue-router';
+
 import Button from 'primevue/button';
 import Panel from 'primevue/panel';
+
 import Sticker from "@/components/Sticker.vue";
-import { useRoute } from 'vue-router';
+import { type User } from "@/stores/types";
 import { useSessionStore } from "@/stores/sessionStore";
 import { useStickerStore } from "@/stores/stickerStore";
 
+
 const sessionStore = useSessionStore();
 const stickerStore = useStickerStore();
 
@@ -28,7 +32,7 @@ const second = computed(() => {
 })
 
 function claimSticker() {
-  stickerStore.setOwner(sessionStore.user);
+  stickerStore.setOwner(sessionStore.user as User);
 }
 
 </script>