From 423dadec0baa3859c9f2fb345f09ce99760306c8 Mon Sep 17 00:00:00 2001 From: username Date: Sun, 31 Jan 2021 23:33:10 +0100 Subject: [PATCH] Making files more Reactier --- .eslintcache | 2 +- src/App.js | 48 ++++--------------------------------- src/components/Figure.js | 15 ------------ src/components/Logo.js | 18 ++++++++++++++ src/components/Workplace.js | 42 ++++++++++++++++++++++++++++++++ 5 files changed, 66 insertions(+), 59 deletions(-) delete mode 100644 src/components/Figure.js create mode 100644 src/components/Logo.js create mode 100644 src/components/Workplace.js diff --git a/.eslintcache b/.eslintcache index b1d07b9..68f883b 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/Figure.js":"5"},{"size":500,"mtime":1612120197176,"results":"6","hashOfConfig":"7"},{"size":4025,"mtime":1612124538473,"results":"8","hashOfConfig":"7"},{"size":362,"mtime":1611856800076,"results":"9","hashOfConfig":"7"},{"size":3727,"mtime":1612122157515,"results":"10","hashOfConfig":"7"},{"size":309,"mtime":1612124605035,"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":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"21","usedDeprecatedRules":"18"},{"filePath":"22","messages":"23","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",[],["24","25"],"/Users/user/repos/sort-measurer/src/components/Playground.js",["26"],"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/Figure.js",[],{"ruleId":"27","replacedBy":"28"},{"ruleId":"29","replacedBy":"30"},{"ruleId":"31","severity":1,"message":"32","line":6,"column":7,"nodeType":"33","messageId":"34","endLine":6,"endColumn":16},"no-native-reassign",["35"],"no-negated-in-lhs",["36"],"no-unused-vars","'Rectangle' is defined but never used.","Identifier","unusedVar","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"},{"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 diff --git a/src/App.js b/src/App.js index e42e0a7..6b85cf0 100644 --- a/src/App.js +++ b/src/App.js @@ -1,56 +1,18 @@ -import { useState } from "react"; - import "./App.css"; - -import Figure from "./components/Figure"; import Playground from "./components/Playground"; - -var randomColor = Math.floor(Math.random() * 16777215).toString(16); -var current = "#" + randomColor; - -let figurki = [{ w: "100px", h: "100px", c: "red" }]; +import Logo from "./components/Logo"; +import Workplace from "./components/Workplace"; function App() { - const [www, setWww] = useState(""); - const [hhh, setHhh] = useState(""); - - const handleSubmit = (evt) => { - evt.preventDefault(); - figurki.push({ w: www + "px", h: hhh + "px", c: "blue" }); - console.log(figurki); - }; - return ( <>
- - - - - - - +

Guillotine-cutter App

- -
- - -
-
+ +
); diff --git a/src/components/Figure.js b/src/components/Figure.js deleted file mode 100644 index 2952e60..0000000 --- a/src/components/Figure.js +++ /dev/null @@ -1,15 +0,0 @@ -export default function Figure(props) { - let figurkiNew = props.figurki; - let figurkiList = figurkiNew.map((figurka, index) => { - return
  • {figurka}
    • ; - }); - return ( - <> -
    - -
    - - ); -} diff --git a/src/components/Logo.js b/src/components/Logo.js new file mode 100644 index 0000000..680fd4d --- /dev/null +++ b/src/components/Logo.js @@ -0,0 +1,18 @@ +import { logRoles } from "@testing-library/react"; + +export default function Logo() { + var randomColor = Math.floor(Math.random() * 16777215).toString(16); + var current = "#" + randomColor; + return ( + <> + {" "} + + + + + + + + + ); +} diff --git a/src/components/Workplace.js b/src/components/Workplace.js new file mode 100644 index 0000000..fe12ea1 --- /dev/null +++ b/src/components/Workplace.js @@ -0,0 +1,42 @@ +import { useState } from "react"; + +export default function Workplace() { + let figurki = [{ w: "100px", h: "100px", c: "red" }]; + const [width, setWidth] = useState(""); + const [height, setHeight] = useState(""); + + const handleSubmit = (evt) => { + evt.preventDefault(); + figurki.push({ w: width + "px", h: height + "px", c: "blue" }); + console.log(figurki); + }; + return ( + <> +
    + + +
    + + + ); +}