diff --git a/.eslintrc b/.eslintrc index 4149e44..be54840 100644 --- a/.eslintrc +++ b/.eslintrc @@ -1,130 +1,130 @@ { - "extends": ["airbnb", "prettier", "prettier/react"], - "parser": "babel-eslint", - "parserOptions": { - "ecmaVersion": 2020, - // Can I remove these now? - "ecmaFeatures": { - "impliedStrict": true, - "classes": true - } - }, - "env": { - "browser": true, - "node": true, - "jquery": true, - "jest": true - }, - "rules": { - "no-debugger": 0, - "no-alert": 0, - "no-await-in-loop": 0, - "no-return-assign": ["error", "except-parens"], - "no-restricted-syntax": [ - 2, - "ForInStatement", - "LabeledStatement", - "WithStatement" - ], - "no-unused-vars": [ - 1, - { - "ignoreRestSiblings": true, - "argsIgnorePattern": "res|next|^err" - } - ], - "prefer-const": [ - "error", - { - "destructuring": "all" - } - ], - "arrow-body-style": [2, "as-needed"], - "no-unused-expressions": [ - 2, - { - "allowTaggedTemplates": true - } - ], - "no-param-reassign": [ - 2, - { - "props": false - } - ], - "no-console": 0, - "import/prefer-default-export": 0, - "import": 0, - "func-names": 0, - "space-before-function-paren": 0, - "comma-dangle": 0, - "max-len": 0, - "import/extensions": 0, - "import/no-extraneous-dependencies": 0, - "import/no-cycle": 0, - "no-underscore-dangle": 0, - "consistent-return": 0, - "react/display-name": 1, - "react/no-array-index-key": 0, - "react/react-in-jsx-scope": 0, - "react/prefer-stateless-function": 0, - "react/forbid-prop-types": 0, - "react/no-unescaped-entities": 0, - "jsx-a11y/click-events-have-key-events": 0, - "jsx-a11y/no-static-element-interactions": 0, - "jsx-a11y/accessible-emoji": 0, - "jsx-a11y/no-noninteractive-element-interactions": 0, - "jsx-a11y/label-has-associated-control": 0, + "extends": ["airbnb", "prettier", "prettier/react"], + "parser": "babel-eslint", + "parserOptions": { + "ecmaVersion": 2020, + // Can I remove these now? + "ecmaFeatures": { + "impliedStrict": true, + "classes": true + } + }, + "env": { + "browser": true, + "node": true, + "jquery": true, + "jest": true + }, + "rules": { + "no-debugger": 0, + "no-alert": 0, + "no-await-in-loop": 0, + "no-return-assign": ["error", "except-parens"], + "no-restricted-syntax": [ + 2, + "ForInStatement", + "LabeledStatement", + "WithStatement" + ], + "no-unused-vars": [ + 1, + { + "ignoreRestSiblings": true, + "argsIgnorePattern": "res|next|^err" + } + ], + "prefer-const": [ + "error", + { + "destructuring": "all" + } + ], + "arrow-body-style": [2, "as-needed"], + "no-unused-expressions": [ + 2, + { + "allowTaggedTemplates": true + } + ], + "no-param-reassign": [ + 2, + { + "props": false + } + ], + "no-console": 0, + "import/prefer-default-export": 0, + "import": 0, + "func-names": 0, + "space-before-function-paren": 0, + "comma-dangle": 0, + "max-len": 0, + "import/extensions": 0, + "import/no-extraneous-dependencies": 0, + "import/no-cycle": 0, + "no-underscore-dangle": 0, + "consistent-return": 0, + "react/display-name": 1, + "react/no-array-index-key": 0, + "react/react-in-jsx-scope": 0, + "react/prefer-stateless-function": 0, + "react/forbid-prop-types": 0, + "react/no-unescaped-entities": 0, + "jsx-a11y/click-events-have-key-events": 0, + "jsx-a11y/no-static-element-interactions": 0, + "jsx-a11y/accessible-emoji": 0, + "jsx-a11y/no-noninteractive-element-interactions": 0, + "jsx-a11y/label-has-associated-control": 0, - "react/require-default-props": 0, - "react/jsx-filename-extension": [ - 1, - { - "extensions": [".js", ".jsx"] - } - ], - "react/prop-types": [ - 0, - { - "allowForLoopAfterthoughts": true - } - ], - "radix": 0, - "no-shadow": [ - 2, - { - "hoist": "all", - "allow": ["resolve", "reject", "done", "next", "err", "error"] - } - ], - "quotes": [ - 2, - "single", - { - "avoidEscape": true, - "allowTemplateLiterals": true - } - ], - "prettier/prettier": [ - "error", - { - "trailingComma": "es5", - "singleQuote": true, - "printWidth": 80, - //below line only for windows users facing CLRF and eslint/prettier error - // non windows users feel free to delete it - "endOfLine": "auto" - } - ], - "jsx-a11y/href-no-hash": "off", - "jsx-a11y/anchor-is-valid": [ - "warn", - { - "aspects": ["invalidHref"] - } - ], - "react-hooks/rules-of-hooks": "error", - "react-hooks/exhaustive-deps": "warn" - }, - "plugins": ["html", "prettier", "react-hooks"] + "react/require-default-props": 0, + "react/jsx-filename-extension": [ + 1, + { + "extensions": [".js", ".jsx"] + } + ], + "react/prop-types": [ + 0, + { + "allowForLoopAfterthoughts": true + } + ], + "radix": 0, + "no-shadow": [ + 2, + { + "hoist": "all", + "allow": ["resolve", "reject", "done", "next", "err", "error"] + } + ], + "quotes": [ + 2, + "single", + { + "avoidEscape": true, + "allowTemplateLiterals": true + } + ], + "prettier/prettier": [ + "error", + { + "trailingComma": "es5", + "singleQuote": true, + "printWidth": 80, + //below line only for windows users facing CLRF and eslint/prettier error + // non windows users feel free to delete it + "endOfLine": "auto" + } + ], + "jsx-a11y/href-no-hash": "off", + "jsx-a11y/anchor-is-valid": [ + "warn", + { + "aspects": ["invalidHref"] + } + ], + "react-hooks/rules-of-hooks": "error", + "react-hooks/exhaustive-deps": "warn" + }, + "plugins": ["html", "prettier", "react-hooks"] } diff --git a/.gitignore b/.gitignore index 7d35e35..004aa4c 100644 --- a/.gitignore +++ b/.gitignore @@ -4,4 +4,5 @@ node_modules .env.development.local .env.test.local .env.production.local -.env \ No newline at end of file +.env +.prettierrc \ No newline at end of file diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..4c07d30 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,7 @@ +{ + "tabWidth": 2, + "useTabs": false, + "singleQuote": true, + "jsxBracketSameLine": true, + "printWidth": 120 +} diff --git a/client/package-lock.json b/client/package-lock.json index 1217827..6d71709 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -40,19 +40,6 @@ "source-map": "^0.5.0" }, "dependencies": { - "debug": { - "version": "4.3.1", - "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz", - "integrity": "sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==", - "requires": { - "ms": "2.1.2" - } - }, - "ms": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", - "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==" - }, "semver": { "version": "5.7.1", "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz", @@ -1109,21 +1096,6 @@ "debug": "^4.1.0", "globals": "^11.1.0", "lodash": "^4.17.19" - }, - "dependencies": { - "debug": { - "version": "4.3.1", - "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz", - "integrity": "sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==", - "requires": { - "ms": "2.1.2" - } - }, - "ms": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", - "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==" - } } }, "@babel/types": { @@ -1608,9 +1580,9 @@ } }, "@types/json-schema": { - "version": "7.0.6", - "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.6.tgz", - "integrity": "sha512-3c+yGKvVP5Y9TYBEibGNR+kLtijnj7mYrXRg+WpFb2X9xm04g/DXYkfg4hmzJQosc9snFNUPkbYIhu+KAm6jJw==" + "version": "7.0.7", + "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.7.tgz", + "integrity": "sha512-cxWFQVseBm6O9Gbw1IWb8r6OS4OhSt3hPZLkFApLjM8TEXROBuQGLAH2i2gZpcXdLBIrpXuTDhH7Vbm1iXmNGA==" }, "@types/minimatch": { "version": "3.0.3", @@ -1618,9 +1590,9 @@ "integrity": "sha512-tHq6qdbT9U1IRSGf14CL0pUlULksvY9OZ+5eEgl1N7t+OA3tGvNpxJCzuKQlsNgCVwbAs670L1vcVQi8j9HjnA==" }, "@types/node": { - "version": "14.14.21", - "resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.21.tgz", - "integrity": "sha512-cHYfKsnwllYhjOzuC5q1VpguABBeecUp24yFluHpn/BQaVxB1CuQ1FSRZCzrPxrkIfWISXV2LbeoBthLWg0+0A==" + "version": "14.14.22", + "resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.22.tgz", + "integrity": "sha512-g+f/qj/cNcqKkc3tFqlXOYjrmZA+jNBiDzbP3kH+B+otKFqAdPgVTGP1IeKRdMml/aE69as5S4FqtxAbl+LaMw==" }, "@types/parse-json": { "version": "4.0.0", @@ -1724,19 +1696,6 @@ "tsutils": "^3.17.1" }, "dependencies": { - "debug": { - "version": "4.3.1", - "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz", - "integrity": "sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==", - "requires": { - "ms": "2.1.2" - } - }, - "ms": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", - "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==" - }, "semver": { "version": "7.3.4", "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.4.tgz", @@ -2298,11 +2257,11 @@ "integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==" }, "axios": { - "version": "0.19.2", - "resolved": "https://registry.npmjs.org/axios/-/axios-0.19.2.tgz", - "integrity": "sha512-fjgm5MvRHLhx+osE2xoekY70AhARk3a6hkN+3Io1jc00jtquGvxYlKlsFUhmUET0V5te6CcZI7lcv2Ym61mjHA==", + "version": "0.21.1", + "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.1.tgz", + "integrity": "sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==", "requires": { - "follow-redirects": "1.5.10" + "follow-redirects": "^1.10.0" } }, "axobject-query": { @@ -2805,15 +2764,6 @@ "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz", "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==" }, - "bindings": { - "version": "1.5.0", - "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz", - "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==", - "optional": true, - "requires": { - "file-uri-to-path": "1.0.0" - } - }, "bluebird": { "version": "3.7.2", "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz", @@ -2854,6 +2804,11 @@ "ms": "2.0.0" } }, + "ms": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", + "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=" + }, "qs": { "version": "6.7.0", "resolved": "https://registry.npmjs.org/qs/-/qs-6.7.0.tgz", @@ -2880,9 +2835,9 @@ "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=" }, "bootstrap": { - "version": "4.5.3", - "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.5.3.tgz", - "integrity": "sha512-o9ppKQioXGqhw8Z7mah6KdTYpNQY//tipnkxppWhPbiSWdD+1raYsnhwEZjkTHYbGee4cVQ0Rx65EhOY/HNLcQ==" + "version": "4.6.0", + "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.0.tgz", + "integrity": "sha512-Io55IuQY3kydzHtbGvQya3H+KorS/M9rSNyfCGCg9WZ4pyT/lCxIlpJgG1GXW/PswzC84Tr2fBYi+7+jFVQQBw==" }, "brace-expansion": { "version": "1.1.11", @@ -3206,9 +3161,9 @@ } }, "caniuse-lite": { - "version": "1.0.30001178", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001178.tgz", - "integrity": "sha512-VtdZLC0vsXykKni8Uztx45xynytOi71Ufx9T8kHptSw9AL4dpqailUJJHavttuzUe1KYuBYtChiWv+BAb7mPmQ==" + "version": "1.0.30001179", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001179.tgz", + "integrity": "sha512-blMmO0QQujuUWZKyVrD1msR4WNDAqb/UPO1Sw2WWsQ7deoM5bJiicKnWJ1Y0NS/aGINSnKPIWBMw5luX+NDUCA==" }, "capital-case": { "version": "1.0.4", @@ -3598,6 +3553,11 @@ "requires": { "ms": "2.0.0" } + }, + "ms": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", + "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=" } } }, @@ -4151,11 +4111,11 @@ } }, "debug": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz", - "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==", + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz", + "integrity": "sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==", "requires": { - "ms": "2.0.0" + "ms": "2.1.2" } }, "decamelize": { @@ -4345,6 +4305,11 @@ "requires": { "ms": "2.0.0" } + }, + "ms": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", + "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=" } } }, @@ -4564,9 +4529,9 @@ "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=" }, "electron-to-chromium": { - "version": "1.3.641", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.641.tgz", - "integrity": "sha512-b0DLhsHSHESC1I+Nx6n4w4Lr61chMd3m/av1rZQhS2IXTzaS5BMM5N+ldWdMIlni9CITMRM09m8He4+YV/92TA==" + "version": "1.3.645", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.645.tgz", + "integrity": "sha512-T7mYop3aDpRHIQaUYcmzmh6j9MAe560n6ukqjJMbVC6bVTau7dSpvB18bcsBPPtOSe10cKxhJFtlbEzLa0LL1g==" }, "elliptic": { "version": "6.5.3", @@ -4661,9 +4626,9 @@ } }, "entities": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/entities/-/entities-2.1.0.tgz", - "integrity": "sha512-hCx1oky9PFrJ611mf0ifBLBRW8lUUVRlFolb5gWRfIELabBlbp9xZvrqZLZAs+NxFnbfQoeGd8wDkygjg7U85w==" + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz", + "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==" }, "errno": { "version": "0.1.8", @@ -4812,14 +4777,6 @@ "v8-compile-cache": "^2.0.3" }, "dependencies": { - "debug": { - "version": "4.3.1", - "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz", - "integrity": "sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==", - "requires": { - "ms": "2.1.2" - } - }, "eslint-utils": { "version": "1.4.3", "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-1.4.3.tgz", @@ -4845,11 +4802,6 @@ "resolve-from": "^4.0.0" } }, - "ms": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", - "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==" - }, "regexpp": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/regexpp/-/regexpp-2.0.1.tgz", @@ -4886,6 +4838,11 @@ "requires": { "ms": "2.0.0" } + }, + "ms": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", + "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=" } } }, @@ -4935,6 +4892,11 @@ "path-exists": "^3.0.0" } }, + "ms": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", + "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=" + }, "p-limit": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-1.3.0.tgz", @@ -5043,6 +5005,11 @@ "path-exists": "^3.0.0" } }, + "ms": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", + "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=" + }, "p-limit": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-1.3.0.tgz", @@ -5342,6 +5309,11 @@ "requires": { "is-extendable": "^0.1.0" } + }, + "ms": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", + "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=" } } }, @@ -5408,6 +5380,11 @@ "ms": "2.0.0" } }, + "ms": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", + "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=" + }, "path-to-regexp": { "version": "0.1.7", "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz", @@ -5633,12 +5610,6 @@ "schema-utils": "^2.5.0" } }, - "file-uri-to-path": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz", - "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==", - "optional": true - }, "filesize": { "version": "6.0.1", "resolved": "https://registry.npmjs.org/filesize/-/filesize-6.0.1.tgz", @@ -5686,6 +5657,11 @@ "requires": { "ms": "2.0.0" } + }, + "ms": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", + "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=" } } }, @@ -5766,12 +5742,9 @@ } }, "follow-redirects": { - "version": "1.5.10", - "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz", - "integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==", - "requires": { - "debug": "=3.1.0" - } + "version": "1.13.2", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.13.2.tgz", + "integrity": "sha512-6mPTgLxYm3r6Bkkg0vNM0HTjfGrOEtsfbhagQvbxDEsEkpNhw582upBaoRZylzen6krEmxXJgt9Ju6HiI4O7BA==" }, "for-in": { "version": "1.0.2", @@ -5990,9 +5963,9 @@ "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==" }, "get-intrinsic": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.0.2.tgz", - "integrity": "sha512-aeX0vrFm21ILl3+JpFFRNe9aUvp6VFZb2/CTbgLb8j75kOhvoNYjt9d8KA/tJG4gSo8nzEDedRl0h7vDmBYRVg==", + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.0.tgz", + "integrity": "sha512-M11rgtQp5GZMZzDL7jLTNxbDfurpzuau5uqRWDPvlHjfvg3TdScAZo96GLvhMjImrmR8uAt0FS2RLoMrfWGKlg==", "requires": { "function-bind": "^1.1.1", "has": "^1.0.3", @@ -6708,33 +6681,13 @@ } }, "internal-slot": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.2.tgz", - "integrity": "sha512-2cQNfwhAfJIkU4KZPkDI+Gj5yNNnbqi40W9Gge6dfnk4TocEVm00B3bdiL+JINrbGJil2TeHvM4rETGzk/f/0g==", + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.3.tgz", + "integrity": "sha512-O0DB1JC/sPyZl7cIo78n5dR7eUSwwpYPiXRhTzNxZVAMUuB8vlnRFyLxdrVToks6XPLVnFfbzaVd5WLjhgg+vA==", "requires": { - "es-abstract": "^1.17.0-next.1", + "get-intrinsic": "^1.1.0", "has": "^1.0.3", - "side-channel": "^1.0.2" - }, - "dependencies": { - "es-abstract": { - "version": "1.17.7", - "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.17.7.tgz", - "integrity": "sha512-VBl/gnfcJ7OercKA9MVaegWsBHFjV492syMudcnQZvt/Dw8ezpcOHYZXa/J96O8vx+g4x65YKhxOwDUh63aS5g==", - "requires": { - "es-to-primitive": "^1.2.1", - "function-bind": "^1.1.1", - "has": "^1.0.3", - "has-symbols": "^1.0.1", - "is-callable": "^1.2.2", - "is-regex": "^1.1.1", - "object-inspect": "^1.8.0", - "object-keys": "^1.1.1", - "object.assign": "^4.1.1", - "string.prototype.trimend": "^1.0.1", - "string.prototype.trimstart": "^1.0.1" - } - } + "side-channel": "^1.0.4" } }, "invariant": { @@ -7091,21 +7044,6 @@ "make-dir": "^2.1.0", "rimraf": "^2.6.3", "source-map": "^0.6.1" - }, - "dependencies": { - "debug": { - "version": "4.3.1", - "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz", - "integrity": "sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==", - "requires": { - "ms": "2.1.2" - } - }, - "ms": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", - "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==" - } } }, "istanbul-reports": { @@ -7341,11 +7279,7 @@ "version": "1.2.13", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz", "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==", - "optional": true, - "requires": { - "bindings": "^1.5.0", - "nan": "^2.12.1" - } + "optional": true } } }, @@ -8414,9 +8348,9 @@ } }, "ms": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", - "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=" + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", + "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==" }, "multicast-dns": { "version": "6.2.3", @@ -8437,12 +8371,6 @@ "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.8.tgz", "integrity": "sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==" }, - "nan": { - "version": "2.14.2", - "resolved": "https://registry.npmjs.org/nan/-/nan-2.14.2.tgz", - "integrity": "sha512-M2ufzIiINKCuDfBSAUr1vWQ+vuVcA9kqx8JJUsbQi6yf1uGRyb7HfpdfUr5qLXf3B/t8dPvcjhKMmlfnP47EzQ==", - "optional": true - }, "nanomatch": { "version": "1.2.13", "resolved": "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz", @@ -9267,11 +9195,6 @@ "requires": { "ms": "^2.1.1" } - }, - "ms": { - "version": "2.1.3", - "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", - "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==" } } }, @@ -11560,6 +11483,11 @@ "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz", "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=" }, + "ms": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", + "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=" + }, "setprototypeof": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.0.tgz", @@ -11777,6 +11705,11 @@ "is-extendable": "^0.1.0" } }, + "ms": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", + "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=" + }, "source-map": { "version": "0.5.7", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", @@ -11880,11 +11813,6 @@ "requires": { "websocket-driver": ">=0.5.1" } - }, - "ms": { - "version": "2.1.3", - "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", - "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==" } } }, @@ -11970,21 +11898,6 @@ "http-deceiver": "^1.2.7", "select-hose": "^2.0.0", "spdy-transport": "^3.0.0" - }, - "dependencies": { - "debug": { - "version": "4.3.1", - "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz", - "integrity": "sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==", - "requires": { - "ms": "2.1.2" - } - }, - "ms": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", - "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==" - } } }, "spdy-transport": { @@ -11998,21 +11911,6 @@ "obuf": "^1.1.2", "readable-stream": "^3.0.6", "wbuf": "^1.7.3" - }, - "dependencies": { - "debug": { - "version": "4.3.1", - "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz", - "integrity": "sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==", - "requires": { - "ms": "2.1.2" - } - }, - "ms": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", - "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==" - } } }, "split-string": { @@ -12759,9 +12657,9 @@ "integrity": "sha512-hcVC3wYEziELGGmEEXue7D75zbwIIVUMWAVbHItGPx0ziyXxrOMQx4rQEVEV45Ut/1IotuEvwqPopzIOkDMf0A==" }, "tsutils": { - "version": "3.19.1", - "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-3.19.1.tgz", - "integrity": "sha512-GEdoBf5XI324lu7ycad7s6laADfnAqCw6wLGI+knxvw9vsIYBaJfYdmeCEG3FMMUiSm3OGgNb+m6utsWf5h9Vw==", + "version": "3.20.0", + "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-3.20.0.tgz", + "integrity": "sha512-RYbuQuvkhuqVeXweWT3tJLKOEJ/UUw9GjNEZGWdrLLlM+611o1gwLHBpxoFJKKl25fLprp2eVthtKs5JOrNeXg==", "requires": { "tslib": "^1.8.1" }, @@ -12824,25 +12722,14 @@ "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=" }, "uncontrollable": { - "version": "7.1.1", - "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.1.1.tgz", - "integrity": "sha512-EcPYhot3uWTS3w00R32R2+vS8Vr53tttrvMj/yA1uYRhf8hbTG2GyugGqWDY0qIskxn0uTTojVd6wPYW9ZEf8Q==", + "version": "7.2.1", + "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.2.1.tgz", + "integrity": "sha512-svtcfoTADIB0nT9nltgjujTi7BzVmwjZClOmskKu/E8FW9BXzg9os8OLr4f8Dlnk0rYWJIWr4wv9eKUXiQvQwQ==", "requires": { "@babel/runtime": "^7.6.3", - "@types/react": "^16.9.11", + "@types/react": ">=16.9.11", "invariant": "^2.2.4", "react-lifecycles-compat": "^3.0.4" - }, - "dependencies": { - "@types/react": { - "version": "16.14.2", - "resolved": "https://registry.npmjs.org/@types/react/-/react-16.14.2.tgz", - "integrity": "sha512-BzzcAlyDxXl2nANlabtT4thtvbbnhee8hMmH/CcJrISDBVcJS1iOsP1f0OAgSdGE0MsY9tqcrb9YoZcOFv9dbQ==", - "requires": { - "@types/prop-types": "*", - "csstype": "^3.0.2" - } - } } }, "unicode-canonical-property-names-ecmascript": { @@ -13230,11 +13117,7 @@ "version": "1.2.13", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz", "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==", - "optional": true, - "requires": { - "bindings": "^1.5.0", - "nan": "^2.12.1" - } + "optional": true }, "glob-parent": { "version": "3.1.0", @@ -13557,23 +13440,11 @@ } } }, - "debug": { - "version": "4.3.1", - "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz", - "integrity": "sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==", - "requires": { - "ms": "2.1.2" - } - }, "fsevents": { "version": "1.2.13", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz", "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==", - "optional": true, - "requires": { - "bindings": "^1.5.0", - "nan": "^2.12.1" - } + "optional": true }, "get-caller-file": { "version": "1.0.3", @@ -13622,11 +13493,6 @@ "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz", "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=" }, - "ms": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", - "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==" - }, "normalize-path": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", diff --git a/client/package.json b/client/package.json index 8174012..4bbbc2a 100644 --- a/client/package.json +++ b/client/package.json @@ -5,7 +5,7 @@ "dependencies": { "@rematch/core": "^2.0.0-next.6", "@testing-library/jest-dom": "^4.2.4", - "axios": "^0.19.2", + "axios": "^0.21.1", "bootstrap": "^4.5.0", "change-case": "^4.1.1", "formik": "^2.1.4", diff --git a/client/src/components/shared/Cubic.js b/client/src/components/shared/Cubic.js index 78f0907..be9a2a6 100644 --- a/client/src/components/shared/Cubic.js +++ b/client/src/components/shared/Cubic.js @@ -1,81 +1,30 @@ import React from 'react'; +// UTILS +import { textAttributes, circleAttributes, lineAttributes } from './_utils'; + +const Cubic = ({ coords: { p, i, a }, areIndexVisible, setDraggedCubic, featureType, lineIndex }) => { + const handleDrag = (anchor) => { + setDraggedCubic({ lineIndex, pointIndex: i, featureType, anchor }); + }; + + const p2x = p.z ? a[0].x : p.x, + p2y = p.z ? a[0].y : p.y, + p1x = a[i - 1].x, + p1y = a[i - 1].y, + x1 = p.c[0].x, + y1 = p.c[0].y, + x2 = p.c[1].x, + y2 = p.c[1].y; -const Cubic = ({ - featureType, - lineIndex, - pointIndex, - reducers, - areIndexVisible, - p1x, - p1y, - x1, - y1, - p2x, - p2y, - x2, - y2, -}) => { - const visibility = areIndexVisible.value ? 'visible' : 'hidden'; return ( - - - - - reducers.setDraggedCubic({ - lineIndex, - pointIndex, - featureType, - anchor: 0, - }) - } - cx={x1} - cy={y1} - r={1} - /> - - {`${pointIndex}|0`} - - - - - reducers.setDraggedCubic({ - lineIndex, - pointIndex, - featureType, - anchor: 1, - }) - } - cx={x2} - cy={y2} - r={1} - /> - - {`${pointIndex}|1`} - - + handleDrag(0))} /> + + {`${i}|0`} + + handleDrag(1))} /> + + {`${i}|1`} ); }; diff --git a/client/src/components/shared/Eddy.js b/client/src/components/shared/Eddy.js index 8565b15..0506005 100644 --- a/client/src/components/shared/Eddy.js +++ b/client/src/components/shared/Eddy.js @@ -1,89 +1,77 @@ import React from 'react'; -import { buildPath, useMousePosition, useKeyPress } from './_utils'; +// UTILS +import { buildPath } from './_utils'; +// COMPONENTS import Point from './Point'; import Cubic from './Cubic'; +import FeatureShell from './FeatureShell'; /** * A line represents a safe route to navigate the river at a specific water level */ const Eddy = ({ - line, featureType = 'eddy', - lineIndex, - reducers, areHandlesVisible, areIndexVisible, -}) => { - const isCtrlPressed = useKeyPress('Control'); - const coords = useMousePosition(); - return ( - { - if (isCtrlPressed) { - reducers.removeFeature(); - } else { - reducers.setDraggedFeature(coords); - } - e.stopPropagation(); - }} - > - reducers.setActiveType({ featureType, lineIndex })} - className={featureType} - d={buildPath({ - points: line, - closePath: true, - })} - /> - {areHandlesVisible.value && - line.map((p, i, a) => { - const anchors = []; - const p2x = p.z ? a[0].x : p.x; - const p2y = p.z ? a[0].y : p.y; - const point = p.z ? null : ( - - ); - - if (p.c) { - anchors.push( - ( + + setActiveType({ featureType, lineIndex })} + className={featureType} + d={buildPath(vector)} + /> + {areHandlesVisible.value && + vector.map((p, i, a) => { + const anchors = []; + const point = p.z ? null : ( + ); - } - return ( - - {point} - {anchors} - - ); - })} - - ); -}; + + if (p.c) { + anchors.push( + + ); + } + return ( + + {anchors} + {point} + + ); + })} + + } + /> +); export default Eddy; diff --git a/client/src/components/shared/FeatureShell.js b/client/src/components/shared/FeatureShell.js new file mode 100644 index 0000000..b435e83 --- /dev/null +++ b/client/src/components/shared/FeatureShell.js @@ -0,0 +1,25 @@ +import React from 'react'; +// UTILS +import { useKeyPress, useMousePosition } from './_utils'; + +const FeatureShell = ({ setDraggedFeature, removeFeature, children }) => { + const isCtrlPressed = useKeyPress('Control'); + const coords = useMousePosition(); + + return ( + { + if (isCtrlPressed) { + removeFeature(); + } else { + setDraggedFeature(coords); + } + }} + > + {children} + + ); +}; + +export default FeatureShell; diff --git a/client/src/components/shared/Features.js b/client/src/components/shared/Features.js index 337b0ad..1b103a6 100644 --- a/client/src/components/shared/Features.js +++ b/client/src/components/shared/Features.js @@ -1,4 +1,5 @@ import React from 'react'; +// Components import SVG from './SVG'; import Line from './Line'; import Eddy from './Eddy'; @@ -18,39 +19,40 @@ const Features = ({ areIndexVisible, }) => { const { lines, eddys, hydraulics } = rapid; + return ( {areLinesVisible.value && lines.map((line, i) => ( ))} {areEddysVisible.value && eddys.map((eddy, i) => ( ))} {areHydraulicsVisible.value && hydraulics.map((hydraulic, i) => ( ))} diff --git a/client/src/components/shared/Hydraulic.js b/client/src/components/shared/Hydraulic.js index ae5e31b..418431a 100644 --- a/client/src/components/shared/Hydraulic.js +++ b/client/src/components/shared/Hydraulic.js @@ -1,5 +1,8 @@ import React from 'react'; -import { useMousePosition, useKeyPress } from './_utils'; +// UTILS +import { circleAttributes, textAttributes } from './_utils'; +// COMPONENTS +import FeatureShell from './FeatureShell'; import Point from './Point'; /** @@ -7,92 +10,78 @@ import Point from './Point'; */ const Hydraulic = ({ - line, featureType = 'hydraulic', - lineIndex, - reducers, areHandlesVisible, areIndexVisible, + lineIndex, + vector, width, + reducers: { + setDraggedFeature, + removeFeature, + setActiveType, + setHydraulicWidth, + setDraggedPoint, + removePoint, + }, }) => { - const isCtrlPressed = useKeyPress('Control'); - const coords = useMousePosition(); - // Find handle coordinates - - const center = { - x: (line[1].x + line[0].x) / 2, - y: (line[1].y + line[0].y) / 2, - }; + const x0 = vector[0].x, + y0 = vector[0].y, + x1 = vector[1].x, + y1 = vector[1].y; const quarter = [ { - x: (line[0].x + center.x) / 2, - y: (line[0].y + center.y) / 2, + x: (x0 + (x1 + x0) / 2) / 2, + y: (y0 + (y1 + y0) / 2) / 2, + }, + { + x: (x1 + (x1 + x0) / 2) / 2, + y: (y1 + (y1 + y0) / 2) / 2, }, - { x: (line[1].x + center.x) / 2, y: (line[1].y + center.y) / 2 }, ]; - return ( - { - if (isCtrlPressed) { - reducers.removeFeature(); - } else { - reducers.setDraggedFeature(coords); - } - - e.stopPropagation(); - }} - > - reducers.setActiveType({ featureType, lineIndex })} - className={featureType} - d={`M ${line[0].x} ${line[0].y} L ${line[1].x} ${line[1].y}`} - strokeWidth={width} - stroke="CadetBlue" + const anchors = quarter.map(({ x, y }, i) => ( + + + setHydraulicWidth({ lineIndex, pointIndex: i }) + )} /> + {i ? '+' : '-'} + + )); - {quarter.map((point, i) => ( - { - reducers.setHydraulicWidth({ - featureType, - lineIndex, - pointIndex: i, - }); - e.stopPropagation(); - }} - key={i} - > - - - {i ? '+' : '-'} - - - ))} + const points = vector.map((p, i) => ( + + )); - {areHandlesVisible.value && - line.map((p, i) => ( - + setActiveType({ featureType, lineIndex })} + d={`M ${x0} ${y0} L ${x1} ${y1}`} + className={featureType} + strokeWidth={width} /> - ))} - + {areHandlesVisible.value && anchors} + {areHandlesVisible.value && points} + + } + /> ); }; diff --git a/client/src/components/shared/Line.js b/client/src/components/shared/Line.js index ce76666..f7f4aa5 100644 --- a/client/src/components/shared/Line.js +++ b/client/src/components/shared/Line.js @@ -1,83 +1,77 @@ import React from 'react'; -import { buildPath, useKeyPress, useMousePosition } from './_utils'; +// UTILS +import { buildPath } from './_utils'; +// COMPONENTS import Point from './Point'; import Cubic from './Cubic'; +import FeatureShell from './FeatureShell'; /** * A line represents a safe route to navigate the river at a specific water level */ const Line = ({ - line, featureType = 'line', - lineIndex, - reducers, areHandlesVisible, areIndexVisible, -}) => { - const isCtrlPressed = useKeyPress('Control'); - const coords = useMousePosition(); - return ( - { - if (isCtrlPressed) { - reducers.removeFeature(); - } else { - reducers.setDraggedFeature(coords); - } - e.stopPropagation(); - }} - > - reducers.setActiveType({ featureType, lineIndex })} - className={featureType} - d={buildPath({ - points: line, - closePath: false, - })} - /> - {areHandlesVisible.value && - line.map((p, i, a) => { - const anchors = []; - if (p.c) { - anchors.push( - - ); - } - return ( - + lineIndex, + vector, + reducers: { + setDraggedFeature, + setDraggedCubic, + setDraggedPoint, + removeFeature, + setActiveType, + removePoint, + }, +}) => ( + + setActiveType({ featureType, lineIndex })} + className={featureType} + d={buildPath(vector)} + /> + {areHandlesVisible.value && + vector.map((p, i, a) => { + const anchors = []; + const point = p.z ? null : ( - {anchors} - - ); - })} - - ); -}; + ); + + if (p.c) { + anchors.push( + + ); + } + return ( + + {anchors} + {point} + + ); + })} + + } + /> +); export default Line; diff --git a/client/src/components/shared/Point.js b/client/src/components/shared/Point.js index ad39ac8..cebef6d 100644 --- a/client/src/components/shared/Point.js +++ b/client/src/components/shared/Point.js @@ -1,52 +1,34 @@ import React from 'react'; -import { useKeyPress } from './_utils'; +// UTILS +import { useKeyPress, textAttributes, circleAttributes } from './_utils'; /** - * A simple display component that displays a circular point. - * - * @param {number} x - The x coord position of the point on a 100x100 layout. - * @param {number} y - The y coord position of the point on a 100x100 layout. + * A simple display component that displays a circular point */ const Point = ({ + areIndexVisible, + setDraggedPoint, + removePoint, featureType, lineIndex, - x, - y, - pointIndex, - reducers, - areIndexVisible, + coords: { p, i }, }) => { const isCtrlPressed = useKeyPress('Control'); - const visibility = areIndexVisible.value ? 'visible' : 'hidden'; + + const handleMouseDown = () => { + if (isCtrlPressed) { + removePoint({ lineIndex, pointIndex: i }); + } else { + setDraggedPoint({ lineIndex, pointIndex: i, featureType }); + } + }; + return ( - - { - if (isCtrlPressed) { - reducers.removePoint({ lineIndex, pointIndex }); - } else { - reducers.setDraggedPoint({ lineIndex, pointIndex, featureType }); - } - e.stopPropagation(); - }} - cx={x} - cy={y} - r={1} - /> - - {pointIndex} - - + <> + + {i} + ); }; diff --git a/client/src/components/shared/SVG.js b/client/src/components/shared/SVG.js index 076874e..677b47a 100644 --- a/client/src/components/shared/SVG.js +++ b/client/src/components/shared/SVG.js @@ -1,21 +1,32 @@ import React from 'react'; +// UTILS import { useSelector } from 'react-redux'; import { useMousePosition, useKeyPress } from './_utils'; -const SVG = ({ reducers, children }) => { +const SVG = ({ + children, + reducers: { + setPointCoords, + setCubicCoords, + setFeatureCoords, + cancelDragging, + addPoint, + }, +}) => { const { draggedPoint, draggedCubic, draggedFeature } = useSelector( (state) => state.testEnvironment ); const coords = useMousePosition(); const isCtrlPressed = useKeyPress('Control'); + const handleMouseMove = () => { if (draggedPoint) { - reducers.setPointCoords({ coords }); + setPointCoords(coords); } else if (draggedCubic !== false) { - reducers.setCubicCoords({ coords }); + setCubicCoords(coords); } else if (draggedFeature) { - reducers.setFeatureCoords(coords); + setFeatureCoords(coords); } else return null; }; @@ -27,8 +38,8 @@ const SVG = ({ reducers, children }) => { xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" onMouseMove={() => handleMouseMove()} - onMouseUp={() => reducers.cancelDragging()} - onMouseDown={() => isCtrlPressed && reducers.addPoint({ coords })} + onMouseUp={() => cancelDragging()} + onMouseDown={() => isCtrlPressed && addPoint(coords)} tabIndex="0" > {children} diff --git a/client/src/components/shared/_utils/buildPath.js b/client/src/components/shared/_utils/buildPath.js index 25395c3..6618df3 100644 --- a/client/src/components/shared/_utils/buildPath.js +++ b/client/src/components/shared/_utils/buildPath.js @@ -1,4 +1,4 @@ -function buildPath({ points, closePath }) { +function buildPath(points) { let d = ''; points.forEach((p, i, a) => { @@ -7,19 +7,14 @@ function buildPath({ points, closePath }) { d += `M ${p.x} ${p.y} `; } else if (p.z) { // cubic - d += `C ${p.c[0].x} ${p.c[0].y} ${p.c[1].x} ${p.c[1].y} ${a[0].x} ${a[0].y} `; + d += `C ${p.c[0].x} ${p.c[0].y} ${p.c[1].x} ${p.c[1].y} ${a[0].x} ${a[0].y} Z`; } else if (p.c) { // cubic d += `C ${p.c[0].x} ${p.c[0].y} ${p.c[1].x} ${p.c[1].y} ${p.x} ${p.y} `; } else { d += `L ${p.x} ${p.y} `; } - - // d += ${p.x} ${p.y} ; }); - - if (closePath) d += 'Z'; - return d; } diff --git a/client/src/components/shared/_utils/elemAttributes.js b/client/src/components/shared/_utils/elemAttributes.js new file mode 100644 index 0000000..d6ea461 --- /dev/null +++ b/client/src/components/shared/_utils/elemAttributes.js @@ -0,0 +1,31 @@ +const textAttributes = (flag, x, y) => ({ + style: { userSelect: 'none' }, + visibility: flag ? 'visible' : 'hidden', + textAnchor: 'middle', + strokeWidth: '0.01', + fontSize: '1.5px', + stroke: 'white', + fill: 'white', + x, + y, +}); + +const circleAttributes = (x, y, r, className, callback) => ({ + className, + onMouseDown: callback, + r, + cx: x, + cy: y, +}); + +const lineAttributes = (className, x1, y1, x2, y2) => ({ + className, + x1, + y1, + x2, + y2, +}); + +exports.textAttributes = textAttributes; +exports.circleAttributes = circleAttributes; +exports.lineAttributes = lineAttributes; diff --git a/client/src/components/shared/_utils/index.js b/client/src/components/shared/_utils/index.js index 966aadd..274be7c 100644 --- a/client/src/components/shared/_utils/index.js +++ b/client/src/components/shared/_utils/index.js @@ -2,5 +2,18 @@ import useWindowDimensions from './useWindowDimensions'; import buildPath from './buildPath'; import useMousePosition from './useMousePosition'; import useKeyPress from './useKeyPress'; +import { + textAttributes, + circleAttributes, + lineAttributes, +} from './elemAttributes'; -export { useWindowDimensions, buildPath, useMousePosition, useKeyPress }; +export { + useWindowDimensions, + buildPath, + useMousePosition, + useKeyPress, + textAttributes, + circleAttributes, + lineAttributes, +}; diff --git a/client/src/components/test-environment/TestEnvironment.js b/client/src/components/test-environment/TestEnvironment.js index e24fcab..70bdc17 100644 --- a/client/src/components/test-environment/TestEnvironment.js +++ b/client/src/components/test-environment/TestEnvironment.js @@ -1,19 +1,20 @@ import React from 'react'; +// REDUX import { useSelector } from 'react-redux'; import store from '../../rematch/store'; +// UTILS +import { useToggle } from '../_utils'; +// COMPONENTS import Features from '../shared/Features'; import ToolBar from './toolbar/ToolBar'; -import { useToggle } from '../_utils'; -import ContextMenu from './toolbar/ContextMenu'; const TestEnvironment = () => { // Set your prefered /test-env settings below - const areHandlesVisible = useToggle(true); - const areLinesVisible = useToggle(0); - const areEddysVisible = useToggle(0); + const areLinesVisible = useToggle(true); + const areEddysVisible = useToggle(true); const areHydraulicsVisible = useToggle(true); - const areIndexVisible = useToggle(true); - const isMenuVisible = useToggle(false); + const areIndexVisible = useToggle(false); + const areHandlesVisible = useToggle(true); const { dispatch } = store; const rapid = useSelector((state) => state.testEnvironment); @@ -21,11 +22,6 @@ const TestEnvironment = () => { return (
- isMenuVisible.set()} - reducers={dispatch.testEnvironment} - /> { areEddysVisible={areEddysVisible} areHydraulicsVisible={areHydraulicsVisible} areIndexVisible={areIndexVisible} - isMenuVisible={isMenuVisible} + reducers={dispatch.testEnvironment} />
); diff --git a/client/src/components/test-environment/toolbar/ContextMenu.js b/client/src/components/test-environment/toolbar/FeatureMenu.js similarity index 78% rename from client/src/components/test-environment/toolbar/ContextMenu.js rename to client/src/components/test-environment/toolbar/FeatureMenu.js index 36939b3..13190a8 100644 --- a/client/src/components/test-environment/toolbar/ContextMenu.js +++ b/client/src/components/test-environment/toolbar/FeatureMenu.js @@ -1,65 +1,66 @@ import React, { useState } from 'react'; +// UTILS import { useForm } from 'react-hook-form'; -import { Card, Button } from 'react-bootstrap'; import { useMousePosition } from '../../shared/_utils'; +// COMPONENTS +import { Card, Button } from 'react-bootstrap'; -const ContextMenu = ({ show, reducers, isMenuVisible }) => { - const coords = useMousePosition(); - // Differ Feature Type to Create - const [type, setType] = useState(''); - // Form Handler +const FeatureMenu = ({ show, reducers, isMenuVisible }) => { const { register, handleSubmit } = useForm({}); - // Handle Info Submition + const [type, setType] = useState(''); + const coords = useMousePosition(); + const onSubmit = (data) => { - // Compose Payload for Reducer data.type = type; data.coords = coords; - // Send Data reducers.addFeature(data); - // Close Menu isMenuVisible(); }; + return (
- -