web: :hatching_chick:

10 files changed, 130 insertions, 163 deletions

diff --git a/web/src/js/app.js b/web/src/js/app.js
index 30897686..5b5d1fc8 100644
--- a/web/src/js/app.js
+++ b/web/src/js/app.js
@@ -2,14 +2,14 @@ import React from "react"
 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 rootReducer from './ducks/index';
 
-let store = createStore(mitmproxyApp);
+let store = createStore(rootReducer);
 
 $(function () {
     window.ws = new Connection("/updates");
diff --git a/web/src/js/components/common.js b/web/src/js/components/common.js
index 87c34ffc..3496f1de 100644
--- a/web/src/js/components/common.js
+++ b/web/src/js/components/common.js
@@ -108,18 +108,17 @@ export var Splitter = React.createClass({
     }
 });
 
-export const ToggleButton = (props) =>
-    <div className="input-group toggle-btn">
-        <div
-        className={"btn " + (props.checked ? "btn-primary" : "btn-default")}
-        onClick={props.onToggleChanged}>
-        <span className={"fa " + (props.checked ? "fa-check-square-o" : "fa-square-o")}>&nbsp;{props.name}</span>
-        </div>
+export const ToggleButton = ({checked, onToggle, text}) =>
+    <div className={"btn btn-toggle " + (checked ? "btn-primary" : "btn-default")} onClick={onToggle}>
+        <i className={"fa fa-fw " + (checked ? "fa-check-square-o" : "fa-square-o")}/>
+        &nbsp;
+        {text}
     </div>;
 
 ToggleButton.propTypes = {
-    name: React.PropTypes.string.isRequired,
-    onToggleChanged: React.PropTypes.func.isRequired
+    checked: React.PropTypes.bool.isRequired,
+    onToggle: React.PropTypes.func.isRequired,
+    text: React.PropTypes.string.isRequired
 };
 
 export class ToggleInputButton extends React.Component {
diff --git a/web/src/js/components/eventlog.js b/web/src/js/components/eventlog.js
index 687c5265..a2e6a0c1 100644
--- a/web/src/js/components/eventlog.js
+++ b/web/src/js/components/eventlog.js
@@ -1,12 +1,12 @@
 import React from "react"
 import ReactDOM from "react-dom"
-import { connect } from 'react-redux'
+import {connect} from 'react-redux'
 import shallowEqual from "shallowequal"
-import {Query} from "../actions.js"
-import {toggleEventLogFilter} from "../reduxActions"
+import {toggleEventLogFilter, toggleEventLogVisibility} from "../ducks/eventLog"
 import AutoScroll from "./helpers/AutoScroll";
 import {calcVScroll} from "./helpers/VirtualScroll"
 import {StoreView} from "../store/view.js"
+import {ToggleButton} from "./common";
 
 class EventLogContents extends React.Component {
 
@@ -27,7 +27,7 @@ class EventLogContents extends React.Component {
         );
 
         this.heights = {};
-        this.state = { entries: this.view.list, vScroll: calcVScroll() };
+        this.state = {entries: this.view.list, vScroll: calcVScroll()};
 
         this.onChange = this.onChange.bind(this);
         this.onViewportUpdate = this.onViewportUpdate.bind(this);
@@ -71,12 +71,12 @@ class EventLogContents extends React.Component {
         });
 
         if (!shallowEqual(this.state.vScroll, vScroll)) {
-            this.setState({ vScroll });
+            this.setState({vScroll});
         }
     }
 
     onChange() {
-        this.setState({ entries: this.view.list });
+        this.setState({entries: this.view.list});
     }
 
     setHeight(id, ref) {
@@ -90,7 +90,7 @@ class EventLogContents extends React.Component {
     }
 
     getIcon(level) {
-        return { web: "html5", debug: "bug" }[level] || "info";
+        return {web: "html5", debug: "bug"}[level] || "info";
     }
 
     render() {
@@ -112,87 +112,59 @@ class EventLogContents extends React.Component {
     }
 }
 
-ToggleFilter.propTypes = {
-    name: React.PropTypes.string.isRequired,
-    toggleLevel: React.PropTypes.func.isRequired,
-    active: React.PropTypes.bool,
-};
-
-function ToggleFilter ({ name, active, toggleLevel }) {
-    let className = "label ";
-    if (active) {
-        className += "label-primary";
-    } else {
-        className += "label-default";
-    }
-
-    function onClick(event) {
-        event.preventDefault();
-        toggleLevel();
-    }
-
-    return (
-        <a
-            href="#"
-            className={className}
-            onClick={onClick}>
-            {name}
-        </a>
-    );
-}
-
-const mapStateToProps = (state, ownProps) => {
-  return {
-    active: state.eventLog.visibilityFilter[ownProps.name]
-  }
-};
+EventLogContents = AutoScroll(EventLogContents);
+
+
+const EventLogContentsContainer = connect(
+    state => ({
+        filter: state.eventLog.filter
+    })
+)(EventLogContents);
+
+
+export const ToggleEventLog = connect(
+    state => ({
+        checked: state.eventLog.visible
+    }),
+    dispatch => ({
+        onToggle: () => dispatch(toggleEventLogVisibility())
+    })
+)(ToggleButton);
+
+
+const ToggleFilter = connect(
+    (state, ownProps) => ({
+        checked: state.eventLog.filter[ownProps.text]
+    }),
+    (dispatch, ownProps) => ({
+        onToggle: () => dispatch(toggleEventLogFilter(ownProps.text))
+    })
+)(ToggleButton);
+
+
+const EventLog = ({close}) =>
+    <div className="eventlog">
+        <div>
+            Eventlog
+            <div className="pull-right">
+                <ToggleFilter text="debug"/>
+                <ToggleFilter text="info"/>
+                <ToggleFilter text="web"/>
+                <i onClick={close} className="fa fa-close"></i>
+            </div>
+        </div>
+        <EventLogContentsContainer/>
+    </div>;
 
-const mapDispatchToProps = (dispatch, ownProps) => {
-  return {
-    toggleLevel: () => {
-      dispatch(toggleEventLogFilter(ownProps.name))
-    }
-  }
+EventLog.propTypes = {
+    close: React.PropTypes.func.isRequired
 };
 
-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({
-    close() {
-        var d = {};
-        d[Query.SHOW_EVENTLOG] = undefined;
-        this.props.updateLocation(undefined, d);
-    },
-    render() {
-        return (
-            <div className="eventlog">
-                <div>
-                    Eventlog
-                    <div className="pull-right">
-                        <ToggleEventLogFilter name="debug"/>
-                        <ToggleEventLogFilter name="info"/>
-                        <ToggleEventLogFilter name="web"/>
-                        <i onClick={this.close} className="fa fa-close"></i>
-                    </div>
-
-                </div>
-                <VisibleAutoScrollEventLog/>
-            </div>
-        );
-    }
-});
+const EventLogContainer = connect(
+    undefined,
+    dispatch => ({
+        close: () => dispatch(toggleEventLogVisibility())
+    })
+)(EventLog);
 
-export default EventLog;
+export default EventLogContainer;
diff --git a/web/src/js/components/header.js b/web/src/js/components/header.js
index 643659c3..76c4744a 100644
--- a/web/src/js/components/header.js
+++ b/web/src/js/components/header.js
@@ -1,6 +1,7 @@
 import React from "react";
 import ReactDOM from 'react-dom';
 import $ from "jquery";
+import {connect} from 'react-redux'
 
 import Filt from "../filt/filt.js";
 import {Key} from "../utils.js";
@@ -8,6 +9,7 @@ import {ToggleInputButton, ToggleButton} from "./common.js";
 import {SettingsActions, FlowActions} from "../actions.js";
 import {Query} from "../actions.js";
 import {SettingsState} from "./common.js";
+import {ToggleEventLog} from "./eventlog"
 
 var FilterDocs = React.createClass({
     statics: {
@@ -224,26 +226,11 @@ var ViewMenu = React.createClass({
         title: "View",
         route: "flows"
     },
-    toggleEventLog: function () {
-        var d = {};
-        if (this.props.query[Query.SHOW_EVENTLOG]) {
-            d[Query.SHOW_EVENTLOG] = undefined;
-        } else {
-            d[Query.SHOW_EVENTLOG] = "t"; // any non-false value will do it, keep it short
-        }
-
-        this.props.updateLocation(undefined, d);
-        console.log('toggleevent');
-    },
     render: function () {
-      var showEventLog = this.props.query[Query.SHOW_EVENTLOG];
       return (
           <div>
             <div className="menu-row">
-              <ToggleButton
-                checked={showEventLog}
-                name = "Show Eventlog"
-                onToggleChanged={this.toggleEventLog}/>
+                <ToggleEventLog text="Show Event Log"/>
             </div>
             <div className="clearfix"></div>
           </div>
diff --git a/web/src/js/components/proxyapp.js b/web/src/js/components/proxyapp.js
index 4c790d3d..99b64580 100644
--- a/web/src/js/components/proxyapp.js
+++ b/web/src/js/components/proxyapp.js
@@ -1,6 +1,8 @@
 import React from "react";
 import ReactDOM from "react-dom";
 import _ from "lodash";
+import {connect} from 'react-redux'
+import { Route, Router as ReactRouter, hashHistory, Redirect} from "react-router"
 
 import {Splitter} from "./common.js"
 import MainView from "./mainview.js";
@@ -8,7 +10,6 @@ import Footer from "./footer.js";
 import {Header, MainMenu} from "./header.js";
 import EventLog from "./eventlog.js"
 import {EventLogStore, FlowStore, SettingsStore} from "../store/store.js";
-import {Query} from "../actions.js";
 import {Key} from "../utils.js";
 
 
@@ -120,10 +121,10 @@ var ProxyAppMain = React.createClass({
     render: function () {
         var query = this.getQuery();
         var eventlog;
-        if (this.props.location.query[Query.SHOW_EVENTLOG]) {
+        if (this.props.showEventLog) {
             eventlog = [
                 <Splitter key="splitter" axis="y"/>,
-                <EventLog key="eventlog" updateLocation={this.updateLocation}/>
+                <EventLog key="eventlog"/>
             ];
         } else {
             eventlog = null;
@@ -142,13 +143,17 @@ var ProxyAppMain = React.createClass({
     }
 });
 
+const AppContainer = connect(
+    state => ({
+        showEventLog: state.eventLog.visible
+    })
+)(ProxyAppMain);
 
-import { Route, Router as ReactRouter, hashHistory, Redirect} from "react-router";
 
 export var App = (
     <ReactRouter history={hashHistory}>
         <Redirect from="/" to="/flows" />
-        <Route path="/" component={ProxyAppMain}>
+        <Route path="/" component={AppContainer}>
             <Route path="flows" component={MainView}/>
             <Route path="flows/:flowId/:detailTab" component={MainView}/>
             <Route path="reports" component={Reports}/>
diff --git a/web/src/js/ducks/README.md b/web/src/js/ducks/README.md
new file mode 100644
index 00000000..9d005f35
--- /dev/null
+++ b/web/src/js/ducks/README.md
@@ -0,0 +1 @@
+https://github.com/erikras/ducks-modular-redux
\ No newline at end of file
diff --git a/web/src/js/ducks/eventLog.js b/web/src/js/ducks/eventLog.js
new file mode 100644
index 00000000..5bae252a
--- /dev/null
+++ b/web/src/js/ducks/eventLog.js
@@ -0,0 +1,39 @@
+const TOGGLE_FILTER = 'TOGGLE_EVENTLOG_FILTER'
+const TOGGLE_VISIBILITY = 'TOGGLE_EVENTLOG_VISIBILITY'
+
+
+const defaultState = {
+    visible: false,
+    filter: {
+        "debug": false,
+        "info": true,
+        "web": true
+    }
+}
+export default function reducer(state = defaultState, action) {
+    switch (action.type) {
+        case TOGGLE_FILTER:
+            return {
+                ...state,
+                filter: {
+                    ...state.filter,
+                    [action.filter]: !state.filter[action.filter]
+                }
+            }
+        case TOGGLE_VISIBILITY:
+            return {
+                ...state,
+                visible: !state.visible
+            }
+        default:
+            return state
+    }
+}
+
+
+export function toggleEventLogFilter(filter) {
+    return {type: TOGGLE_FILTER, filter}
+}
+export function toggleEventLogVisibility() {
+    return {type: TOGGLE_VISIBILITY}
+}
\ No newline at end of file
diff --git a/web/src/js/ducks/index.js b/web/src/js/ducks/index.js
new file mode 100644
index 00000000..c82d42bb
--- /dev/null
+++ b/web/src/js/ducks/index.js
@@ -0,0 +1,8 @@
+import {combineReducers} from 'redux'
+import eventLog from './eventLog.js';
+
+const rootReducer = combineReducers({
+    eventLog
+})
+
+export default rootReducer
\ No newline at end of file
diff --git a/web/src/js/reducers/eventLog.js b/web/src/js/reducers/eventLog.js
deleted file mode 100644
index 9d078c14..00000000
--- a/web/src/js/reducers/eventLog.js
+++ /dev/null
@@ -1,31 +0,0 @@
-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 {
-                ...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/reduxActions.js b/web/src/js/reduxActions.js
deleted file mode 100644
index c5902f80..00000000
--- a/web/src/js/reduxActions.js
+++ /dev/null
@@ -1,13 +0,0 @@
-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}
-}