Decouple UI and logic of disconnection event

Author: sebromero

backend/serial.js

@@ -66,7 +66,7 @@ const Serial = {
   renameFile: async (oldName, newName) => {
     return board.fs_rename(oldName, newName)
   },
-  onConnectionLost: async (fn) => {
+  onConnectionClosed: async (fn) => {
     board.serial.on('close', fn)
   },
   createFolder: async (folder) => {

ui/arduino/store.js

@@ -112,7 +112,8 @@ async function store(state, emitter) {
   // CONNECTION DIALOG
   emitter.on('open-connection-dialog', async () => {
     log('open-connection-dialog')
-    emitter.emit('disconnect')
+    // UI should be in disconnected state, no need to update
+    await serial.disconnect()
     state.availablePorts = await getAvailablePorts()
     state.isConnectionDialogOpen = true
     emitter.emit('render')
@@ -178,14 +179,16 @@ async function store(state, emitter) {
       term.write(data)
       term.scrollToBottom()
     })
-    serial.onConnectionLost(() => emitter.emit('disconnect'))
+
+    // Update the UI when the conncetion is closed
+    // This may happen when unplugging the board
+    serial.onConnectionClosed(() => emitter.emit('disconnected'))
 
     emitter.emit('close-connection-dialog')
     emitter.emit('refresh-files')
     emitter.emit('render')
   })
-  emitter.on('disconnect', async () => {
-    await serial.disconnect()
+  emitter.on('disconnected', () => {
     state.isConnected = false
     state.panelHeight = PANEL_CLOSED
     state.boardFiles = []
@@ -194,6 +197,11 @@ async function store(state, emitter) {
     emitter.emit('render')
     updateMenu()
   })
+  emitter.on('disconnect', async () => {
+    await serial.disconnect()
+    // Update the UI after closing the connection
+    emitter.emit('disconnected')
+  })
   emitter.on('connection-timeout', async () => {
     state.isConnected = false
     state.isConnecting = false

ui/arduino/views/components/toolbar.js

@@ -16,7 +16,7 @@ function Toolbar(state, emit) {
       ${Button({
         icon: state.isConnected ? 'connect.svg' : 'disconnect.svg',
         tooltip: state.isConnected ? `Disconnect (${metaKeyString}+Shift+D)` : `Connect (${metaKeyString}+Shift+C)`,
-        onClick: () => emit('open-connection-dialog'),
+        onClick: () => state.isConnected ? emit('disconnect') : emit('open-connection-dialog'),
         active: state.isConnected
       })}