web interleave old store and redux flow state

4 files changed, 37 insertions, 10 deletions

diff --git a/mitmproxy/web/static/app.js b/mitmproxy/web/static/app.js
index 128e8647..d1c9dfa8 100644
--- a/mitmproxy/web/static/app.js
+++ b/mitmproxy/web/static/app.js
@@ -1479,6 +1479,8 @@ var _reactDom = require("react-dom");
 
 var _reactDom2 = _interopRequireDefault(_reactDom);
 
+var _reactRedux = require("react-redux");
+
 var _classnames = require("classnames");
 
 var _classnames2 = _interopRequireDefault(_classnames);
@@ -1541,6 +1543,14 @@ function FlowRow(props) {
     );
 }
 
+var FlowRowContainer = (0, _reactRedux.connect)(function (state, ownProps) {
+    return {
+        flow: state.flows.all.byId[ownProps.flowId]
+    };
+}, function (dispatch) {
+    return {};
+})(FlowRow);
+
 var FlowTableHead = function (_React$Component) {
     _inherits(FlowTableHead, _React$Component);
 
@@ -1724,9 +1734,9 @@ var FlowTable = function (_React$Component2) {
                         null,
                         _react2.default.createElement("tr", { style: { height: vScroll.paddingTop } }),
                         flows.map(function (flow) {
-                            return _react2.default.createElement(FlowRow, {
+                            return _react2.default.createElement(FlowRowContainer, {
+                                flowId: flow.id,
                                 key: flow.id,
-                                flow: flow,
                                 columns: _flowtableColumns2.default,
                                 selected: flow === _this4.props.selected,
                                 highlighted: highlight && highlight[flow.id],
@@ -1754,7 +1764,7 @@ FlowTable.defaultProps = {
 };
 exports.default = (0, _AutoScroll2.default)(FlowTable);
 
-},{"../utils.js":33,"./flowtable-columns.js":7,"./helpers/AutoScroll":16,"./helpers/VirtualScroll":17,"classnames":"classnames","lodash":"lodash","react":"react","react-dom":"react-dom","shallowequal":"shallowequal"}],9:[function(require,module,exports){
+},{"../utils.js":33,"./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", {
@@ -4406,9 +4416,13 @@ function Connection(url, dispatch) {
     var ws = new WebSocket(url);
     ws.onopen = function () {
         dispatch(webSocketActions.connected());
-        dispatch(flowActions.fetchFlows());
+        dispatch(flowActions.fetchFlows())
+        // workaround to make sure that our state is already available.
+        .then(function () {
+            console.log("flows are loaded now");
+            _actions.ConnectionActions.open();
+        });
         dispatch(eventLogActions.fetchLogEntries());
-        _actions.ConnectionActions.open();
     };
     ws.onmessage = function (m) {
         var message = JSON.parse(m.data);
@@ -4830,7 +4844,7 @@ function makeList(actionType, fetchURL) {
 
             dispatch(requestList());
 
-            (0, _utils.fetchApi)(fetchURL).then(function (response) {
+            return (0, _utils.fetchApi)(fetchURL).then(function (response) {
                 return response.json().then(function (json) {
                     dispatch(receiveList(json.data));
                 });
diff --git a/web/src/js/components/flowtable.js b/web/src/js/components/flowtable.js
index f03b8ec0..1a616eee 100644
--- a/web/src/js/components/flowtable.js
+++ b/web/src/js/components/flowtable.js
@@ -1,5 +1,6 @@
 import React from "react";
 import ReactDOM from "react-dom";
+import {connect} from 'react-redux'
 import classNames from "classnames";
 import {reverseString} from "../utils.js";
 import _ from "lodash";
@@ -36,6 +37,14 @@ function FlowRow(props) {
     );
 }
 
+const FlowRowContainer = connect(
+    (state, ownProps) => ({
+        flow: state.flows.all.byId[ownProps.flowId]
+    }),
+    dispatch => ({
+    })
+)(FlowRow);
+
 class FlowTableHead extends React.Component {
 
     static propTypes = {
@@ -196,9 +205,9 @@ class FlowTable extends React.Component {
                     <tbody>
                         <tr style={{ height: vScroll.paddingTop }}></tr>
                         {flows.map(flow => (
-                            <FlowRow
+                            <FlowRowContainer
+                                flowId={flow.id}
                                 key={flow.id}
-                                flow={flow}
                                 columns={flowtable_columns}
                                 selected={flow === this.props.selected}
                                 highlighted={highlight && highlight[flow.id]}
diff --git a/web/src/js/connection.js b/web/src/js/connection.js
index ac39a018..5961909e 100644
--- a/web/src/js/connection.js
+++ b/web/src/js/connection.js
@@ -13,8 +13,12 @@ export default function Connection(url, dispatch) {
     ws.onopen = function () {
         dispatch(webSocketActions.connected())
         dispatch(flowActions.fetchFlows())
+        // workaround to make sure that our state is already available.
+            .then(() => {
+            console.log("flows are loaded now")
+            ConnectionActions.open()
+        })
         dispatch(eventLogActions.fetchLogEntries())
-        ConnectionActions.open()
     };
     ws.onmessage = function (m) {
         var message = JSON.parse(m.data);
diff --git a/web/src/js/ducks/utils/list.js b/web/src/js/ducks/utils/list.js
index e5ce75ef..a5ce7250 100644
--- a/web/src/js/ducks/utils/list.js
+++ b/web/src/js/ducks/utils/list.js
@@ -152,7 +152,7 @@ export default function makeList(actionType, fetchURL) {
 
             dispatch(requestList())
 
-            fetchApi(fetchURL).then(response => {
+            return fetchApi(fetchURL).then(response => {
                 return response.json().then(json => {
                     dispatch(receiveList(json.data))
                 })