diff --git a/unit-conversion/src/app/store.js b/unit-conversion/src/app/store.js index a3949a6e937571b4713dd6e2b58699207aeeedde..026d74c0f1907a60dc68aff2b65b054996bdef6b 100644 --- a/unit-conversion/src/app/store.js +++ b/unit-conversion/src/app/store.js @@ -1,8 +1,10 @@ import { configureStore } from '@reduxjs/toolkit'; import unitSelectorSlice from '../features/unit-selector/unitSelectorSlice.js'; +import numberInputFieldSlice from '../features/number-input-field/numberInputFieldSlice.js'; export const store = configureStore({ reducer: { [unitSelectorSlice.name]: unitSelectorSlice.reducer, + [numberInputFieldSlice.name]: numberInputFieldSlice.reducer, }, }); diff --git a/unit-conversion/src/features/ending-number-output/endingNumberOutput.js b/unit-conversion/src/features/ending-number-output/endingNumberOutput.js index 00485b086caee5afe9ba0bd0a922be6a76856194..a9d55240d257620ccdb945aa6c0945634f045894 100644 --- a/unit-conversion/src/features/ending-number-output/endingNumberOutput.js +++ b/unit-conversion/src/features/ending-number-output/endingNumberOutput.js @@ -1,11 +1,14 @@ import { useSelector } from 'react-redux'; import { selectCurrentOutputUnit } from '../unit-selector/unitSelectorSlice'; +import { selectDesiredConversionNumber } from '../number-input-field/numberInputFieldSlice'; export function EndingNumberOutput() { const currentOutputUnit = useSelector(selectCurrentOutputUnit); + const unconvertedNumber = useSelector(selectDesiredConversionNumber); + const convertedNumber = unconvertedNumber * 100; return ( <div> - <h1>{} {currentOutputUnit}</h1> + <h1>{convertedNumber} {currentOutputUnit}</h1> </div> ); } diff --git a/unit-conversion/src/features/number-input-field/numberInputField.js b/unit-conversion/src/features/number-input-field/numberInputField.js index e9852366e81ad7df7394a503b5a1f115722c1551..134a8f75419840bc7d2124f399d56eeb6295c68b 100644 --- a/unit-conversion/src/features/number-input-field/numberInputField.js +++ b/unit-conversion/src/features/number-input-field/numberInputField.js @@ -1,13 +1,27 @@ -import { useSelector } from 'react-redux'; +import { useSelector, useDispatch } from 'react-redux'; import { selectCurrentInputUnit } from '../unit-selector/unitSelectorSlice'; +import { setDesiredConversionNumber } from './numberInputFieldSlice'; export function NumberInputField() { const currentInputUnit = useSelector(selectCurrentInputUnit); const placeHolderString = `Enter # of "${currentInputUnit}"`; + const dispatch = useDispatch(); + + function handleChange(e) { + const currentNumber = e.target.value; + dispatch(setDesiredConversionNumber(currentNumber)); + } + + function handleSubmit(e) { + e.preventDefault(); + } + return ( <div> - <h1>NumberInputField</h1> - <input required type="text" placeholder={ placeHolderString }></input> + <form onSubmit={handleSubmit}> + <h1>Number Input Field</h1> + <input type="text" placeholder={ placeHolderString } onChange={handleChange}/> + </form> </div> ); } diff --git a/unit-conversion/src/features/number-input-field/numberInputFieldSlice.js b/unit-conversion/src/features/number-input-field/numberInputFieldSlice.js new file mode 100644 index 0000000000000000000000000000000000000000..791b5b3e25cc3bc9d413cc696474774ad2a9f90e --- /dev/null +++ b/unit-conversion/src/features/number-input-field/numberInputFieldSlice.js @@ -0,0 +1,26 @@ +import { createSlice } from '@reduxjs/toolkit'; + +const numberInputFieldSlice = createSlice({ + name: 'numberInputField', + initialState: { + numberToConvert: 0, + }, + reducers: { + setDesiredConversionNumber: (state, action) => { + const numToConvert = action.payload; + return { + ...state, + numberToConvert: numToConvert, + }; + }, + }, +}); +export default numberInputFieldSlice; + +export const { + setDesiredConversionNumber, +} = numberInputFieldSlice.actions; + +export function selectDesiredConversionNumber(state) { + return state.numberInputField.numberToConvert; +}