cleanups

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>

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%;
     }
   }

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;

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'};

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 {

src/stores/types.ts

@@ -0,0 +1,5 @@
+export interface User {
+  name: string,
+  sticker_ids: string[],
+  username: string,
+}

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',

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[],
 }

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';

src/views/ProfileView.vue

@@ -1,19 +1,19 @@
 <script setup lang="ts">
-import {computed, onMounted, ref} from 'vue';
+import { computed, onMounted, ref } from 'vue'
-import {useRoute} from 'vue-router';
+import { useRoute } from 'vue-router'
 
-import Avatar from 'primevue/avatar';
+import Avatar from 'primevue/avatar'
-import Button from 'primevue/button';
+import Button from 'primevue/button'
-import Card from 'primevue/card';
+import Card from 'primevue/card'
-import Chip from 'primevue/chip';
+import Chip from 'primevue/chip'
-import MeterGroup from 'primevue/metergroup';
+import MeterGroup from 'primevue/metergroup'
-import Panel from 'primevue/panel';
+import Panel from 'primevue/panel'
-import Timeline from 'primevue/timeline';
+import Timeline from 'primevue/timeline'
 
-import Sticker from "@/components/Sticker.vue";
+import Sticker from '@/components/Sticker.vue'
-import {useSessionStore} from "@/stores/sessionStore";
+import { useSessionStore } from '@/stores/sessionStore'
-import {type User, useUserStore} from "@/stores/userStore";
+import { type User, useUserStore } from '@/stores/userStore'
-import { useStickersStore } from "@/stores/stickersStore";
+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 = getUser(username.value);
-  user.value = res;
 });
 
 const myPage = computed(() => {

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>

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>