From 9e3591e3c225c51d5a5b80eb331719d20d14dc48 Mon Sep 17 00:00:00 2001
From: Maximilian Hils <git@maximilianhils.com>
Date: Thu, 2 Jun 2016 00:04:10 -0700
Subject: add basic redux architecture, convert eventlog to redux

---
 web/src/js/app.js                 | 16 +++++++++---
 web/src/js/components/eventlog.js | 54 ++++++++++++++++++++++++---------------
 web/src/js/components/proxyapp.js |  2 +-
 web/src/js/reducers/eventLog.js   | 30 ++++++++++++++++++++++
 web/src/js/reducers/index.js      |  8 ++++++
 web/src/js/reduxActions.js        | 13 ++++++++++
 6 files changed, 98 insertions(+), 25 deletions(-)
 create mode 100644 web/src/js/reducers/eventLog.js
 create mode 100644 web/src/js/reducers/index.js
 create mode 100644 web/src/js/reduxActions.js

(limited to 'web/src')

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}
+}
-- 
cgit v1.2.3