Upgrade React to 16, plus upgrade related components (#769)

app/renderer/actions/Inspector.js

@@ -1,6 +1,6 @@
 import { ipcRenderer } from 'electron';
 import { notification } from 'antd';
-import { push } from 'react-router-redux';
+import { push } from 'connected-react-router';
 import _ from 'lodash';
 import B from 'bluebird';
 import { getLocators } from '../components/Inspector/shared';

app/renderer/actions/ServerMonitor.js

@@ -1,5 +1,5 @@
 import { ipcRenderer, shell } from 'electron';
-import { push } from 'react-router-redux';
+import { push } from 'connected-react-router';
 
 export const SERVER_STOP_REQ = 'SERVER_STOP_REQ';
 export const SERVER_STOP_OK = 'SERVER_STOP_OK';

app/renderer/actions/Session.js

@@ -1,7 +1,7 @@
 import { ipcRenderer } from 'electron';
 import settings from '../../shared/settings';
 import { v4 as UUID } from 'uuid';
-import { push } from 'react-router-redux';
+import { push } from 'connected-react-router';
 import { notification } from 'antd';
 import { debounce, toPairs } from 'lodash';
 import { setSessionDetails } from './Inspector';

app/renderer/actions/StartServer.js

@@ -1,6 +1,6 @@
 /* eslint-disable no-console */
 import { ipcRenderer } from 'electron';
-import { push } from 'react-router-redux';
+import { push } from 'connected-react-router';
 import { serverLogsReceived, clearLogs, setServerArgs } from './ServerMonitor';
 import settings from '../../shared/settings';
 

app/renderer/actions/index.js

@@ -0,0 +1,15 @@
+import * as configActions from '../actions/Config';
+import * as inspectorActions from '../actions/Inspector';
+import * as serverMonitorActions from '../actions/ServerMonitor';
+import * as sessionActions from '../actions/Session';
+import * as startServerActions from '../actions/StartServer';
+import * as updaterActions from '../actions/Updater';
+
+export default {
+  ...configActions,
+  ...inspectorActions,
+  ...serverMonitorActions,
+  ...sessionActions,
+  ...startServerActions,
+  ...updaterActions,
+};

app/renderer/containers/App.js

@@ -1,9 +1,10 @@
-import { Component } from 'react';
+import * as React from 'react';
 import PropTypes from 'prop-types';
 
-export default class App extends Component {
+export default class App extends React.Component {
   render () {
-    return this.props.children;
+    const { children } = this.props;
+    return <React.Fragment>{children}</React.Fragment>;
   }
 }
 

app/renderer/containers/Root.js

@@ -0,0 +1,44 @@
+import React, { Component } from 'react';
+import { Provider } from 'react-redux';
+import { ConnectedRouter } from 'connected-react-router';
+import Routes from '../routes';
+import WrongFolder from '../components/WrongFolder/WrongFolder';
+import electron from 'electron';
+
+const { app } = electron.remote;
+const isDev = process.env.NODE_ENV === 'development';
+
+function shouldShowWrongFolderComponent () {
+  // If we set an ENV to show wrong folder
+  if (process.env.WRONG_FOLDER) {
+    return true;
+  }
+
+  // If we set an ENV to require it to NOT be shown don't show it
+  if (process.env.FORCE_NO_WRONG_FOLDER) {
+    return false;
+  }
+
+  return (app.isInApplicationsFolder && !app.isInApplicationsFolder()) && !isDev;
+}
+
+export default class Root extends Component {
+  render () {
+    const { store, history } = this.props;
+    return (
+      <Provider store={store}>
+        {shouldShowWrongFolderComponent() ?
+          <WrongFolder /> :
+          <ConnectedRouter history={history}>
+            <Routes />
+          </ConnectedRouter>
+        }
+      </Provider>
+    );
+  }
+}
+
+/*Root.propTypes = {
+  store: PropTypes.element.isRequired,
+  history: PropTypes.element.isRequired,
+};*/

app/renderer/index.js

@@ -1,49 +1,29 @@
 import React from 'react';
 import { render } from 'react-dom';
-import { Provider } from 'react-redux';
-import { Router, hashHistory } from 'react-router';
-import { syncHistoryWithStore } from 'react-router-redux';
-import electron from 'electron';
-import WrongFolder from './components/WrongFolder/WrongFolder';
-import routes from './routes';
-import store from './store/store';
+import Root from './containers/Root';
+import { AppContainer } from 'react-hot-loader';
+import Store from './store/configureStore';
 
-const { app } = electron.remote;
-const isDev = process.env.NODE_ENV === 'development';
-const history = syncHistoryWithStore(hashHistory, store);
+const { history, configureStore } = Store;
 
-function shouldShowWrongFolderComponent () {
-  // If we set an ENV to show wrong folder
-  if (process.env.WRONG_FOLDER) {
-    return true;
-  }
+const store = configureStore();
 
-  // If we set an ENV to require it to NOT be shown don't show it
-  if (process.env.FORCE_NO_WRONG_FOLDER) {
-    return false;
-  }
-
-  return (app.isInApplicationsFolder && !app.isInApplicationsFolder()) && !isDev;
-}
-
-const router = <Router history={history}>
-  {routes}
-</Router>;
-
-function renderApp () {
-  render(
-    <Provider store={store}>
-      {shouldShowWrongFolderComponent() ?
-        <WrongFolder /> :
-        router
-      }
-    </Provider>,
-    document.getElementById('root')
-  );
-}
-
-renderApp();
+render(
+  <AppContainer>
+    <Root store={store} history={history} />
+  </AppContainer>,
+  document.getElementById('root')
+);
 
 if (module.hot) {
-  module.hot.accept(renderApp);
+  module.hot.accept('./containers/Root', () => {
+    // eslint-disable-next-line global-require
+    const NextRoot = require('./containers/Root').default;
+    render(
+      <AppContainer>
+        <NextRoot store={store} history={history} />
+      </AppContainer>,
+      document.getElementById('root')
+    );
+  });
 }

app/renderer/reducers/index.js

@@ -1,5 +1,5 @@
 import { combineReducers } from 'redux';
-import { routerReducer as routing } from 'react-router-redux';
+import { connectRouter } from 'connected-react-router';
 import startServer from './StartServer';
 import serverMonitor from './ServerMonitor';
 import session from './Session';
@@ -8,14 +8,14 @@ import updater from './Updater';
 import config from './Config';
 
 // create our root reducer
-const rootReducer = combineReducers({
-  routing,
-  startServer,
-  serverMonitor,
-  session,
-  inspector,
-  updater,
-  config,
-});
-
-export default rootReducer;
+export default function createRootReducer (history) {
+  return combineReducers({
+    router: connectRouter(history),
+    startServer,
+    serverMonitor,
+    session,
+    inspector,
+    updater,
+    config,
+  });
+}

app/renderer/routes.js

@@ -1,17 +1,20 @@
 import React from 'react';
-import { Route, IndexRoute } from 'react-router';
+import { Switch, Route } from 'react-router';
 import App from './containers/App';
 import StartServerPage from './containers/StartServerPage';
 import ServerMonitorPage from './containers/ServerMonitorPage';
 import SessionPage from './containers/SessionPage';
 import InspectorPage from './containers/InspectorPage';
 import ConfigPage from './containers/ConfigPage';
 
-
-export default <Route path="/" component={App}>
-  <IndexRoute component={StartServerPage} />
-  <Route path="monitor" component={ServerMonitorPage} />
-  <Route path="session" component={SessionPage} />
-  <Route path="inspector" component={InspectorPage} />
-  <Route path="config" component={ConfigPage} />
-</Route>;
+export default () => (
+  <App>
+    <Switch>
+      <Route exact path="/" component={StartServerPage} />
+      <Route path="/monitor" component={ServerMonitorPage} />
+      <Route path="/session" component={SessionPage} />
+      <Route path="/inspector" component={InspectorPage} />
+      <Route path="/config" component={ConfigPage} />
+    </Switch>
+  </App>
+);

app/renderer/store/configureStore.development.js

@@ -1,30 +1,69 @@
 import { createStore, applyMiddleware, compose } from 'redux';
 import thunk from 'redux-thunk';
+import { createHashHistory } from 'history';
+import { routerMiddleware, routerActions } from 'connected-react-router';
 import { createLogger } from 'redux-logger';
-import { hashHistory } from 'react-router';
-import { routerMiddleware } from 'react-router-redux';
-import rootReducer from '../reducers';
+import actions from '../actions';
+import createRootReducer from '../reducers';
 
-const logger = createLogger({
-  level: 'info',
-  collapsed: true,
-});
+const history = createHashHistory();
 
-const router = routerMiddleware(hashHistory);
+const rootReducer = createRootReducer(history);
 
-const enhancer = compose(
-  applyMiddleware(thunk, router, logger),
-  window.devToolsExtension ? window.devToolsExtension() : (noop) => noop
-);
+const configureStore = (initialState) => {
+  // Redux Configuration
+  const middleware = [];
+  const enhancers = [];
 
-export default function configureStore (initialState) {
+  // Thunk Middleware
+  middleware.push(thunk);
+
+  // Logging Middleware
+  const logger = createLogger({
+    level: 'info',
+    collapsed: true
+  });
+
+  // Skip redux logs in console during the tests
+  if (process.env.NODE_ENV !== 'test') {
+    middleware.push(logger);
+  }
+
+  // Router Middleware
+  const router = routerMiddleware(history);
+  middleware.push(router);
+
+  // Redux DevTools Configuration
+  const actionCreators = {
+    ...actions,
+    ...routerActions
+  };
+  // If Redux DevTools Extension is installed use it, otherwise use Redux compose
+  /* eslint-disable no-underscore-dangle */
+  const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
+    ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
+      // Options: http://extension.remotedev.io/docs/API/Arguments.html
+      actionCreators
+    })
+    : compose;
+  /* eslint-enable no-underscore-dangle */
+
+  // Apply Middleware & Compose Enhancers
+  enhancers.push(applyMiddleware(...middleware));
+  const enhancer = composeEnhancers(...enhancers);
+
+  // Create Store
   const store = createStore(rootReducer, initialState, enhancer);
 
   if (module.hot) {
-    module.hot.accept('../reducers', () =>
-      store.replaceReducer(require('../reducers')) // eslint-disable-line global-require
+    module.hot.accept(
+      '../reducers',
+      // eslint-disable-next-line global-require
+      () => store.replaceReducer(require('../reducers').default)
     );
   }
 
   return store;
-}
+};
+
+export default { configureStore, history };

app/renderer/store/configureStore.js

@@ -1,3 +1,15 @@
+import configureStoreDev from './configureStore.development';
+import configureStoreProd from './configureStore.production';
+
+const selectedConfigureStore =
+  process.env.NODE_ENV === 'production'
+    ? configureStoreProd
+    : configureStoreDev;
+
+export const { configureStore } = selectedConfigureStore;
+
+export const { history } = selectedConfigureStore;
+
 if (process.env.NODE_ENV === 'production') {
   module.exports = require('./configureStore.production'); // eslint-disable-line global-require
 } else {

app/renderer/store/configureStore.production.js

@@ -1,13 +1,16 @@
 import { createStore, applyMiddleware } from 'redux';
 import thunk from 'redux-thunk';
-import { hashHistory } from 'react-router';
-import { routerMiddleware } from 'react-router-redux';
-import rootReducer from '../reducers';
-
-const router = routerMiddleware(hashHistory);
+import { createHashHistory } from 'history';
+import { routerMiddleware } from 'connected-react-router';
+import createRootReducer from '../reducers';
 
+const history = createHashHistory();
+const rootReducer = createRootReducer(history);
+const router = routerMiddleware(history);
 const enhancer = applyMiddleware(thunk, router);
 
-export default function configureStore (initialState) {
+function configureStore (initialState) {
   return createStore(rootReducer, initialState, enhancer);
 }
+
+export default { configureStore, history };