web interleave old store and redux flow state

3 files changed, 17 insertions, 4 deletions

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))
                 })