From f821ff272285e45b17e8cc47a41c5f2786950bc7 Mon Sep 17 00:00:00 2001 From: Tobias Mahnke Date: Tue, 20 Apr 2021 16:44:39 +0200 Subject: [PATCH 1/8] fix: onSubmit in registration process --- frontend/package-lock.json | 134 ++++++++++++++++-- frontend/package.json | 20 +-- .../components/Page/{index.js => index.tsx} | 2 +- frontend/src/components/RegistrationForm.tsx | 8 +- frontend/src/index.js | 10 +- frontend/src/pages/RegistrationPage.tsx | 17 ++- frontend/src/store.ts | 21 +++ 7 files changed, 180 insertions(+), 32 deletions(-) rename frontend/src/components/Page/{index.js => index.tsx} (65%) create mode 100644 frontend/src/store.ts diff --git a/frontend/package-lock.json b/frontend/package-lock.json index fa823d8..1bcb6a7 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -1869,6 +1869,7 @@ "version": "7.29.4", "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-7.29.4.tgz", "integrity": "sha512-CtrJRiSYEfbtNGtEsd78mk1n1v2TUbeABlNIcOCJdDfkN5/JTOwQEbbQpoSRxGqzcWPgStMvJ4mNolSuBRv1NA==", + "dev": true, "requires": { "@babel/code-frame": "^7.10.4", "@babel/runtime": "^7.12.5", @@ -1884,6 +1885,7 @@ "version": "5.11.9", "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.11.9.tgz", "integrity": "sha512-Mn2gnA9d1wStlAIT2NU8J15LNob0YFBVjs2aEQ3j8rsfRQo+lAs7/ui1i2TGaJjapLmuNPLTsrm+nPjmZDwpcQ==", + "dev": true, "requires": { "@babel/runtime": "^7.9.2", "@types/testing-library__jest-dom": "^5.9.1", @@ -1899,6 +1901,7 @@ "version": "3.0.0", "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz", "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==", + "dev": true, "requires": { "ansi-styles": "^4.1.0", "supports-color": "^7.1.0" @@ -1910,6 +1913,7 @@ "version": "11.2.3", "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-11.2.3.tgz", "integrity": "sha512-BirBUGPkTW28ULuCwIbYo0y2+0aavHczBT6N9r3LrsswEW3pg25l1wgoE7I8QBIy1upXWkwKpYdWY7NYYP0Bxw==", + "dev": true, "requires": { "@babel/runtime": "^7.12.5", "@testing-library/dom": "^7.28.1" @@ -1919,6 +1923,7 @@ "version": "12.6.0", "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-12.6.0.tgz", "integrity": "sha512-FNEH/HLmOk5GO70I52tKjs7WvGYckeE/SrnLX/ip7z2IGbffyd5zOUM1tZ10vsTphqm+VbDFI0oaXu0wcfQsAQ==", + "dev": true, "requires": { "@babel/runtime": "^7.12.5" } @@ -1928,10 +1933,17 @@ "resolved": "https://registry.npmjs.org/@types/anymatch/-/anymatch-1.3.1.tgz", "integrity": "sha512-/+CRPXpBDpo2RK9C68N3b2cOvO0Cf5B9aPijHsoDQTHivnGSObdOF2BRQOYjojWTDy6nQvMjmqRXIxH55VjxxA==" }, + "@types/arcgis-rest-api": { + "version": "10.4.4", + "resolved": "https://registry.npmjs.org/@types/arcgis-rest-api/-/arcgis-rest-api-10.4.4.tgz", + "integrity": "sha512-5NwSfj4po+03fauyr4F5AxYzu8pbbqmxay+pNr5ef2V3Mj+7OylvV48VKuVoO9m799jhZdH3EQgQBHm3Y6q1Sw==", + "dev": true + }, "@types/aria-query": { "version": "4.2.1", "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-4.2.1.tgz", - "integrity": "sha512-S6oPal772qJZHoRZLFc/XoZW2gFvwXusYUmXPXkgxJLuEk2vOt7jc4Yo6z/vtI0EBkbPBVrJJ0B+prLIKiWqHg==" + "integrity": "sha512-S6oPal772qJZHoRZLFc/XoZW2gFvwXusYUmXPXkgxJLuEk2vOt7jc4Yo6z/vtI0EBkbPBVrJJ0B+prLIKiWqHg==", + "dev": true }, "@types/babel__core": { "version": "7.1.12", @@ -1970,6 +1982,12 @@ "@babel/types": "^7.3.0" } }, + "@types/classnames": { + "version": "2.2.11", + "resolved": "https://registry.npmjs.org/@types/classnames/-/classnames-2.2.11.tgz", + "integrity": "sha512-2koNhpWm3DgWRp5tpkiJ8JGc1xTn2q0l+jUNUE7oMKXUf5NpI9AIdC4kbjGNFBdHtcxBD18LAksoudAVhFKCjw==", + "dev": true + }, "@types/eslint": { "version": "7.2.6", "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-7.2.6.tgz", @@ -1984,6 +2002,12 @@ "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.46.tgz", "integrity": "sha512-laIjwTQaD+5DukBZaygQ79K1Z0jb1bPEMRrkXSLjtCcZm+abyp5YbrqpSLzD42FwWW6gK/aS4NYpJ804nG2brg==" }, + "@types/geojson": { + "version": "7946.0.7", + "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.7.tgz", + "integrity": "sha512-wE2v81i4C4Ol09RtsWFAqg3BUitWbHSpSlIo+bNdsCJijO9sjme+zm+73ZMCa/qMC8UEERxzGbvmr1cffo2SiQ==", + "dev": true + }, "@types/glob": { "version": "7.1.3", "resolved": "https://registry.npmjs.org/@types/glob/-/glob-7.1.3.tgz", @@ -2047,6 +2071,7 @@ "version": "26.0.20", "resolved": "https://registry.npmjs.org/@types/jest/-/jest-26.0.20.tgz", "integrity": "sha512-9zi2Y+5USJRxd0FsahERhBwlcvFh6D2GLQnY2FH2BzK8J9s9omvNHIbvABwIluXa0fD8XVKMLTO0aOEuUfACAA==", + "dev": true, "requires": { "jest-diff": "^26.0.0", "pretty-format": "^26.0.0" @@ -2068,6 +2093,12 @@ "integrity": "sha512-oVfRvqHV/V6D1yifJbVRU3TMp8OT6o6BG+U9MkwuJ3U8/CsDHvalRpsxBqivn71ztOFZBTfJMvETbqHiaNSj7Q==", "dev": true }, + "@types/luxon": { + "version": "1.26.4", + "resolved": "https://registry.npmjs.org/@types/luxon/-/luxon-1.26.4.tgz", + "integrity": "sha512-OIvbVLZQUjyZofqSFpre2VsgvKy0V0JQdRgN0k3H1DTGRdxHiaQjT16+H2gyuhAS9r8B2PQEwrSiqP6/Zka3pQ==", + "dev": true + }, "@types/mdast": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-3.0.3.tgz", @@ -2091,6 +2122,17 @@ "resolved": "https://registry.npmjs.org/@types/normalize-package-data/-/normalize-package-data-2.4.0.tgz", "integrity": "sha512-f5j5b/Gf71L+dbqxIpQ4Z2WlmI/mPJ0fOkGGmFgtb6sAu97EPczzbS3/tJKxmcYDj55OX6ssqwDAWOHIYDRDGA==" }, + "@types/ol": { + "version": "6.4.2", + "resolved": "https://registry.npmjs.org/@types/ol/-/ol-6.4.2.tgz", + "integrity": "sha512-lSms1n5obkacAosby0U3HtnDkjhEXNCYNj0BYjQXyAZHz7+QkA3SuvUHiQ91DBUaAPptCrps3E2mtaPTGw74UA==", + "dev": true, + "requires": { + "@types/arcgis-rest-api": "*", + "@types/geojson": "*", + "@types/topojson-specification": "*" + } + }, "@types/parse-json": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz", @@ -2104,7 +2146,8 @@ "@types/prop-types": { "version": "15.7.3", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz", - "integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==" + "integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==", + "dev": true }, "@types/q": { "version": "1.5.4", @@ -2115,6 +2158,7 @@ "version": "17.0.1", "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.1.tgz", "integrity": "sha512-w8t9f53B2ei4jeOqf/gxtc2Sswnc3LBK5s0DyJcg5xd10tMHXts2N31cKjWfH9IC/JvEPa/YF1U4YeP1t4R6HQ==", + "dev": true, "requires": { "@types/prop-types": "*", "csstype": "^3.0.2" @@ -2124,6 +2168,7 @@ "version": "17.0.0", "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.0.tgz", "integrity": "sha512-lUqY7OlkF/RbNtD5nIq7ot8NquXrdFrjSOR6+w9a9RFQevGi1oZO1dcJbXMeONAPKtZ2UrZOEJ5UOCVsxbLk/g==", + "dev": true, "requires": { "@types/react": "*" } @@ -2161,6 +2206,29 @@ "@types/react-router": "*" } }, + "@types/redux-localstorage": { + "version": "1.0.8", + "resolved": "https://registry.npmjs.org/@types/redux-localstorage/-/redux-localstorage-1.0.8.tgz", + "integrity": "sha512-pt+w3Y2K4Xwx79exTFZO356buBCgCM6NnyMv/EmASWb03a81g/EMEhNgH6w9dOnhTs1Clnmf2ykaia0FWXjsbQ==", + "dev": true, + "requires": { + "redux": "^3.6.0" + }, + "dependencies": { + "redux": { + "version": "3.7.2", + "resolved": "https://registry.npmjs.org/redux/-/redux-3.7.2.tgz", + "integrity": "sha512-pNqnf9q1hI5HHZRBkj3bAngGZW/JMCmexDlOxw4XagXY2o1327nHH54LoTjiPJ0gizoqPDRqWyX/00g0hD6w+A==", + "dev": true, + "requires": { + "lodash": "^4.2.1", + "lodash-es": "^4.2.1", + "loose-envify": "^1.1.0", + "symbol-observable": "^1.0.3" + } + } + } + }, "@types/resolve": { "version": "0.0.8", "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-0.0.8.tgz", @@ -2188,10 +2256,20 @@ "version": "5.9.5", "resolved": "https://registry.npmjs.org/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.9.5.tgz", "integrity": "sha512-ggn3ws+yRbOHog9GxnXiEZ/35Mow6YtPZpd7Z5mKDeZS/o7zx3yAle0ov/wjhVB5QT4N2Dt+GNoGCdqkBGCajQ==", + "dev": true, "requires": { "@types/jest": "*" } }, + "@types/topojson-specification": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@types/topojson-specification/-/topojson-specification-1.0.1.tgz", + "integrity": "sha512-ZZYZUgkmUls9Uhxx2WZNt9f/h2+H3abUUjOVmq+AaaDFckC5oAwd+MDp95kBirk+XCXrYj0hfpI6DSUiJMrpYQ==", + "dev": true, + "requires": { + "@types/geojson": "*" + } + }, "@types/uglify-js": { "version": "3.11.1", "resolved": "https://registry.npmjs.org/@types/uglify-js/-/uglify-js-3.11.1.tgz", @@ -3381,6 +3459,15 @@ "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==", "optional": true }, + "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" + } + }, "block-stream": { "version": "0.0.9", "resolved": "https://registry.npmjs.org/block-stream/-/block-stream-0.0.9.tgz", @@ -4378,6 +4465,7 @@ "version": "3.0.0", "resolved": "https://registry.npmjs.org/css/-/css-3.0.0.tgz", "integrity": "sha512-DG9pFfwOrzc+hawpmqX/dHYHJG+Bsdb0klhyi1sDneOgGOXy9wQIC8hzyVp1e4NRYDBdxcylvywPkkXCHAzTyQ==", + "dev": true, "requires": { "inherits": "^2.0.4", "source-map": "^0.6.1", @@ -4388,6 +4476,7 @@ "version": "0.6.0", "resolved": "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.6.0.tgz", "integrity": "sha512-KXBr9d/fO/bWo97NXsPIAW1bFSBOuCnjbNTBMO7N59hsv5i9yzRDfcYwwt0l04+VqnKC+EwzvJZIP/qkuMgR/w==", + "dev": true, "requires": { "atob": "^2.1.2", "decode-uri-component": "^0.2.0" @@ -4503,7 +4592,8 @@ "css.escape": { "version": "1.5.1", "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz", - "integrity": "sha1-QuJ9T6BK4y+TGktNQZH6nN3ul8s=" + "integrity": "sha1-QuJ9T6BK4y+TGktNQZH6nN3ul8s=", + "dev": true }, "csscolorparser": { "version": "1.0.3", @@ -4674,7 +4764,8 @@ "csstype": { "version": "3.0.6", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.6.tgz", - "integrity": "sha512-+ZAmfyWMT7TiIlzdqJgjMb7S4f1beorDbWbsocyK4RaiqA5RTX3K14bnBWmmA9QEM0gRdsjyyrEmcyga8Zsxmw==" + "integrity": "sha512-+ZAmfyWMT7TiIlzdqJgjMb7S4f1beorDbWbsocyK4RaiqA5RTX3K14bnBWmmA9QEM0gRdsjyyrEmcyga8Zsxmw==", + "dev": true }, "currently-unhandled": { "version": "0.4.1", @@ -5000,7 +5091,8 @@ "dom-accessibility-api": { "version": "0.5.4", "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.4.tgz", - "integrity": "sha512-TvrjBckDy2c6v6RLxPv5QXOnU+SmF9nBII5621Ve5fu6Z/BDrENurBEvlC1f44lKEUVqOpK4w9E5Idc5/EgkLQ==" + "integrity": "sha512-TvrjBckDy2c6v6RLxPv5QXOnU+SmF9nBII5621Ve5fu6Z/BDrENurBEvlC1f44lKEUVqOpK4w9E5Idc5/EgkLQ==", + "dev": true }, "dom-converter": { "version": "0.2.0", @@ -6285,6 +6377,12 @@ } } }, + "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.1.0", "resolved": "https://registry.npmjs.org/filesize/-/filesize-6.1.0.tgz", @@ -9173,7 +9271,8 @@ "lz-string": { "version": "1.4.4", "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.4.4.tgz", - "integrity": "sha1-wNjq82BZ9wV5bh40SBHPTEmNOiY=" + "integrity": "sha1-wNjq82BZ9wV5bh40SBHPTEmNOiY=", + "dev": true }, "magic-string": { "version": "0.25.7", @@ -9431,6 +9530,11 @@ } } }, + "merge": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/merge/-/merge-2.1.0.tgz", + "integrity": "sha512-TcuhVDV+e6X457MQAm7xIb19rWhZuEDEho7RrwxMpQ/3GhD5sDlnP188gjQQuweXHy9igdke5oUtVOXX1X8Sxg==" + }, "merge-descriptors": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz", @@ -9521,7 +9625,8 @@ "min-indent": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz", - "integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==" + "integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==", + "dev": true }, "mini-create-react-context": { "version": "0.4.1", @@ -12496,6 +12601,7 @@ "version": "3.0.0", "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz", "integrity": "sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==", + "dev": true, "requires": { "indent-string": "^4.0.0", "strip-indent": "^3.0.0" @@ -12510,10 +12616,13 @@ "symbol-observable": "^1.2.0" } }, - "redux-localstorage": { - "version": "0.4.1", - "resolved": "https://registry.npmjs.org/redux-localstorage/-/redux-localstorage-0.4.1.tgz", - "integrity": "sha1-+vbXGcWBOXKU2BFHP/zt7gZckzw=" + "redux-localstorage-simple": { + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/redux-localstorage-simple/-/redux-localstorage-simple-2.4.0.tgz", + "integrity": "sha512-Zj28elJtO4fqXXC+gikonbKhFUkiwlalScYRn3EGUU44Pika1995AqUgzjIcsSPlBhIDV2WudFqa/YI9+3aE9Q==", + "requires": { + "merge": "2.1.0" + } }, "regenerate": { "version": "1.4.2", @@ -14368,6 +14477,7 @@ "version": "3.0.0", "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz", "integrity": "sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==", + "dev": true, "requires": { "min-indent": "^1.0.0" } @@ -15532,6 +15642,7 @@ "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==", "optional": true, "requires": { + "bindings": "^1.5.0", "nan": "^2.12.1" } }, @@ -16129,6 +16240,7 @@ "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==", "optional": true, "requires": { + "bindings": "^1.5.0", "nan": "^2.12.1" } }, diff --git a/frontend/package.json b/frontend/package.json index 214a250..f3aef06 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -3,13 +3,6 @@ "version": "0.1.0", "private": true, "dependencies": { - "@testing-library/jest-dom": "^5.11.4", - "@testing-library/react": "^11.1.0", - "@testing-library/user-event": "^12.1.10", - "@types/jest": "^26.0.20", - "@types/node": "^14.14.25", - "@types/react": "^17.0.1", - "@types/react-dom": "^17.0.0", "classnames": "^2.2.6", "luxon": "^1.25.0", "node-sass": "^4.14.1", @@ -22,7 +15,7 @@ "react-router-dom": "^5.2.0", "react-scripts": "4.0.1", "redux": "^4.0.5", - "redux-localstorage": "^0.4.1", + "redux-localstorage-simple": "^2.4.0", "rxjs": "^6.6.3", "rxjs-hooks": "^0.6.2", "semantic-ui-css": "^2.4.1", @@ -56,7 +49,18 @@ }, "proxy": "http://api:3000", "devDependencies": { + "@testing-library/jest-dom": "^5.11.4", + "@testing-library/react": "^11.1.0", + "@testing-library/user-event": "^12.1.10", + "@types/classnames": "^2.2.11", + "@types/jest": "^26.0.20", "@types/lodash": "^4.14.168", + "@types/luxon": "^1.26.4", + "@types/node": "^14.14.25", + "@types/ol": "^6.4.2", + "@types/react": "^17.0.1", + "@types/react-dom": "^17.0.0", + "@types/redux-localstorage": "^1.0.8", "@types/react-redux": "^7.1.16", "@types/react-router-dom": "^5.1.7" } diff --git a/frontend/src/components/Page/index.js b/frontend/src/components/Page/index.tsx similarity index 65% rename from frontend/src/components/Page/index.js rename to frontend/src/components/Page/index.tsx index 02112a6..a352962 100644 --- a/frontend/src/components/Page/index.js +++ b/frontend/src/components/Page/index.tsx @@ -3,6 +3,6 @@ import classnames from 'classnames' import styles from './Page.module.scss' -export default function Page({small, children}) { +export default function Page({children, small = false}: {children: React.ReactNode, small?: boolean }) { return
{children}
} diff --git a/frontend/src/components/RegistrationForm.tsx b/frontend/src/components/RegistrationForm.tsx index 6bd54d6..236c99e 100644 --- a/frontend/src/components/RegistrationForm.tsx +++ b/frontend/src/components/RegistrationForm.tsx @@ -1,7 +1,13 @@ import React from 'react' import {Form, Button} from 'semantic-ui-react' -export default function RegistrationForm({onSubmit: onSubmitOuter}) { +type RegistrationFormSubmit = { + username: string | null, + email: string | null, + password: string | null +} + +export default function RegistrationForm({onSubmit: onSubmitOuter}: {onSubmit: (data: RegistrationFormSubmit) => void}) { const [username, setUsername] = React.useState(null) const [email, setEmail] = React.useState(null) const [password, setPassword] = React.useState(null) diff --git a/frontend/src/index.js b/frontend/src/index.js index 3b32f09..01c793c 100644 --- a/frontend/src/index.js +++ b/frontend/src/index.js @@ -5,15 +5,9 @@ import 'semantic-ui-css/semantic.min.css' import './index.css' import App from './App' +import { store } from './store'; + import {Provider} from 'react-redux' -import {compose, createStore} from 'redux' -import persistState from 'redux-localstorage' - -import rootReducer from './reducers' - -const enhancer = compose(persistState(['login'])) - -const store = createStore(rootReducer, undefined, enhancer) // TODO: remove Settings.defaultLocale = 'de-DE' diff --git a/frontend/src/pages/RegistrationPage.tsx b/frontend/src/pages/RegistrationPage.tsx index 171bd2c..5963859 100644 --- a/frontend/src/pages/RegistrationPage.tsx +++ b/frontend/src/pages/RegistrationPage.tsx @@ -2,15 +2,26 @@ import React from 'react' import {connect} from 'react-redux' import {Redirect} from 'react-router-dom' -import {Page, RegistrationForm} from '../components' +import api from 'api' +import {Page, RegistrationForm} from 'components' +import type { RootState } from '../store'; + +const RegistrationPage = connect((state: RootState) => ({loggedIn: Boolean(state.login)}))(function RegistrationPage({loggedIn}) { + const onSubmit = React.useCallback(async ({username, email, password}) => { + const response = await api.post(`/accounts/register`, { + body: {username, email, password, confirmPassword: password}, + }); + + + console.log('response', response); + }, []); -const RegistrationPage = connect((state) => ({loggedIn: Boolean(state.login)}))(function RegistrationPage({loggedIn}) { return loggedIn ? ( ) : (

Register

- +
) }) diff --git a/frontend/src/store.ts b/frontend/src/store.ts new file mode 100644 index 0000000..da1a8d4 --- /dev/null +++ b/frontend/src/store.ts @@ -0,0 +1,21 @@ +import {applyMiddleware, createStore, compose } from 'redux' +import { save, load } from "redux-localstorage-simple" + +import rootReducer from './reducers' + +declare global { + interface Window { + __REDUX_DEVTOOLS_EXTENSION_COMPOSE__?: typeof compose; + } +} + +const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; + +export const store = createStore( + rootReducer, + load({ states: ["login"], disableWarnings: true }), + composeEnhancers(applyMiddleware(save({ states: ["login"] }))) +); + +export type AppDispatch = typeof store.dispatch; +export type RootState = ReturnType; From 8b70740186b8eae4be99f378f3f0fe3eaa202506 Mon Sep 17 00:00:00 2001 From: Tobias Mahnke Date: Tue, 20 Apr 2021 17:00:09 +0200 Subject: [PATCH 2/8] chore: add prettier --- frontend/package-lock.json | 47 ++++++++++++++++++++ frontend/package.json | 27 +++++++++-- frontend/src/components/RegistrationForm.tsx | 40 +++++++++-------- frontend/src/pages/RegistrationPage.tsx | 27 +++++------ frontend/src/store.ts | 10 ++--- 5 files changed, 112 insertions(+), 39 deletions(-) diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 1bcb6a7..f67eced 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -5606,6 +5606,23 @@ } } }, + "eslint-config-prettier": { + "version": "6.15.0", + "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-6.15.0.tgz", + "integrity": "sha512-a1+kOYLR8wMGustcgAjdydMsQ2A/2ipRPwRKUmfYaSxc9ZPcrku080Ctl6zrZzZNs/U82MjSv+qKREkoq3bJaw==", + "dev": true, + "requires": { + "get-stdin": "^6.0.0" + }, + "dependencies": { + "get-stdin": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-6.0.0.tgz", + "integrity": "sha512-jp4tHawyV7+fkkSKyvjuLZswblUtz+SQKzSWnBbii16BuZksJlU1wuBYXY75r+duh/llF1ur6oNwi+2ZzjKZ7g==", + "dev": true + } + } + }, "eslint-config-react-app": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/eslint-config-react-app/-/eslint-config-react-app-6.0.0.tgz", @@ -5799,6 +5816,15 @@ } } }, + "eslint-plugin-prettier": { + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-3.4.0.tgz", + "integrity": "sha512-UDK6rJT6INSfcOo545jiaOwB701uAIt2/dR7WnFQoGCVl1/EMqdANBmwUaqqQ45aXprsTGzSa39LI1PyuRBxxw==", + "dev": true, + "requires": { + "prettier-linter-helpers": "^1.0.0" + } + }, "eslint-plugin-react": { "version": "7.21.5", "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.21.5.tgz", @@ -6296,6 +6322,12 @@ "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz", "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==" }, + "fast-diff": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.2.0.tgz", + "integrity": "sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==", + "dev": true + }, "fast-glob": { "version": "3.2.5", "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.5.tgz", @@ -11886,6 +11918,21 @@ "resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-1.0.4.tgz", "integrity": "sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw=" }, + "prettier": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.2.1.tgz", + "integrity": "sha512-PqyhM2yCjg/oKkFPtTGUojv7gnZAoG80ttl45O6x2Ug/rMJw4wcc9k6aaf2hibP7BGVCCM33gZoGjyvt9mm16Q==", + "dev": true + }, + "prettier-linter-helpers": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz", + "integrity": "sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==", + "dev": true, + "requires": { + "fast-diff": "^1.1.2" + } + }, "pretty-bytes": { "version": "5.5.0", "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.5.0.tgz", diff --git a/frontend/package.json b/frontend/package.json index f3aef06..4906724 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -32,8 +32,18 @@ "eslintConfig": { "extends": [ "react-app", - "react-app/jest" - ] + "react-app/jest", + "prettier" + ], + "plugins": [ + "prettier" + ], + "rules": { + "prettier/prettier": "error", + "standard/array-bracket-even-spacing": 0, + "standard/computed-property-even-spacing": 0, + "standard/object-curly-even-spacing": 0 + } }, "browserslist": { "production": [ @@ -62,6 +72,17 @@ "@types/react-dom": "^17.0.0", "@types/redux-localstorage": "^1.0.8", "@types/react-redux": "^7.1.16", - "@types/react-router-dom": "^5.1.7" + "@types/react-router-dom": "^5.1.7", + "eslint-config-prettier": "^6.15.0", + "eslint-plugin-prettier": "^3.3.1", + "prettier": "^2.2.1" + }, + "prettier": { + "useTabs": false, + "trailingComma": "all", + "tabWidth": 2, + "semi": true, + "singleQuote": true, + "printWidth": 120 } } diff --git a/frontend/src/components/RegistrationForm.tsx b/frontend/src/components/RegistrationForm.tsx index 236c99e..b9c197e 100644 --- a/frontend/src/components/RegistrationForm.tsx +++ b/frontend/src/components/RegistrationForm.tsx @@ -1,28 +1,32 @@ -import React from 'react' -import {Form, Button} from 'semantic-ui-react' +import React from 'react'; +import { Form, Button } from 'semantic-ui-react'; type RegistrationFormSubmit = { - username: string | null, - email: string | null, - password: string | null -} + username: string | null; + email: string | null; + password: string | null; +}; -export default function RegistrationForm({onSubmit: onSubmitOuter}: {onSubmit: (data: RegistrationFormSubmit) => void}) { - const [username, setUsername] = React.useState(null) - const [email, setEmail] = React.useState(null) - const [password, setPassword] = React.useState(null) - const [password2, setPassword2] = React.useState(null) +export default function RegistrationForm({ + onSubmit: onSubmitOuter, +}: { + onSubmit: (data: RegistrationFormSubmit) => void; +}) { + const [username, setUsername] = React.useState(null); + const [email, setEmail] = React.useState(null); + const [password, setPassword] = React.useState(null); + const [password2, setPassword2] = React.useState(null); - const onChangeUsername = React.useCallback((e) => setUsername(e.target.value), []) - const onChangeEmail = React.useCallback((e) => setEmail(e.target.value), []) - const onChangePassword = React.useCallback((e) => setPassword(e.target.value), []) - const onChangePassword2 = React.useCallback((e) => setPassword2(e.target.value), []) + const onChangeUsername = React.useCallback((e) => setUsername(e.target.value), []); + const onChangeEmail = React.useCallback((e) => setEmail(e.target.value), []); + const onChangePassword = React.useCallback((e) => setPassword(e.target.value), []); + const onChangePassword2 = React.useCallback((e) => setPassword2(e.target.value), []); const onSubmit = React.useCallback(() => { if (username && email && password && password2 === password) { - onSubmitOuter({username, email, password}) + onSubmitOuter({ username, email, password }); } - }, [username, email, password, password2, onSubmitOuter]) + }, [username, email, password, password2, onSubmitOuter]); return (
@@ -39,5 +43,5 @@ export default function RegistrationForm({onSubmit: onSubmitOuter}: {onSubmit: ( />
- ) + ); } diff --git a/frontend/src/pages/RegistrationPage.tsx b/frontend/src/pages/RegistrationPage.tsx index 5963859..e007151 100644 --- a/frontend/src/pages/RegistrationPage.tsx +++ b/frontend/src/pages/RegistrationPage.tsx @@ -1,18 +1,19 @@ -import React from 'react' -import {connect} from 'react-redux' -import {Redirect} from 'react-router-dom' +import React from 'react'; +import { connect } from 'react-redux'; +import { Redirect } from 'react-router-dom'; -import api from 'api' -import {Page, RegistrationForm} from 'components' +import api from 'api'; +import { Page, RegistrationForm } from 'components'; import type { RootState } from '../store'; -const RegistrationPage = connect((state: RootState) => ({loggedIn: Boolean(state.login)}))(function RegistrationPage({loggedIn}) { - const onSubmit = React.useCallback(async ({username, email, password}) => { +const RegistrationPage = connect((state: RootState) => ({ loggedIn: Boolean(state.login) }))(function RegistrationPage({ + loggedIn, +}) { + const onSubmit = React.useCallback(async ({ username, email, password }) => { const response = await api.post(`/accounts/register`, { - body: {username, email, password, confirmPassword: password}, + body: { username, email, password, confirmPassword: password }, }); - console.log('response', response); }, []); @@ -21,9 +22,9 @@ const RegistrationPage = connect((state: RootState) => ({loggedIn: Boolean(state ) : (

Register

- +
- ) -}) + ); +}); -export default RegistrationPage +export default RegistrationPage; diff --git a/frontend/src/store.ts b/frontend/src/store.ts index da1a8d4..39d03f9 100644 --- a/frontend/src/store.ts +++ b/frontend/src/store.ts @@ -1,7 +1,7 @@ -import {applyMiddleware, createStore, compose } from 'redux' -import { save, load } from "redux-localstorage-simple" +import { applyMiddleware, createStore, compose } from 'redux'; +import { save, load } from 'redux-localstorage-simple'; -import rootReducer from './reducers' +import rootReducer from './reducers'; declare global { interface Window { @@ -13,8 +13,8 @@ const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; export const store = createStore( rootReducer, - load({ states: ["login"], disableWarnings: true }), - composeEnhancers(applyMiddleware(save({ states: ["login"] }))) + load({ states: ['login'], disableWarnings: true }), + composeEnhancers(applyMiddleware(save({ states: ['login'] }))), ); export type AppDispatch = typeof store.dispatch; From 947412b0a29c8f55b08605ee63f31a7e614bdeaf Mon Sep 17 00:00:00 2001 From: Tobias Mahnke Date: Tue, 20 Apr 2021 17:18:44 +0200 Subject: [PATCH 3/8] fix: min length for password --- frontend/src/components/RegistrationForm.tsx | 18 +++++++++++++----- 1 file changed, 13 insertions(+), 5 deletions(-) diff --git a/frontend/src/components/RegistrationForm.tsx b/frontend/src/components/RegistrationForm.tsx index b9c197e..2515124 100644 --- a/frontend/src/components/RegistrationForm.tsx +++ b/frontend/src/components/RegistrationForm.tsx @@ -12,10 +12,10 @@ export default function RegistrationForm({ }: { onSubmit: (data: RegistrationFormSubmit) => void; }) { - const [username, setUsername] = React.useState(null); - const [email, setEmail] = React.useState(null); - const [password, setPassword] = React.useState(null); - const [password2, setPassword2] = React.useState(null); + const [username, setUsername] = React.useState(''); + const [email, setEmail] = React.useState(''); + const [password, setPassword] = React.useState(''); + const [password2, setPassword2] = React.useState(''); const onChangeUsername = React.useCallback((e) => setUsername(e.target.value), []); const onChangeEmail = React.useCallback((e) => setEmail(e.target.value), []); @@ -32,7 +32,14 @@ export default function RegistrationForm({
- + From 5d4b0ed783decd560457d01ca644275625a1e8ac Mon Sep 17 00:00:00 2001 From: Tobias Mahnke Date: Tue, 20 Apr 2021 17:19:29 +0200 Subject: [PATCH 4/8] feat: display registration success response --- frontend/src/pages/RegistrationPage.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/frontend/src/pages/RegistrationPage.tsx b/frontend/src/pages/RegistrationPage.tsx index e007151..0fde7d3 100644 --- a/frontend/src/pages/RegistrationPage.tsx +++ b/frontend/src/pages/RegistrationPage.tsx @@ -9,12 +9,16 @@ import type { RootState } from '../store'; const RegistrationPage = connect((state: RootState) => ({ loggedIn: Boolean(state.login) }))(function RegistrationPage({ loggedIn, }) { + const [message, setMessage] = React.useState(); + const onSubmit = React.useCallback(async ({ username, email, password }) => { const response = await api.post(`/accounts/register`, { body: { username, email, password, confirmPassword: password }, }); - console.log('response', response); + if (response && response.message) { + setMessage(response.message); + } }, []); return loggedIn ? ( @@ -22,7 +26,7 @@ const RegistrationPage = connect((state: RootState) => ({ loggedIn: Boolean(stat ) : (

Register

- + {message ? message : }
); }); From 1bd71fd9538ce8eeb0665bac2514eb55edf2b158 Mon Sep 17 00:00:00 2001 From: Tobias Mahnke Date: Tue, 20 Apr 2021 17:29:23 +0200 Subject: [PATCH 5/8] chore: removed unused types --- frontend/package.json | 1 - 1 file changed, 1 deletion(-) diff --git a/frontend/package.json b/frontend/package.json index 4906724..c59b4cd 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -70,7 +70,6 @@ "@types/ol": "^6.4.2", "@types/react": "^17.0.1", "@types/react-dom": "^17.0.0", - "@types/redux-localstorage": "^1.0.8", "@types/react-redux": "^7.1.16", "@types/react-router-dom": "^5.1.7", "eslint-config-prettier": "^6.15.0", From 7b12bd6cce8b557068b3f461b842b533d3356ca0 Mon Sep 17 00:00:00 2001 From: Tobias Mahnke Date: Tue, 20 Apr 2021 17:40:41 +0200 Subject: [PATCH 6/8] fix: only load redux dev tools in dev --- frontend/package.json | 2 +- frontend/src/store.ts | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/frontend/package.json b/frontend/package.json index c59b4cd..4b7c518 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -39,7 +39,7 @@ "prettier" ], "rules": { - "prettier/prettier": "error", + "prettier/prettier": "warn", "standard/array-bracket-even-spacing": 0, "standard/computed-property-even-spacing": 0, "standard/object-curly-even-spacing": 0 diff --git a/frontend/src/store.ts b/frontend/src/store.ts index 39d03f9..e2e9b33 100644 --- a/frontend/src/store.ts +++ b/frontend/src/store.ts @@ -9,7 +9,8 @@ declare global { } } -const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; +const composeEnhancers = + (process.env.NODE_ENV !== 'production' && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) || compose; export const store = createStore( rootReducer, From 331be9631085e8f0a60135034aee7dadf151a685 Mon Sep 17 00:00:00 2001 From: Tobias Mahnke Date: Tue, 20 Apr 2021 17:41:27 +0200 Subject: [PATCH 7/8] fix: linter warnings --- frontend/src/reducers/index.js | 6 +++--- frontend/src/reducers/login.js | 12 ++++++------ 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/frontend/src/reducers/index.js b/frontend/src/reducers/index.js index 0cfe682..8b46fb9 100644 --- a/frontend/src/reducers/index.js +++ b/frontend/src/reducers/index.js @@ -1,5 +1,5 @@ -import {combineReducers} from 'redux' +import { combineReducers } from 'redux'; -import login from './login' +import login from './login'; -export default combineReducers({login}) +export default combineReducers({ login }); diff --git a/frontend/src/reducers/login.js b/frontend/src/reducers/login.js index 32b8777..29e723d 100644 --- a/frontend/src/reducers/login.js +++ b/frontend/src/reducers/login.js @@ -1,20 +1,20 @@ -const initialState = null +const initialState = null; export function login(user) { - return {type: 'LOGIN.LOGIN', payload: {user}} + return { type: 'LOGIN.LOGIN', payload: { user } }; } export function logout() { - return {type: 'LOGIN.LOGOUT'} + return { type: 'LOGIN.LOGOUT' }; } export default function loginReducer(state = initialState, action) { switch (action.type) { case 'LOGIN.LOGIN': - return action.payload.user + return action.payload.user; case 'LOGIN.LOGOUT': - return null + return null; default: - return state + return state; } } From 201168cdb86292da32624596ddfd81fc2221fdc5 Mon Sep 17 00:00:00 2001 From: Tobias Mahnke Date: Tue, 20 Apr 2021 18:04:41 +0200 Subject: [PATCH 8/8] fix: code smell "Ternary operators should not be nested" --- frontend/src/pages/RegistrationPage.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/frontend/src/pages/RegistrationPage.tsx b/frontend/src/pages/RegistrationPage.tsx index 0fde7d3..e257796 100644 --- a/frontend/src/pages/RegistrationPage.tsx +++ b/frontend/src/pages/RegistrationPage.tsx @@ -21,9 +21,11 @@ const RegistrationPage = connect((state: RootState) => ({ loggedIn: Boolean(stat } }, []); - return loggedIn ? ( - - ) : ( + if (loggedIn) { + return ; + } + + return (

Register

{message ? message : }