From f7a7cb8f24ecb59fe7fcebe92dcfe0f3d80c63c2 Mon Sep 17 00:00:00 2001
From: Gabriel Clark <>
Date: Tue, 7 Sep 2021 17:13:36 -0500
Subject: [PATCH] Seperated input and output unit selectors by type prop.

---
 unit-conversion/src/app.js                    |  5 ++---
 .../endingNumberOutput.js                     |  6 +++++-
 .../features/unit-selector/unitSelector.js    | 21 +++++++++++++++----
 .../unit-selector/unitSelectorSlice.js        |  8 +++++--
 4 files changed, 30 insertions(+), 10 deletions(-)

diff --git a/unit-conversion/src/app.js b/unit-conversion/src/app.js
index c3df7b0..d84b1fc 100644
--- a/unit-conversion/src/app.js
+++ b/unit-conversion/src/app.js
@@ -8,10 +8,9 @@ export function App() {
     <>
       <Route exact path={'/'}>
       </Route>
-      <UnitSelector id="inputUnitSelector"/>
+      <UnitSelector type="Input"/>
       <NumberInputField />
-      <h1>Ouput Section</h1>
-      <UnitSelector id="outputUnitSelector"/>
+      <UnitSelector type="Output"/>
       <EndingNumberOutput />
     </>
   );
diff --git a/unit-conversion/src/features/ending-number-output/endingNumberOutput.js b/unit-conversion/src/features/ending-number-output/endingNumberOutput.js
index de16f06..00485b0 100644
--- a/unit-conversion/src/features/ending-number-output/endingNumberOutput.js
+++ b/unit-conversion/src/features/ending-number-output/endingNumberOutput.js
@@ -1,7 +1,11 @@
+import { useSelector } from 'react-redux';
+import { selectCurrentOutputUnit } from '../unit-selector/unitSelectorSlice';
+
 export function EndingNumberOutput() {
+  const currentOutputUnit = useSelector(selectCurrentOutputUnit);
   return (
     <div>
-      <h1>Number Output Text</h1>
+      <h1>{} {currentOutputUnit}</h1>
     </div>
   );
 }
diff --git a/unit-conversion/src/features/unit-selector/unitSelector.js b/unit-conversion/src/features/unit-selector/unitSelector.js
index 3776e0e..01f6638 100644
--- a/unit-conversion/src/features/unit-selector/unitSelector.js
+++ b/unit-conversion/src/features/unit-selector/unitSelector.js
@@ -2,9 +2,16 @@ import { store } from '../../app/store';
 import { useDispatch } from 'react-redux';
 import {
   setCurrentInputUnit,
+  setCurrentOutputUnit,
 } from './unitSelectorSlice';
+import PropTypes from 'prop-types';
 
 export function UnitSelector(props) {
+  // type will either be 'Input' or 'Output'
+  UnitSelector.propTypes = {
+    type: PropTypes.string.isRequired,
+  };
+
   const unitSelectorOptions = [
     {
       label: 'Km',
@@ -33,9 +40,15 @@ export function UnitSelector(props) {
     const unsubscribe = store.subscribe(() =>
       console.log('State after dispatch: ', store.getState()),
     );
-    const currentInputUnit = e.target.value;
-    console.log(currentInputUnit);
-    disbatch(setCurrentInputUnit(currentInputUnit));
+    const currentUnit = e.target.value;
+    console.log(currentUnit);
+
+    if (props.type === 'Input'){
+      disbatch(setCurrentInputUnit(currentUnit));
+    }
+    if (props.type === 'Output'){
+      disbatch(setCurrentOutputUnit(currentUnit));
+    }
     unsubscribe();
   }
 
@@ -46,7 +59,7 @@ export function UnitSelector(props) {
   return (
     <div>
       <form onSubmit={handleSubmit}>
-        <h1>Unit Selector</h1>
+        <h1>{props.type} Unit Selector</h1>
         <div className="select-container">
           <select name="units" onChange={handleChange}>
             {unitSelectorOptions.map((option) =>
diff --git a/unit-conversion/src/features/unit-selector/unitSelectorSlice.js b/unit-conversion/src/features/unit-selector/unitSelectorSlice.js
index 59a638d..2886513 100644
--- a/unit-conversion/src/features/unit-selector/unitSelectorSlice.js
+++ b/unit-conversion/src/features/unit-selector/unitSelectorSlice.js
@@ -3,8 +3,8 @@ import { createSlice } from '@reduxjs/toolkit';
 const unitSelectorSlice = createSlice({
   name: 'unitSelector',
   initialState: {
-    currentInputUnit: 'in',
-    currentOutputUnit: 'in',
+    currentInputUnit: 'km',
+    currentOutputUnit: 'km',
   },
   reducers: {
     // The action payload should have the unit to switch to with the in or out
@@ -34,3 +34,7 @@ export const {
 export function selectCurrentInputUnit(state) {
   return state.unitSelector.currentInputUnit;
 }
+
+export function selectCurrentOutputUnit(state) {
+  return state.unitSelector.currentOutputUnit;
+}
-- 
GitLab