Fix conditional rendering of DevTools

JDRomano2 · May 20, 2018 · 01eb285 · 01eb285
1 parent ae8b17f
commit 01eb285
Show file tree

Hide file tree

Showing 9 changed files with 115 additions and 75 deletions.
diff --git a/index/components/App.js b/index/components/App.js
@@ -1,13 +1,38 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { Switch, Route } from 'react-router';
 
-const App = ({ children }) =>
-    <div id="venomkb-app">
-        { children }
-    </div>;
+import Home from './Home';
+import About from './About';
+import AboutFeatures from './AboutFeatures';
+import AboutVenomseq from './AboutVenomseq';
+import AboutOntology from './AboutOntology';
+import AboutVenoms from './AboutVenoms';
+import AboutApi from './AboutApi';
+import Contact from './Contact';
+import Publications from './Publications';
+import Download from './Download';
+import NotFound from './NotFound';
 
-App.propTypes = {
-    children: PropTypes.object
-};
+import DataContainer from '../containers/DataContainer';
+import DataDetailContainer from '../containers/DataDetailContainer';
+
+const App = () => (
+    <Switch>
+        <Route exact path="/" component={Home} />
+        <Route path="/about" component={About} />
+        <Route path="/about/features" component={AboutFeatures} />
+        <Route path="/about/venomseq" component={AboutVenomseq} />
+        <Route path="/about/ontology" component={AboutOntology} />
+        <Route path="/about/whyvenoms" component={AboutVenoms} />
+        <Route path="/about/api" components={AboutApi} />
+        <Route path="/contact" component={Contact} />
+        <Route path="/publications" component={Publications} />
+        <Route path="/data" component={DataContainer} />
+        <Route path="/download" component={Download} />
+        <Route path="/:index" component={DataDetailContainer} />
+        <Route path="*" component={NotFound} />
+    </Switch>
+);
 
 export default App;
diff --git a/index/components/DataBasicView.js b/index/components/DataBasicView.js
@@ -176,7 +176,7 @@ class DataBasicView extends Component {
                 );
             case 'S':
                 return (
-                    <div style={{'margin-top': '10px'}}>
+                    <div style={{'marginTop': '10px'}}>
                         <Col xs={12} md={7}>
                             <h1>{name}</h1>
                             Annotation score: <img

diff --git a/index/containers/DevTools.js b/index/containers/DevTools.js
@@ -2,7 +2,7 @@ import React from 'react';
 import { createDevTools } from 'redux-devtools';
 import LogMonitor from 'redux-devtools-log-monitor';
 import DockMonitor from 'redux-devtools-dock-monitor';
-import Dispatcher from 'redux-devtools-dispatch';
+// import Dispatcher from 'redux-devtools-dispatch';
 import MultipleMonitors from 'redux-devtools-multiple-monitors';
 
 export default createDevTools(
@@ -11,9 +11,10 @@ export default createDevTools(
 	    changePositionKey="ctrl-w"
 		defaultSize={0.25}
 		defaultIsVisible={false}>
-		<MultipleMonitors>
+		{/* <MultipleMonitors>
 			<LogMonitor />
 			<Dispatcher />
-		</MultipleMonitors>
+		</MultipleMonitors> */}
+		<LogMonitor />
 	</DockMonitor>
 );
diff --git a/index/containers/Root.dev.js b/index/containers/Root.dev.js
@@ -0,0 +1,27 @@
+import React, { Component } from 'react';
+import { Provider } from 'react-redux';
+import createHistory from 'history/createBrowserHistory';
+import { ConnectedRouter } from 'react-router-redux';
+
+
+import App from '../components/App';
+import DevTools from './DevTools';
+
+const history = createHistory();
+
+export default class Root extends Component {
+    render() {
+        const { store } = this.props;
+
+        return (
+            <Provider store={store}>
+                <ConnectedRouter history={history}>
+                    <div>
+                        <App/>
+                        <DevTools/>
+                    </div>
+                </ConnectedRouter>
+            </Provider>
+        )
+    }
+}
diff --git a/index/containers/Root.js b/index/containers/Root.js
@@ -0,0 +1,5 @@
+if (process.env.NODE_ENV === 'production') {
+    module.exports = require('./Root.prod');
+} else {
+    module.exports = require('./Root.dev');
+}
diff --git a/index/containers/Root.prod.js b/index/containers/Root.prod.js
@@ -0,0 +1,22 @@
+import React, { Component } from 'react';
+import { Provider } from 'react-redux';
+import createHistory from 'history/createBrowserHistory';
+import { ConnectedRouter } from 'react-router-redux';
+
+import App from '../components/App';
+
+const history = createHistory();
+
+export default class Root extends Component {
+    render() {
+        const { store } = this.props;
+
+        return (
+            <Provider store={store}>
+                <ConnectedRouter history={history}>
+                    <App/>
+                </ConnectedRouter>
+            </Provider>
+        )
+    }
+}
diff --git a/index/store/configureStore.dev.js b/index/store/configureStore.dev.js
@@ -1,20 +1,20 @@
 import { createStore, applyMiddleware, compose } from 'redux';
-import thunkMiddleware from 'redux-thunk';
+import { persistState } from 'redux-devtools';
 import rootReducer from '../reducers';
 import DevTools from '../containers/DevTools';
 
-export default function configureStore(initialState) {
-    // const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
-    const enhancer = compose(
-        applyMiddleware(thunkMiddleware),
-        DevTools.instrument()
-    );
+// middleware
+import thunkMiddleware from 'redux-thunk'; // thunk allows reducers to return functions instead of objects
+
+console.log("Calling configureStore.dev.js");
 
-    const store = createStore(
-        rootReducer,
-        initialState,
-        enhancer
-    );
+const enhancer = compose(
+    applyMiddleware(thunkMiddleware),
+    DevTools.instrument()
+);
+
+export default function configureStore(initialState) {
+    const store = createStore(rootReducer, initialState, enhancer);
 
     return store;
 }
diff --git a/index/store/configureStore.prod.js b/index/store/configureStore.prod.js
@@ -1,9 +1,13 @@
-import { createStore } from 'redux';
+import { createStore, applyMiddleware, compose } from 'redux';
 import rootReducer from '../reducers';
 
+// middleware
+import thunkMiddleware from 'redux-thunk';
+
+console.log("Calling configureStore.prod.js");
+
+const enhancer = applyMiddleware(thunkMiddleware);
+
 export default function configureStore(initialState) {
-    return createStore(
-        rootReducer,
-        initialState
-    );
-}
+    return createStore(rootReducer, initialState, enhancer);
+};
diff --git a/venomkb.js b/venomkb.js
@@ -5,9 +5,6 @@ import ReactDOM from 'react-dom';
 
 import { Switch, Route } from 'react-router';
 import { Provider } from 'react-redux';
-import { ConnectedRouter } from 'react-router-redux';
-// import DevTools from './index/containers/DevTools';
-import createHistory from 'history/createBrowserHistory';
 import configureStore from './index/store/configureStore';
 
 // handle api calls from within app
@@ -17,40 +14,7 @@ import 'react-table/react-table.css';
 import './index/styles/venomkb.css';
 import './index/img/images';
 
-// import App from './index/components/App';
-import Home from './index/components/Home';
-import About from './index/components/About';
-import AboutFeatures from './index/components/AboutFeatures';
-import AboutVenomseq from './index/components/AboutVenomseq';
-import AboutOntology from './index/components/AboutOntology';
-import AboutVenoms from './index/components/AboutVenoms';
-import AboutApi from './index/components/AboutApi';
-import Contact from './index/components/Contact';
-import Publications from './index/components/Publications';
-import Download from './index/components/Download';
-import NotFound from './index/components/NotFound';
-
-import DataContainer from './index/containers/DataContainer';
-import DataDetailContainer from './index/containers/DataDetailContainer';
-import DevTools from './index/containers/DevTools';
-
-const App = () => (
-    <Switch>
-        <Route exact path="/" component={Home} />
-        <Route path="/about" component={About} />
-        <Route path="/about/features" component={AboutFeatures} />
-        <Route path="/about/venomseq" component={AboutVenomseq} />
-        <Route path="/about/ontology" component={AboutOntology} />
-        <Route path="/about/whyvenoms" component={AboutVenoms} />
-        <Route path="/about/api" components={AboutApi} />
-        <Route path="/contact" component={Contact} />
-        <Route path="/publications" component={Publications} />
-        <Route path="/data" component={DataContainer} />
-        <Route path="/download" component={Download} />
-        <Route path="/:index" component={DataDetailContainer} />
-        <Route path="*" component={NotFound} />
-    </Switch>
-);
+import Root from './index/containers/Root';
 
 getDbIndex().then((indexData) => {
     const species = indexData.index.filter( (i) => {
@@ -86,17 +50,9 @@ getDbIndex().then((indexData) => {
             index
         }
     });
-    const history = createHistory();
 
     ReactDOM.render(
-        <Provider store={store}>
-            <ConnectedRouter history={history}>
-                <div>
-                    <App/>
-                    <DevTools/>
-                </div>
-            </ConnectedRouter>
-        </Provider>,
+        <Root store={store} />,
         document.getElementById('venomkb_root')
     );
 });