Merge branch 'dev' into click-tab/ragad

Author: ragad-mohammed

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';
 
-const DropDown = (): JSX.Element => {
-    // const [hook, setHook] = useState('useState');
+const DropDown = ({ dropdownSelection, setDropdownSelection }: { dropdownSelection: string; setDropdownSelection: (value: string) => void }): JSX.Element => {
+  const handleChange = (selected: { value: string; label: string }) => {
+    setDropdownSelection(selected.value); 
+  };
 
-    // const handleChange = (options: {value:string}) => {
-    //     setHook(options.value);
-    // }
+  const options = [
+    { value: 'TimeJump', label: 'TimeJump' },
+    { value: 'Provider/Consumer', label: 'Provider/Consumer' },
+  ];
 
-const options = [
-    {value: 'useState', label: 'useState'},
-    {value: 'useReducer', label: 'useReducer'}, 
-    {value: 'useContext', label: 'useContext'}
-];
+  return (
+    <Select
+      placeholder="Select Hook"
+      onChange={handleChange}
+      options={options}
+      value={options.find((option) => option.value === dropdownSelection)}
+    />
+  );
+};
 
-    return (
-        <div>
-             <Select 
-        placeholder = 'Select Hook'
-        // onChange={handleChange}
-        options = {options}
-        /> 
-        {/* <p>Selected Hook: {hook}</p> */}
-        </div>
-       
-    )
-}
-export default DropDown;
+export default DropDown;

src/app/containers/ActionContainer.tsx

@@ -7,6 +7,7 @@ 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';
 import ClickableLink from '../components/Actions/ClickableLink';
@@ -25,6 +26,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);
 
@@ -225,7 +229,10 @@ function ActionContainer(props: ActionContainerProps): JSX.Element {
           <SwitchAppDropdown />
           {/* add new component here for dropdown menu for useStae/ useReducer- ragad */}
 
-         <DropDown />
+         <DropDown
+         dropdownSelection = {dropdownSelection}
+         setDropdownSelection={setDropdownSelection}
+         />
           <ClickableLink /> 
           <div className='action-component exclude'>
             <Button
@@ -241,10 +248,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;