expander working, statecontainer not working yet

Author: C-STYR

src/app/components/SwitchApp.tsx

@@ -3,6 +3,7 @@ import Select from 'react-select';
 import { useStoreContext } from '../store';
 import { setTab } from '../actions/actions';
 
+
 const SwitchAppDropdown = () => {
   const [{ currentTab, tabs }, dispatch] = useStoreContext();
 

src/app/containers/ActionContainer.tsx

@@ -14,11 +14,12 @@ const resetSlider = () => {
   }
 };
 
-function ActionContainer() {
+function ActionContainer(props) {
   const [{ tabs, currentTab }, dispatch] = useStoreContext();
   const { hierarchy, sliderIndex, viewIndex } = tabs[currentTab];
   let actionsArr = [];
   const hierarchyArr: any[] = [];
+  const { seeActionContainer } = props;
 
   // function to traverse state from hiararchy and also getting information on display name and component name
   const displayArray = (obj: {
@@ -112,25 +113,36 @@ function ActionContainer() {
     }
   );
 
-  return (
-    <div className="action-container">
-      <SwitchAppDropdown />
-      <div className="action-component exclude">
-        <button
-          className="empty-button"
-          onClick={() => {
-            dispatch(emptySnapshots());
-            // set slider back to zero
-            resetSlider();
-          }}
-          type="button"
-        >
-          Empty
-        </button>
+  if (!seeActionContainer) {
+    return (
+      <div></div>
+    ) 
+  }
+  else {
+    console.log("ActionContainer can see prop updates");
+    //this is not logging; the prop is not being udpdated...
+    return (
+      <div className="action-container">
+        <SwitchAppDropdown />
+        <div className="action-component exclude">
+          <button
+            className="empty-button"
+            onClick={() => {
+              dispatch(emptySnapshots());
+              // set slider back to zero
+              resetSlider();
+            }}
+            type="button"
+          >
+            Empty
+          </button>
+        </div>
+        <div>{actionsArr}</div>
       </div>
-      <div>{actionsArr}</div>
-    </div>
-  );
+    );
+    
+  }
+
 }
 
 export default ActionContainer;

src/app/containers/MainContainer.tsx

@@ -13,6 +13,25 @@ import {
 } from '../actions/actions';
 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");
+  }
+}
+
 
 const mixpanel = require('mixpanel').init('12fa2800ccbf44a5c36c37bc9776e4c0', {
   debug: false,
@@ -177,11 +196,12 @@ function MainContainer(): any {
   const hierarchyDisplay = statelessCleaning(hierarchy);
   return (
     <div className="main-container">
-      <HeadContainer />
-      <div className="body-container">
-        <ActionContainer />
+      {/* <HeadContainer /> */}
+      <div id="bodyContainer" className="body-container1">
+        <ActionContainer seeActionContainer={seeActionContainer}/>
         {snapshots.length ? (
           <StateContainer
+            toggleActionContainer={toggleActionContainer}
             viewIndex={viewIndex}
             snapshot={snapshotDisplay}
             hierarchy={hierarchyDisplay}

src/app/containers/StateContainer.tsx

@@ -23,15 +23,17 @@ interface StateContainerProps {
       atomsComponents?: object;
     }
   >;
+  toggleActionContainer?: any;
   AtomsRelationship?: any[];
   hierarchy: Record<string, unknown>;
   snapshots: [];
   viewIndex: number;
+  
 }
 
 // eslint-disable-next-line react/prop-types
 const StateContainer = (props: StateContainerProps): JSX.Element => {
-  const { snapshot, hierarchy, snapshots, viewIndex } = props;
+  const { snapshot, hierarchy, snapshots, viewIndex, toggleActionContainer } = props;
   const [Text, setText] = useState('State');
 
   return (
@@ -40,6 +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>
             <NavLink
               className="main-router-link"
               activeClassName="is-active"

src/app/styles/layout/_bodyContainer.scss

@@ -1,4 +1,16 @@
-.body-container {
+.body-container1 {
+	height: 94%;
+	overflow: hidden;
+	display: grid;
+	grid-template-columns: 1fr 2fr;
+	grid-template-rows: 8fr 1fr;
+	grid-template-areas:
+		'states states'
+		'travel travel'
+		'buttons buttons';
+}
+
+.body-container2 {
 	height: 94%;
 	overflow: hidden;
 	display: grid;
@@ -10,6 +22,8 @@
 		'buttons buttons';
 }
 
+
+
 /* if extension width is less than 500px, stack the body containers */
 @media (max-width: 500px) {
 	.body-container {

src/app/styles/layout/_stateContainer.scss

@@ -9,6 +9,14 @@
   overflow: hidden;
 }
 
+.toggleAC {
+  color: $background-color;
+  background:  $blue-brand;
+  border-radius: 5px;
+  border: 1px solid rgba(184, 196, 194, 0.25);
+  height: 75%;
+}
+
 .state-container .navbar {
   background-color: $background-color;
   display: flex;