Skip to content
Snippets Groups Projects
Commit 82f889b9 authored by Gabriel Clark's avatar Gabriel Clark
Browse files

Number input field adds numbers to state and output text responds.

parent f7a7cb8f
Branches
No related tags found
No related merge requests found
import { configureStore } from '@reduxjs/toolkit'; import { configureStore } from '@reduxjs/toolkit';
import unitSelectorSlice from '../features/unit-selector/unitSelectorSlice.js'; import unitSelectorSlice from '../features/unit-selector/unitSelectorSlice.js';
import numberInputFieldSlice from '../features/number-input-field/numberInputFieldSlice.js';
export const store = configureStore({ export const store = configureStore({
reducer: { reducer: {
[unitSelectorSlice.name]: unitSelectorSlice.reducer, [unitSelectorSlice.name]: unitSelectorSlice.reducer,
[numberInputFieldSlice.name]: numberInputFieldSlice.reducer,
}, },
}); });
import { useSelector } from 'react-redux'; import { useSelector } from 'react-redux';
import { selectCurrentOutputUnit } from '../unit-selector/unitSelectorSlice'; import { selectCurrentOutputUnit } from '../unit-selector/unitSelectorSlice';
import { selectDesiredConversionNumber } from '../number-input-field/numberInputFieldSlice';
export function EndingNumberOutput() { export function EndingNumberOutput() {
const currentOutputUnit = useSelector(selectCurrentOutputUnit); const currentOutputUnit = useSelector(selectCurrentOutputUnit);
const unconvertedNumber = useSelector(selectDesiredConversionNumber);
const convertedNumber = unconvertedNumber * 100;
return ( return (
<div> <div>
<h1>{} {currentOutputUnit}</h1> <h1>{convertedNumber} {currentOutputUnit}</h1>
</div> </div>
); );
} }
import { useSelector } from 'react-redux'; import { useSelector, useDispatch } from 'react-redux';
import { selectCurrentInputUnit } from '../unit-selector/unitSelectorSlice'; import { selectCurrentInputUnit } from '../unit-selector/unitSelectorSlice';
import { setDesiredConversionNumber } from './numberInputFieldSlice';
export function NumberInputField() { export function NumberInputField() {
const currentInputUnit = useSelector(selectCurrentInputUnit); const currentInputUnit = useSelector(selectCurrentInputUnit);
const placeHolderString = `Enter # of "${currentInputUnit}"`; 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 ( return (
<div> <div>
<form onSubmit={handleSubmit}>
<h1>Number Input Field</h1> <h1>Number Input Field</h1>
<input required type="text" placeholder={ placeHolderString }></input> <input type="text" placeholder={ placeHolderString } onChange={handleChange}/>
</form>
</div> </div>
); );
} }
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;
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment