Object inheritance in JS: so long and thanks for all the fish

Author: destegabry

src/reader-writer.js renamed to src/daemon.js

@@ -1,52 +1,65 @@
-import { Subject } from 'rxjs';
+import { Subject, BehaviorSubject } from 'rxjs';
 
-export default class ReaderWriter {
+export default class Daemon {
   constructor() {
     this.socket = null;
     this.pluginURL = null;
-    this.messageSubject = new Subject();
-    this.serialMonitorSubject = new Subject();
-    this.devicesList = {
+    this.messageBus = new Subject();
+    this.serialMonitor = new Subject();
+    this.devicesList = new BehaviorSubject({
       serial: [],
       network: []
-    };
-    this.messageSubject.subscribe(this.updateDevicesList.bind(this));
+    });
+    this.messageBus.subscribe(this.updateDevicesList.bind(this));
     this.openingSerial = null;
     this.closingSerial = null;
   }
 
-  initSocket(socket) {
-    this.socket = socket;
+  initSocket() {
     this.socket.on('message', this.parseMessage.bind(this));
   }
 
   initPluginUrl(pluginUrl) {
     this.pluginURL = pluginUrl;
   }
 
+  /**
+   * Compares 2 devices list checking they contains the same ports in the same order
+   * @param {Array<device>} a the first list
+   * @param {Array<device>} b the second list
+   */
+  static devicesListAreEquals(a, b) {
+    if (!a || !b || a.length !== b.length) {
+      return false;
+    }
+    return a.every((item, index) => b[index].Name === item.Name);
+  }
+
   updateDevicesList(devicesInfo) {
     // Result of a list command
     if (devicesInfo.Ports) {
-      if (devicesInfo.Network) {
-        this.devicesList.network = devicesInfo.Ports;
+      const lastDevices = this.devicesList.getValue();
+      if (devicesInfo.Network && !Daemon.devicesListAreEquals(lastDevices.network, devicesInfo.Ports)) {
+        this.devicesList.next({
+          serial: lastDevices.serial,
+          network: devicesInfo.Ports
+        });
       }
-      else {
-        this.devicesList.serial = devicesInfo.Ports;
+      else if (!devicesInfo.Network && !Daemon.devicesListAreEquals(lastDevices.serial, devicesInfo.Ports)) {
+        this.devicesList.next({
+          serial: devicesInfo.Ports,
+          network: lastDevices.network
+        });
       }
     }
   }
 
   parseMessage(message) {
-    let jsonMessage;
     try {
-      jsonMessage = JSON.parse(message);
+      this.messageBus.next(JSON.parse(message));
     }
     catch (SyntaxError) {
-      return;
-    }
-
-    if (jsonMessage) {
-      this.messageSubject.next(jsonMessage);
+      this.messageBus.next(message);
     }
   }
 
@@ -72,7 +85,7 @@ export default class ReaderWriter {
           return reject(new Error('Failed to open serial'));
         }
       };
-      this.openSubscription = this.messageSubject.subscribe(checkOpen);
+      this.openSubscription = this.messageBus.subscribe(checkOpen);
     }).finally(() => {
       this.openSubscription.unsubscribe();
       this.openingSerial = null;
@@ -105,7 +118,7 @@ export default class ReaderWriter {
           return reject(new Error('Failed to close serial'));
         }
       };
-      this.closeSubscription = this.messageSubject.subscribe(checkClosed);
+      this.closeSubscription = this.messageBus.subscribe(checkClosed);
     }).finally(() => {
       this.closeSubscription.unsubscribe();
       this.closingSerial = null;
@@ -117,11 +130,11 @@ export default class ReaderWriter {
   readSerial() {
     const onMessage = message => {
       if (message.D) {
-        this.serialMonitorSubject.next(message.D);
+        this.serialMonitor.next(message.D);
       }
     };
     if (!this.readSerialSubscription) {
-      this.readSerialSubscription = this.messageSubject.subscribe(onMessage);
+      this.readSerialSubscription = this.messageBus.subscribe(onMessage);
     }
   }
 }

src/socket-daemon.js

@@ -38,7 +38,7 @@ import {
   timer
 } from 'rxjs';
 import { filter, startWith, takeUntil } from 'rxjs/operators';
-import ReaderWriter from './reader-writer';
+import Daemon from './daemon';
 
 // Required agent version
 const MIN_VERSION = '1.1.71';
@@ -62,19 +62,19 @@ if (browser.name !== 'chrome' && browser.name !== 'firefox') {
   orderedPluginAddresses = [LOOPBACK_HOSTNAME, LOOPBACK_ADDRESS];
 }
 
-export default class SocketDaemon {
+export default class SocketDaemon extends Daemon {
   constructor() {
+    super();
     this.selectedProtocol = PROTOCOL.HTTP;
     this.agentInfo = {};
     this.agentFound = new BehaviorSubject(false);
     this.wsConnected = new BehaviorSubject(false);
     this.error = new Subject();
-    this.readerWriter = new ReaderWriter();
 
     this.wsConnected
       .subscribe(wsConnected => {
         if (wsConnected) {
-          this.readerWriter.initSocket(this.socket);
+          this.initSocket();
           interval(POLLING_INTERVAL)
             .pipe(startWith(0))
             .pipe(takeUntil(this.wsConnected.pipe(filter(status => !status))))
@@ -135,7 +135,7 @@ export default class SocketDaemon {
               // Protocol http, force 127.0.0.1 for old agent versions too
               this.agentInfo[this.selectedProtocol] = this.agentInfo[this.selectedProtocol].replace('localhost', '127.0.0.1');
             }
-            this.readerWriter.initPluginUrl(this.agentInfo[this.selectedProtocol]);
+            this.initPluginUrl(this.agentInfo[this.selectedProtocol]);
             return true;
           }
           return false;

test/app.jsx

@@ -38,15 +38,13 @@ class App extends React.Component {
 
     this.daemon.error.subscribe(this.showError);
 
-    this.daemon.readerWriter.messageSubject.subscribe(() => {
-      this.setState({
-        serialDevices: this.daemon.readerWriter.devicesList.serial,
-        networkDevices: this.daemon.readerWriter.devicesList.network
-      });
-    });
+    this.daemon.devicesList.subscribe(devices => this.setState({
+      serialDevices: devices.serial,
+      networkDevices: devices.network
+    }));
 
     const serialTextarea = document.getElementById('serial-textarea');
-    this.daemon.readerWriter.serialMonitorSubject.subscribe(message => {
+    this.daemon.serialMonitor.subscribe(message => {
       this.setState({ serialMonitorContent: this.state.serialMonitorContent + message });
       scrollToBottom(serialTextarea);
     });
@@ -63,12 +61,12 @@ class App extends React.Component {
   handleOpen(e, port) {
     this.setState({ serialMonitorContent: '' });
     e.preventDefault();
-    this.daemon.readerWriter.openSerialMonitor(port);
+    this.daemon.openSerialMonitor(port);
   }
 
   handleClose(e, port) {
     e.preventDefault();
-    this.daemon.readerWriter.closeSerialMonitor(port);
+    this.daemon.closeSerialMonitor(port);
   }
 
   render() {