diff --git a/unit-conversion/src/app/store.js b/unit-conversion/src/app/store.js
index c9650e098d75f6d4239cd1e92a93fd5295d548c1..a3949a6e937571b4713dd6e2b58699207aeeedde 100644
--- a/unit-conversion/src/app/store.js
+++ b/unit-conversion/src/app/store.js
@@ -1,8 +1,8 @@
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,
},
});
diff --git a/unit-conversion/src/features/number-input-field/numberInputField.js b/unit-conversion/src/features/number-input-field/numberInputField.js
index 3599709b473d4d057acb3744f39613bff6c7d076..7ad9b902ff0717160754557a74b97c4c2a98efbe 100644
--- a/unit-conversion/src/features/number-input-field/numberInputField.js
+++ b/unit-conversion/src/features/number-input-field/numberInputField.js
@@ -1,13 +1,10 @@
-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>
);
diff --git a/unit-conversion/src/features/unit-selector/unitSelector.js b/unit-conversion/src/features/unit-selector/unitSelector.js
index ead13b809253d9246e9fe1701916c046c21fc41a..3c08415ef9e691f569c406a409bfc85fb3d47e24 100644
--- a/unit-conversion/src/features/unit-selector/unitSelector.js
+++ b/unit-conversion/src/features/unit-selector/unitSelector.js
@@ -1,3 +1,5 @@
+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>
- <h1>Unit Selector</h1>
- <div className="select-container">
- <select name="units">
- {unitSelectorOptions.map((option) =>
- <option value={option.value}>{option.label}</option>)}
- </select>
- </div>
+ <form onSubmit={handleSubmit}>
+ <h1>Unit Selector</h1>
+ <div className="select-container">
+ <select name="units" onChange={handleChange}>
+ {unitSelectorOptions.map((option) =>
+ <option value={option.value}>{option.label}</option>)}
+ </select>
+ </div>
+ </form>
</div>
);
}
diff --git a/unit-conversion/src/features/unit-selector/unitSelectorSlice.js b/unit-conversion/src/features/unit-selector/unitSelectorSlice.js
index a7d9cabbbf301d767b05c1b0cb28906ea34ed7fd..7ebb5c21a5656b4d606e2b16794f606450e38513 100644
--- a/unit-conversion/src/features/unit-selector/unitSelectorSlice.js
+++ b/unit-conversion/src/features/unit-selector/unitSelectorSlice.js
@@ -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;
}