dashboard: prevent state update on every reconnection

dashboard/assets.go

@@ -26891,19 +26891,19 @@ var _bundleJs = []byte((((((((((`!function(modules) {
         function Dashboard(props) {
             _classCallCheck(this, Dashboard);
             var _this = _possibleConstructorReturn(this, (Dashboard.__proto__ || Object.getPrototypeOf(Dashboard)).call(this, props));
-            return _this.connect = function() {
+            return _this.reconnect = function() {
                 var server = new WebSocket(("https:" === window.location.protocol ? "wss://" : "ws://") + window.location.host + "/api");
-                server.onmessage = function(event) {
+                server.onopen = function() {
+                    _this.setState({
+                        content: defaultContent,
+                        shouldUpdate: {}
+                    });
+                }, server.onmessage = function(event) {
                     var msg = JSON.parse(event.data);
                     msg && _this.update(msg);
                 }, server.onclose = function() {
                     setTimeout(_this.reconnect, 3e3);
                 };
-            }, _this.reconnect = function() {
-                _this.setState({
-                    content: defaultContent,
-                    shouldUpdate: {}
-                }), _this.connect();
             }, _this.update = function(msg) {
                 _this.setState(function(prevState) {
                     return {
@@ -26935,7 +26935,7 @@ var _bundleJs = []byte((((((((((`!function(modules) {
         return _inherits(Dashboard, _Component), _createClass(Dashboard, [ {
             key: "componentDidMount",
             value: function() {
-                this.connect();
+                this.reconnect();
             }
         }, {
             key: "render",

dashboard/assets/components/Dashboard.jsx

@@ -158,15 +158,18 @@ class Dashboard extends Component<Props, State> {
 
 	// componentDidMount initiates the establishment of the first websocket connection after the component is rendered.
 	componentDidMount() {
-		this.connect();
+		this.reconnect();
 	}
 
-	// connect establishes a websocket connection with the server, listens for incoming messages
+	// reconnect establishes a websocket connection with the server, listens for incoming messages
 	// and tries to reconnect on connection loss.
-	connect = () => {
+	reconnect = () => {
 		const server = new WebSocket(`${((window.location.protocol === 'https:') ? 'wss://' : 'ws://') + window.location.host}/api`);
+		server.onopen = () => {
+			this.setState({content: defaultContent, shouldUpdate: {}});
+		};
 		server.onmessage = (event) => {
-			const msg: Content = JSON.parse(event.data);
+			const msg: $Shape<Content> = JSON.parse(event.data);
 			if (!msg) {
 				return;
 			}
@@ -177,12 +180,6 @@ class Dashboard extends Component<Props, State> {
 		};
 	};
 
-	// reconnect clears the state before the connection establishment.
-	reconnect = () => {
-		this.setState({content: defaultContent, shouldUpdate: {}});
-		this.connect();
-	};
-
 	// update updates the content corresponding to the incoming message.
 	update = (msg: $Shape<Content>) => {
 		this.setState(prevState => ({

dashboard/assets/package.json

@@ -27,7 +27,6 @@
         "material-ui": "^1.0.0-beta.24",
         "material-ui-icons": "^1.0.0-beta.17",
         "path": "^0.12.7",
-        "ramda": "^0.25.0",
         "react": "^16.2.0",
         "react-dom": "^16.2.0",
         "react-fa": "^5.0.0",