Fixed commit blocking error. Added redux features to unit selector.

unit-conversion/package.json

@@ -5,7 +5,7 @@
   "private": true,
   "license": "UNLICENSED",
   "scripts": {
-    "lint:css": "stylelint '**/*.css' '**/*.module.css' '!coverage/**'",
+    "lint:css": "stylelint \"**/*.css\" \"**/*.module.css\" \"!coverage/**\"",
     "lint:js": "eslint --max-warnings 0 ./src",
     "lint": "run-s --continue-on-error lint:**",
     "test-once": "react-scripts test --watchAll=false --coverage",

unit-conversion/src/app.js

@@ -5,10 +5,10 @@ import { UnitSelector } from './features/unit-selector/unitSelector.js';
 export function App() {
   return (
     <>
-      <UnitSelector />
+      <UnitSelector id="inputUnitSelector"/>
       <NumberInputField />
       <h1>Ouput Section</h1>
-      <UnitSelector />
+      <UnitSelector id="outputUnitSelector"/>
       <EndingNumberOutput />
     </>
   );

unit-conversion/src/features/number-input-field/numberInputField.js

+import { UnitSelector } from '../unit-selector/unitSelector';
+
 export function NumberInputField() {
+  const unitSelectorName = UnitSelector.name;
+  const inputUnits = document.getElementById('inputUnitSelector').UnitSelector;
+  const placeHolderString = `Enter # of ${inputUnits}`;
   return (
     <div>
       <h1>NumberInputField</h1>
-      <input required type="text" placeholder="Enter # of {unitSelectorUnit}"></input>
+      <p>{ unitSelectorName }</p>
+      <input required type="text" placeholder={ placeHolderString }></input>
     </div>
   );
 }

unit-conversion/src/features/unit-selector/unitSelector.js

-export function UnitSelector() {
+export function UnitSelector(props) {
+  const unitSelectorOptions = [
+    {
+      label: 'Km',
+      value: 'km',
+    },
+    {
+      label: 'M',
+      value: 'm',
+    },
+    {
+      label: 'Cm',
+      value: 'cm',
+    },
+    {
+      label: 'Cm',
+      value: 'cm',
+    },
+    {
+      label: 'Ft',
+      value: 'ft',
+    },
+    {
+      label: 'In',
+      value: 'in',
+    },
+  ];
+
   return (
     <div>
       <h1>Unit Selector</h1>
+      <div className="select-container">
         <select name="units">
-          <option value="km">km</option>
-          <option value="m">m</option>
-          <option value="ft">ft</option>
-          <option value="in">in</option>
+          {unitSelectorOptions.map((option) =>
+            <option value={option.value}>{option.label}</option>)}
         </select>
       </div>
+    </div>
   );
 }

unit-conversion/src/features/unit-selector/unitSelectorSlice.js

+import { createSlice } from '@reduxjs/toolkit';
+
+const unitSelectorSlice = createSlice({
+  name: 'unitSelector',
+  initialState: {
+    selectedInputUnit: '',
+  },
+  reducers: {
+    setCurrentInputUnit: (state, action) => {
+      const {
+        value,
+      } = action.payload;
+      state.value = value;
+    },
+  },
+});
+export default unitSelectorSlice;
+
+export const {
+  setCurrentInputUnit,
+} = unitSelectorSlice.actions;
+
+export function selectCurrentInputUnit(state) {
+  return state.state.value;
+}