Semi-Done swapper

Author: dryczek01

src/app/components/Actions/DropDown.tsx

@@ -1,18 +1,22 @@
 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);
-    }
+interface DropDownProps {
+    onChange: (selectedHook: string) => void;
+}
 
-const options = [
+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);
+    }
+
+
 
     return (
         <Select 

src/app/containers/ActionContainer.tsx

@@ -224,7 +224,7 @@ function ActionContainer(props: ActionContainerProps): JSX.Element {
           </a>
           <SwitchAppDropdown />
           {/* add new component here for dropdown menu for useStae/ useReducer- ragad */}
-         <DropDown />
+          <DropDown onChange={useState} />
           <div className='action-component exclude'>
             <Button
               className='clear-button'

src/app/containers/MainContainer.tsx

@@ -5,6 +5,8 @@ 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,
@@ -37,6 +39,7 @@ 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
@@ -208,6 +211,7 @@ 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}
@@ -229,6 +233,12 @@ function MainContainer(): JSX.Element {
               currLocation={currLocation}
               axSnapshots={axSnapshots}
             />
+            {hook === 'useReducer' && (
+          <div className="state-container-container">
+            <ReduceContainer />
+          </div>
+        )}
+            
           </div>
         ) : null}
         {/* @ts-ignore */}

src/app/containers/ReduceContainer.tsx

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