Merge pull request #4 from oslabs-beta/daniel

DropDown & Conditional Rendering

Author: dryczek01

src/app/components/Actions/DropDown.tsx

@@ -1,25 +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 = (selectedHook: {hooks:string}) => {
-        setHook(selectedHook);
-    }
+  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 (
-        <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 />
+         <DropDown
+         dropdownSelection = {dropdownSelection}
+         setDropdownSelection={setDropdownSelection}
+         />
           <div className='action-component exclude'>
             <Button
               className='clear-button'
@@ -239,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;