added tree component rendering

Author: jasnoo

src/app/components/StateRoute/StateRoute.tsx

@@ -90,7 +90,7 @@ const StateRoute = (props: StateRouteProps) => {
   // if true invoke render Tree with snapshot
   const renderTree = () => {
     if (hierarchy) {
-      return <Tree snapshot={snapshot} />;
+      return <Tree snapshot={snapshot} snapshots={snapshots} currLocation={currLocation} />;
     }
     return <div className='noState'>{NO_STATE_MSG}</div>;
   };

src/app/components/StateRoute/Tree.tsx

@@ -40,21 +40,27 @@ interface TreeProps {
     stateSnaphot?: object;
     children?: any[];
   };
+  snapshots?;
+  currLocation?;
 }
 
 const Tree = (props: TreeProps) => {
-  const { snapshot } = props;
+  const { snapshot, snapshots, currLocation } = props;
   const [store, dispatch] = useStoreContext();
 
   useEffect(() => {
     dispatch(setCurrentTabInApp('history'));
   }, []);
 
+  console.log('props:', props);
+  // console.log('snapshot:', snapshot);
+  // console.group('store:', store);
   return (
     <>
       {snapshot && (
         <JSONTree
-          data={snapshot}
+          data={snapshots[currLocation['index']] || snapshot}
+          // data={snapshot}
           theme={{ extend: colors, tree: () => ({ className: 'json-tree' }) }}
           shouldExpandNode={() => true}
           getItemString={getItemString}

src/app/containers/MainContainer.tsx

@@ -197,16 +197,17 @@ function MainContainer(): JSX.Element {
   }
 
   return (
-    <div className='main-container'>
+    <div key='main' className='main-container'>
       <div id='bodyContainer' className='body-container'>
         <ActionContainer
+          key='action'
           actionView={actionView}
           setActionView={setActionView}
           toggleActionContainer={toggleActionContainer}
         />
         {snapshots.length ? handleSplit(split) : null}
-        <TravelContainer snapshotsLength={snapshots.length} />
-        <ButtonsContainer />
+        <TravelContainer key='travel' snapshotsLength={snapshots.length} />
+        <ButtonsContainer key='button' />
       </div>
     </div>
   );