Debugged Sidebar

Author: DennisLpz

src/app/containers/ActionContainer.tsx

@@ -6,6 +6,7 @@ import SwitchAppDropdown from '../components/SwitchApp';
 
 import { emptySnapshots, changeView, changeSlider } from '../actions/actions';
 import { useStoreContext } from '../store';
+import { useEffect } from 'react';
 
 const resetSlider = () => {
   const slider = document.querySelector('.rc-slider-handle');
@@ -17,7 +18,7 @@ const resetSlider = () => {
 function ActionContainer(props) {
   const [{ tabs, currentTab }, dispatch] = useStoreContext();
   const { hierarchy, sliderIndex, viewIndex } = tabs[currentTab];
-  const { toggleActionContainer, actionView } = props;
+  const { toggleActionContainer, actionView, setActionView } = props;
   let actionsArr = [];
   const hierarchyArr: any[] = [];
 
@@ -112,11 +113,14 @@ function ActionContainer(props) {
       );
     }
   );
+  useEffect(() => {
+    setActionView(true);
+  }, []);
 
   // this is not logging; the prop is not being udpdated or the component is not being re-rendered.
   return (
     <div id='action-id' className='action-container'>
-      <div id = "arrow">
+      <div id='arrow'>
         <aside className='aside'>
           <a onClick={toggleActionContainer} className='toggle'>
             <i></i>

src/app/containers/MainContainer.tsx

@@ -25,10 +25,13 @@ function MainContainer(): any {
   const [actionView, setActionView] = useState(true);
   //this function handles Time Jump sidebar view
   const toggleActionContainer = () => {
+    setActionView(!actionView);
     const toggleElem = document.querySelector('aside');
     toggleElem.classList.toggle('no-aside');
-    setActionView(!actionView);
   };
+  useEffect(() => {
+    setActionView(true);
+  }, []);
 
   useEffect(() => {
     // only open port once
@@ -115,7 +118,6 @@ function MainContainer(): any {
         });
       }
     }
-
     document.addEventListener('click', mpClickTrack);
   }, []);
 
@@ -191,6 +193,7 @@ function MainContainer(): any {
       <div id='bodyContainer' className='body-container1'>
         <ActionContainer
           actionView={actionView}
+          setActionView={setActionView}
           toggleActionContainer={toggleActionContainer}
         />
         {snapshots.length ? (