[WIP] Refactoring

package.json

@@ -72,6 +72,7 @@
     "react": "^15.2.1",
     "react-addons-test-utils": "^15.2.1",
     "react-dom": "^15.2.1",
+    "react-router": "^2.6.1",
     "react-transform-catch-errors": "^1.0.0",
     "react-transform-hmr": "^1.0.1",
     "redbox-react": "^1.2.0",
@@ -92,10 +93,10 @@
     "material-ui": "0.15.3",
     "react-icons": "^2.2.1",
     "react-redux": "^4.0.6",
+    "react-router-redux": "^4.0.5",
     "react-switcher": "^1.0.2",
     "react-tap-event-plugin": "^1.0.0",
     "redux": "^3.0.5",
-    "redux-devtools": "^3.2.0",
     "redux-devtools-chart-monitor": "^1.4.1",
     "redux-devtools-inspector": "^0.7.1",
     "redux-devtools-log-monitor": "^1.0.11",

src/app/actions/index.js

@@ -0,0 +1,55 @@
+import {
+  LIFTED_ACTION, MONITOR_ACTION, SELECT_INSTANCE, SELECT_MONITOR,
+  TOGGLE_SYNC, TOGGLE_SLIDER, TOGGLE_DISPATCHER, GET_REPORT_REQUEST,
+  SHOW_NOTIFICATION, CLEAR_NOTIFICATION
+} from '../constants/actionTypes';
+import { RECONNECT } from '../constants/socketActionTypes';
+
+export function liftedDispatch(action) {
+  if (action.type[0] === '@') return { type: MONITOR_ACTION, action };
+  return { type: LIFTED_ACTION, message: 'DISPATCH', action };
+}
+
+export function selectInstance(event, index, selected) {
+  return { type: SELECT_INSTANCE, selected };
+}
+
+export function selectMonitor(event, index, value) {
+  return { type: SELECT_MONITOR, monitor: value };
+}
+
+export function importState(state) {
+  return { type: LIFTED_ACTION, message: 'IMPORT', state };
+}
+
+export function dispatchRemotely(action) {
+  return { type: LIFTED_ACTION, message: 'ACTION', action };
+}
+
+export function toggleSync() {
+  return { type: TOGGLE_SYNC };
+}
+
+export function toggleSlider() {
+  return { type: TOGGLE_SLIDER };
+}
+
+export function toggleDispatcher() {
+  return { type: TOGGLE_DISPATCHER };
+}
+
+export function saveSocketSettings(isCustom, options) {
+  return { type: RECONNECT, isCustom, options };
+}
+
+export function showNotification(message) {
+  return { type: SHOW_NOTIFICATION, notification: { type: 'ERROR', message } };
+}
+
+export function clearNotification() {
+  return { type: CLEAR_NOTIFICATION };
+}
+
+export function getReport(report) {
+  return { type: GET_REPORT_REQUEST, report };
+}

src/app/components/ButtonBar.js

@@ -11,23 +11,15 @@ import Settings from './Settings';
 
 export default class ButtonBar extends Component {
   static propTypes = {
-    openModal: PropTypes.func.isRequired,
-    toggleDispatcher: PropTypes.func.isRequired,
-    toggleSlider: PropTypes.func.isRequired,
+    liftedState: PropTypes.object.isRequired,
     dispatcherIsOpen: PropTypes.bool,
     sliderIsOpen: PropTypes.bool,
-    closeModal: PropTypes.func.isRequired,
-    saveSettings: PropTypes.func.isRequired,
-    importState: PropTypes.func.isRequired,
-    exportState: PropTypes.func.isRequired,
-    socketOptions: PropTypes.object,
     noSettings: PropTypes.bool
   };
 
   constructor() {
     super();
     this.state = { settingsOpened: false };
-
     this.openSettings = this.openSettings.bind(this);
     this.closeSettings = this.closeSettings.bind(this);
   }
@@ -53,23 +45,16 @@ export default class ButtonBar extends Component {
   render() {
     return (
       <div style={styles.buttonBar}>
-        <DispatcherButton
-          dispatcherIsOpen={this.props.dispatcherIsOpen} onClick={this.props.toggleDispatcher}
-        />
-        <SliderButton isOpen={this.props.sliderIsOpen} onClick={this.props.toggleSlider} />
-        <ImportButton importState={this.props.importState} />
-        <ExportButton exportState={this.props.exportState} />
+        <DispatcherButton dispatcherIsOpen={this.props.dispatcherIsOpen} />
+        <SliderButton isOpen={this.props.sliderIsOpen}/>
+        <ImportButton />
+        <ExportButton liftedState={this.props.liftedState} />
         {!this.props.noSettings &&
           <Button Icon={SettingsIcon} onClick={this.openSettings}>Settings</Button>
         }
         <Button Icon={HelpIcon} onClick={this.openHelp}>How to use</Button>
         {!this.props.noSettings &&
-          <Settings
-            isOpen={this.state.settingsOpened}
-            close={this.closeSettings}
-            saveSettings={this.props.saveSettings}
-            socketOptions={this.props.socketOptions}
-          />
+          <Settings isOpen={this.state.settingsOpened} close={this.closeSettings} />
         }
       </div>
     );

src/app/components/Instances.js

@@ -1,10 +1,13 @@
 import React, { Component, PropTypes } from 'react';
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
 import SelectField from 'material-ui/SelectField';
 import MenuItem from 'material-ui/MenuItem';
 import shallowCompare from 'react/lib/shallowCompare';
+import { selectInstance } from '../actions';
 import styles from '../styles';
 
-export default class Instances extends Component {
+class Instances extends Component {
   static propTypes = {
     selected: PropTypes.string,
     instances: PropTypes.object.isRequired,
@@ -18,7 +21,7 @@ export default class Instances extends Component {
   render() {
     this.select = [['Autoselect instances', null]];
     Object.keys(this.props.instances).forEach(key => {
-      this.select.push([this.props.instances[key], key]);
+      this.select.push([this.props.instances[key].name, key]);
     });
 
     return (
@@ -38,3 +41,17 @@ export default class Instances extends Component {
     );
   }
 }
+
+function mapStateToProps(state) {
+  return {
+    instances: state.instances.options
+  };
+}
+
+function mapDispatchToProps(dispatch) {
+  return {
+    onSelect: bindActionCreators(selectInstance, dispatch)
+  };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(Instances);

src/app/components/MonitorSelector.js

@@ -1,15 +1,22 @@
 import React, { Component, PropTypes } from 'react';
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
 import SelectField from 'material-ui/SelectField';
 import MenuItem from 'material-ui/MenuItem';
-import { sideMonitors } from '../containers/DevTools';
+import { monitors } from '../containers/getMonitor';
+import { selectMonitor } from '../actions';
 import styles from '../styles';
 
-export default class MonitorSelector extends Component {
+class MonitorSelector extends Component {
   static propTypes = {
     selected: PropTypes.string,
-    onSelect: PropTypes.func.isRequired
+    selectMonitor: PropTypes.func.isRequired
   };
 
+  items = monitors.map((item, i) =>
+    <MenuItem key={i} value={item.key} primaryText={item.title} />
+  );
+
   shouldComponentUpdate(nextProps) {
     return nextProps.selected !== this.props.selected;
   }
@@ -20,13 +27,19 @@ export default class MonitorSelector extends Component {
         style={styles.select}
         labelStyle={styles.selectLabel}
         iconStyle={styles.selectIcon}
-        onChange={this.props.onSelect}
+        onChange={this.props.selectMonitor}
         value={this.props.selected || 'InspectorMonitor'}
       >
-        {sideMonitors.map((item, i) =>
-          <MenuItem key={i} value={item.key} primaryText={item.title} />
-        )}
+        {this.items}
       </SelectField>
     );
   }
 }
+
+function mapDispatchToProps(dispatch) {
+  return {
+    selectMonitor: bindActionCreators(selectMonitor, dispatch)
+  };
+}
+
+export default connect(null, mapDispatchToProps)(MonitorSelector);

src/app/components/Notification.js

@@ -0,0 +1,59 @@
+import React, { Component, PropTypes } from 'react';
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+import * as themes from 'redux-devtools-themes';
+import { clearNotification } from '../actions';
+
+class Notification extends Component {
+  static propTypes = {
+    notification: PropTypes.shape({
+      message: PropTypes.string,
+      type: PropTypes.string
+    }),
+    clearNotification: PropTypes.func.isRequired
+  };
+
+  shouldComponentUpdate(nextProps) {
+    return nextProps.notification !== this.props.notification;
+  }
+
+  render() {
+    if (!this.props.notification) return null;
+    const theme = themes.nicinabox;
+    const buttonStyle = {
+      color: theme.base06, backgroundColor: theme.base00,
+      margin: '0', background: '#DC2424'
+    };
+    const containerStyle = {
+      color: theme.base06, background: '#FC2424',
+      padding: '5px 10px', minHeight: '20px', display: 'flex'
+    };
+    return (
+      <div style={containerStyle}>
+        <div style={{ flex: '1', alignItems: 'center' }}>
+          <p style={{ margin: '0px' }}>{this.props.notification.message}</p>
+        </div>
+        <div style={{ alignItems: 'center' }}>
+          <button
+            onClick={this.props.clearNotification}
+            style={buttonStyle}
+          >&times;</button>
+        </div>
+      </div>
+    );
+  }
+}
+
+function mapStateToProps(state) {
+  return {
+    notification: state.notification
+  };
+}
+
+function mapDispatchToProps(dispatch) {
+  return {
+    clearNotification: bindActionCreators(clearNotification, dispatch)
+  };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(Notification);

src/app/components/Settings.js

@@ -1,39 +1,41 @@
 import React, { Component, PropTypes } from 'react';
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
 import Dialog from 'material-ui/Dialog';
 import FlatButton from 'material-ui/FlatButton';
 import Checkbox from 'material-ui/Checkbox';
 import TextField from 'material-ui/TextField';
+import { saveSocketSettings } from '../actions';
 import styles from '../styles';
 
-export default class Settings extends Component {
+class Settings extends Component {
   static propTypes = {
     isOpen: PropTypes.bool,
     close: PropTypes.func.isRequired,
     saveSettings: PropTypes.func.isRequired,
-    socketOptions: PropTypes.object
+    socketOptions: PropTypes.object.isRequired,
+    isCustom: PropTypes.bool
   };
 
   constructor(props) {
     super(props);
-    let isLocal;
+    const isCustom = props.isCustom;
     this.options = {};
-    if (props.socketOptions) {
-      isLocal = true;
+    if (isCustom) {
       this.options.hostname = props.socketOptions.hostname;
       this.options.port = props.socketOptions.port;
       this.options.secure = props.socketOptions.secure;
     } else {
-      isLocal = false;
       this.options.hostname = 'localhost';
       this.options.port = '8000';
       this.options.secure = false;
     }
 
-    this.state = { isLocal };
+    this.state = { isCustom };
   }
 
   handleLocalChecked = (e, checked) => {
-    this.setState({ isLocal: checked });
+    this.setState({ isCustom: checked });
   };
 
   handleInputChange = (e, value) => {
@@ -45,7 +47,7 @@ export default class Settings extends Component {
   };
 
   save = () => {
-    this.props.saveSettings(this.state.isLocal, this.options);
+    this.props.saveSettings(this.state.isCustom, this.options);
     this.props.close();
   };
 
@@ -77,10 +79,10 @@ export default class Settings extends Component {
       >
         <Checkbox
           label="Use custom (local) server"
-          checked={this.state.isLocal}
+          checked={this.state.isCustom}
           onCheck={this.handleLocalChecked}
         />
-        {this.state.isLocal && <div>
+        {this.state.isCustom && <div>
           <TextField
             id="hostname"
             floatingLabelText="Host name"
@@ -104,3 +106,18 @@ export default class Settings extends Component {
     );
   }
 }
+
+function mapStateToProps(state) {
+  return {
+    socketOptions: state.socket.options,
+    isCustom: state.socket.isCustom
+  };
+}
+
+function mapDispatchToProps(dispatch) {
+  return {
+    saveSettings: bindActionCreators(saveSocketSettings, dispatch)
+  };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(Settings);