add basic redux architecture, convert eventlog to redux

7 files changed, 99 insertions, 25 deletions

diff --git a/web/package.json b/web/package.json
index 02af2666..4b58422c 100644
--- a/web/package.json
+++ b/web/package.json
@@ -30,6 +30,7 @@
   },
   "devDependencies": {
     "babel-core": "^6.7.7",
+    "babel-eslint": "^6.0.4",
     "babel-jest": "^12.0.2",
     "babel-plugin-transform-class-properties": "^6.6.0",
     "babel-preset-es2015": "^6.6.0",
diff --git a/web/src/js/app.js b/web/src/js/app.js
index e21fa499..30897686 100644
--- a/web/src/js/app.js
+++ b/web/src/js/app.js
@@ -1,9 +1,15 @@
 import React from "react"
-import { render } from 'react-dom'
+import {render} from 'react-dom'
+import {createStore} from 'redux'
+import {Provider} from 'react-redux'
+import mitmproxyApp from './reducers'
+
 import $ from "jquery"
 import Connection from "./connection"
-import {app} from "./components/proxyapp.js"
-import { EventLogActions } from "./actions.js"
+import {App} from "./components/proxyapp.js"
+import {EventLogActions} from "./actions.js"
+
+let store = createStore(mitmproxyApp);
 
 $(function () {
     window.ws = new Connection("/updates");
@@ -12,6 +18,8 @@ $(function () {
         EventLogActions.add_event(msg);
     };
 
-    render(app, document.getElementById("mitmproxy"));
+    render(
+        <Provider store={store}>{App}</Provider>,
+        document.getElementById("mitmproxy"));
 });
 
diff --git a/web/src/js/components/eventlog.js b/web/src/js/components/eventlog.js
index 6e4f9096..687c5265 100644
--- a/web/src/js/components/eventlog.js
+++ b/web/src/js/components/eventlog.js
@@ -1,11 +1,12 @@
 import React from "react"
 import ReactDOM from "react-dom"
+import { connect } from 'react-redux'
 import shallowEqual from "shallowequal"
 import {Query} from "../actions.js"
+import {toggleEventLogFilter} from "../reduxActions"
 import AutoScroll from "./helpers/AutoScroll";
 import {calcVScroll} from "./helpers/VirtualScroll"
 import {StoreView} from "../store/view.js"
-import _ from "lodash"
 
 class EventLogContents extends React.Component {
 
@@ -127,7 +128,7 @@ function ToggleFilter ({ name, active, toggleLevel }) {
 
     function onClick(event) {
         event.preventDefault();
-        toggleLevel(name);
+        toggleLevel();
     }
 
     return (
@@ -140,42 +141,55 @@ function ToggleFilter ({ name, active, toggleLevel }) {
     );
 }
 
+const mapStateToProps = (state, ownProps) => {
+  return {
+    active: state.eventLog.visibilityFilter[ownProps.name]
+  }
+};
+
+const mapDispatchToProps = (dispatch, ownProps) => {
+  return {
+    toggleLevel: () => {
+      dispatch(toggleEventLogFilter(ownProps.name))
+    }
+  }
+};
+
+const ToggleEventLogFilter = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(ToggleFilter);
+
+
 const AutoScrollEventLog = AutoScroll(EventLogContents);
 
+
+const VisibleAutoScrollEventLog = connect(
+    function mapStateToProps(state, ownProps) {
+        return {filter: state.eventLog.visibilityFilter}
+    })(AutoScrollEventLog);
+
+
 var EventLog = React.createClass({
-    getInitialState() {
-        return {
-            filter: {
-                "debug": false,
-                "info": true,
-                "web": true
-            }
-        };
-    },
     close() {
         var d = {};
         d[Query.SHOW_EVENTLOG] = undefined;
         this.props.updateLocation(undefined, d);
     },
-    toggleLevel(level) {
-        var filter = _.extend({}, this.state.filter);
-        filter[level] = !filter[level];
-        this.setState({filter: filter});
-    },
     render() {
         return (
             <div className="eventlog">
                 <div>
                     Eventlog
                     <div className="pull-right">
-                        <ToggleFilter name="debug" active={this.state.filter.debug} toggleLevel={this.toggleLevel}/>
-                        <ToggleFilter name="info" active={this.state.filter.info} toggleLevel={this.toggleLevel}/>
-                        <ToggleFilter name="web" active={this.state.filter.web} toggleLevel={this.toggleLevel}/>
+                        <ToggleEventLogFilter name="debug"/>
+                        <ToggleEventLogFilter name="info"/>
+                        <ToggleEventLogFilter name="web"/>
                         <i onClick={this.close} className="fa fa-close"></i>
                     </div>
 
                 </div>
-                <AutoScrollEventLog filter={this.state.filter}/>
+                <VisibleAutoScrollEventLog/>
             </div>
         );
     }
diff --git a/web/src/js/components/proxyapp.js b/web/src/js/components/proxyapp.js
index f47c5bb4..4c790d3d 100644
--- a/web/src/js/components/proxyapp.js
+++ b/web/src/js/components/proxyapp.js
@@ -145,7 +145,7 @@ var ProxyAppMain = React.createClass({
 
 import { Route, Router as ReactRouter, hashHistory, Redirect} from "react-router";
 
-export var app = (
+export var App = (
     <ReactRouter history={hashHistory}>
         <Redirect from="/" to="/flows" />
         <Route path="/" component={ProxyAppMain}>
diff --git a/web/src/js/reducers/eventLog.js b/web/src/js/reducers/eventLog.js
new file mode 100644
index 00000000..169cd306
--- /dev/null
+++ b/web/src/js/reducers/eventLog.js
@@ -0,0 +1,30 @@
+import {combineReducers} from 'redux'
+import {TOGGLE_EVENTLOG_FILTER} from "../reduxActions"
+
+const defaultVisibility = {
+    "debug": false,
+    "info": true,
+    "web": true
+};
+
+const visibilityFilter = (state = defaultVisibility, action) => {
+    switch (action.type) {
+        case TOGGLE_EVENTLOG_FILTER:
+            return Object.assign({}, state, {
+                [action.filter]: !state[action.filter]
+            });
+        default:
+            return state;
+    }
+};
+
+const entries = (state = [], action) => {
+    return state;
+};
+
+const eventLog = combineReducers({
+    visibilityFilter,
+    entries
+});
+
+export default eventLog
diff --git a/web/src/js/reducers/index.js b/web/src/js/reducers/index.js
new file mode 100644
index 00000000..a8b2edbf
--- /dev/null
+++ b/web/src/js/reducers/index.js
@@ -0,0 +1,8 @@
+import {combineReducers} from 'redux';
+import eventLog from './eventlog'
+
+const mitmproxyApp = combineReducers({
+    eventLog
+});
+
+export default mitmproxyApp
diff --git a/web/src/js/reduxActions.js b/web/src/js/reduxActions.js
new file mode 100644
index 00000000..c5902f80
--- /dev/null
+++ b/web/src/js/reduxActions.js
@@ -0,0 +1,13 @@
+export const TOGGLE_EVENTLOG_FILTER = 'TOGGLE_EVENTLOG_FILTER';
+export const HIDE_EVENTLOG = 'HIDE_EVENTLOG';
+export const SHOW_EVENTLOG = 'SHOW_EVENTLOG';
+
+export const EventLogFilters = {
+    DEBUG: 'debug',
+    INFO: 'info',
+    WEB: 'web'
+};
+
+export function toggleEventLogFilter(filter) {
+    return {type: TOGGLE_EVENTLOG_FILTER, filter}
+}