Fix re-login error (#60)

* refactor: put all session ref into one reactive store

* fix relogin duplicate signal

* fix: put quest data into store, fix hint reactivity

* fix: duplicate after relogin

* only register listener once

app/src/components/QuestPart.vue

@@ -1,37 +1,20 @@
 <script setup>
-import { onMounted, ref } from 'vue'
-import api from '../utils/api'
-import sessionManager from '../utils/session'
-
-const questData = ref(null)
-const questErr = ref(null)
-
-onMounted(async () => {
-  try {
-    const res = await api.get('/quests/helloworld')
-    questData.value = res.data
-  } catch (err) {
-    questErr.value = err
-  }
-})
+import sessionStore from '../store/session'
 </script>
 
 <template>
   <div class="h-full w-full max-h-full">
-    <h1 id="topic" class="text-red-500" v-if="questErr">
-      Failed to get quest infomation
-    </h1>
-    <h1 id="topic" class="text-text" v-else-if="questData">
-      {{ questData.title }}
+    <h1 id="topic" class="text-text" v-if="sessionStore.quest">
+      {{ sessionStore.quest.title }}
     </h1>
     <hr class="border-text-tertiary border-2 my-2" />
     <div>
-      <div v-if="questData" class="whitespace-pre-wrap">
-        <p class="text-text">{{ questData.instruction }}</p>
+      <div v-if="sessionStore.quest" class="whitespace-pre-wrap">
+        <p class="text-text">{{ sessionStore.quest.instruction }}</p>
         <br />
         <p class="text-text">Tasks:</p>
-        <ul v-if="sessionManager.session.value">
-          <li v-for="task in sessionManager.session.value.tasks" :key="task.id">
+        <ul v-if="sessionStore.session">
+          <li v-for="task in sessionStore.session.tasks" :key="task.id">
             <p v-if="task.completed" class="text-text-primary">
               <span class="">✓</span>
               {{ task.name }}
@@ -43,7 +26,6 @@ onMounted(async () => {
           </li>
         </ul>
       </div>
-      <p class="text-red-500" v-else-if="questErr">{{ questErr.message }}</p>
       <p class="text-text" v-else>Loading...</p>
     </div>
   </div>