From 992062b07daee1bf45178421bb547cb6e10cd085 Mon Sep 17 00:00:00 2001
From: Gabriel Clark <>
Date: Tue, 7 Sep 2021 11:00:34 -0500
Subject: [PATCH] Finished unitselectorSlice and store features.

---
 unit-conversion/src/app/store.js              |  4 +-
 .../number-input-field/numberInputField.js    |  7 +---
 .../features/unit-selector/unitSelector.js    | 40 ++++++++++++++-----
 .../unit-selector/unitSelectorSlice.js        | 32 ++++++++++-----
 4 files changed, 56 insertions(+), 27 deletions(-)

diff --git a/unit-conversion/src/app/store.js b/unit-conversion/src/app/store.js
index c9650e0..a3949a6 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 3599709..7ad9b90 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 ead13b8..3c08415 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 a7d9cab..7ebb5c2 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;
 }
-- 
GitLab