From 05fffbe3783286850808773e87603d351abbccaf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maciek=20G=C5=82owacki?= Date: Sat, 21 Nov 2020 04:02:38 +0100 Subject: [PATCH] refactor --- package-lock.json | 303 +---------------------------- package.json | 6 - src/components/CourseCard.tsx | 47 +++-- src/components/Dropdown.tsx | 53 ++--- src/components/Rightbar.tsx | 26 +-- src/components/Scheduler.tsx | 15 +- src/components/SchedulerEvents.tsx | 60 +----- src/components/SchedulerRow.tsx | 49 +++-- src/constants/index.ts | 73 +++---- src/contexts/CASProvider.tsx | 7 +- src/contexts/CoursesProvider.tsx | 118 ++++++----- src/contexts/reducers.ts | 29 --- src/types/index.ts | 16 +- src/utils/axiosInstance.ts | 15 ++ src/utils/index.ts | 80 ++++++++ 15 files changed, 303 insertions(+), 594 deletions(-) delete mode 100644 src/contexts/reducers.ts create mode 100644 src/utils/axiosInstance.ts create mode 100644 src/utils/index.ts diff --git a/package-lock.json b/package-lock.json index 7433740..0a6bc41 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1437,11 +1437,6 @@ "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz", "integrity": "sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==" }, - "@sheerun/mutationobserver-shim": { - "version": "0.3.3", - "resolved": "https://registry.npmjs.org/@sheerun/mutationobserver-shim/-/mutationobserver-shim-0.3.3.tgz", - "integrity": "sha512-DetpxZw1fzPD5xUBrIAoplLChO2VB8DlL5Gg+I1IR9b2wPqYIca2WSUxL5g1vLeR4MsQq1NeWriXAVffV+U1Fw==" - }, "@svgr/babel-plugin-add-jsx-attribute": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-4.2.0.tgz", @@ -1551,155 +1546,6 @@ "loader-utils": "^1.2.3" } }, - "@testing-library/dom": { - "version": "6.16.0", - "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-6.16.0.tgz", - "integrity": "sha512-lBD88ssxqEfz0wFL6MeUyyWZfV/2cjEZZV3YRpb2IoJRej/4f1jB0TzqIOznTpfR1r34CNesrubxwIlAQ8zgPA==", - "requires": { - "@babel/runtime": "^7.8.4", - "@sheerun/mutationobserver-shim": "^0.3.2", - "@types/testing-library__dom": "^6.12.1", - "aria-query": "^4.0.2", - "dom-accessibility-api": "^0.3.0", - "pretty-format": "^25.1.0", - "wait-for-expect": "^3.0.2" - }, - "dependencies": { - "@babel/runtime-corejs3": { - "version": "7.11.2", - "resolved": "https://npm.mlabs.pl:443/@babel%2fruntime-corejs3/-/runtime-corejs3-7.11.2.tgz", - "integrity": "sha512-qh5IR+8VgFz83VBa6OkaET6uN/mJOhHONuy3m1sgF0CV6mXdPSEBdA7e1eUbVvyNtANjMbg22JUv71BaDXLY6A==", - "requires": { - "core-js-pure": "^3.0.0", - "regenerator-runtime": "^0.13.4" - } - }, - "@jest/types": { - "version": "25.5.0", - "resolved": "https://registry.npmjs.org/@jest/types/-/types-25.5.0.tgz", - "integrity": "sha512-OXD0RgQ86Tu3MazKo8bnrkDRaDXXMGUqd+kTtLtK1Zb7CRzQcaSRPPPV37SvYTdevXEBVxe0HXylEjs8ibkmCw==", - "requires": { - "@types/istanbul-lib-coverage": "^2.0.0", - "@types/istanbul-reports": "^1.1.1", - "@types/yargs": "^15.0.0", - "chalk": "^3.0.0" - } - }, - "@types/yargs": { - "version": "15.0.5", - "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-15.0.5.tgz", - "integrity": "sha512-Dk/IDOPtOgubt/IaevIUbTgV7doaKkoorvOyYM2CMwuDyP89bekI7H4xLIwunNYiK9jhCkmc6pUrJk3cj2AB9w==", - "requires": { - "@types/yargs-parser": "*" - } - }, - "ansi-styles": { - "version": "4.2.1", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz", - "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==", - "requires": { - "@types/color-name": "^1.1.1", - "color-convert": "^2.0.1" - } - }, - "aria-query": { - "version": "4.2.2", - "resolved": "https://npm.mlabs.pl:443/aria-query/-/aria-query-4.2.2.tgz", - "integrity": "sha512-o/HelwhuKpTj/frsOsbNLNgnNGVIFsVP/SW2BSF14gVl7kAfMOJ6/8wUAUvG1R1NHKrfG+2sHZTu0yauT1qBrA==", - "requires": { - "@babel/runtime": "^7.10.2", - "@babel/runtime-corejs3": "^7.10.2" - }, - "dependencies": { - "@babel/runtime": { - "version": "7.11.2", - "resolved": "https://npm.mlabs.pl:443/@babel%2fruntime/-/runtime-7.11.2.tgz", - "integrity": "sha512-TeWkU52so0mPtDcaCTxNBI/IHiz0pZgr8VEFqXFtZWpYD08ZB6FaSwVAS8MKRQAP3bYKiVjwysOJgMFY28o6Tw==", - "requires": { - "regenerator-runtime": "^0.13.4" - } - } - } - }, - "chalk": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz", - "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==", - "requires": { - "ansi-styles": "^4.1.0", - "supports-color": "^7.1.0" - } - }, - "color-convert": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", - "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", - "requires": { - "color-name": "~1.1.4" - } - }, - "color-name": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", - "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==" - }, - "has-flag": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", - "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==" - }, - "pretty-format": { - "version": "25.5.0", - "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-25.5.0.tgz", - "integrity": "sha512-kbo/kq2LQ/A/is0PQwsEHM7Ca6//bGPPvU6UnsdDRSKTWxT/ru/xb88v4BJf6a69H+uTytOEsTusT9ksd/1iWQ==", - "requires": { - "@jest/types": "^25.5.0", - "ansi-regex": "^5.0.0", - "ansi-styles": "^4.0.0", - "react-is": "^16.12.0" - } - }, - "supports-color": { - "version": "7.1.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.1.0.tgz", - "integrity": "sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==", - "requires": { - "has-flag": "^4.0.0" - } - } - } - }, - "@testing-library/jest-dom": { - "version": "4.2.4", - "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-4.2.4.tgz", - "integrity": "sha512-j31Bn0rQo12fhCWOUWy9fl7wtqkp7In/YP2p5ZFyRuiiB9Qs3g+hS4gAmDWONbAHcRmVooNJ5eOHQDCOmUFXHg==", - "requires": { - "@babel/runtime": "^7.5.1", - "chalk": "^2.4.1", - "css": "^2.2.3", - "css.escape": "^1.5.1", - "jest-diff": "^24.0.0", - "jest-matcher-utils": "^24.0.0", - "lodash": "^4.17.11", - "pretty-format": "^24.0.0", - "redent": "^3.0.0" - } - }, - "@testing-library/react": { - "version": "9.5.0", - "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-9.5.0.tgz", - "integrity": "sha512-di1b+D0p+rfeboHO5W7gTVeZDIK5+maEgstrZbWZSSvxDyfDRkkyBE1AJR5Psd6doNldluXlCWqXriUfqu/9Qg==", - "requires": { - "@babel/runtime": "^7.8.4", - "@testing-library/dom": "^6.15.0", - "@types/testing-library__react": "^9.1.2" - } - }, - "@testing-library/user-event": { - "version": "7.2.1", - "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-7.2.1.tgz", - "integrity": "sha512-oZ0Ib5I4Z2pUEcoo95cT1cr6slco9WY7yiPpG+RGNkj8YcYgJnM7pXmYmorNOReh8MIGcKSqXyeGjxnr8YiZbA==" - }, "@types/babel__core": { "version": "7.1.7", "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.1.7.tgz", @@ -1794,26 +1640,11 @@ "@types/istanbul-lib-report": "*" } }, - "@types/jest": { - "version": "24.9.1", - "resolved": "https://registry.npmjs.org/@types/jest/-/jest-24.9.1.tgz", - "integrity": "sha512-Fb38HkXSVA4L8fGKEZ6le5bB8r6MRWlOCZbVuWZcmOMSCd2wCYOwN1ibj8daIoV9naq7aaOZjrLCoCMptKU/4Q==", - "dev": true, - "requires": { - "jest-diff": "^24.3.0" - } - }, "@types/json-schema": { "version": "7.0.5", "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.5.tgz", "integrity": "sha512-7+2BITlgjgDhH0vvwZU/HZJVyk+2XUlvxXe8dFMedNX/aMkaOq++rMAFXc0tM7ij15QaWlbdQASBR9dihi+bDQ==" }, - "@types/lodash": { - "version": "4.14.162", - "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.162.tgz", - "integrity": "sha512-alvcho1kRUnnD1Gcl4J+hK0eencvzq9rmzvFPRmP5rPHx9VVsJj6bKLTATPVf9ktgv4ujzh7T+XWKp+jhuODig==", - "dev": true - }, "@types/minimatch": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.3.tgz", @@ -1859,6 +1690,7 @@ "version": "16.9.8", "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-16.9.8.tgz", "integrity": "sha512-ykkPQ+5nFknnlU6lDd947WbQ6TE3NNzbQAkInC2EKY1qeYdTKp7onFusmYZb+ityzx2YviqT6BXSu+LyWWJwcA==", + "dev": true, "requires": { "@types/react": "*" } @@ -1905,100 +1737,6 @@ } } }, - "@types/testing-library__dom": { - "version": "6.14.0", - "resolved": "https://registry.npmjs.org/@types/testing-library__dom/-/testing-library__dom-6.14.0.tgz", - "integrity": "sha512-sMl7OSv0AvMOqn1UJ6j1unPMIHRXen0Ita1ujnMX912rrOcawe4f7wu0Zt9GIQhBhJvH2BaibqFgQ3lP+Pj2hA==", - "requires": { - "pretty-format": "^24.3.0" - } - }, - "@types/testing-library__react": { - "version": "9.1.3", - "resolved": "https://registry.npmjs.org/@types/testing-library__react/-/testing-library__react-9.1.3.tgz", - "integrity": "sha512-iCdNPKU3IsYwRK9JieSYAiX0+aYDXOGAmrC/3/M7AqqSDKnWWVv07X+Zk1uFSL7cMTUYzv4lQRfohucEocn5/w==", - "requires": { - "@types/react-dom": "*", - "@types/testing-library__dom": "*", - "pretty-format": "^25.1.0" - }, - "dependencies": { - "@jest/types": { - "version": "25.5.0", - "resolved": "https://registry.npmjs.org/@jest/types/-/types-25.5.0.tgz", - "integrity": "sha512-OXD0RgQ86Tu3MazKo8bnrkDRaDXXMGUqd+kTtLtK1Zb7CRzQcaSRPPPV37SvYTdevXEBVxe0HXylEjs8ibkmCw==", - "requires": { - "@types/istanbul-lib-coverage": "^2.0.0", - "@types/istanbul-reports": "^1.1.1", - "@types/yargs": "^15.0.0", - "chalk": "^3.0.0" - } - }, - "@types/yargs": { - "version": "15.0.5", - "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-15.0.5.tgz", - "integrity": "sha512-Dk/IDOPtOgubt/IaevIUbTgV7doaKkoorvOyYM2CMwuDyP89bekI7H4xLIwunNYiK9jhCkmc6pUrJk3cj2AB9w==", - "requires": { - "@types/yargs-parser": "*" - } - }, - "ansi-styles": { - "version": "4.2.1", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz", - "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==", - "requires": { - "@types/color-name": "^1.1.1", - "color-convert": "^2.0.1" - } - }, - "chalk": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz", - "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==", - "requires": { - "ansi-styles": "^4.1.0", - "supports-color": "^7.1.0" - } - }, - "color-convert": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", - "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", - "requires": { - "color-name": "~1.1.4" - } - }, - "color-name": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", - "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==" - }, - "has-flag": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", - "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==" - }, - "pretty-format": { - "version": "25.5.0", - "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-25.5.0.tgz", - "integrity": "sha512-kbo/kq2LQ/A/is0PQwsEHM7Ca6//bGPPvU6UnsdDRSKTWxT/ru/xb88v4BJf6a69H+uTytOEsTusT9ksd/1iWQ==", - "requires": { - "@jest/types": "^25.5.0", - "ansi-regex": "^5.0.0", - "ansi-styles": "^4.0.0", - "react-is": "^16.12.0" - } - }, - "supports-color": { - "version": "7.1.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.1.0.tgz", - "integrity": "sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==", - "requires": { - "has-flag": "^4.0.0" - } - } - } - }, "@types/yargs": { "version": "13.0.9", "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.9.tgz", @@ -4239,11 +3977,6 @@ "resolved": "https://registry.npmjs.org/css-what/-/css-what-3.2.1.tgz", "integrity": "sha512-WwOrosiQTvyms+Ti5ZC5vGEK0Vod3FTt1ca+payZqvKuGJF+dq7bG63DstxtN0dpm6FxY27a/zS3Wten+gEtGw==" }, - "css.escape": { - "version": "1.5.1", - "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz", - "integrity": "sha1-QuJ9T6BK4y+TGktNQZH6nN3ul8s=" - }, "cssdb": { "version": "4.4.0", "resolved": "https://registry.npmjs.org/cssdb/-/cssdb-4.4.0.tgz", @@ -4680,11 +4413,6 @@ "esutils": "^2.0.2" } }, - "dom-accessibility-api": { - "version": "0.3.0", - "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.3.0.tgz", - "integrity": "sha512-PzwHEmsRP3IGY4gv/Ug+rMeaTIyTJvadCb+ujYXYeIylbHJezIyNToe8KfEgHTCEYyC+/bUghYOGg8yMGlZ6vA==" - }, "dom-converter": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/dom-converter/-/dom-converter-0.2.0.tgz", @@ -8327,11 +8055,6 @@ "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz", "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==" }, - "min-indent": { - "version": "1.0.1", - "resolved": "https://npm.mlabs.pl:443/min-indent/-/min-indent-1.0.1.tgz", - "integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==" - }, "mini-css-extract-plugin": { "version": "0.9.0", "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.9.0.tgz", @@ -10313,7 +10036,7 @@ }, "prettier": { "version": "2.0.5", - "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.0.5.tgz", + "resolved": "https://npm.mlabs.pl:443/prettier/-/prettier-2.0.5.tgz", "integrity": "sha512-7PtVymN48hGcO4fGjybyBSIWDsLU4H4XlvOHfq91pz9kkGlonzwTfYkaIEwiRg/dAJF9YlbsduBAgtYLi+8cFg==", "dev": true }, @@ -11165,15 +10888,6 @@ "minimatch": "3.0.4" } }, - "redent": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz", - "integrity": "sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==", - "requires": { - "indent-string": "^4.0.0", - "strip-indent": "^3.0.0" - } - }, "regenerate": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.0.tgz", @@ -12546,14 +12260,6 @@ "resolved": "https://registry.npmjs.org/strip-eof/-/strip-eof-1.0.0.tgz", "integrity": "sha1-u0P/VZim6wXYm1n80SnJgzE2Br8=" }, - "strip-indent": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz", - "integrity": "sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==", - "requires": { - "min-indent": "^1.0.0" - } - }, "strip-json-comments": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz", @@ -13328,11 +13034,6 @@ "xml-name-validator": "^3.0.0" } }, - "wait-for-expect": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/wait-for-expect/-/wait-for-expect-3.0.2.tgz", - "integrity": "sha512-cfS1+DZxuav1aBYbaO/kE06EOS8yRw7qOFoD3XtjTkYvCvh3zUvNST8DXK/nPaeqIzIv3P3kL3lRJn8iwOiSag==" - }, "walker": { "version": "1.0.7", "resolved": "https://registry.npmjs.org/walker/-/walker-1.0.7.tgz", diff --git a/package.json b/package.json index a5ee4b5..9c46b3f 100644 --- a/package.json +++ b/package.json @@ -5,9 +5,6 @@ "dependencies": { "@material-ui/core": "^4.10.0", "@material-ui/lab": "^4.0.0-alpha.56", - "@testing-library/jest-dom": "^4.2.4", - "@testing-library/react": "^9.5.0", - "@testing-library/user-event": "^7.2.1", "axios": "^0.19.2", "notistack": "^1.0.1", "react": "^16.13.1", @@ -17,9 +14,6 @@ "styled-components": "^5.1.1" }, "devDependencies": { - "@types/jest": "^24.9.1", - "@types/lodash": "^4.14.162", - "@types/node": "^12.12.54", "@types/react": "^16.9.46", "@types/react-dom": "^16.9.8", "@types/styled-components": "^5.1.2", diff --git a/src/components/CourseCard.tsx b/src/components/CourseCard.tsx index 8fae122..105452a 100644 --- a/src/components/CourseCard.tsx +++ b/src/components/CourseCard.tsx @@ -1,4 +1,4 @@ -import React, { useState, useContext, MouseEvent } from 'react'; +import React, { useState, useContext } from 'react'; import Collapse from '@material-ui/core/Collapse'; import { ReactComponent as Expand } from '../assets/expand.svg'; import { Course, Group } from '../types/index'; @@ -16,19 +16,18 @@ const CourseCardWrapper = styled.div` justify-content: center; flex-direction: column; margin-top: 10px; - border-radius: 10px; + border-radius: 10px; cursor: pointer; align-items: stretch; box-shadow: 9px 9px 8px -2px rgba(0, 0, 0, 0.59); `; - const TitleWrapper = styled.div` display: flex; - align-items: center; + align-items: center; justify-content: space-between; padding: 10px; -` +`; const BinIcon = styled(Bin)` width: 20px; @@ -59,16 +58,16 @@ const ClassGroupStyled = styled.div` `; interface ExpandIconProps { - isSelected: boolean; + selected: boolean; } -const ExpandIcon = styled(Expand) ` +const ExpandIcon = styled(Expand)` width: 20px; height: 20px; max-width: 20px; min-width: 20px; transition: 0.2s; - transform: ${({ isSelected }) => (isSelected ? 'scaleY(-1);' : 'scaleY(1);')}; + transform: ${({ selected }) => (selected ? 'scaleY(-1);' : 'scaleY(1);')}; `; const TypeClass = styled.div` @@ -102,38 +101,36 @@ const useStyles = makeStyles({ }, }); - - interface CourseCardProps { course: Course; } export const CourseCard = ({ course }: CourseCardProps) => { const classes = useStyles(); - const { addGroup, deleteFromBasket } = useContext(coursesContext)!; - const [isSelected, setSelected] = useState(false); - const groups = course.lectures === undefined ? course.classes : [...course.lectures, ...course.classes]; + const { changeGroupInBasket, deleteFromBasket } = useContext(coursesContext)!; - const onGroupClick = (group: Group, id: number) => addGroup(group, id); + const [isSelected, setSelected] = useState(false); + + const groups = [...course.lectures!, ...course.classes!]; + + const onGroupClick = (group: Group, id: number) => changeGroupInBasket(group, id); return ( deleteFromBasket(course.id)}> setSelected(!isSelected)}>{course.name} - setSelected(!isSelected)} isSelected={isSelected} /> + setSelected(!isSelected)} selected={isSelected} /> - {groups - .sort((a, b) => b.type.localeCompare(a.type)) - .map((group, index) => ( - onGroupClick(group, course.id)}> - {group.type === 'CLASS' ? 'Ćw.' : 'Wyk.'} -

- {group.time} {group.room}

{group.lecturer} -

- - ))} + {groups.map((group, index) => ( + onGroupClick(group, course.id)}> + {group.type === 'CLASS' ? 'Ćw.' : 'Wyk.'} +

+ {group.time} {group.room}

{group.lecturer} +

+ + ))} ); diff --git a/src/components/Dropdown.tsx b/src/components/Dropdown.tsx index f2e7618..4b36334 100644 --- a/src/components/Dropdown.tsx +++ b/src/components/Dropdown.tsx @@ -1,10 +1,8 @@ -import React, { useState, useContext, useEffect, MouseEvent, forwardRef } from 'react'; +import React, { useState, useContext, useEffect, MouseEvent } from 'react'; import { coursesContext } from '../contexts/CoursesProvider'; import { Course } from '../types'; import styled from 'styled-components'; - - const DropdownContainer = styled.div` position: relative; z-index: 99999999; @@ -48,30 +46,25 @@ interface DropdownProps { handleCloseDropdown: () => void; } -export const Dropdown = forwardRef(({ open, input, handleCloseDropdown }: DropdownProps, ref: any) => { - //courses - choosenCourses +export const Dropdown = ({ open, input, handleCloseDropdown }: DropdownProps) => { + + const { courses, basket, addCourseToBasket } = useContext(coursesContext)!; + const basketNames = basket.map(({ name }) => name.trim()); + const [filteredCourses, setFilteredCourses] = useState>([]); - const { courses, basket, addToBasket } = useContext(coursesContext)!; - - const sortedCourses = courses.sort((a, b) => (a.name > b.name ? 1 : -1)); - - useEffect(() => { - console.log('wut'); - }, [open, input, handleCloseDropdown]); - - useEffect(() => { - console.log('input is: ', input); - }, [input]); - - useEffect(() => { - console.log('is open: ', open); - }, [open]); + const onCourseClick = (event: MouseEvent) => { + const target = event.currentTarget; + if (target.id && target.textContent) { + const course = filteredCourses.find(({ id }) => id.toString() === target.id)!; + addCourseToBasket(course); + handleCloseDropdown(); + } + }; useEffect(() => { const filterCourses = (input: string) => { - const choosenCoursesNames = basket.map(({ name }) => name.trim()); - const filteredCourses = sortedCourses.filter( + const filteredCourses = courses.filter( ({ name }) => name .toLowerCase() @@ -82,25 +75,13 @@ export const Dropdown = forwardRef(({ open, input, handleCloseDropdown }: Dropdo .toLowerCase() .normalize('NFD') .replace(/[\u0300-\u036f]/g, ''), - ) && !choosenCoursesNames.includes(name), + ) && !basketNames.includes(name), ); setFilteredCourses(filteredCourses); }; - console.log("filtering courses"); filterCourses(input); }, [open, input, basket]); - const onCourseClick = async (event: MouseEvent) => { - const target = event.currentTarget; - if (target.id && target.textContent) { - const course = filteredCourses.find(({ id }) => id.toString() === target.id)!; - console.log('added course is'); - console.log(course); - addToBasket(course); - handleCloseDropdown(); - } - }; - return ( {open && ( @@ -114,4 +95,4 @@ export const Dropdown = forwardRef(({ open, input, handleCloseDropdown }: Dropdo )} ); -}); +}; diff --git a/src/components/Rightbar.tsx b/src/components/Rightbar.tsx index 975fef4..15bdd05 100644 --- a/src/components/Rightbar.tsx +++ b/src/components/Rightbar.tsx @@ -2,7 +2,7 @@ import React, { useContext } from 'react'; import { CourseCard } from './CourseCard'; import { coursesContext } from '../contexts/CoursesProvider'; import styled from 'styled-components'; -import { debounce } from 'lodash'; +import { debounce } from '../utils/index'; const RightbarStyled = styled.div` padding-top: 10px; @@ -46,33 +46,15 @@ const SaveButton = styled.div` `; export const Rightbar = () => { - const { courses, basket, saveBasket } = useContext(coursesContext)!; - - const getBasketGroups = () => { - const names = basket.map(({ name }) => name); - - const list = [] - - for (const basketName of names){ - const course = courses.find(({name})=>basketName===name)! - - list.push(course); - } - - console.log("asdasdsa1", list); - console.log("asdasdsa2", courses.filter(({ name }) => names.includes(name))); - return list; - }; - - const filteredCourses = getBasketGroups(); + const { selectBasketCourses, saveBasket } = useContext(coursesContext)!; + const basketCourses = selectBasketCourses(); const handleSave = debounce(() => saveBasket(), 500); - //need to insert student name from db and course maybe based on current time or from db too return ( ZAPISZ - {filteredCourses.map((course, index) => ( + {basketCourses.map((course, index) => ( ))} diff --git a/src/components/Scheduler.tsx b/src/components/Scheduler.tsx index 8ffdd93..119d965 100644 --- a/src/components/Scheduler.tsx +++ b/src/components/Scheduler.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, MouseEvent, useRef, useCallback, useLayoutEffect } from 'react'; +import React, { useEffect, useRef } from 'react'; import { useState } from 'react'; import { SchedulerEvents } from './SchedulerEvents'; import { days, hours } from '../constants/index'; @@ -11,7 +11,7 @@ const SchedulerWrapper = styled.div` padding: 10px 40px 25px 10px; border-radius: 5px; margin-right: 20px; - margin-left:20px; + margin-left: 20px; flex-direction: column; justify-content: center; align-items: center; @@ -62,18 +62,15 @@ const TableCell = styled.div` `; export const Scheduler = () => { + const cellRef = useRef(null); const [cellWidth, setCellWidth] = useState(0); - const [cellTop, setCellTop] = useState(0); const [cellHeight, setCellHeight] = useState(0); - console.log('cell height: ', cellHeight); - useEffect(() => { const handleResize = () => { if (cellRef.current) { setCellWidth(cellRef.current.getBoundingClientRect().width); - setCellTop(cellRef.current.getBoundingClientRect().top); setCellHeight(cellRef.current.getBoundingClientRect().height); } }; @@ -115,9 +112,9 @@ export const Scheduler = () => { {value} ) : indexRow === 5 ? ( - + {value} - + ) : indexRow % 2 !== 0 ? ( {value} @@ -128,7 +125,7 @@ export const Scheduler = () => { )} ))} - + diff --git a/src/components/SchedulerEvents.tsx b/src/components/SchedulerEvents.tsx index 77b80b9..11df284 100644 --- a/src/components/SchedulerEvents.tsx +++ b/src/components/SchedulerEvents.tsx @@ -1,68 +1,26 @@ -import React, { useContext, useEffect, useState, MouseEvent } from 'react'; +import React, { useContext } from 'react'; import { SchedulerRow } from './SchedulerRow'; import { coursesContext } from '../contexts/CoursesProvider'; -import { Group, Basket } from '../types'; - +import { selectGroupsToShow } from '../utils/index'; +import { ROWS_COUNT } from '../constants'; interface SchedulerEventsProps { - cellTop: number; cellWidth: number; cellHeight: number; } -export const SchedulerEvents = ({ cellTop, cellWidth, cellHeight }: SchedulerEventsProps) => { - const { basket } = useContext(coursesContext)!; - console.log(`values: cellTop: ${cellTop}, cellWidth: ${cellWidth}, cellHeight: ${cellHeight}`); - const [choosenGroupsMappedToEvents, setChoosenGroupsMappedToEvents] = useState([]); +export const SchedulerEvents = ({ cellWidth, cellHeight }: SchedulerEventsProps) => { + const { selectSchedulerEvents } = useContext(coursesContext)!; - const groupTimeToEventRowMapping: { [time: string]: number } = { - '8.15': 0, - '10.00': 1, - '11.45': 2, - '13.45': 3, - '15.30': 4, - '17.15': 5, - '18.45': 6, - }; - - - const createClassTime = (startTime:string) => { - const startTimeMapped = groupTimeToEventRowMapping[startTime]; - const endTime = Object.keys(groupTimeToEventRowMapping).find(key => groupTimeToEventRowMapping[key] === startTimeMapped + 1); - - return [startTime, endTime] - - } - - useEffect(() => { - function mapGroupTimeToEventRow(basket: Array) { - const classes = basket.map(({ classes, name }) => ({ ...classes, name })) as Array; - const lectures = basket.map(({ lecture, name }) => ({ ...lecture, name })) as Array; - const merged = [...classes, ...lectures]; - - //deleted if statement, maybe it is needed - const groupsMapped = merged.map(({ id, day, lecturer, room, time, name, type }) => ({ - id, - day, - lecturer, - room, - eventRow: groupTimeToEventRowMapping[time], - time: createClassTime(time), - name, - type, - })); - setChoosenGroupsMappedToEvents(groupsMapped); - } - mapGroupTimeToEventRow(basket); - }, [basket]); + const schedulerEvents = selectSchedulerEvents(); return (
- {[...Array(6)].map((_, index) => ( + {[...Array(ROWS_COUNT)].map((_, index) => ( group.eventRow === index)} + groups={selectGroupsToShow(schedulerEvents, index)} indexRow={index} - cellTop={ + rowTop={ index === 0 ? cellHeight / 2 : index === 1 diff --git a/src/components/SchedulerRow.tsx b/src/components/SchedulerRow.tsx index 7bc82ce..c1cbd09 100644 --- a/src/components/SchedulerRow.tsx +++ b/src/components/SchedulerRow.tsx @@ -1,9 +1,10 @@ import React, { MouseEvent, useState } from 'react'; -import { Group, GroupType } from '../types'; +import { GroupType, SchedulerEvent } from '../types'; import styled from 'styled-components/macro'; import Popover from '@material-ui/core/Popover'; import Typography from '@material-ui/core/Typography'; import { makeStyles, createStyles, Theme } from '@material-ui/core/styles'; +import { MONDAY_TO_FRIDAY } from '../constants'; const useStyles = makeStyles((theme: Theme) => createStyles({ @@ -18,17 +19,17 @@ const useStyles = makeStyles((theme: Theme) => }), ); -interface ClassesWrapperProps { +interface SchedulerEventsWrapperProps { eventIndex: number; - cellTop: number; + rowTop: number; cellWidth: number; cellHeight: number; } -const ClassesWrapper = styled.div` +const SchedulerEventsWrapper = styled.div` position: absolute; display: flex; - top: ${({ cellTop }) => cellTop}px; + top: ${({ rowTop }) => rowTop}px; left: ${({ cellWidth, eventIndex }) => (cellWidth * 1) / 5 + 4 + cellWidth * eventIndex}px; width: ${({ cellWidth }) => cellWidth - 10}px; height: ${({ cellHeight }) => cellHeight * 3}px; @@ -36,13 +37,13 @@ const ClassesWrapper = styled.div` padding-left: 10px; `; -interface ClassesProps { +interface SchedulerEventProps { cellWidth: number; cellHeight: number; groupType: GroupType; } -const Classes = styled.div` +const StyledSchedulerEvent = styled.div` display: flex; justify-content: center; align-items: center; @@ -51,28 +52,27 @@ const Classes = styled.div` line-height: normal; border-radius: 10px; height: ${({ cellHeight }) => cellHeight * 3}px; - width: ${({ cellWidth }) => cellWidth *3/4}px; + width: ${({ cellWidth }) => (cellWidth * 3) / 4}px; margin-right: 5px; padding: 5px 5px 5px 5px; text-align: center; background-color: ${({ groupType }) => (groupType === 'CLASS' ? '#FFDC61' : '#9ed3ff')}; - box-shadow: 3px 3px 3px 0px rgba(0,0,0,0.75); - + box-shadow: 3px 3px 3px 0px rgba(0, 0, 0, 0.75); `; const StyledTypography = styled(Typography)` -background-color:white; -` + background-color: white; +`; interface SchedulerRowProps { - groups: Array; + groups: Array; indexRow: number; - cellTop: number; + rowTop: number; cellWidth: number; cellHeight: number; } -export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth, cellHeight }: SchedulerRowProps) => { +export const SchedulerRow = ({ groups, indexRow, rowTop, cellWidth, cellHeight }: SchedulerRowProps) => { const classes = useStyles(); const [anchorEl, setAnchorEl] = React.useState(null); const [popoverId, setPopoverId] = useState(null); @@ -92,10 +92,10 @@ export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth, cellHeight return (
- {[...Array(5)].map((_, eventIndex) => ( - ( + group.day === eventIndex && ( <> - { - console.log('group: ', group); - }} +

{groups[index].name}

-

{groups[index].time[0]} - {groups[index].time[1]}

+

+ {groups[index].time[0]} - {groups[index].time[1]} +

- + ), )} - + ))}
); diff --git a/src/constants/index.ts b/src/constants/index.ts index 7898ca9..8d10f9f 100644 --- a/src/constants/index.ts +++ b/src/constants/index.ts @@ -1,37 +1,44 @@ -export const days = [ - "", - "Poniedziałek", - "Wtorek", - "Środa", - "Czwartek", - "Piątek", -]; +export const days = ['', 'Poniedziałek', 'Wtorek', 'Środa', 'Czwartek', 'Piątek']; export const hours = [ - "8:00", - "", - "9:00", - "", - "10:00", - "", - "11:00", - "", - "12:00", - "", - "13:00", - "", - "14:00", - "", - "15:00", - "", - "16:00", - "", - "17:00", - "", - "18:00", - "", - "19:00", - "", + '8:00', + '', + '9:00', + '', + '10:00', + '', + '11:00', + '', + '12:00', + '', + '13:00', + '', + '14:00', + '', + '15:00', + '', + '16:00', + '', + '17:00', + '', + '18:00', + '', + '19:00', + '', ]; +export const MONDAY_TO_FRIDAY = 5; -export const MONDAY_TO_FRIDAY = 5; \ No newline at end of file +//added 12:00, one of lectures starts at that time +export const courseStartTimeToEventRow: { [time: string]: number } = { + '8.15': 0, + '10.00': 1, + '11.45': 2, + '12.00': 2, + '13.45': 3, + '15.30': 4, + '17.15': 5, + '18.45': 6, +}; + +//groupTimeToEventRowMapping - 1; +export const ROWS_COUNT = 6; diff --git a/src/contexts/CASProvider.tsx b/src/contexts/CASProvider.tsx index 89e4866..b27d29d 100644 --- a/src/contexts/CASProvider.tsx +++ b/src/contexts/CASProvider.tsx @@ -5,6 +5,7 @@ import axios from 'axios'; export interface CASContext { user?: User; logout: () => void; + token?: string | null; } export const CASContext = createContext(undefined); @@ -15,6 +16,7 @@ export interface CASProviderProps { export const CASProvider = ({ children }: CASProviderProps) => { const [user, setUser] = useState(undefined); + const [token, setToken] = useState(null); useEffect(() => { login(); }, []); @@ -29,10 +31,9 @@ export const CASProvider = ({ children }: CASProviderProps) => { if (!sessionStorage.getItem('userToken')) { const { data: token } = await axios.get(`${process.env.REACT_APP_API_URL}/token?ticket=${ticket}`); sessionStorage.setItem('userToken', token); - setUser({ ...user, token }); } const token = sessionStorage.getItem('userToken'); - setUser({ ...user, token }); + setToken(token); } catch (e) { console.log(e); } @@ -50,5 +51,5 @@ export const CASProvider = ({ children }: CASProviderProps) => { window.location.replace(`https://cas.amu.edu.pl/cas/login?service=${window.origin}&locale=pl`); } - return {children}; + return {children}; }; diff --git a/src/contexts/CoursesProvider.tsx b/src/contexts/CoursesProvider.tsx index 886958a..f43d1aa 100644 --- a/src/contexts/CoursesProvider.tsx +++ b/src/contexts/CoursesProvider.tsx @@ -1,16 +1,18 @@ import React, { useState, createContext, useEffect, ReactNode, useContext } from 'react'; -import { Course, Group, Basket, GroupType } from '../types'; -import axios from 'axios'; -import { CASContext } from './CASProvider'; +import { Course, Group, Basket, GroupType, SchedulerEvent } from '../types'; import { useSnackbar } from 'notistack'; - +import { createClassTime } from '../utils'; +import { axiosInstance } from '../utils/axiosInstance'; interface CourseContext { courses: Array; basket: Array; - addToBasket: (courses: Course) => void; - addGroup: (group: Group, id: number) => void; + addCourseToBasket: (courses: Course) => void; + changeGroupInBasket: (group: Group, id: number) => void; deleteFromBasket: (id: number) => void; saveBasket: () => void; + selectSchedulerEvents: () => Array; + selectBasketNames: () => Array; + selectBasketCourses: () => Array; } export const coursesContext = createContext(undefined); @@ -19,28 +21,48 @@ interface CoursesProviderProps { } export const CoursesProvider = ({ children }: CoursesProviderProps) => { + const { enqueueSnackbar } = useSnackbar(); + const { closeSnackbar } = useSnackbar(); //fetch courses with groups const [courses, setCourses] = useState>([]); const [basket, setBasket] = useState>([]); - const { enqueueSnackbar } = useSnackbar(); - const { closeSnackbar } = useSnackbar(); - - const CAS = useContext(CASContext)!; - const token = CAS?.user?.token; - - const selectBasketIds = (basket: Array) => { - const classesIds = basket.map((course) => course.classes.id); - const lecturesIds = basket.map((course) => course?.lecture?.id); - - return lecturesIds[0] === undefined ? classesIds : [...classesIds, ...lecturesIds]; + const selectBasketIds = () => { + const classesIds = basket.map((course) => course?.classes?.id).filter((course) => course !== undefined); + const lecturesIds = basket.map((course) => course?.lecture?.id).filter((course) => course !== undefined); + return [...classesIds, ...lecturesIds]; }; - const addToBasket = (course: Course) => { + const selectBasketNames = () => basket.map(({ name }) => name); + + const selectBasketCourses = () => { + const basketNames = selectBasketNames(); + return basketNames.reduce((sum, basketName) => { + const course = courses.find(({ name }) => basketName === name); + return course === undefined ? sum : [...sum, course]; + }, [] as Array); + }; + + const selectSchedulerEvents = () => { + return basket.reduce((res, el) => { + const { name } = el; + if (el.classes) { + const { time } = el.classes; + res.push({ ...el.classes, name, time: createClassTime(time) }); + } + if (el.lecture) { + const { time } = el.lecture; + res.push({ ...el.lecture, name, time: createClassTime(time) }); + } + return res; + }, [] as Array); + }; + + const addCourseToBasket = (course: Course) => { const courseToBasket: Basket = { name: course.name, id: course.id, - classes: course.classes[0], + classes: course.classes !== undefined ? course.classes[0] : undefined, lecture: course.lectures !== undefined ? course.lectures[0] : undefined, }; setBasket([...basket, courseToBasket]); @@ -49,18 +71,7 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => { const deleteFromBasket = (id: number) => setBasket(basket.filter((course) => course.id !== id)); const saveBasket = async () => { - const basketIds = selectBasketIds(basket); - - const config = { - method: 'post' as const, - url: `${process.env.REACT_APP_API_URL}/api/v1/commisions/add?`, - headers: { - Authorization: `Bearer ${token}`, - 'Content-Type': 'application/json', - }, - data: JSON.stringify(basketIds), - }; - + const basketIds = selectBasketIds(); const action = (key: any) => ( <>