diff --git a/unit-conversion/src/app.js b/unit-conversion/src/app.js index c3df7b060a458d49b1034d769a94934a8e49505d..d84b1fcee89a9e5e0b508b76525a165e5494cb7a 100644 --- a/unit-conversion/src/app.js +++ b/unit-conversion/src/app.js @@ -8,10 +8,9 @@ export function App() { <> <Route exact path={'/'}> </Route> - <UnitSelector id="inputUnitSelector"/> + <UnitSelector type="Input"/> <NumberInputField /> - <h1>Ouput Section</h1> - <UnitSelector id="outputUnitSelector"/> + <UnitSelector type="Output"/> <EndingNumberOutput /> </> ); diff --git a/unit-conversion/src/features/ending-number-output/endingNumberOutput.js b/unit-conversion/src/features/ending-number-output/endingNumberOutput.js index de16f06296e501c69ab6fd932680c89f5d6708a3..00485b086caee5afe9ba0bd0a922be6a76856194 100644 --- a/unit-conversion/src/features/ending-number-output/endingNumberOutput.js +++ b/unit-conversion/src/features/ending-number-output/endingNumberOutput.js @@ -1,7 +1,11 @@ +import { useSelector } from 'react-redux'; +import { selectCurrentOutputUnit } from '../unit-selector/unitSelectorSlice'; + export function EndingNumberOutput() { + const currentOutputUnit = useSelector(selectCurrentOutputUnit); return ( <div> - <h1>Number Output Text</h1> + <h1>{} {currentOutputUnit}</h1> </div> ); } diff --git a/unit-conversion/src/features/unit-selector/unitSelector.js b/unit-conversion/src/features/unit-selector/unitSelector.js index 3776e0e17a4f7f09864f298f3af2a58d56fc13e7..01f663857cab57fdc99f3523fa537c3fd3430a1b 100644 --- a/unit-conversion/src/features/unit-selector/unitSelector.js +++ b/unit-conversion/src/features/unit-selector/unitSelector.js @@ -2,9 +2,16 @@ import { store } from '../../app/store'; import { useDispatch } from 'react-redux'; import { setCurrentInputUnit, + setCurrentOutputUnit, } from './unitSelectorSlice'; +import PropTypes from 'prop-types'; export function UnitSelector(props) { + // type will either be 'Input' or 'Output' + UnitSelector.propTypes = { + type: PropTypes.string.isRequired, + }; + const unitSelectorOptions = [ { label: 'Km', @@ -33,9 +40,15 @@ export function UnitSelector(props) { const unsubscribe = store.subscribe(() => console.log('State after dispatch: ', store.getState()), ); - const currentInputUnit = e.target.value; - console.log(currentInputUnit); - disbatch(setCurrentInputUnit(currentInputUnit)); + const currentUnit = e.target.value; + console.log(currentUnit); + + if (props.type === 'Input'){ + disbatch(setCurrentInputUnit(currentUnit)); + } + if (props.type === 'Output'){ + disbatch(setCurrentOutputUnit(currentUnit)); + } unsubscribe(); } @@ -46,7 +59,7 @@ export function UnitSelector(props) { return ( <div> <form onSubmit={handleSubmit}> - <h1>Unit Selector</h1> + <h1>{props.type} Unit Selector</h1> <div className="select-container"> <select name="units" onChange={handleChange}> {unitSelectorOptions.map((option) => diff --git a/unit-conversion/src/features/unit-selector/unitSelectorSlice.js b/unit-conversion/src/features/unit-selector/unitSelectorSlice.js index 59a638d5eb028d39113d6e6ddaead89d12f08664..288651358d799ddaf8831ebbad1302320c73d885 100644 --- a/unit-conversion/src/features/unit-selector/unitSelectorSlice.js +++ b/unit-conversion/src/features/unit-selector/unitSelectorSlice.js @@ -3,8 +3,8 @@ import { createSlice } from '@reduxjs/toolkit'; const unitSelectorSlice = createSlice({ name: 'unitSelector', initialState: { - currentInputUnit: 'in', - currentOutputUnit: 'in', + currentInputUnit: 'km', + currentOutputUnit: 'km', }, reducers: { // The action payload should have the unit to switch to with the in or out @@ -34,3 +34,7 @@ export const { export function selectCurrentInputUnit(state) { return state.unitSelector.currentInputUnit; } + +export function selectCurrentOutputUnit(state) { + return state.unitSelector.currentOutputUnit; +}