refactor: rewrite user profile store using pinia

app/package.json

@@ -16,13 +16,14 @@
     "@fortawesome/vue-fontawesome": "^3.0.3",
     "@linux-odyssey/constants": "*",
     "@linux-odyssey/file-graph": "*",
-    "@linux-odyssey/utils": "*",
     "@linux-odyssey/models": "*",
+    "@linux-odyssey/utils": "*",
     "@types/dompurify": "^3.0.5",
     "axios": "^1.6.0",
     "dompurify": "^3.0.6",
     "echarts": "^5.4.3",
     "marked": "^10.0.0",
+    "pinia": "^2.1.7",
     "socket.io-client": "^4.7.1",
     "validator": "^13.11.0",
     "vue": "^3.3.4",

app/src/components/GameHeaderPart.vue

@@ -1,142 +0,0 @@
-<script setup lang="ts">
-import { defineProps, onMounted } from 'vue'
-import { useRouter } from 'vue-router'
-import { useToast } from 'vue-toastification'
-import { logout } from '../utils/auth'
-import { bugReportUrl, surveyUrl } from '../config'
-import { reset } from '../store/session'
-import userProfileStore, {
-  loadUserProfile,
-  resetUserProfile,
-} from '../store/userProfile'
-
-const router = useRouter()
-
-const toast = useToast()
-
-const handleLogout = async () => {
-  try {
-    await logout()
-    resetUserProfile()
-    reset()
-    router.push({ name: 'login' })
-  } catch (err) {
-    toast.error('登出失敗')
-    console.error(err)
-  }
-}
-
-defineProps({
-  title: {
-    type: String,
-    required: false,
-  },
-})
-
-onMounted(async () => {
-  try {
-    await loadUserProfile()
-  } catch (err) {
-    console.error(err)
-    toast.error('無法讀取使用者資料')
-  }
-})
-</script>
-
-<template>
-  <div id="header" class="bg-bg-secondary content-center h-full w-full p-1">
-    <div class="h-full flex items-center justify-center mx-3">
-      <div class="flex items-center gap-3">
-        <!-- <button id="stream" class="flex items-center h-5 w-5">
-          <font-awesome-icon
-            :icon="['fas', 'bars']"
-            class="text-text-primary h-full w-full"
-          />
-        </button>
-        <button id="backward" class="flex items-center h-5 w-5">
-          <font-awesome-icon
-            :icon="['fas', 'arrow-left']"
-            class="text-border h-full w-full"
-          />
-        </button> -->
-        <img src="../img/icon_totem.svg" class="h-5" />
-        <button
-          id="GameTitle"
-          class="text-text-primary inline-block font-bold whitespace-nowrap"
-          style="font-size: 2vh"
-        >
-          Linux Odyssey
-        </button>
-        <p
-          id="QuestTitle"
-          class="text-text inline-block font-bold whitespace-nowrap"
-          style="font-size: 2vh"
-        >
-          {{ title }}
-        </p>
-      </div>
-      <div class="h-full w-full flex gap-3 items-center justify-end">
-        <!-- <button id="warning" class="flex items-center h-5 w-5">
-          <font-awesome-icon
-            :icon="['fas', 'triangle-exclamation']"
-            class="text-text-primary h-full w-full"
-          />
-        </button>
-        <button id="setting" class="flex items-center h-5 w-5">
-          <font-awesome-icon
-            :icon="['fas', 'gear']"
-            class="text-text-primary h-full w-full"
-          />
-        </button>
-        <button id="fullscreen" class="flex items-center h-5 w-5">
-          <font-awesome-icon
-            :icon="['fas', 'expand']"
-            class="text-text-primary h-full w-full"
-          />
-        </button> -->
-        <p
-          id="UsernameText"
-          class="text-text inline-block whitespace-nowrap"
-          style="font-size: 2vh"
-        >
-          {{ userProfileStore.username }}
-        </p>
-        <a title="Survey" :href="surveyUrl" target="_blank" class="h-5 w-5">
-          <font-awesome-icon
-            :icon="['fas', 'file-invoice']"
-            class="text-text-primary h-full w-full"
-          />
-        </a>
-        <RouterLink title="LeaderBoard" to="/leaderboard" class="h-5 w-5">
-          <font-awesome-icon
-            :icon="['fas', 'trophy']"
-            class="text-text-primary h-full w-full"
-          />
-        </RouterLink>
-        <RouterLink title="Map" to="/map" class="h-5 w-5">
-          <font-awesome-icon
-            :icon="['fas', 'map']"
-            class="text-text-primary h-full w-full"
-          />
-        </RouterLink>
-        <a
-          title="Bug Report"
-          :href="bugReportUrl"
-          target="_blank"
-          class="h-5 w-5"
-        >
-          <font-awesome-icon
-            :icon="['fas', 'bug']"
-            class="text-text-primary h-full w-full"
-          />
-        </a>
-        <button title="Sign Out" @click="handleLogout" class="h-5 w-5">
-          <font-awesome-icon
-            :icon="['fas', 'arrow-right-from-bracket']"
-            class="text-text-primary h-full w-full"
-          />
-        </button>
-      </div>
-    </div>
-  </div>
-</template>

app/src/components/header/GameHeaderComponents.vue

@@ -5,11 +5,9 @@ import { useToast } from 'vue-toastification'
 import { logout } from '../../utils/auth'
 import { bugReportUrl, surveyUrl } from '../../config'
 import { reset } from '../../store/session'
-import userProfileStore, {
-  loadUserProfile,
-  resetUserProfile,
-} from '../../store/userProfile'
+import useUserProfile from '../../store/userProfile'
 
+const store = useUserProfile()
 const router = useRouter()
 
 const toast = useToast()
@@ -17,7 +15,7 @@ const toast = useToast()
 const handleLogout = async () => {
   try {
     await logout()
-    resetUserProfile()
+    store.resetUserProfile()
     reset()
     router.push({ name: 'login' })
   } catch (err) {
@@ -28,7 +26,7 @@ const handleLogout = async () => {
 
 onMounted(async () => {
   try {
-    await loadUserProfile()
+    await store.loadUserProfile()
   } catch (err) {
     toast.error('無法讀取使用者資料')
     console.error(err)
@@ -59,7 +57,7 @@ onMounted(async () => {
     class="text-text inline-block whitespace-nowrap px-1.5"
     style="font-size: 2vh"
   >
-    {{ userProfileStore.username }}
+    {{ store.username }}
   </p>
   <a
     title="Survey"

app/src/main.ts

@@ -1,4 +1,6 @@
 import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+
 import './style.css'
 /* import font awesome icon component */
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
@@ -13,9 +15,11 @@ import App from './App.vue'
 import router from './router'
 
 const app = createApp(App)
+const pinia = createPinia()
 
 app.component('font-awesome-icon', FontAwesomeIcon)
 
+app.use(pinia)
 app.use(router)
 
 const options = {

app/src/store/userProfile.ts

@@ -1,30 +1,35 @@
-import { reactive } from 'vue'
-import api from '../utils/api'
+import { defineStore } from 'pinia'
+import { getUserProfile } from '../utils/api'
 
-const store = reactive({
-  username: '',
-  email: '',
-  progress: {},
+interface IProgress {
+  quest: string
+  sessions: string[]
+  completed: boolean
+  startedAt: Date
+  finishedAt?: Date
+}
+
+export interface UserProfile {
+  username: string
+  email: string
+  progress: Map<string, IProgress>
+}
+
+const useUserProfile = defineStore('userProfile', {
+  state: (): UserProfile => ({
+    username: '',
+    email: '',
+    progress: new Map<string, IProgress>(),
+  }),
+  actions: {
+    async loadUserProfile() {
+      const res = await getUserProfile()
+      this.$patch(res)
+    },
+    async resetUserProfile() {
+      this.$reset()
+    },
+  },
 })
 
-export async function loadUserProfile() {
-  try {
-    const res = await api.get('/users/me')
-    const { username, email, progress } = res.data
-    store.username = username
-    store.email = email
-    store.progress = progress
-    return store
-  } catch (err: any) {
-    console.error(err)
-    throw new Error(`Failed to load user profile: ${err.message}`)
-  }
-}
-
-export function resetUserProfile() {
-  store.username = ''
-  store.email = ''
-  store.progress = {}
-}
-
-export default store
+export default useUserProfile

app/src/utils/api.ts

@@ -1,4 +1,5 @@
 import axios from 'axios'
+import { UserProfile } from '../store/userProfile'
 
 const api = axios.create({
   baseURL: '/api/v1',
@@ -8,3 +9,8 @@ const api = axios.create({
   withCredentials: true,
 })
 export default api
+
+export async function getUserProfile(): Promise<UserProfile> {
+  const res = await api.get<UserProfile>('/users/me')
+  return res.data
+}