(fixed) issue in which onclick of node was not dispatching actions

Author: guizzettic

src/app/components/StateRoute.tsx

@@ -14,11 +14,8 @@ import {
 import { ParentSize } from '@visx/responsive';
 import Tree from './Tree';
 import ComponentMap from './ComponentMap';
-// import PerfView from './PerfView';
 import AtomsRelationship from './AtomsRelationship.jsx';
 import PerformanceVisx from './PerformanceVisx';
-// import ZoomI from './zoomFt';
-// import History from './History'
 
 import { changeView, changeSlider } from '../actions/actions';
 import { useStoreContext } from '../store';
@@ -48,19 +45,17 @@ interface StateRouteProps {
 
 const StateRoute = (props: StateRouteProps) => {
   const { snapshot, hierarchy, snapshots, viewIndex } = props;
+<<<<<<< HEAD
   const [{ tabs, currentTab }, dispatch] = useStoreContext();
   const { hierarchy, sliderIndex, viewIndex } = tabs[currentTab];
+=======
+
+  console.log(hierarchy);
+>>>>>>> e938454e37a781e16248bb535d0850ea3a0020fd
 
   const isRecoil = snapshot.atomsComponents ? true : false;
   const [noRenderData, setNoRenderData] = useState(false);
 
-  // component map zoom state
-  const [{ x, y, k }, setZoomState]: any = useState({
-    x: 150,
-    y: 250,
-    k: 1,
-  });
-
   // Map
   const renderComponentMap = () => {
     if (hierarchy) {
@@ -72,13 +67,12 @@ const StateRoute = (props: StateRouteProps) => {
         </ParentSize>
       );
     }
-    return <div className="noState">{NO_STATE_MSG}</div>;
+    return <div className='noState'>{NO_STATE_MSG}</div>;
   };
 
   // the hierarchy gets set on the first click in the page
   // when the page is refreshed we may not have a hierarchy, so we need to check if hierarchy was initialized
-  // if true involk render chart with hierarchy
-  //* we wrap History in a ParentSize div, in order to make use of Visx's Zoom functionality
+  // if true invoke render chart with hierarchy
   const renderHistory = () => {
     if (hierarchy) {
       return (
@@ -90,7 +84,7 @@ const StateRoute = (props: StateRouteProps) => {
         />
       );
     }
-    return <div className="noState">{NO_STATE_MSG}</div>;
+    return <div className='noState'>{NO_STATE_MSG}</div>;
   };
 
   const renderAtomsRelationship = () => (
@@ -103,12 +97,12 @@ const StateRoute = (props: StateRouteProps) => {
 
   // the hierarchy gets set on the first click in the page
   // when the page is refreshed we may not have a hierarchy, so we need to check if hierarchy was initialized
-  // if true involk render Tree with snapshot
+  // if true invoke render Tree with snapshot
   const renderTree = () => {
     if (hierarchy) {
       return <Tree snapshot={snapshot} />;
     }
-    return <div className="noState">{NO_STATE_MSG}</div>;
+    return <div className='noState'>{NO_STATE_MSG}</div>;
   };
 
   const renderPerfView = () => {
@@ -134,55 +128,55 @@ const StateRoute = (props: StateRouteProps) => {
         // />
       );
     }
-    return <div className="noState">{NO_STATE_MSG}</div>;
+    return <div className='noState'>{NO_STATE_MSG}</div>;
   };
 
   return (
     <Router>
-      <div className="navbar">
+      <div className='navbar'>
         <NavLink
-          className="router-link"
-          activeClassName="is-active"
+          className='router-link'
+          activeClassName='is-active'
           exact
-          to="/"
+          to='/'
         >
           Tree
         </NavLink>
         <NavLink
-          className="router-link"
-          activeClassName="is-active"
-          to="/history"
+          className='router-link'
+          activeClassName='is-active'
+          to='/history'
         >
           History
         </NavLink>
-        <NavLink className="router-link" activeClassName="is-active" to="/map">
+        <NavLink className='router-link' activeClassName='is-active' to='/map'>
           Map
         </NavLink>
 
         {isRecoil && (
           <NavLink
-            className="router-link"
-            activeClassName="is-active"
-            to="/relationship"
+            className='router-link'
+            activeClassName='is-active'
+            to='/relationship'
           >
             AtomsRecoil
           </NavLink>
         )}
 
         <NavLink
-          className="router-link"
-          activeClassName="is-active"
-          to="/performance"
+          className='router-link'
+          activeClassName='is-active'
+          to='/performance'
         >
           Performance
         </NavLink>
       </div>
       <Switch>
-        <Route path="/map" render={renderComponentMap} />
-        <Route path="/history" render={renderHistory} />
-        <Route path="/relationship" render={renderAtomsRelationship} />
-        <Route path="/performance" render={renderPerfView} />
-        <Route path="/" render={renderTree} />
+        <Route path='/map' render={renderComponentMap} />
+        <Route path='/history' render={renderHistory} />
+        <Route path='/relationship' render={renderAtomsRelationship} />
+        <Route path='/performance' render={renderPerfView} />
+        <Route path='/' render={renderTree} />
       </Switch>
     </Router>
   );