use rxjs as more readable way

web/package.json

@@ -42,7 +42,9 @@
     "jsonschema": "1.1.1",
     "react": "15.4.2",
     "react-dom": "15.4.2",
-    "react-server-sent-event-container": "1.0.4"
+    "rx": "^4.1.0",
+    "rx-connect": "^0.6.1",
+    "rx-dom": "^7.0.3"
   },
   "peerDependencies": {
     "node-sass": "^4.5.0"

web/src/containers/App/index.js

@@ -1,11 +1,13 @@
 import React, {Component} from "react";
-import {serverSentEventConnect} from "react-server-sent-event-container";
 import "./style.scss";
 import Quota from "components/Quota";
 import Queue from "components/Queue";
 import Browsers from "components/Browsers";
 import Status from "components/Status";
 import {validate} from "jsonschema";
+import {rxConnect} from "rx-connect";
+import Rx from "rx";
+import "rx-dom";
 
 const schema = {
     "id": "/selenoid",
@@ -54,71 +56,60 @@ const schema = {
     ]
 };
 
+@rxConnect(() => {
+    const open = new Rx.Subject();
+    return Rx.Observable.merge(
+        Rx.DOM.fromEventSource('/events', open)
+            .map(event => JSON.parse(event))
+            .map(event => {
+                if (event.errors) {
+                    return {
+                        status: "error",
+                        errors: event.errors
+                    };
+                }
 
-const onOpen = (props, source) => {
-    props.update({sse: 'ok'});
-};
-
-const onMessage = (event, props, source) => {
-    const item = JSON.parse(event.data);
-
-    if (item.errors) {
-        props.update({
-            errors: item.errors,
-            status: 'error',
-        });
-    } else {
-        props.update({
-            status: 'ok',
-            selenoid: item,
-        });
-    }
-};
-
-const onError = (event, props, source) => {
-    console.error('SSE Error', event);
-    props.update({sse: 'error', status: 'unknown'});
-    source.close();
-};
-
-
-@serverSentEventConnect(
-    '/events',
-    false,
-    onOpen,
-    onMessage,
-    onError
-)
-export default class App extends Component {
-    state = {
-        sse: 'unknown',
-        status: 'unknown',
+                const validation = validate(event, schema);
+                if (validation.valid) {
+                    return {
+                        status: "ok",
+                        selenoid: event
+                    };
+                } else {
+                    console.error("Wrong data from backend", validation.errors);
+                    return {
+                        status: "error",
+                        errors: validation.errors
+                    };
+                }
+            })
+            .catch(error => {
+                console.error('SSE Error', error);
+                return Rx.Observable.just(
+                    {
+                        sse: "error",
+                        status: "unknown"
+                    }
+                );
+            }),
+        open.map(event => ({
+            sse: "ok"
+        }))
+    ).startWith({
+        sse: "unknown",
+        status: "unknown",
         selenoid: {
             "total": 0,
             "used": 0,
             "queued": 0,
             "pending": 0,
             "browsers": {}
         }
-    };
-
-    componentWillReceiveProps(props) {
-        if (props.selenoid) {
-            const validation = validate(props.selenoid, schema);
-
-            if (validation.valid) {
-                this.setState(props);
-            } else {
-                this.setState({status: "error", sse: "ok"});
-                console.error("Wrong data from backend", validation.errors);
-            }
-        } else {
-            this.setState({status: props.status, sse: props.sse});
-        }
-    }
-
+    });
+})
+export default class App extends Component {
     render() {
-        const {sse, status, selenoid} = this.state;
+        const {sse, status, selenoid} = this.props;
 
         return (
             <div className="viewport">

web/yarn.lock

@@ -2705,6 +2705,10 @@ lodash.cond@^4.3.0:
   version "4.5.2"
   resolved "https://registry.yarnpkg.com/lodash.cond/-/lodash.cond-4.5.2.tgz#f471a1da486be60f6ab955d17115523dd1d255d5"
 
+lodash.isplainobject@^4.0.6:
+  version "4.0.6"
+  resolved "https://registry.yarnpkg.com/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz#7c526a52d89b45c45cc690b88163be0497f550cb"
+
 lodash.mergewith@^4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/lodash.mergewith/-/lodash.mergewith-4.6.0.tgz#150cf0a16791f5903b8891eab154609274bdea55"
@@ -3601,10 +3605,27 @@ run-async@^0.1.0:
   dependencies:
     once "^1.3.0"
 
+rx-connect@^0.6.1:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/rx-connect/-/rx-connect-0.6.1.tgz#8535c7a976053b975fd79abd31126da1a0b81a59"
+  dependencies:
+    lodash.isplainobject "^4.0.6"
+    symbol-observable "^1.0.4"
+
+rx-dom@^7.0.3:
+  version "7.0.3"
+  resolved "https://registry.yarnpkg.com/rx-dom/-/rx-dom-7.0.3.tgz#f876f398453ffc346ac65187edd6e717ed11fe09"
+  dependencies:
+    rx "*"
+
 rx-lite@^3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/rx-lite/-/rx-lite-3.1.2.tgz#19ce502ca572665f3b647b10939f97fd1615f102"
 
+rx@*, rx@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/rx/-/rx-4.1.0.tgz#a5f13ff79ef3b740fe30aa803fb09f98805d4782"
+
 safe-buffer@^5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.0.1.tgz#d263ca54696cd8a306b5ca6551e92de57918fbe7"
@@ -3926,6 +3947,10 @@ supports-color@^3.1.0, supports-color@^3.1.1:
   dependencies:
     has-flag "^1.0.0"
 
+symbol-observable@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.0.4.tgz#29bf615d4aa7121bdd898b22d4b3f9bc4e2aa03d"
+
 table@^3.7.8:
   version "3.8.3"
   resolved "https://registry.yarnpkg.com/table/-/table-3.8.3.tgz#2bbc542f0fda9861a755d3947fefd8b3f513855f"