Merge pull request #77 from plouc/feat-restore-ws

Add ability to automatically reconnect websockets

Author: Raphaël Benitte

package.json

@@ -53,7 +53,7 @@
     "gulp-stylus": "^2.0.0",
     "gulp-uglify": "^1.0.2",
     "gulp-util": "^3.0.3",
-    "lodash": "^3.2.0",
+    "lodash": "4.9.0",
     "memory-cache": "0.0.5",
     "react-mixin": "3.0.4",
     "reflux": "0.4.0",

src/browser/actions/ConnectionStatusActions.js

@@ -0,0 +1,13 @@
+import Reflux from 'reflux';
+
+
+const ConnectionStatusActions = Reflux.createActions([
+    'connecting',
+    'connected',
+    'disconnected',
+    'delaying',
+    'failed'
+]);
+
+
+export default ConnectionStatusActions;

src/browser/actions/NotificationsActions.js

@@ -0,0 +1,11 @@
+import Reflux from 'reflux';
+
+
+const NotificationsActions = Reflux.createActions([
+    'notify',
+    'update',
+    'close'
+]);
+
+
+export default NotificationsActions;

src/browser/components/ConnectionStatus.jsx

@@ -0,0 +1,72 @@
+import React, { Component, PropTypes } from 'react';
+import reactMixin                      from 'react-mixin';
+import { ListenerMixin }               from 'reflux';
+import ConnectionStatusStore, {
+    CONNECTION_STATUS_CONNECTING,
+    CONNECTION_STATUS_CONNECTED,
+    CONNECTION_STATUS_DISCONNECTED,
+    CONNECTION_STATUS_DELAYING,
+    CONNECTION_STATUS_FAILED
+} from '../stores/ConnectionStatusStore';
+
+
+class ConnectionStatus extends Component {
+    constructor(props) {
+        super(props);
+
+        this.state = ConnectionStatusStore.getState();
+    }
+
+    componentWillMount() {
+        this.listenTo(ConnectionStatusStore, this.onStatusUpdate);
+    }
+
+    onStatusUpdate({ countdown, status, retry }) {
+        this.setState({ countdown, status, retry });
+    }
+    
+    render() {
+        const { countdown, status, retry } = this.state;
+
+        let message;
+        let iconClass;
+        if (status === CONNECTION_STATUS_CONNECTING) {
+            message   = 'connecting';
+            iconClass = 'fa fa-question';
+        } else if (status === CONNECTION_STATUS_CONNECTED) {
+            message   = 'connected';
+            iconClass = 'fa fa-check';
+        } else if (status === CONNECTION_STATUS_DISCONNECTED || status === CONNECTION_STATUS_DELAYING) {
+            message   = 'disconnected';
+            iconClass = 'fa fa-warning';
+
+            if (status === CONNECTION_STATUS_DELAYING) {
+                message = (
+                    <span>
+                        disconnected<br/>
+                        <span className="text-discrete">next attempt in {countdown}s</span>
+                    </span>
+                );
+            }
+        } else if (status === CONNECTION_STATUS_FAILED) {
+            iconClass = 'fa fa-frown-o';
+            message   = `unable to restore websockets after ${retry} attemps,
+            please make sure Mozaïk server is running and that
+            you can reach the internet if running on a remote server.`;
+        }
+
+        return (
+            <div className="connection-status">
+                <i className={iconClass}/>
+                {message}
+            </div>
+        );
+    }
+}
+
+ConnectionStatus.displayName = 'ConnectionStatus';
+
+reactMixin(ConnectionStatus.prototype, ListenerMixin);
+
+
+export default ConnectionStatus;

src/browser/components/Mozaik.jsx

@@ -2,7 +2,8 @@ import React, { Component, PropTypes } from 'react';
 import reactMixin                      from 'react-mixin';
 import { ListenerMixin }               from 'reflux';
 import Dashboard                       from './Dashboard.jsx';
-import ConfigStore                     from './../stores/ConfigStore';
+import Notifications                   from './Notifications.jsx';
+import ConfigStore                     from '../stores/ConfigStore';
 
 
 class Mozaik extends Component {
@@ -35,6 +36,7 @@ class Mozaik extends Component {
         return (
             <div className="dashboard">
                 {dashboardNodes}
+                <Notifications />
             </div>
         );
     }

src/browser/components/Notifications.jsx

@@ -0,0 +1,47 @@
+import React, { Component, PropTypes } from 'react';
+import _                               from 'lodash';
+import reactMixin                      from 'react-mixin';
+import { ListenerMixin }               from 'reflux';
+import NotificationsStore              from '../stores/NotificationsStore';
+import NotificationsItem               from './NotificationsItem.jsx';
+
+
+class Notifications extends Component {
+    constructor(props) {
+        super(props);
+
+        this.state = { notifications: [] };
+    }
+
+    componentWillMount() {
+        this.listenTo(NotificationsStore, this.onNotificationsUpdate);
+    }
+
+    onNotificationsUpdate(notifications) {
+        this.setState({ notifications });
+    }
+
+    render() {
+        const { notifications } = this.state;
+
+        return (
+            <div className="notifications">
+                {notifications.map(notification => (
+                    <NotificationsItem
+                        key={`notification.${notification.id}`}
+                        notification={notification}
+                    />
+                ))}
+            </div>
+        );
+    }
+}
+
+Notifications.displayName = 'Notifications';
+
+Notifications.propTypes = {};
+
+reactMixin(Notifications.prototype, ListenerMixin);
+
+
+export default Notifications;

src/browser/components/NotificationsItem.jsx

@@ -0,0 +1,33 @@
+import React, { Component, PropTypes } from 'react';
+import _                               from 'lodash';
+
+
+class NotificationsItem extends Component {
+    render() {
+        const { notification } = this.props;
+
+        let content;
+        if (notification.component) {
+            content = React.createElement(notification.component, _.assign({}, notification.props, {
+                notificationId: notification.id
+            }));
+        } else {
+            content = notification.message;
+        }
+
+        return (
+            <div className={`notifications__item notifications__item--${notification.status}`}>
+                {content}
+            </div>
+        );
+    }
+}
+
+NotificationsItem.displayName = 'NotificationsItem';
+
+NotificationsItem.propTypes = {
+    notification: PropTypes.object.isRequired
+};
+
+
+export default NotificationsItem;