refactor: centralize all variable to sessionManager

app/src/utils/session.js

@@ -1,6 +1,8 @@
 import { ref } from 'vue'
 import { FileGraph } from '@linux-odyssey/file-graph'
 import api from './api'
+import Socket from './socket'
+import SocketTerminal from './terminal'
 
 class SessionManager {
   constructor(questId) {
@@ -16,6 +18,30 @@ class SessionManager {
     )
     this.pwd = ref('')
     this.status = ref('inactive')
+    this.socket = new Socket()
+    this.term = new SocketTerminal(40, 80)
+  }
+
+  init() {
+    this.socket.on('terminal', (data) => {
+      this.term.write(data)
+    })
+    this.term.onData((data) => {
+      this.socket.emit('terminal', data)
+    })
+    this.socket.on('graph', (event) => {
+      this.handleGraphUpdate(event)
+    })
+    this.socket.on('hints', (event) => {
+      this.handleHintUpdate(event)
+    })
+    this.socket.on('tasks', (tasks) => {
+      this.setTasks(tasks)
+    })
+    this.socket.on('status', (event) => {
+      this.handleStatusUpdate(event)
+    })
+    return this.getActiveSession()
   }
 
   getSession() {
@@ -27,6 +53,8 @@ class SessionManager {
     this.graph.value = new FileGraph(session.graph)
     this.hints.value = session.hints
     this.status.value = session.status
+    this.term.clear()
+    this.socket.connect(session)
   }
 
   handleGraphUpdate(event) {

app/src/utils/socket.js

@@ -22,6 +22,14 @@ class SocketWrapper {
       console.log('Socket connected to session', session._id)
     })
 
+    this.socket.on('disconnect', () => {
+      console.log('Socket disconnected from session', session._id)
+    })
+
+    this.socket.on('error', (err) => {
+      console.log('Socket error', err)
+    })
+
     this.bindListeners()
   }
 
@@ -32,6 +40,12 @@ class SocketWrapper {
     }
   }
 
+  once(event, callback) {
+    if (this.socket) {
+      this.socket.once(event, callback)
+    }
+  }
+
   bindListeners() {
     this.listeners.forEach(({ event, callback }) => {
       this.socket.on(event, callback)
@@ -47,4 +61,4 @@ class SocketWrapper {
   }
 }
 
-export default new SocketWrapper()
+export default SocketWrapper

app/src/utils/terminal.js

@@ -1,6 +1,5 @@
 import { Terminal } from 'xterm'
 import { FitAddon } from 'xterm-addon-fit'
-import socket from './socket'
 import 'xterm/css/xterm.css'
 
 class SocketTerminal {
@@ -24,13 +23,14 @@ class SocketTerminal {
     this.fitAddon = new FitAddon()
     this.term.loadAddon(this.fitAddon)
     this.fitAddon.fit()
-    this.socket = socket
-    this.socket.on('terminal', (message) => {
-      this.term.write(message)
-    })
-    this.term.onData((key) => {
-      this.socket.emit('terminal', key)
-    })
+  }
+
+  write(message) {
+    this.term.write(message)
+  }
+
+  onData(callback) {
+    this.term.onData(callback)
   }
 
   resizeScreen() {
@@ -48,4 +48,4 @@ class SocketTerminal {
   }
 }
 
-export default new SocketTerminal(40, 100)
+export default SocketTerminal