expander fully functional

Author: C-STYR

src/app/containers/ActionContainer.tsx

@@ -19,7 +19,8 @@ function ActionContainer(props) {
   const { hierarchy, sliderIndex, viewIndex } = tabs[currentTab];
   let actionsArr = [];
   const hierarchyArr: any[] = [];
-  const { seeActionContainer } = props;
+  const { timeTravel } = props;
+  // React.useEffect(() => { console.log("component updated"); }, [timeTravel]);
 
   // function to traverse state from hiararchy and also getting information on display name and component name
   const displayArray = (obj: {
@@ -113,14 +114,17 @@ function ActionContainer(props) {
     }
   );
 
-  if (!seeActionContainer) {
+  if (!timeTravel) {
+    console.log("should be false:", timeTravel)
     return (
+      //returns an empty div when timeTravel is false
+
       <div></div>
     ) 
   }
   else {
-    console.log("ActionContainer can see prop updates");
-    //this is not logging; the prop is not being udpdated...
+    console.log("Should be true:", timeTravel);
+    // this is not logging; the prop is not being udpdated or the component is not being re-rendered.
     return (
       <div className="action-container">
         <SwitchAppDropdown />

src/app/containers/MainContainer.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import HeadContainer from './HeadContainer';
 import ActionContainer from './ActionContainer';
 import StateContainer from './StateContainer';
@@ -15,22 +15,8 @@ import { useStoreContext } from '../store';
 import MPID from '../user_id/user_id';
 import useForceUpdate from '../components/useForceUpdate'
 
-//logic for toggling on the action container sidebar
-let seeActionContainer: boolean = false;
-
-function toggleActionContainer(): void {
-  seeActionContainer = !seeActionContainer;
-  const bodyContainer = document.getElementById("bodyContainer");
 
-  if (seeActionContainer) {
-    bodyContainer.classList.remove("body-container1");
-    bodyContainer.classList.add("body-container2");
-  }
-  else {
-    bodyContainer.classList.remove("body-container2");
-    bodyContainer.classList.add("body-container1");
-  }
-}
+//logic for toggling on the action container sidebar
 
 
 const mixpanel = require('mixpanel').init('12fa2800ccbf44a5c36c37bc9776e4c0', {
@@ -39,9 +25,26 @@ const mixpanel = require('mixpanel').init('12fa2800ccbf44a5c36c37bc9776e4c0', {
 });
 
 function MainContainer(): any {
+  const [timeTravel, setTimeTravel] = useState(false);
   const [store, dispatch] = useStoreContext();
   const { tabs, currentTab, port: currentPort } = store;
   // add event listeners to background script
+
+  function toggleActionContainer(): void {
+    setTimeTravel(!timeTravel)
+    const bodyContainer = document.getElementById("bodyContainer");
+  
+    if (timeTravel) {
+      bodyContainer.classList.remove("body-container2");
+      bodyContainer.classList.add("body-container1");
+     
+    }
+    else {
+      bodyContainer.classList.remove("body-container1");
+      bodyContainer.classList.add("body-container2");
+    }
+  }
+
   useEffect(() => {
     // only open port once
     if (currentPort) return;
@@ -198,7 +201,7 @@ function MainContainer(): any {
     <div className="main-container">
       {/* <HeadContainer /> */}
       <div id="bodyContainer" className="body-container1">
-        <ActionContainer seeActionContainer={seeActionContainer}/>
+        <ActionContainer timeTravel={timeTravel}/>
         {snapshots.length ? (
           <StateContainer
             toggleActionContainer={toggleActionContainer}

src/app/containers/StateContainer.tsx

@@ -42,7 +42,7 @@ const StateContainer = (props: StateContainerProps): JSX.Element => {
         <div className="main-navbar-container">
           <div className="main-navbar-text">{Text}</div>
           <div className="main-navbar">
-            <button className="toggleAC" onClick={()=> toggleActionContainer()}>View ActionContainer</button>
+            <button  className="toggleAC" onClick={()=> toggleActionContainer()}>View Time Travel</button>
             <NavLink
               className="main-router-link"
               activeClassName="is-active"

src/app/styles/layout/_stateContainer.scss

@@ -15,6 +15,12 @@
   border-radius: 5px;
   border: 1px solid rgba(184, 196, 194, 0.25);
   height: 75%;
+  text-decoration: none;
+}
+
+.toggleAC:focus {
+  outline: none;
+  box-shadow: none;
 }
 
 .state-container .navbar {