Original Changes before dev pull

Author: dryczek01

src/app/components/Actions/DropDown.tsx

@@ -1,29 +1,24 @@
 import Select from 'react-select';
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 
-interface DropDownProps {
-    onChange: (selectedHook: string) => void;
-}
+const DropDown = ({ dropdownSelection, setDropdownSelection }: { dropdownSelection: string; setDropdownSelection: (value: string) => void }): JSX.Element => {
+  const handleChange = (selected: { value: string; label: string }) => {
+    setDropdownSelection(selected.value); // Update parent state
+  };
 
-const DropDown = ({onChange}: DropDownProps): JSX.Element => {
-    
-    const options = [
-    {value: 'useState', label: 'useState'},
-    {value: 'useReducer', label: 'useReducer'}, 
-    {value: 'useContext', label: 'useContext'}
-];
-    const handleChange = (selectedHook: {value:string; label: string} | null) => {
-        onChange(selectedHook.value);
-    }
+  const options = [
+    { value: 'TimeJump', label: 'TimeJump' },
+    { value: 'Provider/Consumer', label: 'Provider/Consumer' },
+  ];
 
+  return (
+    <Select
+      placeholder="Select Hook"
+      onChange={handleChange}
+      options={options}
+      value={options.find((option) => option.value === dropdownSelection)}
+    />
+  );
+};
 
-
-    return (
-        <Select 
-        placeholder = 'Select Hook'
-        onChange={handleChange}
-        options = {options}
-        /> 
-    )
-}
-export default DropDown;
+export default DropDown;

src/app/containers/ActionContainer.tsx

@@ -7,9 +7,11 @@ import { emptySnapshots, changeView, changeSlider } from '../slices/mainSlice';
 import { useDispatch, useSelector } from 'react-redux';
 import RouteDescription from '../components/Actions/RouteDescription';
 import DropDown from '../components/Actions/DropDown';
+import ProvConContainer from './ProvConContainer';
 import { ActionContainerProps, CurrentTab, MainState, Obj, RootState } from '../FrontendTypes';
 import { Button, Switch } from '@mui/material';
 
+
 /*
   This file renders the 'ActionContainer'. The action container is the leftmost column in the application. It includes the button that shrinks and expands the action container, a dropdown to select the active site, a clear button, the current selected Route, and a list of selectable snapshots with timestamps.
 */
@@ -25,6 +27,9 @@ const resetSlider = () => {
 };
 
 function ActionContainer(props: ActionContainerProps): JSX.Element {
+
+  const [dropdownSelection, setDropdownSelection] = useState('TimeJump');
+
   const dispatch = useDispatch();
   const { currentTab, tabs, port }: MainState = useSelector((state: RootState) => state.main);
 
@@ -224,7 +229,10 @@ function ActionContainer(props: ActionContainerProps): JSX.Element {
           </a>
           <SwitchAppDropdown />
           {/* add new component here for dropdown menu for useStae/ useReducer- ragad */}
-          <DropDown onChange={useState} />
+         <DropDown
+         dropdownSelection = {dropdownSelection}
+         setDropdownSelection={setDropdownSelection}
+         />
           <div className='action-component exclude'>
             <Button
               className='clear-button'
@@ -240,9 +248,17 @@ function ActionContainer(props: ActionContainerProps): JSX.Element {
             </Button>
           </div>
           {/* Rendering of route description components */}
-          {Object.keys(routes).map((route, i) => (
+          {/* {Object.keys(routes).map((route, i) => (
             <RouteDescription key={`route${i}`} actions={routes[route]} />
-          ))}
+          ))} */}
+          {/* <ProvConContainer/> */}
+
+         {dropdownSelection === 'Provider/Consumer' && <ProvConContainer/>}
+          {dropdownSelection === 'TimeJump' && 
+            Object.keys(routes).map((route, i) => (
+              <RouteDescription key={`route${i}`} actions={routes[route]} />
+            ))
+          }
         </div>
       ) : null}
     </div>

src/app/containers/MainContainer.tsx

@@ -5,8 +5,6 @@ import TravelContainer from './TravelContainer';
 import ButtonsContainer from './ButtonsContainer';
 import ErrorContainer from './ErrorContainer';
 import StateContainer from './StateContainer';
-import ReduceContainer from './ReduceContainer'
-import DropDown from '../components/Actions/DropDown';
 import {
   addNewSnapshots,
   initialConnect,
@@ -39,7 +37,6 @@ function MainContainer(): JSX.Element {
 
   const [actionView, setActionView] = useState(true); // We create a local state 'actionView' and set it to true
 
-  const [hook, setHook] = useState('useState');
   // this function handles Time Jump sidebar view
   const toggleActionContainer = () => {
     setActionView(!actionView); // sets actionView to the opposite boolean value
@@ -211,7 +208,6 @@ function MainContainer(): JSX.Element {
   return (
     <div className='main-container'>
       <div id='bodyContainer' className='body-container'>
-        <DropDown onChange={(value) => setHook(value)}/>
         <ActionContainer
           actionView={actionView}
           setActionView={setActionView}
@@ -233,12 +229,6 @@ function MainContainer(): JSX.Element {
               currLocation={currLocation}
               axSnapshots={axSnapshots}
             />
-            {hook === 'useReducer' && (
-          <div className="state-container-container">
-            <ReduceContainer />
-          </div>
-        )}
-            
           </div>
         ) : null}
         {/* @ts-ignore */}

src/app/containers/ProvConContainer.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+
+const ProvConContainer = (): JSX.Element  => {
+    return (
+        <div>
+            hello
+        </div>
+    )
+}
+
+export default ProvConContainer;