added new dropdown menu

Author: ragad-mohammed

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,25 @@
+import Select from 'react-select';
+import React, { useEffect, useState } from 'react';
+
+const DropDown = (): JSX.Element => {
+    const [hook, setHook] = useState('useState');
+
+    const handleChange = (selectedHook: {hooks:string}) => {
+        setHook(selectedHook);
+    }
+
+const options = [
+    {value: 'useState', label: 'useState'},
+    {value: 'useReducer', label: 'useReducer'}, 
+    {value: 'useContext', label: 'useContext'}
+];
+
+    return (
+        <Select 
+        placeholder = 'Select Hook'
+        onChange={handleChange}
+        options = {options}
+        /> 
+    )
+}
+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,9 +2,11 @@
 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 { ActionContainerProps, CurrentTab, MainState, Obj, RootState } from '../FrontendTypes';
 import { Button, Switch } from '@mui/material';
 
@@ -221,6 +223,8 @@ function ActionContainer(props: ActionContainerProps): JSX.Element {
             {recordingActions ? <Switch defaultChecked /> : <Switch />}
           </a>
           <SwitchAppDropdown />
+          {/* add new component here for dropdown menu for useStae/ useReducer- ragad */}
+         <DropDown />
           <div className='action-component exclude'>
             <Button
               className='clear-button'