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

Finished unitselectorSlice and store features.

parent aa19266e
Branches
No related tags found
No related merge requests found
import { configureStore } from '@reduxjs/toolkit';
import counterSlice from '../features/counter/counterSlice.js';
import unitSelectorSlice from '../features/unit-selector/unitSelectorSlice.js';
export const store = configureStore({
reducer: {
[counterSlice.name]: counterSlice.reducer,
[unitSelectorSlice.name]: unitSelectorSlice.reducer,
},
});
import { UnitSelector } from '../unit-selector/unitSelector';
import { store } from '../../app/store';
export function NumberInputField() {
const unitSelectorName = UnitSelector.name;
const inputUnits = document.getElementById('inputUnitSelector').UnitSelector;
const placeHolderString = `Enter # of ${inputUnits}`;
const placeHolderString = `Enter # of "${store.getState().unitSelector.currentInputUnit}"`;
return (
<div>
<h1>NumberInputField</h1>
<p>{ unitSelectorName }</p>
<input required type="text" placeholder={ placeHolderString }></input>
</div>
);
......
import { store } from '../../app/store';
export function UnitSelector(props) {
const unitSelectorOptions = [
{
......@@ -12,10 +14,6 @@ export function UnitSelector(props) {
label: 'Cm',
value: 'cm',
},
{
label: 'Cm',
value: 'cm',
},
{
label: 'Ft',
value: 'ft',
......@@ -26,15 +24,35 @@ export function UnitSelector(props) {
},
];
function handleChange(e) {
const unsubscribe = store.subscribe(() =>
console.log('State after dispatch: ', store.getState()),
);
const currentInputUnit = e.target.value;
console.log(currentInputUnit);
store.dispatch({
type: 'setCurrentInputUnit',
payload: currentInputUnit,
});
unsubscribe();
}
function handleSubmit(e) {
e.preventDefault();
}
return (
<div>
<form onSubmit={handleSubmit}>
<h1>Unit Selector</h1>
<div className="select-container">
<select name="units">
<select name="units" onChange={handleChange}>
{unitSelectorOptions.map((option) =>
<option value={option.value}>{option.label}</option>)}
</select>
</div>
</form>
</div>
);
}
......@@ -3,23 +3,37 @@ import { createSlice } from '@reduxjs/toolkit';
const unitSelectorSlice = createSlice({
name: 'unitSelector',
initialState: {
selectedInputUnit: '',
currentInputUnit: 'in',
currentOutputUnit: 'in',
},
reducers: {
setCurrentInputUnit: (state, action) => {
const {
value,
} = action.payload;
state.value = value;
// The action payload should have the unit to switch to with the in or out
unitSelectorReducer: (state, action) => {
console.log(state, action);
const unitToSwitchTo = action.payload;
switch (action.type){
case 'setCurrentInputUnit':
return {
...state,
currentInputUnit: unitToSwitchTo,
};
case 'setCurrentOutputUnit':
return {
...state,
currentOutputUnit: unitToSwitchTo,
};
default:
return state;
}
},
},
});
export default unitSelectorSlice;
export const {
setCurrentInputUnit,
unitSelectorReducer,
} = unitSelectorSlice.actions;
export function selectCurrentInputUnit(state) {
return state.state.value;
export function getCurrentInputUnit(state) {
return state.unitSelector.currentInputUnit;
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment