for master pull

Author: neyser zana

build/webpack-bundle.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import ReactJson from 'react-json-view';
 
-const GraphQLResponse = ({ logs, log  }) => {
+const GraphQLResponse = ({ logs, log }) => {
 
-  let response = log=== null ? logs[logs.length - 1].res : log.res; 
+  let response = log === null ? logs[logs.length - 1].res : log.res;
   console.log('--response:', response);
 
   return (

build/webpack-bundle.js.map

@@ -11,7 +11,7 @@ class TreeDiagram extends React.Component {
       orientation: 'vertical',
       foreignObjectWrapper: {y: -5, x: 10},
       nodeSize: {x: 75, y: 75},
-      // domData: []
+      domData: []
     };
     this.handleFlip = this.handleFlip.bind(this);
   }
@@ -26,36 +26,36 @@ class TreeDiagram extends React.Component {
         x: dimensions.width / 2,
         y: dimensions.height / 8
       },
-      // domData: this.props.appState,
+      domData: this.props.appState,
     });
   }
 
   //* when theres a change in any of the toggles, filteredDdata stores the filtered components
   //* check for any toggles to be true, and filteredData to be not empty, if so setState. 
   //* issue is we keep running into a repetitive recursive loop and app breaks/ 
-  // componentDidUpdate() {
-  //   if(this.props.filteredData.length !== 0 && this.props.toggleRedux === true || this.props.toggleRouter === true || this.props.toggleApollo === true) {
-  //     this.setState({
-  //       domData: this.props.filteredData
-  //     });
-  //   }
-  // }
+  componentDidUpdate() {
+    if(this.props.filteredData.length !== 0 && this.props.toggleRedux === true || this.props.toggleRouter === true || this.props.toggleApollo === true) {
+      this.setState({
+        domData: this.props.filteredData
+      });
+    }
+  }
 
 //* before props are being passed, we want to compare the old props with the newly updated props.
 //* if they're not the same (comparing lengths after filter) then we set our state accordingly.
 //* wanted to see diff from this and update. 
 
-  // componentWillReceiveProps(nextProps) {
-  //   if(this.props.filteredData.length !== nextProps.filteredData.length) {
-  //     this.setState({
-  //       domData: this.props.filteredData
-  //     })
-  //   } else {
-  //     this.setState({
-  //       domData: this.props.appState
-  //     })
-  //   }
-  // }
+  componentWillReceiveProps(nextProps) {
+    if(this.props.filteredData.length !== nextProps.filteredData.length) {
+      this.setState({
+        domData: this.props.filteredData
+      })
+    } else {
+      this.setState({
+        domData: this.props.appState
+      })
+    }
+  }
 
 
   handleFlip() {

src/components/GraphQLResponse.js

@@ -27,7 +27,7 @@ class App extends Component {
       toggleRouter: false, 
       toggleRedux: false,
       toggleApollo: false,
-      // filteredData: [] 
+      filteredData: [],
       logView: null
     };
 
@@ -166,12 +166,12 @@ class App extends Component {
       //* best to have a toggle change a set of conditions in traverser, where if toggle is set to false, traverse and leave out these set of words apoloProvider etc. 
       //* filtering data after its already arrived with two traverse functions seem constly, and is the cause of our glitch.
       //* throwing the filtering to dev and resetting appState is causing breakage, if cant find solution, go to the source of the issue, the traverser and set toggling conditions there. 
-      // this.setState({
-      //   filteredData: data
-      // });
       this.setState({
-        appState: data
+        filteredData: data
       });
+      // this.setState({
+      //   appState: data
+      // });
       console.log(data, 'filterOutComponents function ran successfully, filteredData is set to this object --coming from devtools line 169')
     }
   }
@@ -310,12 +310,11 @@ class App extends Component {
                       handleApolloFilter = {this.handleApolloFilter} 
                       handleReduxFilter = {this.handleReduxFilter} 
                       handleRouterFilter = {this.handleRouterFilter}
-                      // filteredData = {this.state.filteredData} 
-                      // toggleRedux = {this.state.toggleRedux}
-                      // toggleRouter = {this.state.toggleRouter}
-                      // toggleApolo = {this.state.toggleApollo}
+                      filteredData = {this.state.filteredData} 
+                      toggleRedux = {this.state.toggleRedux}
+                      toggleRouter = {this.state.toggleRouter}
+                      toggleApolo = {this.state.toggleApollo}
                     />
-                    <TreeDiagram appState={this.state.appState} handleMouseOver={this.handleMouseOver} />
                     <StatePropsBox nodeData={this.state.nodeData} />
                   </div>
                 )}