From 2f66dcb7aaadcbb59bf915ed999824890d519804 Mon Sep 17 00:00:00 2001 From: Gabriel Clark <> Date: Tue, 7 Sep 2021 20:24:40 -0500 Subject: [PATCH] Conversions now work between already defined values. --- .../endingNumberOutput.js | 37 +++++++++++++++++-- .../number-input-field/numberInputField.js | 4 +- .../numberInputFieldSlice.js | 6 +-- 3 files changed, 38 insertions(+), 9 deletions(-) diff --git a/unit-conversion/src/features/ending-number-output/endingNumberOutput.js b/unit-conversion/src/features/ending-number-output/endingNumberOutput.js index a9d5524..3d3af89 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 134a8f7..c34810d 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 791b5b3..2d301f6 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; } -- GitLab