From 1aac283e2309339877907d2e08e79a06fbea1898 Mon Sep 17 00:00:00 2001
From: Clemens <cle1000.cb@gmail.com>
Date: Tue, 7 Jun 2016 00:40:36 +0200
Subject: [PATCH] moved redux state injection closer to child

---
 mitmproxy/web/static/app.js        | 44 ++++++++++++++++++++++--------
 web/src/js/components/flowtable.js |  6 +++-
 web/src/js/components/mainview.js  |  4 +--
 3 files changed, 38 insertions(+), 16 deletions(-)

diff --git a/mitmproxy/web/static/app.js b/mitmproxy/web/static/app.js
index ccf4eba98..a214d2aa7 100644
--- a/mitmproxy/web/static/app.js
+++ b/mitmproxy/web/static/app.js
@@ -1479,6 +1479,8 @@ var _filt = require("../filt/filt");
 
 var _filt2 = _interopRequireDefault(_filt);
 
+var _flows = require("../ducks/flows");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -1536,13 +1538,28 @@ function FlowTableHead(_ref2) {
     var sort = _ref2.sort;
 
 
-    /*    function () {
-        const k = Column.sortKeyFun.apply(this, arguments);
-        if (_.isString(k)) {
-            return reverseString("" + k);
-        }
-        return -k;
-        };*/
+    //const hasSort = Column.sortKeyFun;
+
+    // let sortDesc = this.props.sort.sortDesc;
+    //
+    // if (Column === this.props.sort.sortColumn) {
+    //     sortDesc = !sortDesc;
+    //     this.props.setSort(sortColumn, sortDesc);
+    // } else {
+    //     this.props.setSort({sortColumn: hasSort && Column, sortDesc: false});
+    // }
+    //
+    // let sortKeyFun = Column.sortKeyFun;
+    // if (sortDesc) {
+    //     sortKeyFun = hasSort && function () {
+    //             const k = Column.sortKeyFun.apply(this, arguments);
+    //             if (_.isString(k)) {
+    //                 return reverseString("" + k);
+    //             }
+    //             return -k;
+    //         };
+    // }
+    //this.props.setSortKeyFun(sortKeyFun);
 
     var sortColumn = sort.sortColumn;
     var sortType = sort.sortDesc ? "sort-desc" : "sort-asc";
@@ -1572,6 +1589,12 @@ var FlowTableHeadContainer = (0, _reactRedux.connect)(function (state) {
     return {
         sort: state.flows.sort
     };
+}, function (dispatch) {
+    return {
+        setSort: function setSort(sort) {
+            return dispatch((0, _flows.setSort)(sort));
+        }
+    };
 })(FlowTableHead);
 
 var FlowTable = function (_React$Component) {
@@ -1715,6 +1738,7 @@ var parseFilter = _lodash2.default.memoize(_filt2.default.parse);
 
 var FlowTableContainer = (0, _reactRedux.connect)(function (state) {
     return {
+        // first idea to sort here, but i think thats not good enough ( and not working yet)...
         flows: state.flows.view.sort(function (a, b) {
             return state.flows.sort.sortColumn ? a.response.status_code > b.response.status_code : 0;
         })
@@ -1723,7 +1747,7 @@ var FlowTableContainer = (0, _reactRedux.connect)(function (state) {
 
 exports.default = FlowTableContainer;
 
-},{"../filt/filt":29,"../utils.js":32,"./flowtable-columns.js":7,"./helpers/AutoScroll":16,"./helpers/VirtualScroll":17,"classnames":"classnames","lodash":"lodash","react":"react","react-dom":"react-dom","react-redux":"react-redux","shallowequal":"shallowequal"}],9:[function(require,module,exports){
+},{"../ducks/flows":24,"../filt/filt":29,"../utils.js":32,"./flowtable-columns.js":7,"./helpers/AutoScroll":16,"./helpers/VirtualScroll":17,"classnames":"classnames","lodash":"lodash","react":"react","react-dom":"react-dom","react-redux":"react-redux","shallowequal":"shallowequal"}],9:[function(require,module,exports){
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
@@ -3918,7 +3942,6 @@ var MainView = _react2.default.createClass({
             { className: "main-view" },
             _react2.default.createElement(_flowtable2.default, { ref: "flowTable",
                 selectFlow: this.selectFlow,
-                setSort: this.props.setSort,
                 selected: this.props.selectedFlow }),
             details
         );
@@ -3941,9 +3964,6 @@ var MainViewContainer = (0, _reactRedux.connect)(function (state) {
         setFilter: function setFilter(filter) {
             return dispatch((0, _flows.setFilter)(filter));
         },
-        setSort: function setSort(sort) {
-            return dispatch((0, _flows.setSort)(sort));
-        },
         setHighlight: function setHighlight(highlight) {
             return dispatch((0, _flows.setHighlight)(highlight));
         }
diff --git a/web/src/js/components/flowtable.js b/web/src/js/components/flowtable.js
index 89bcfc39c..234698271 100644
--- a/web/src/js/components/flowtable.js
+++ b/web/src/js/components/flowtable.js
@@ -9,6 +9,7 @@ import AutoScroll from "./helpers/AutoScroll";
 import {calcVScroll} from "./helpers/VirtualScroll";
 import flowtable_columns from "./flowtable-columns.js";
 import Filt from "../filt/filt";
+import {setSort} from "../ducks/flows";
 
 
 FlowRow.propTypes = {
@@ -94,8 +95,11 @@ FlowTableHead.propTypes = {
 };
 
 const FlowTableHeadContainer = connect(
-    (state) => ({
+    state => ({
         sort: state.flows.sort
+    }),
+    dispatch => ({
+        loc: (sort) => dispatch(setSort(sort)),
     })
 )(FlowTableHead)
 
diff --git a/web/src/js/components/mainview.js b/web/src/js/components/mainview.js
index 5237bddbd..dae2856e7 100644
--- a/web/src/js/components/mainview.js
+++ b/web/src/js/components/mainview.js
@@ -7,7 +7,7 @@ import {Splitter} from "./common.js"
 import FlowTable from "./flowtable.js";
 import FlowView from "./flowview/index.js";
 import {connect} from 'react-redux'
-import {selectFlow, setFilter, setHighlight, setSort} from "../ducks/flows";
+import {selectFlow, setFilter, setHighlight} from "../ducks/flows";
 
 
 var MainView = React.createClass({
@@ -158,7 +158,6 @@ var MainView = React.createClass({
             <div className="main-view">
                 <FlowTable ref="flowTable"
                     selectFlow={this.selectFlow}
-                    setSort={this.props.setSort}
                     selected={this.props.selectedFlow} />
                 {details}
             </div>
@@ -177,7 +176,6 @@ const MainViewContainer = connect(
     dispatch => ({
         selectFlow: flowId => dispatch(selectFlow(flowId)),
         setFilter: filter => dispatch(setFilter(filter)),
-        setSort: (sort) => dispatch(setSort(sort)),
         setHighlight: highlight => dispatch(setHighlight(highlight))
     }),
     undefined,