Use monitors from remotedev-app

Author: zalmoxisus

package.json

@@ -61,12 +61,6 @@
     "react-redux": "^4.4.0",
     "redux": "^3.3.1",
     "redux-devtools": "^3.2.0",
-    "redux-devtools-chart-monitor": "^1.4.1",
-    "redux-devtools-diff-monitor": "^5.0.4",
-    "redux-devtools-inspector": "^0.5.1",
-    "redux-devtools-log-monitor": "^1.0.5",
-    "redux-slider-monitor": "^1.0.2",
-    "redux-thunk": "^1.0.3",
-    "remotedev-app": "^0.3.5"
+    "remotedev-app": "^0.3.8"
   }
 }

src/app/containers/App.js

@@ -1,6 +1,7 @@
 import React, { cloneElement, Component, PropTypes } from 'react';
 import { sendToBg } from 'crossmessaging';
 import styles from 'remotedev-app/lib/styles';
+import DevTools from 'remotedev-app/lib/containers/DevTools';
 import Instances from 'remotedev-app/lib/components/Instances';
 import Button from 'remotedev-app/lib/components/Button';
 import ImportButton from 'remotedev-app/lib/components/buttons/ImportButton';
@@ -10,7 +11,6 @@ import LeftIcon from 'react-icons/lib/md/border-left';
 import RightIcon from 'react-icons/lib/md/border-right';
 import BottomIcon from 'react-icons/lib/md/border-bottom';
 import RemoteIcon from 'react-icons/lib/go/radio-tower';
-import Monitor from './Monitor';
 
 let monitorPosition;
 if (location.hash) monitorPosition = location.hash.substr(location.hash.indexOf('-') + 1);
@@ -23,24 +23,25 @@ export default class App extends Component {
   static update = () => ({});
 
   handleSelectInstance = e => {
-    this.props.store.instance = e.target.value;
-    this.props.store.setInstance(this.props.store.instance, true);
+    this.props.store.setInstance(e.target.value);
   };
 
   openWindow = (position) => {
     sendToBg({ type: 'OPEN', position });
   };
 
   render() {
-    const { store, ...childProps } = this.props;
+    const { store } = this.props;
+    const instances = store.instances;
+    const monitor = location.hash && location.hash.substr(1).split('/')[0];
     return (
       <div style={styles.container}>
-        {store.instances ?
+        {instances &&
           <div style={styles.buttonBar}>
-           <Instances instances={store.instances} onSelect={this.handleSelectInstance}/>
+           <Instances instances={instances} onSelect={this.handleSelectInstance}/>
           </div>
-        : null }
-        <Monitor {...childProps} />
+        }
+        <DevTools monitor={monitor} store={store} key={`${monitor}-${store.instance}`} />
         {chrome.runtime.openOptionsPage ?
           <div style={styles.buttonBar}>
             {monitorPosition !== 'left' ?
@@ -61,7 +62,7 @@ export default class App extends Component {
                 onClick={() => { this.openWindow('bottom'); }}
               />
             : null }
-            <ImportButton importState={store && store.importState} />
+            <ImportButton importState={store.importState} />
             <ExportButton exportState={store.getState} />
             <Button
               Icon={RemoteIcon}

src/app/containers/DevTools.js

@@ -1,11 +1,13 @@
 import React from 'react';
 import { render } from 'react-dom';
-import DevTools from '../../../app/containers/DevTools';
+import { connect } from 'react-redux';
+import App from '../../../app/containers/App';
 
 chrome.runtime.getBackgroundPage(background => {
   const { store, unsubscribe } = background.getStore();
+  const ConnectedApp = connect(state => state)(App);
   render(
-    <DevTools store={store} />,
+    <ConnectedApp store={store} />,
     document.getElementById('root')
   );
   addEventListener('unload', unsubscribe, true);