diff --git a/unit-conversion/src/features/ending-number-output/endingNumberOutput.js b/unit-conversion/src/features/ending-number-output/endingNumberOutput.js index a9d55240d257620ccdb945aa6c0945634f045894..3d3af89eee4f1220d871213d1e9b1f206fb1c797 100644 --- a/unit-conversion/src/features/ending-number-output/endingNumberOutput.js +++ b/unit-conversion/src/features/ending-number-output/endingNumberOutput.js @@ -1,11 +1,40 @@ +/* eslint-disable no-magic-numbers */ import { useSelector } from 'react-redux'; -import { selectCurrentOutputUnit } from '../unit-selector/unitSelectorSlice'; -import { selectDesiredConversionNumber } from '../number-input-field/numberInputFieldSlice'; +import { selectCurrentOutputUnit, selectCurrentInputUnit} from '../unit-selector/unitSelectorSlice'; +import { selectNumberOfUnits } from '../number-input-field/numberInputFieldSlice'; export function EndingNumberOutput() { + const conversionTable = { + // To use these conversion multiply your specified unit with + // its number to get meters. + unitsToMeters: { + km: 1000, + m: 1.0, + cm: 1 / 100, + ft: 1 / 3.281, + in: 1 / 39.3701, + }, + // Multiply a number of meters by one of these conversions to + // get that number of units. + metersToUnits: { + km: 1 / 1000, + m: 1.0, + cm: 100, + ft: 3.281, + in: 39.3701, + }, + }; + + const currentInputUnit = useSelector(selectCurrentInputUnit); const currentOutputUnit = useSelector(selectCurrentOutputUnit); - const unconvertedNumber = useSelector(selectDesiredConversionNumber); - const convertedNumber = unconvertedNumber * 100; + const numberOfUnits = parseFloat(useSelector(selectNumberOfUnits)); + const numberOfMeters = numberOfUnits * conversionTable.unitsToMeters[currentInputUnit]; + let convertedNumber = numberOfMeters * conversionTable.metersToUnits[currentOutputUnit]; + + if (isNaN(convertedNumber)) { + convertedNumber = 'Please enter number to convert to '; + } + return ( <div> <h1>{convertedNumber} {currentOutputUnit}</h1> diff --git a/unit-conversion/src/features/number-input-field/numberInputField.js b/unit-conversion/src/features/number-input-field/numberInputField.js index 134a8f75419840bc7d2124f399d56eeb6295c68b..c34810d3fffd36adb08821a2b9db17e79f479a53 100644 --- a/unit-conversion/src/features/number-input-field/numberInputField.js +++ b/unit-conversion/src/features/number-input-field/numberInputField.js @@ -1,6 +1,6 @@ import { useSelector, useDispatch } from 'react-redux'; import { selectCurrentInputUnit } from '../unit-selector/unitSelectorSlice'; -import { setDesiredConversionNumber } from './numberInputFieldSlice'; +import { setNumberOfUnits } from './numberInputFieldSlice'; export function NumberInputField() { const currentInputUnit = useSelector(selectCurrentInputUnit); @@ -9,7 +9,7 @@ export function NumberInputField() { function handleChange(e) { const currentNumber = e.target.value; - dispatch(setDesiredConversionNumber(currentNumber)); + dispatch(setNumberOfUnits(currentNumber)); } function handleSubmit(e) { diff --git a/unit-conversion/src/features/number-input-field/numberInputFieldSlice.js b/unit-conversion/src/features/number-input-field/numberInputFieldSlice.js index 791b5b3e25cc3bc9d413cc696474774ad2a9f90e..2d301f620f302debb52d4cad03e92cf0dbae3936 100644 --- a/unit-conversion/src/features/number-input-field/numberInputFieldSlice.js +++ b/unit-conversion/src/features/number-input-field/numberInputFieldSlice.js @@ -6,7 +6,7 @@ const numberInputFieldSlice = createSlice({ numberToConvert: 0, }, reducers: { - setDesiredConversionNumber: (state, action) => { + setNumberOfUnits: (state, action) => { const numToConvert = action.payload; return { ...state, @@ -18,9 +18,9 @@ const numberInputFieldSlice = createSlice({ export default numberInputFieldSlice; export const { - setDesiredConversionNumber, + setNumberOfUnits, } = numberInputFieldSlice.actions; -export function selectDesiredConversionNumber(state) { +export function selectNumberOfUnits(state) { return state.numberInputField.numberToConvert; }