Merge branch 'dev' into feature/garrett

Author: garrettlchow

src/app/components/Actions/Action.tsx

@@ -9,7 +9,7 @@ import { ActionProps, OptionsCursorTrueWithMargin } from '../../FrontendTypes';
 import { useDispatch } from 'react-redux';
 
 /*
-  This render's the individual snapshot components on the left side column
+  This renders the individual snapshot components on the left side column
 */
 
 /**

src/app/components/Actions/DropDown.tsx

@@ -0,0 +1,24 @@
+import Select from 'react-select';
+import React from 'react';
+
+const DropDown = ({ dropdownSelection, setDropdownSelection }: { dropdownSelection: string; setDropdownSelection: (value: string) => void }): JSX.Element => {
+  const handleChange = (selected: { value: string; label: string }) => {
+    setDropdownSelection(selected.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)}
+    />
+  );
+};
+
+export default DropDown;

src/app/components/Actions/SwitchApp.tsx

@@ -28,6 +28,7 @@ const SwitchAppDropdown = (): JSX.Element => {
     value: currentTab,
     label: tabs[currentTab].title,
   };
+  console.log('tabs', tabs)
 
   const customStyles: {} = {
     menu: (provided, state): {} => {
@@ -39,6 +40,11 @@ const SwitchAppDropdown = (): JSX.Element => {
     },
   };
 
+  const customComponents = {
+    DropdownIndicator: () => null,
+    IndicatorSeparator: () => null, // Removes the separator line
+  };
+
   return (
     <Select
       className='tab-select-container'
@@ -49,6 +55,9 @@ const SwitchAppDropdown = (): JSX.Element => {
         dispatch(setTab(parseInt(e.value, 10)));
       }}
       options={tabsArray}
+      isSearchable={false} // Disable search functionality
+      menuIsOpen={false} // Prevent dropdown from opening
+      components={customComponents}
     />
   );
 };

src/app/containers/ActionContainer.tsx

@@ -2,12 +2,16 @@
 import React, { useEffect, useState } from 'react';
 import Action from '../components/Actions/Action';
 import SwitchAppDropdown from '../components/Actions/SwitchApp';
+// Import new dropdown
 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.
 */
@@ -23,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);
 
@@ -221,6 +228,11 @@ function ActionContainer(props: ActionContainerProps): JSX.Element {
             {recordingActions ? <Switch defaultChecked /> : <Switch />}
           </a>
           <SwitchAppDropdown />
+          {/* add new component here for dropdown menu for useStae/ useReducer- ragad */}
+         <DropDown
+         dropdownSelection = {dropdownSelection}
+         setDropdownSelection={setDropdownSelection}
+         />
           <div className='action-component exclude'>
             <Button
               className='clear-button'
@@ -235,10 +247,12 @@ function ActionContainer(props: ActionContainerProps): JSX.Element {
               Clear
             </Button>
           </div>
-          {/* Rendering of route description components */}
-          {Object.keys(routes).map((route, i) => (
-            <RouteDescription key={`route${i}`} actions={routes[route]} />
-          ))}
+         {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/ProvConContainer.tsx

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