Added form validation, UI improvements (tooltip and current space) + refactoring

.eslintcache

@@ -1 +1 @@
-[{"/Users/user/repos/sort-measurer/src/index.js":"1","/Users/user/repos/sort-measurer/src/App.js":"2","/Users/user/repos/sort-measurer/src/reportWebVitals.js":"3","/Users/user/repos/sort-measurer/src/components/Workspace.js":"4","/Users/user/repos/sort-measurer/src/components/Form.js":"5"},{"size":500,"mtime":1612120197176,"results":"6","hashOfConfig":"7"},{"size":287,"mtime":1612381995190,"results":"8","hashOfConfig":"7"},{"size":362,"mtime":1611856800076,"results":"9","hashOfConfig":"7"},{"size":532,"mtime":1612381918124,"results":"10","hashOfConfig":"7"},{"size":1524,"mtime":1612384415506,"results":"11","hashOfConfig":"7"},{"filePath":"12","messages":"13","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"ff9ndh",{"filePath":"14","messages":"15","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"16","messages":"17","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"18"},{"filePath":"19","messages":"20","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"21","messages":"22","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/Users/user/repos/sort-measurer/src/index.js",[],"/Users/user/repos/sort-measurer/src/App.js",[],"/Users/user/repos/sort-measurer/src/reportWebVitals.js",[],["23","24"],"/Users/user/repos/sort-measurer/src/components/Workspace.js",[],"/Users/user/repos/sort-measurer/src/components/Form.js",[],{"ruleId":"25","replacedBy":"26"},{"ruleId":"27","replacedBy":"28"},"no-native-reassign",["29"],"no-negated-in-lhs",["30"],"no-global-assign","no-unsafe-negation"]
+[{"/Users/user/repos/sort-measurer/src/index.js":"1","/Users/user/repos/sort-measurer/src/App.js":"2","/Users/user/repos/sort-measurer/src/reportWebVitals.js":"3","/Users/user/repos/sort-measurer/src/components/Workspace.js":"4","/Users/user/repos/sort-measurer/src/components/Form.js":"5","/Users/user/repos/sort-measurer/src/helpers/RandomColor.js":"6"},{"size":500,"mtime":1612120197176,"results":"7","hashOfConfig":"8"},{"size":287,"mtime":1612381995190,"results":"9","hashOfConfig":"8"},{"size":362,"mtime":1611856800076,"results":"10","hashOfConfig":"8"},{"size":532,"mtime":1612381918124,"results":"11","hashOfConfig":"8"},{"size":2239,"mtime":1612472022382,"results":"12","hashOfConfig":"8"},{"size":108,"mtime":1612467064498,"results":"13","hashOfConfig":"8"},{"filePath":"14","messages":"15","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"ff9ndh",{"filePath":"16","messages":"17","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"18","messages":"19","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"20"},{"filePath":"21","messages":"22","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"23","messages":"24","errorCount":0,"warningCount":2,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"25","messages":"26","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"20"},"/Users/user/repos/sort-measurer/src/index.js",[],"/Users/user/repos/sort-measurer/src/App.js",[],"/Users/user/repos/sort-measurer/src/reportWebVitals.js",[],["27","28"],"/Users/user/repos/sort-measurer/src/components/Workspace.js",[],"/Users/user/repos/sort-measurer/src/components/Form.js",["29","30"],"/Users/user/repos/sort-measurer/src/helpers/RandomColor.js",[],{"ruleId":"31","replacedBy":"32"},{"ruleId":"33","replacedBy":"34"},{"ruleId":"35","severity":1,"message":"36","line":19,"column":13,"nodeType":"37","messageId":"38","endLine":19,"endColumn":15},{"ruleId":"35","severity":1,"message":"36","line":20,"column":14,"nodeType":"37","messageId":"38","endLine":20,"endColumn":16},"no-native-reassign",["39"],"no-negated-in-lhs",["40"],"eqeqeq","Expected '===' and instead saw '=='.","BinaryExpression","unexpected","no-global-assign","no-unsafe-negation"]

src/components/Form.js

@@ -1,27 +1,50 @@
 import { useState } from "react";
+import InfoIcon from "@material-ui/icons/Info";
+import Tooltip from "@material-ui/core/Tooltip";
+
 import "./Form.css";
 import Workspace from "./Workspace";
-import InfoIcon from "@material-ui/icons/Info";
+import RandomColor from "../helpers/RandomColor";
 
 export default function Form(props) {
-  var randomColor = Math.floor(Math.random() * 16777215).toString(16);
-  var current = "#" + randomColor;
-
   const [width, setWidth] = useState("");
   const [height, setHeight] = useState("");
   const [rectanglesItems, setRectanglesItems] = useState([]);
+  const [dimensionsError, setDimensionsError] = useState("");
+
+  function Validation() {
+    if (
+      isNaN(width) ||
+      isNaN(height) ||
+      width == 0 ||
+      height == 0 ||
+      width === null ||
+      height === null
+    ) {
+      setDimensionsError("Enter correct dimensions");
+      return false;
+    }
+    if (width > 2000 || height > 2000) {
+      setDimensionsError("Dimensions too big");
+      return false;
+    }
+    return true;
+  }
 
-  //if (w || h == 0 || null) dont display;
   const handleFormSubmit = (e) => {
     e.preventDefault();
-    setRectanglesItems([
-      ...rectanglesItems,
-      {
-        w: width / 2,
-        h: height / 2,
-        c: current,
-      },
-    ]);
+    setDimensionsError("");
+    Validation();
+    if (Validation()) {
+      setRectanglesItems([
+        ...rectanglesItems,
+        {
+          w: width / 2,
+          h: height / 2,
+          c: RandomColor(),
+        },
+      ]);
+    }
   };
 
   return (
@@ -29,14 +52,15 @@ export default function Form(props) {
       <br />
       <form onSubmit={handleFormSubmit}>
         <label>
-          <p>Dimensions:</p>
+          <p>Rectangle dimensions:</p>
+          {"Width: "}
           <input
             type="text"
             placeholder="e.g. 200"
             value={width}
             onChange={(e) => setWidth(e.target.value)}
           />
-          {" x "}
+          {" Height: "}
           <input
             type="text"
             placeholder="e.g. 100"
@@ -44,13 +68,19 @@ export default function Form(props) {
             onChange={(e) => setHeight(e.target.value)}
           />
         </label>
+        {{ dimensionsError } ? (
+          <p style={{ color: "crimson" }}>{dimensionsError}</p>
+        ) : null}
         <br />
         <input type="submit" value="Add a rectangle" />
+        <Tooltip
+          title="Some rectangles may appear invisible. That's because the color of
+            the figures probably matches the background color."
+        >
+          <InfoIcon />
+        </Tooltip>
       </form>
-      <p style={{ display: "block" }}>
-        <InfoIcon /> Some rectangles may appear invisible. That's because the
-        color of the figures probably matches the background color.
-      </p>
+      <p>Current space: 2000 x 2000</p>
       <Workspace rectangles={rectanglesItems} />
     </>
   );

src/helpers/RandomColor.js

@@ -0,0 +1,3 @@
+export default function RandomColor() {
+  return "#" + Math.floor(Math.random() * 16777215).toString(16);
+}