From 3c39574041feec28a5b153289991fec01eca7263 Mon Sep 17 00:00:00 2001
From: catarak <ctarakajian@gmail.com>
Date: Wed, 22 Jun 2016 18:36:04 -0400
Subject: [PATCH] add redux dev tools

---
 .env                                       |  3 ++-
 client/modules/App/App.jsx                 |  8 ++++++++
 client/modules/App/components/DevTools.jsx | 13 +++++++++++++
 client/store.js                            | 13 ++++++++++++-
 package.json                               |  3 +++
 webpack.config.js                          |  8 +++++++-
 6 files changed, 45 insertions(+), 3 deletions(-)
 create mode 100644 client/modules/App/components/DevTools.jsx

diff --git a/.env b/.env
index 71a46f30..2f52fbb8 100644
--- a/.env
+++ b/.env
@@ -1,3 +1,4 @@
 MONGO_URL=mongodb://localhost:27017/p5js-web-editor
 PORT=8000
-SESSION_SECRET=dyR;Ihp9Y/<i=m9&FUBwV\)$";;G:5a-_G4>W@?r~k$JR$nw74=#_Cus[z{yBj`Mq:I8LpWE~g{;B,}t\p/`Wjevkb!$n}N];u`Om57NF^GK@z5qF{0L04)Mz6{Djk
\ No newline at end of file
+SESSION_SECRET=dyR;Ihp9Y/<i=m9&FUBwV\)$";;G:5a-_G4>W@?r~k$JR$nw74=#_Cus[z{yBj`Mq:I8LpWE~g{;B,}t\p/`Wjevkb!$n}N];u`Om57NF^GK@z5qF{0L04)Mz6{Djk
+NODE_ENV=development
\ No newline at end of file
diff --git a/client/modules/App/App.jsx b/client/modules/App/App.jsx
index 62b9d8ae..3228b629 100644
--- a/client/modules/App/App.jsx
+++ b/client/modules/App/App.jsx
@@ -1,14 +1,22 @@
 import React from 'react';
 import { connect } from 'react-redux';
+import DevTools from './components/DevTools';
 
 class App extends React.Component {
   constructor(props, context) {
     super(props, context);
+    this.state = {isMounted: false};
+  }
+
+  componentDidMount() {
+    this.setState({isMounted: true});
   }
 
   render() {
+    debugger;
     return (
       <div className="app">
+        {this.state.isMounted && !window.devToolsExtension && process.env.NODE_ENV === 'development' && <DevTools />}
         { this.props.children }
       </div>
     );
diff --git a/client/modules/App/components/DevTools.jsx b/client/modules/App/components/DevTools.jsx
new file mode 100644
index 00000000..44cb9b1a
--- /dev/null
+++ b/client/modules/App/components/DevTools.jsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import { createDevTools } from 'redux-devtools';
+import LogMonitor from 'redux-devtools-log-monitor';
+import DockMonitor from 'redux-devtools-dock-monitor';
+
+export default createDevTools(
+  <DockMonitor
+    toggleVisibilityKey="ctrl-h"
+    changePositionKey="ctrl-w"
+  >
+    <LogMonitor />
+  </DockMonitor>
+);
\ No newline at end of file
diff --git a/client/store.js b/client/store.js
index d94f3cb0..b08c16c0 100644
--- a/client/store.js
+++ b/client/store.js
@@ -1,12 +1,23 @@
 import { createStore, applyMiddleware, compose } from 'redux'
 import thunk from 'redux-thunk'
+import DevTools from './modules/App/components/DevTools'
 import rootReducer from './reducers'
 
 export default function configureStore(initialState) {
+
+  const enhancers = [
+    applyMiddleware(thunk),
+  ];
+
+  if (process.env.CLIENT && process.env.NODE_ENV === 'development') {
+    // Enable DevTools only when rendering on client and during development.
+    enhancers.push(window.devToolsExtension ? window.devToolsExtension() : DevTools.instrument());
+  }
+
   const store = createStore(
     rootReducer,
     initialState,
-    applyMiddleware(thunk)
+    compose(...enhancers)
   )
 
   if (module.hot) {
diff --git a/package.json b/package.json
index 474da065..c4995ee8 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,9 @@
     "css-loader": "^0.23.1",
     "file-loader": "^0.8.5",
     "node-sass": "^3.7.0",
+    "redux-devtools": "^3.3.1",
+    "redux-devtools-dock-monitor": "^1.1.1",
+    "redux-devtools-log-monitor": "^1.0.11",
     "sass-loader": "^3.2.0",
     "style-loader": "^0.13.1",
     "webpack": "^1.13.0",
diff --git a/webpack.config.js b/webpack.config.js
index 4fdd48e2..5647e19e 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -14,7 +14,13 @@ module.exports = {
     extensions: ['', '.js', '.jsx'],
   },
 	plugins: [
-    new webpack.HotModuleReplacementPlugin()
+    new webpack.HotModuleReplacementPlugin(),
+    new webpack.DefinePlugin({
+      'process.env': {
+        CLIENT: JSON.stringify(true),
+        'NODE_ENV': JSON.stringify('development'),
+      }
+    })
   ],
   module: {
     loaders: [