From 76fb43b9d6f96794878b59495835ea068a963638 Mon Sep 17 00:00:00 2001 From: username Date: Mon, 1 Feb 2021 00:09:48 +0100 Subject: [PATCH] Cleaned up, extracted List to a component --- .eslintcache | 2 +- src/App.js | 4 ++-- src/components/List.js | 10 ++++++++++ src/components/Workplace.js | 28 +++++++++++++--------------- 4 files changed, 26 insertions(+), 18 deletions(-) create mode 100644 src/components/List.js diff --git a/.eslintcache b/.eslintcache index 68f883b..2f6aa6a 100644 --- a/.eslintcache +++ b/.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/Playground.js":"4","/Users/user/repos/sort-measurer/src/components/Logo.js":"5","/Users/user/repos/sort-measurer/src/components/Workplace.js":"6"},{"size":500,"mtime":1612120197176,"results":"7","hashOfConfig":"8"},{"size":454,"mtime":1612132358526,"results":"9","hashOfConfig":"8"},{"size":362,"mtime":1611856800076,"results":"10","hashOfConfig":"8"},{"size":3727,"mtime":1612122157515,"results":"11","hashOfConfig":"8"},{"size":2938,"mtime":1612132213603,"results":"12","hashOfConfig":"8"},{"size":1030,"mtime":1612132336993,"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":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"23","usedDeprecatedRules":"20"},{"filePath":"24","messages":"25","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"26","usedDeprecatedRules":"20"},{"filePath":"27","messages":"28","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",[],["29","30"],"/Users/user/repos/sort-measurer/src/components/Playground.js",["31"],"import { useState } from \"react\";\nimport { useTheme } from \"css-vars-hook\";\n\nimport \"./Playground.css\";\n\nclass Rectangle {\n constructor(height, width) {\n this.height = height;\n this.width = width;\n }\n get area() {\n return this.calcArea();\n }\n calcArea() {\n return this.height * this.width;\n }\n}\n/*\nconst tab = [rect1.area, rect2.area, rect3.area];\nconst sortedtab = tab.sort(function (tab, temp) {\n return tab - temp;\n});\n*/\n/*\n\n\nThere are a few ways of doing this, so I'll just give an example of a simple to understand (if somewhat inefficient) method that should still give fairly decent results.\n\n Start by ordering your boxes from largest to smallest.\n Presume that your first box is going to be square (it won't end up that way, but it will end close). Take sqrt(area[1]) to get the length of its side. Take that width as the width you want for your first column.\n Given that width, fill as many more rows as you can in that column.\n Add up how much total area you have put in the column; resize its width to be match that (it will now be a little thinner).\n Repeat steps 1-3 for the rest of the available boxes. When you get to the point where the target width for your first box in the column is wider than the amount of space you have left, just use that width.\n The remaining boxes should cleanly fit into that remaining space in that column.\n\nThis will give you aligned columns, with varying height divisions. As an alternative, you can flip \"row\" and \"column\" to get constant row divisions with varying column splits.\n\n\n*/\n\nexport default function Playground(props) {\n const rectangleMeasures = { boxWidth: \"200px\", boxHeight: \"300px\" };\n const [sheetWidth, setSheetWidth] = useState(\"\");\n const [sheetHeight, setSheetHeight] = useState(\"\");\n const [rectangleWidth, setRectangleWidth] = useState(\n rectangleMeasures.boxWidth\n );\n const [rectangleHeight, setRectangleHeight] = useState(\n rectangleMeasures.boxHeight\n );\n\n const { setRef, setVariable } = useTheme(rectangleMeasures);\n\n const handleSheetDimensionsSubmit = (e) => {\n e.preventDefault();\n alert(`Sheet dimensons: ${sheetWidth} x ${sheetHeight}`);\n };\n const handleRectangleDimensionsSubmit = (e) => {\n e.preventDefault();\n setVariable(\"boxWidth\", rectangleWidth);\n setVariable(\"boxHeight\", rectangleHeight);\n };\n return (\n <>\n

{props.title}

\n
\n
\n \n \n
\n
\n \n \n
\n
\n
\n
\n \n \n );\n}\n","/Users/user/repos/sort-measurer/src/components/Logo.js",["32"],"import { logRoles } from \"@testing-library/react\";\n\nexport default function Logo() {\n var randomColor = Math.floor(Math.random() * 16777215).toString(16);\n var current = \"#\" + randomColor;\n return (\n <>\n {\" \"}\n \n \n \n \n \n \n \n \n );\n}\n","/Users/user/repos/sort-measurer/src/components/Workplace.js",[],{"ruleId":"33","replacedBy":"34"},{"ruleId":"35","replacedBy":"36"},{"ruleId":"37","severity":1,"message":"38","line":6,"column":7,"nodeType":"39","messageId":"40","endLine":6,"endColumn":16},{"ruleId":"37","severity":1,"message":"41","line":1,"column":10,"nodeType":"39","messageId":"40","endLine":1,"endColumn":18},"no-native-reassign",["42"],"no-negated-in-lhs",["43"],"no-unused-vars","'Rectangle' is defined but never used.","Identifier","unusedVar","'logRoles' is defined but never used.","no-global-assign","no-unsafe-negation"] \ No newline at end of file +[{"/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/Playground.js":"4","/Users/user/repos/sort-measurer/src/components/Logo.js":"5","/Users/user/repos/sort-measurer/src/components/Workplace.js":"6","/Users/user/repos/sort-measurer/src/components/List.js":"7"},{"size":500,"mtime":1612120197176,"results":"8","hashOfConfig":"9"},{"size":456,"mtime":1612133288528,"results":"10","hashOfConfig":"9"},{"size":362,"mtime":1611856800076,"results":"11","hashOfConfig":"9"},{"size":3727,"mtime":1612122157515,"results":"12","hashOfConfig":"9"},{"size":2938,"mtime":1612132213603,"results":"13","hashOfConfig":"9"},{"size":1035,"mtime":1612134551571,"results":"14","hashOfConfig":"9"},{"size":221,"mtime":1612134394816,"results":"15","hashOfConfig":"9"},{"filePath":"16","messages":"17","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"ff9ndh",{"filePath":"18","messages":"19","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"20","messages":"21","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"22"},{"filePath":"23","messages":"24","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"25","usedDeprecatedRules":"22"},{"filePath":"26","messages":"27","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"28","usedDeprecatedRules":"22"},{"filePath":"29","messages":"30","errorCount":1,"warningCount":2,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"31","messages":"32","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"22"},"/Users/user/repos/sort-measurer/src/index.js",[],"/Users/user/repos/sort-measurer/src/App.js",["33"],"/Users/user/repos/sort-measurer/src/reportWebVitals.js",[],["34","35"],"/Users/user/repos/sort-measurer/src/components/Playground.js",["36"],"import { useState } from \"react\";\nimport { useTheme } from \"css-vars-hook\";\n\nimport \"./Playground.css\";\n\nclass Rectangle {\n constructor(height, width) {\n this.height = height;\n this.width = width;\n }\n get area() {\n return this.calcArea();\n }\n calcArea() {\n return this.height * this.width;\n }\n}\n/*\nconst tab = [rect1.area, rect2.area, rect3.area];\nconst sortedtab = tab.sort(function (tab, temp) {\n return tab - temp;\n});\n*/\n/*\n\n\nThere are a few ways of doing this, so I'll just give an example of a simple to understand (if somewhat inefficient) method that should still give fairly decent results.\n\n Start by ordering your boxes from largest to smallest.\n Presume that your first box is going to be square (it won't end up that way, but it will end close). Take sqrt(area[1]) to get the length of its side. Take that width as the width you want for your first column.\n Given that width, fill as many more rows as you can in that column.\n Add up how much total area you have put in the column; resize its width to be match that (it will now be a little thinner).\n Repeat steps 1-3 for the rest of the available boxes. When you get to the point where the target width for your first box in the column is wider than the amount of space you have left, just use that width.\n The remaining boxes should cleanly fit into that remaining space in that column.\n\nThis will give you aligned columns, with varying height divisions. As an alternative, you can flip \"row\" and \"column\" to get constant row divisions with varying column splits.\n\n\n*/\n\nexport default function Playground(props) {\n const rectangleMeasures = { boxWidth: \"200px\", boxHeight: \"300px\" };\n const [sheetWidth, setSheetWidth] = useState(\"\");\n const [sheetHeight, setSheetHeight] = useState(\"\");\n const [rectangleWidth, setRectangleWidth] = useState(\n rectangleMeasures.boxWidth\n );\n const [rectangleHeight, setRectangleHeight] = useState(\n rectangleMeasures.boxHeight\n );\n\n const { setRef, setVariable } = useTheme(rectangleMeasures);\n\n const handleSheetDimensionsSubmit = (e) => {\n e.preventDefault();\n alert(`Sheet dimensons: ${sheetWidth} x ${sheetHeight}`);\n };\n const handleRectangleDimensionsSubmit = (e) => {\n e.preventDefault();\n setVariable(\"boxWidth\", rectangleWidth);\n setVariable(\"boxHeight\", rectangleHeight);\n };\n return (\n <>\n

{props.title}

\n
\n
\n \n \n
\n
\n \n \n
\n
\n
\n
\n \n \n );\n}\n","/Users/user/repos/sort-measurer/src/components/Logo.js",["37"],"import { logRoles } from \"@testing-library/react\";\n\nexport default function Logo() {\n var randomColor = Math.floor(Math.random() * 16777215).toString(16);\n var current = \"#\" + randomColor;\n return (\n <>\n {\" \"}\n \n \n \n \n \n \n \n \n );\n}\n","/Users/user/repos/sort-measurer/src/components/Workplace.js",["38","39","40"],"/Users/user/repos/sort-measurer/src/components/List.js",[],{"ruleId":"41","severity":1,"message":"42","line":2,"column":8,"nodeType":"43","messageId":"44","endLine":2,"endColumn":18},{"ruleId":"45","replacedBy":"46"},{"ruleId":"47","replacedBy":"48"},{"ruleId":"41","severity":1,"message":"49","line":6,"column":7,"nodeType":"43","messageId":"44","endLine":6,"endColumn":16},{"ruleId":"41","severity":1,"message":"50","line":1,"column":10,"nodeType":"43","messageId":"44","endLine":1,"endColumn":18},{"ruleId":"41","severity":1,"message":"51","line":7,"column":10,"nodeType":"43","messageId":"44","endLine":7,"endColumn":24},{"ruleId":"41","severity":1,"message":"52","line":7,"column":26,"nodeType":"43","messageId":"44","endLine":7,"endColumn":43},{"ruleId":"53","severity":2,"message":"54","line":37,"column":25,"nodeType":"43","messageId":"55","endLine":37,"endColumn":35},"no-unused-vars","'Playground' is defined but never used.","Identifier","unusedVar","no-native-reassign",["56"],"no-negated-in-lhs",["57"],"'Rectangle' is defined but never used.","'logRoles' is defined but never used.","'rectangleArray' is assigned a value but never used.","'setRectangleArray' is assigned a value but never used.","no-undef","'rectangles' is not defined.","undef","no-global-assign","no-unsafe-negation"] \ No newline at end of file diff --git a/src/App.js b/src/App.js index 6b85cf0..4220339 100644 --- a/src/App.js +++ b/src/App.js @@ -2,7 +2,7 @@ import "./App.css"; import Playground from "./components/Playground"; import Logo from "./components/Logo"; import Workplace from "./components/Workplace"; - +// function App() { return ( <> @@ -11,7 +11,7 @@ function App() {

Guillotine-cutter App

- + diff --git a/src/components/List.js b/src/components/List.js new file mode 100644 index 0000000..287f5fa --- /dev/null +++ b/src/components/List.js @@ -0,0 +1,10 @@ +export default function List(props) { + const rectangles = props.rectangles; + const listItems = rectangles.map((rectangle) => ( +
  • + {rectangle.w} x {rectangle.h} +
    • + )); + + return <> {listItems}; +} diff --git a/src/components/Workplace.js b/src/components/Workplace.js index fe12ea1..83ec972 100644 --- a/src/components/Workplace.js +++ b/src/components/Workplace.js @@ -1,18 +1,24 @@ import { useState } from "react"; +import List from "./List"; export default function Workplace() { - let figurki = [{ w: "100px", h: "100px", c: "red" }]; const [width, setWidth] = useState(""); const [height, setHeight] = useState(""); + const [rectangleArray, setRectangleArray] = useState(""); - const handleSubmit = (evt) => { - evt.preventDefault(); - figurki.push({ w: width + "px", h: height + "px", c: "blue" }); - console.log(figurki); + const numbers = [{ w: "100px", h: "100px", c: "red" }]; + numbers.push({ w: "200px", h: "300px", c: "cyan" }); + + const handleFormSubmit = (e) => { + e.preventDefault(); + numbers.push({ w: width + "px", h: height + "px", c: "blue" }); + console.log(numbers); }; + return ( <> -
    +
    +