Merge pull request #687 from lordbender/upgrade/preparing-for-react-16

Upgrade/preparing for react 16

ui/src/app.js

@@ -1,27 +1,27 @@
 import React from 'react';
-import {render} from 'react-dom';
-import { Router, browserHistory } from 'react-router'
+import { render } from 'react-dom';
+import { Router, browserHistory } from 'react-router';
+import { Provider } from 'react-redux';
+import { createStore, applyMiddleware, compose } from 'redux';
+import thunkMiddleware from 'redux-thunk';
 import routeConfig from './routes';
-import { Provider } from 'react-redux'
-import { createStore, applyMiddleware, compose } from 'redux'
-import thunkMiddleware from 'redux-thunk'
-import workflowApp from './reducers'
+import workflowApp from './reducers';
 
+// eslint-disable-next-line no-underscore-dangle
 const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
 
-let store = createStore(workflowApp, composeEnhancers(applyMiddleware(
-  thunkMiddleware
-)));
+const store = createStore(workflowApp, composeEnhancers(applyMiddleware(thunkMiddleware)));
 
 function updateLocation() {
   store.dispatch({
     type: 'LOCATION_UPDATED',
-    'location' : this.state.location.key
+    location: this.state.location.key
   });
 }
 
 render(
   <Provider store={store}>
-    <Router history={browserHistory} routes={routeConfig} onUpdate={updateLocation}/>
+    <Router history={browserHistory} routes={routeConfig} onUpdate={updateLocation} />
   </Provider>,
-  document.getElementById('content'))
+  document.getElementById('content')
+);

ui/src/components/App.js

@@ -1,41 +1,53 @@
 import React from 'react';
-import packageJSON from '../../package.json';
-import Footer from './common/Footer';
-import ErrorPage from './common/Error'
-import LeftMenu from './common/LeftMenu'
 import { connect } from 'react-redux';
+import Footer from './common/Footer';
+import ErrorPage from './common/Error';
+import LeftMenu from './common/LeftMenu';
+import packageJSON from '../../package.json';
+
+class App extends React.Component {
+  state = {
+    minimize: false
+  };
 
-const App = React.createClass({
-  getInitialState() {
-    return {
-      minimize: false
-    };
-  },
-  handleResize(e) {
-    this.setState({windowWidth: window.innerWidth, minimize: window.innerWidth < 600});
-  },
   componentDidMount() {
-   window.addEventListener('resize', this.handleResize);
- },
- componentWillUnmount() {
-   window.removeEventListener('resize', this.handleResize);
- },
+    window.addEventListener('resize', this.handleResize);
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.handleResize);
+  }
+
+  handleResize = () => {
+    this.setState({ minimize: window.innerWidth < 600 });
+  };
+
   render() {
-    const version = packageJSON.version;
-    const marginLeft = this.state.minimize?'52px':'177px';
+    const { version } = packageJSON;
+    const marginLeft = this.state.minimize ? '52px' : '177px';
     return !this.props.error ? (
-      <div style={{height: '100%'}}>
-        <div style={{height: '100%'}}>
-          <LeftMenu version={version} minimize={this.state.minimize}/>
-          <ErrorPage/>
-          <div className="appMainBody" style={{width: document.body.clientWidth-180, marginLeft: marginLeft, marginTop: '10px', paddingRight:'20px'}}>
-              {this.props.children}
+      <div style={{ height: '100%' }}>
+        <div style={{ height: '100%' }}>
+          <LeftMenu version={version} minimize={this.state.minimize} />
+          <ErrorPage />
+          <div
+            className="appMainBody"
+            style={{
+              width: document.body.clientWidth - 180,
+              marginLeft,
+              marginTop: '10px',
+              paddingRight: '20px'
+            }}
+          >
+            {this.props.children}
           </div>
         </div>
-        <Footer/>
+        <Footer />
       </div>
-    ) : this.props.children;
+    ) : (
+      this.props.children
+    );
   }
-});
+}
 
 export default connect(state => state.global)(App);

ui/src/components/common/Error.js

@@ -1,48 +1,50 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import { Panel, Button } from 'react-bootstrap';
-const ErrorPage = React.createClass({
 
-  getInitialState() {
-    return {
-      alertVisible: false,
-      status: '',
-      details: ''
-    }
-  },
+class ErrorPage extends React.Component {
+  state = {
+    alertVisible: false,
+    status: '',
+    details: ''
+  };
+
   componentWillReceiveProps(nextProps) {
     let status = '';
     let details = '';
-    if(nextProps.exception != null && nextProps.exception.response != null){
-      status = nextProps.exception.response.status + ' - ' + nextProps.exception.response.statusText;
+    if (nextProps.exception != null && nextProps.exception.response != null) {
+      status = `${nextProps.exception.response.status} - ${nextProps.exception.response.statusText}`;
       details = JSON.stringify(nextProps.exception.response.text);
-    }else {
+    } else {
       details = nextProps.exception;
     }
     this.setState({
       alertVisible: nextProps.error,
       status,
       details
     });
-  },
-  handleAlertDismiss() {
-   this.setState({alertVisible: false});
-  },
+  }
+
+  handleAlertDismiss = () => {
+    this.setState({ alertVisible: false });
+  };
+
   render() {
     if (this.state.alertVisible) {
       return (
         <span className="error">
           <Panel header={this.state.status} bsStyle="danger">
             <code>{this.state.details}</code>
           </Panel>
-          <Button bsStyle="danger" onClick={this.handleAlertDismiss}>Close</Button>
+          <Button bsStyle="danger" onClick={this.handleAlertDismiss}>
+            Close
+          </Button>
           &nbsp;&nbsp;If you think this is not expected, file a bug with workflow admins.
         </span>
       );
-    }else {
-      return (<span/>);
     }
+    return <span />;
   }
-});
+}
 
 export default connect(state => state.workflow)(ErrorPage);