Merge pull request #14 from C-STYR/expander

Add a "View Time Travel" button to collapse/expand actions container

Author: DennisLpz

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,13 @@ const resetSlider = () => {
   }
 };
 
-function ActionContainer() {
+function ActionContainer(props) {
   const [{ tabs, currentTab }, dispatch] = useStoreContext();
   const { hierarchy, sliderIndex, viewIndex } = tabs[currentTab];
   let actionsArr = [];
   const hierarchyArr: any[] = [];
+  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: {
@@ -112,25 +114,39 @@ 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 (!timeTravel) {
+    console.log("should be false:", timeTravel)
+    return (
+      //returns an empty div when timeTravel is false
+
+      <div></div>
+    ) 
+  }
+  else {
+    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 />
+        <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

@@ -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';
@@ -13,16 +13,38 @@ 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
+
 
 const mixpanel = require('mixpanel').init('12fa2800ccbf44a5c36c37bc9776e4c0', {
   debug: false,
   protocol: 'https',
 });
 
 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;
@@ -177,11 +199,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 timeTravel={timeTravel}/>
         {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 Time Travel</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,20 @@
   overflow: hidden;
 }
 
+.toggleAC {
+  color: $background-color;
+  background:  $blue-brand;
+  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 {
   background-color: $background-color;
   display: flex;