feat: store graph in session manager

app/src/App.vue

@@ -20,6 +20,9 @@ onMounted(async () => {
     console.log('Disconnected from the server.')
   })
   socket.on('message', console.log)
+  socket.on('graph', (event) => {
+    sessionManager.handleGraphUpdate(event)
+  })
 })
 </script>
 

app/src/components/TreeChart.vue

@@ -1,36 +1,16 @@
 <script setup>
-import { onMounted, ref } from 'vue'
+import { ref } from 'vue'
-import { FileGraph } from '@linux-odyssey/file-graph'
 import FileNode from './FileNode.vue'
-import socket from '../utils/socket.js'
+import sessionManager from '../utils/session.js'
 
 const pwd = ref('/home/rudeus')
-
-const graph = ref(
-  new FileGraph({
-    path: '/',
-    name: '/',
-    type: 'folder',
-    discovered: false,
-  })
-)
-
-onMounted(() => {
-  socket.on('graph', (event) => {
-    // TODO: update graph
-    console.log(event)
-    if (event.discover) {
-      graph.value.discover(event.discover)
-    }
-  })
-})
 </script>
 
 <template>
   <div class="tree w-max h-max">
     <ul>
       <li>
-        <FileNode :node="graph" :pwd="pwd" />
+        <FileNode :node="sessionManager.graph.value" :pwd="pwd" />
       </li>
     </ul>
   </div>

app/src/utils/session.js

@@ -1,10 +1,18 @@
 import { ref } from 'vue'
+import { FileGraph } from '@linux-odyssey/file-graph'
 import api from './api'
 
 class SessionManager {
   constructor(questId) {
     this.questId = questId
     this.session = ref(null)
+    this.graph = ref(
+      new FileGraph({
+        path: '/',
+        type: 'folder',
+        discovered: false,
+      })
+    )
   }
 
   getSession() {
@@ -14,6 +22,13 @@ class SessionManager {
   setSession(session) {
     console.log('Update session:', session)
     this.session.value = session
+    this.graph.value = new FileGraph(session.graph)
+  }
+
+  handleGraphUpdate(event) {
+    if (event.discover) {
+      this.graph.value.discover(event.discover)
+    }
   }
 
   async createSession() {
@@ -37,7 +52,8 @@ class SessionManager {
     if (sessions.length === 0) {
       return
     }
-    const session = sessions[sessions.length - 1]
+    const { _id: sessionId } = sessions[sessions.length - 1]
+    const { data: session } = await api.get(`/sessions/${sessionId}`)
     console.log(
       `Last Session ID: ${session._id}, Quest: ${session.quest}, Created At: ${session.createdAt}`
     )
@@ -49,6 +65,7 @@ class SessionManager {
     if (!this.session.value) {
       await this.createSession()
     }
+    console.log(this.session.value)
   }
 }
 

server/src/models/session.js

@@ -4,7 +4,10 @@ import { FileNode } from '@linux-odyssey/file-graph'
 const nodeSchema = new Schema({
   path: String,
   type: String,
-  discovered: Boolean,
+  discovered: {
+    type: Boolean,
+    default: false,
+  },
 })
 
 nodeSchema.add({
@@ -41,7 +44,10 @@ const Session = model(
       hints: [String],
       graph: {
         type: nodeSchema,
-        default: new FileNode({ path: '/', name: '/', type: 'folder' }),
+        default: new FileNode({
+          path: '/',
+          type: 'folder',
+        }),
       },
     },
     { timestamps: true }