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/ControlPalette.vue

@@ -25,10 +25,10 @@
 </template>
 
 <script setup>
-import sessionManager from '../utils/session'
+import { createSession } from '../store/session'
 
 const reset = async () => {
   console.log('resetting...')
-  await sessionManager.createSession()
+  await createSession()
 }
 </script>

app/src/components/GameHeaderPart.vue

@@ -4,12 +4,18 @@ import { useRouter } from 'vue-router'
 import { logout } from '../utils/auth'
 import { bugReportUrl } from '../config'
 import api from '../utils/api'
+import { reset } from '../store/session'
 
 const router = useRouter()
 
 const handleLogout = async () => {
-  await logout()
-  router.push({ name: 'login' })
+  try {
+    await logout()
+    reset()
+    router.push({ name: 'login' })
+  } catch (err) {
+    console.error(err)
+  }
 }
 
 const questData = ref(null)

app/src/components/HintPart.vue

@@ -1,11 +1,15 @@
 <script setup>
 import { ref, watch } from 'vue'
-import sessionManager from '../utils/session'
+import sessionStore from '../store/session'
 
 const current = ref(-1)
-watch(sessionManager.hints, (hints) => {
-  current.value = hints.length - 1
-})
+watch(
+  () => sessionStore.session.hints,
+  (hints) => {
+    current.value = hints.length - 1
+  },
+  { deep: true }
+)
 
 const left = () => {
   if (current.value > 0) {
@@ -14,7 +18,7 @@ const left = () => {
 }
 
 const right = () => {
-  if (current.value < sessionManager.hints.value.length - 1) {
+  if (current.value < sessionStore.session.hints.length - 1) {
     current.value += 1
   }
 }
@@ -43,13 +47,13 @@ const right = () => {
       <p class="inline text-text font-xl w-1/14 p-2 m-1">{{ current + 1 }}</p>
       <p class="inline text-text font-xl w-1/14 p-2 m-1">/</p>
       <p class="inline text-text font-xl w-1/14 p-2 m-1">
-        {{ sessionManager.hints.value.length }}
+        {{ sessionStore.session.hints.length }}
       </p>
       <button
         class="p-2 m-1 w-1/8"
         id="Rbutton"
         @click="right"
-        :disabled="current === sessionManager.hints.value.length - 1"
+        :disabled="current === sessionStore.session.hints.length - 1"
       >
         <font-awesome-icon :icon="['fas', 'arrow-right']" class="text-text" />
       </button>
@@ -57,7 +61,7 @@ const right = () => {
   </div>
   <div id="hint" class="bg-bg flex flex-wrap p-8">
     <p class="text-text font-xl whitespace-pre-wrap">
-      {{ sessionManager.hints.value[current] }}
+      {{ sessionStore.session.hints[current] }}
     </p>
     <br />
   </div>

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>

app/src/components/TerminalPart.vue

@@ -10,12 +10,13 @@
 
 <script setup>
 import { onMounted, ref } from 'vue'
-import sessionManager from '../utils/session'
+import { useTerminal } from '../store/session'
 
 const terminal = ref(null)
 
 onMounted(() => {
-  sessionManager.term.mount(terminal.value)
-  window.addEventListener('resize', () => sessionManager.term.resizeScreen())
+  const term = useTerminal()
+  term.mount(terminal.value)
+  window.addEventListener('resize', () => term.resizeScreen())
 })
 </script>

app/src/components/TreeChart.vue

@@ -1,6 +1,6 @@
 <script setup>
 import FileNode from './FileNode.vue'
-import sessionManager from '../utils/session.js'
+import sessionStore from '../store/session.js'
 </script>
 
 <template>
@@ -8,8 +8,8 @@ import sessionManager from '../utils/session.js'
     <ul>
       <li>
         <FileNode
-          :node="sessionManager.graph.value"
-          :pwd="sessionManager.pwd.value"
+          :node="sessionStore.session.graph"
+          :pwd="sessionStore.session.pwd"
         />
       </li>
     </ul>