From 1999d090ac4dbcda2dbe9500aba4668bddb148fd Mon Sep 17 00:00:00 2001 From: Kirill Merkushev Date: Wed, 29 Mar 2017 02:36:17 +0300 Subject: [PATCH] use rxjs as more readable way --- web/package.json | 4 +- web/src/containers/App/index.js | 105 +++++++++++++++----------------- web/yarn.lock | 25 ++++++++ 3 files changed, 76 insertions(+), 58 deletions(-) diff --git a/web/package.json b/web/package.json index db5e2c89..39b1f9ae 100644 --- a/web/package.json +++ b/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" diff --git a/web/src/containers/App/index.js b/web/src/containers/App/index.js index 80b337da..2fb26281 100644 --- a/web/src/containers/App/index.js +++ b/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,45 +56,48 @@ 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, @@ -100,25 +105,11 @@ export default class App extends Component { "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 (
diff --git a/web/yarn.lock b/web/yarn.lock index 2cfad9c9..91b1a345 100644 --- a/web/yarn.lock +++ b/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"