From 82f889b96d99d7eec3d5cfec06ae07c67d6ed9bf Mon Sep 17 00:00:00 2001
From: Gabriel Clark <>
Date: Tue, 7 Sep 2021 19:33:05 -0500
Subject: [PATCH] Number input field adds numbers to state and output text
 responds.

---
 unit-conversion/src/app/store.js              |  2 ++
 .../endingNumberOutput.js                     |  5 +++-
 .../number-input-field/numberInputField.js    | 20 +++++++++++---
 .../numberInputFieldSlice.js                  | 26 +++++++++++++++++++
 4 files changed, 49 insertions(+), 4 deletions(-)
 create mode 100644 unit-conversion/src/features/number-input-field/numberInputFieldSlice.js

diff --git a/unit-conversion/src/app/store.js b/unit-conversion/src/app/store.js
index a3949a6..026d74c 100644
--- a/unit-conversion/src/app/store.js
+++ b/unit-conversion/src/app/store.js
@@ -1,8 +1,10 @@
 import { configureStore } from '@reduxjs/toolkit';
 import unitSelectorSlice from '../features/unit-selector/unitSelectorSlice.js';
+import numberInputFieldSlice from '../features/number-input-field/numberInputFieldSlice.js';
 
 export const store = configureStore({
   reducer: {
     [unitSelectorSlice.name]: unitSelectorSlice.reducer,
+    [numberInputFieldSlice.name]: numberInputFieldSlice.reducer,
   },
 });
diff --git a/unit-conversion/src/features/ending-number-output/endingNumberOutput.js b/unit-conversion/src/features/ending-number-output/endingNumberOutput.js
index 00485b0..a9d5524 100644
--- a/unit-conversion/src/features/ending-number-output/endingNumberOutput.js
+++ b/unit-conversion/src/features/ending-number-output/endingNumberOutput.js
@@ -1,11 +1,14 @@
 import { useSelector } from 'react-redux';
 import { selectCurrentOutputUnit } from '../unit-selector/unitSelectorSlice';
+import { selectDesiredConversionNumber } from '../number-input-field/numberInputFieldSlice';
 
 export function EndingNumberOutput() {
   const currentOutputUnit = useSelector(selectCurrentOutputUnit);
+  const unconvertedNumber = useSelector(selectDesiredConversionNumber);
+  const convertedNumber = unconvertedNumber * 100;
   return (
     <div>
-      <h1>{} {currentOutputUnit}</h1>
+      <h1>{convertedNumber} {currentOutputUnit}</h1>
     </div>
   );
 }
diff --git a/unit-conversion/src/features/number-input-field/numberInputField.js b/unit-conversion/src/features/number-input-field/numberInputField.js
index e985236..134a8f7 100644
--- a/unit-conversion/src/features/number-input-field/numberInputField.js
+++ b/unit-conversion/src/features/number-input-field/numberInputField.js
@@ -1,13 +1,27 @@
-import { useSelector } from 'react-redux';
+import { useSelector, useDispatch } from 'react-redux';
 import { selectCurrentInputUnit } from '../unit-selector/unitSelectorSlice';
+import { setDesiredConversionNumber } from './numberInputFieldSlice';
 
 export function NumberInputField() {
   const currentInputUnit = useSelector(selectCurrentInputUnit);
   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 (
     <div>
-      <h1>NumberInputField</h1>
-      <input required type="text" placeholder={ placeHolderString }></input>
+      <form onSubmit={handleSubmit}>
+        <h1>Number Input Field</h1>
+        <input type="text" placeholder={ placeHolderString } onChange={handleChange}/>
+      </form>
     </div>
   );
 }
diff --git a/unit-conversion/src/features/number-input-field/numberInputFieldSlice.js b/unit-conversion/src/features/number-input-field/numberInputFieldSlice.js
new file mode 100644
index 0000000..791b5b3
--- /dev/null
+++ b/unit-conversion/src/features/number-input-field/numberInputFieldSlice.js
@@ -0,0 +1,26 @@
+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;
+}
-- 
GitLab