From 274835355c86d9981dc288aeba6c81c135b05367 Mon Sep 17 00:00:00 2001
From: Gabriel Clark <>
Date: Sat, 4 Sep 2021 12:58:56 -0500
Subject: [PATCH] Fixed commit blocking error. Added redux features to unit
selector.
---
unit-conversion/package.json | 2 +-
unit-conversion/src/app.js | 4 +-
.../endingNumberOutput.js | 2 +-
.../number-input-field/numberInputField.js | 8 +++-
.../features/unit-selector/unitSelector.js | 41 +++++++++++++++----
.../unit-selector/unitSelectorSlice.js | 25 +++++++++++
6 files changed, 70 insertions(+), 12 deletions(-)
create mode 100644 unit-conversion/src/features/unit-selector/unitSelectorSlice.js
diff --git a/unit-conversion/package.json b/unit-conversion/package.json
index 3fcb54a..2bdc31d 100644
--- a/unit-conversion/package.json
+++ b/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",
diff --git a/unit-conversion/src/app.js b/unit-conversion/src/app.js
index d547b71..c2a9529 100644
--- a/unit-conversion/src/app.js
+++ b/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 />
</>
);
diff --git a/unit-conversion/src/features/ending-number-output/endingNumberOutput.js b/unit-conversion/src/features/ending-number-output/endingNumberOutput.js
index d3af421..de16f06 100644
--- a/unit-conversion/src/features/ending-number-output/endingNumberOutput.js
+++ b/unit-conversion/src/features/ending-number-output/endingNumberOutput.js
@@ -4,4 +4,4 @@ export function EndingNumberOutput() {
<h1>Number Output Text</h1>
</div>
);
-}
\ No newline at end of file
+}
diff --git a/unit-conversion/src/features/number-input-field/numberInputField.js b/unit-conversion/src/features/number-input-field/numberInputField.js
index a72db64..3599709 100644
--- a/unit-conversion/src/features/number-input-field/numberInputField.js
+++ b/unit-conversion/src/features/number-input-field/numberInputField.js
@@ -1,8 +1,14 @@
+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>
);
}
diff --git a/unit-conversion/src/features/unit-selector/unitSelector.js b/unit-conversion/src/features/unit-selector/unitSelector.js
index 087deda..ead13b8 100644
--- a/unit-conversion/src/features/unit-selector/unitSelector.js
+++ b/unit-conversion/src/features/unit-selector/unitSelector.js
@@ -1,13 +1,40 @@
-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>
- <select name="units">
- <option value="km">km</option>
- <option value="m">m</option>
- <option value="ft">ft</option>
- <option value="in">in</option>
- </select>
+ <div className="select-container">
+ <select name="units">
+ {unitSelectorOptions.map((option) =>
+ <option value={option.value}>{option.label}</option>)}
+ </select>
+ </div>
</div>
);
}
diff --git a/unit-conversion/src/features/unit-selector/unitSelectorSlice.js b/unit-conversion/src/features/unit-selector/unitSelectorSlice.js
new file mode 100644
index 0000000..a7d9cab
--- /dev/null
+++ b/unit-conversion/src/features/unit-selector/unitSelectorSlice.js
@@ -0,0 +1,25 @@
+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;
+}
--
GitLab