Cosmetic Refactoring

web/react/components/error_bar.jsx

@@ -7,32 +7,40 @@ var AppDispatcher = require('../dispatcher/app_dispatcher.jsx');
 var Constants = require('../utils/constants.jsx');
 var ActionTypes = Constants.ActionTypes;
 
-function getStateFromStores() {
-    var error = ErrorStore.getLastError();
-    if (error && error.message !== "There appears to be a problem with your internet connection") {
-        return { message: error.message };
-    } else {
-        return { message: null };
+export default class ErrorBar extends React.Component {
+    constructor() {
+        super();
+
+        this.onErrorChange = this.onErrorChange.bind(this);
+        this.handleClose = this.handleClose.bind(this);
+
+        this.state = this.getStateFromStores();
+        if (this.state.message) {
+            setTimeout(this.handleClose, 10000);
+        }
     }
-}
+    getStateFromStores() {
+        var error = ErrorStore.getLastError();
+        if (!error || error.message === 'There appears to be a problem with your internet connection') {
+            return {message: null};
+        }
 
-module.exports = React.createClass({
-    displayName: 'ErrorBar',
-
-    componentDidMount: function() {
-        ErrorStore.addChangeListener(this._onChange);
+        return {message: error.message};
+    }
+    componentDidMount() {
+        ErrorStore.addChangeListener(this.onErrorChange);
         $('body').css('padding-top', $(React.findDOMNode(this)).outerHeight());
-        $(window).resize(function() {
+        $(window).resize(function onResize() {
             if (this.state.message) {
                 $('body').css('padding-top', $(React.findDOMNode(this)).outerHeight());
             }
         }.bind(this));
-    },
-    componentWillUnmount: function() {
-        ErrorStore.removeChangeListener(this._onChange);
-    },
-    _onChange: function() {
-        var newState = getStateFromStores();
+    }
+    componentWillUnmount() {
+        ErrorStore.removeChangeListener(this.onErrorChange);
+    }
+    onErrorChange() {
+        var newState = this.getStateFromStores();
         if (!utils.areStatesEqual(newState, this.state)) {
             if (newState.message) {
                 setTimeout(this.handleClose, 10000);
@@ -40,9 +48,11 @@ module.exports = React.createClass({
 
             this.setState(newState);
         }
-    },
-    handleClose: function(e) {
-        if (e) e.preventDefault();
+    }
+    handleClose(e) {
+        if (e) {
+            e.preventDefault();
+        }
 
         AppDispatcher.handleServerAction({
             type: ActionTypes.RECIEVED_ERROR,
@@ -50,24 +60,22 @@ module.exports = React.createClass({
         });
 
         $('body').css('padding-top', '0');
-    },
-    getInitialState: function() {
-        var state = getStateFromStores();
-        if (state.message) {
-            setTimeout(this.handleClose, 10000);
-        }
-        return state;
-    },
-    render: function() {
+    }
+    render() {
         if (this.state.message) {
             return (
-                <div className="error-bar">
+                <div className='error-bar'>
                     <span>{this.state.message}</span>
-                    <a href="#" className="error-bar__close" onClick={this.handleClose}>&times;</a>
+                    <a
+                        href='#'
+                        className='error-bar__close'
+                        onClick={this.handleClose}>
+                        &times;
+                    </a>
                 </div>
             );
-        } else {
-            return <div/>;
         }
+
+        return <div/>;
     }
-});
+}