This commit is contained in:
Maciek Głowacki 2020-11-21 04:02:38 +01:00
parent 9a88736584
commit 05fffbe378
15 changed files with 303 additions and 594 deletions

303
package-lock.json generated
View File

@ -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",

View File

@ -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",

View File

@ -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';
@ -22,13 +22,12 @@ const CourseCardWrapper = styled.div`
box-shadow: 9px 9px 8px -2px rgba(0, 0, 0, 0.59);
`;
const TitleWrapper = styled.div`
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px;
`
`;
const BinIcon = styled(Bin)`
width: 20px;
@ -59,7 +58,7 @@ const ClassGroupStyled = styled.div`
`;
interface ExpandIconProps {
isSelected: boolean;
selected: boolean;
}
const ExpandIcon = styled(Expand)<ExpandIconProps>`
@ -68,7 +67,7 @@ const ExpandIcon = styled(Expand) <ExpandIconProps>`
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,31 +101,29 @@ 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 (
<CourseCardWrapper>
<TitleWrapper>
<BinIcon onClick={() => deleteFromBasket(course.id)}></BinIcon>
<CourseName onClick={() => setSelected(!isSelected)}>{course.name}</CourseName>
<ExpandIcon onClick={() => setSelected(!isSelected)} isSelected={isSelected} />
<ExpandIcon onClick={() => setSelected(!isSelected)} selected={isSelected} />
</TitleWrapper>
<Collapse className={classes.expanded} in={isSelected} timeout="auto" unmountOnExit>
{groups
.sort((a, b) => b.type.localeCompare(a.type))
.map((group, index) => (
{groups.map((group, index) => (
<ClassGroupStyled key={index} onClick={() => onGroupClick(group, course.id)}>
<TypeClass>{group.type === 'CLASS' ? 'Ćw.' : 'Wyk.'}</TypeClass>
<p>

View File

@ -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<Array<Course>>([]);
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 (
<DropdownContainer>
{open && (
@ -114,4 +95,4 @@ export const Dropdown = forwardRef(({ open, input, handleCloseDropdown }: Dropdo
)}
</DropdownContainer>
);
});
};

View File

@ -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 (
<RightbarStyled>
<SaveButton onClick={handleSave}>ZAPISZ</SaveButton>
{filteredCourses.map((course, index) => (
{basketCourses.map((course, index) => (
<CourseCard course={course} key={index} />
))}
</RightbarStyled>

View File

@ -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';
@ -62,18 +62,15 @@ const TableCell = styled.div<TableCellProps>`
`;
export const Scheduler = () => {
const cellRef = useRef<HTMLDivElement>(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);
}
};
@ -128,7 +125,7 @@ export const Scheduler = () => {
)}
</TableRow>
))}
<SchedulerEvents cellTop={cellTop} cellWidth={cellWidth} cellHeight={cellHeight} />
<SchedulerEvents cellWidth={cellWidth} cellHeight={cellHeight} />
</TableBody>
</SchedulerWrapper>
</>

View File

@ -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<any>([]);
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<Basket>) {
const classes = basket.map(({ classes, name }) => ({ ...classes, name })) as Array<Group & { name: string }>;
const lectures = basket.map(({ lecture, name }) => ({ ...lecture, name })) as Array<Group & { name: string }>;
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 (
<div>
{[...Array(6)].map((_, index) => (
{[...Array(ROWS_COUNT)].map((_, index) => (
<SchedulerRow
key={index}
groups={choosenGroupsMappedToEvents.filter((group: any) => group.eventRow === index)}
groups={selectGroupsToShow(schedulerEvents, index)}
indexRow={index}
cellTop={
rowTop={
index === 0
? cellHeight / 2
: index === 1

View File

@ -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<ClassesWrapperProps>`
const SchedulerEventsWrapper = styled.div<SchedulerEventsWrapperProps>`
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<ClassesWrapperProps>`
padding-left: 10px;
`;
interface ClassesProps {
interface SchedulerEventProps {
cellWidth: number;
cellHeight: number;
groupType: GroupType;
}
const Classes = styled.div<ClassesProps>`
const StyledSchedulerEvent = styled.div<SchedulerEventProps>`
display: flex;
justify-content: center;
align-items: center;
@ -51,28 +52,27 @@ const Classes = styled.div<ClassesProps>`
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);
`;
const StyledTypography = styled(Typography)`
background-color: white;
`
`;
interface SchedulerRowProps {
groups: Array<Group & { name: string }>;
groups: Array<SchedulerEvent>;
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<HTMLDivElement | null>(null);
const [popoverId, setPopoverId] = useState<string | null>(null);
@ -92,10 +92,10 @@ export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth, cellHeight
return (
<div>
{[...Array(5)].map((_, eventIndex) => (
<ClassesWrapper
{[...Array(MONDAY_TO_FRIDAY)].map((_, eventIndex) => (
<SchedulerEventsWrapper
eventIndex={eventIndex}
cellTop={cellTop}
rowTop={rowTop}
cellWidth={cellWidth}
cellHeight={cellHeight}
key={eventIndex}
@ -105,10 +105,7 @@ export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth, cellHeight
(group, index) =>
group.day === eventIndex && (
<>
<Classes
onClick={() => {
console.log('group: ', group);
}}
<StyledSchedulerEvent
groupType={group.type}
cellWidth={cellWidth}
cellHeight={cellHeight}
@ -121,9 +118,11 @@ export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth, cellHeight
>
<div>
<p style={{ fontWeight: 700 }}>{groups[index].name}</p>
<p>{groups[index].time[0]} - {groups[index].time[1]}</p>
<p>
{groups[index].time[0]} - {groups[index].time[1]}
</p>
</div>
</Classes>
</StyledSchedulerEvent>
<Popover
id={`mouse-over-popover`}
className={classes.popover}
@ -152,7 +151,7 @@ export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth, cellHeight
</>
),
)}
</ClassesWrapper>
</SchedulerEventsWrapper>
))}
</div>
);

View File

@ -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;
//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;

View File

@ -5,6 +5,7 @@ import axios from 'axios';
export interface CASContext {
user?: User;
logout: () => void;
token?: string | null;
}
export const CASContext = createContext<CASContext | undefined>(undefined);
@ -15,6 +16,7 @@ export interface CASProviderProps {
export const CASProvider = ({ children }: CASProviderProps) => {
const [user, setUser] = useState<User | undefined>(undefined);
const [token, setToken] = useState<string | null>(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 <CASContext.Provider value={{ user, logout }}>{children}</CASContext.Provider>;
return <CASContext.Provider value={{ user, token, logout }}>{children}</CASContext.Provider>;
};

View File

@ -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<Course>;
basket: Array<Basket>;
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<SchedulerEvent>;
selectBasketNames: () => Array<string>;
selectBasketCourses: () => Array<Course>;
}
export const coursesContext = createContext<CourseContext | undefined>(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<Array<Course>>([]);
const [basket, setBasket] = useState<Array<Basket>>([]);
const { enqueueSnackbar } = useSnackbar();
const { closeSnackbar } = useSnackbar();
const CAS = useContext(CASContext)!;
const token = CAS?.user?.token;
const selectBasketIds = (basket: Array<Basket>) => {
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<Course>);
};
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<SchedulerEvent>);
};
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) => (
<>
<button
@ -74,12 +85,13 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => {
);
try {
await axios.request(config);
await axiosInstance.post(`${process.env.REACT_APP_API_URL}/api/v1/commisions/add?`, JSON.stringify(basketIds));
enqueueSnackbar('Plan został zapisany', {
variant: 'success',
action,
});
} catch (e) {
console.log('error: ', e);
enqueueSnackbar('Zapisywanie planu nie powiodło się', {
variant: 'error',
action,
@ -87,7 +99,7 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => {
}
};
const addGroup = (choosenGroup: Group, id: number) => {
const changeGroupInBasket = (choosenGroup: Group, id: number) => {
const basketCourse = basket.filter((course) => course.id === id)[0];
const { type } = choosenGroup;
if (type === GroupType.CLASS) {
@ -102,18 +114,11 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => {
};
const getNewestTimetable = async () => {
const config = {
method: 'get' as const,
url: `${process.env.REACT_APP_API_URL}/api/v1/assignments/getCurrentAssignments`,
headers: {
Authorization: `Bearer ${token}`,
},
};
try {
let { data: basket } = await axios.request(config);
if (basket === '') {
basket = [];
}
const { data } = await axiosInstance.get(
`${process.env.REACT_APP_API_URL}/api/v1/assignments/getCurrentAssignments`,
);
const basket = data === '' ? [] : data;
setBasket(basket);
} catch (e) {
console.log(e);
@ -122,10 +127,11 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => {
const fetchClasses = async () => {
try {
const { data: courses } = await axios.get<Array<Course>>(
const { data: courses } = await axiosInstance.get<Array<Course>>(
`${process.env.REACT_APP_API_URL}/api/v1/courses/getCoursesWithGroups`,
);
setCourses(courses);
const sortedCourses = courses.sort((a, b) => (a.name > b.name ? 1 : -1));
setCourses(sortedCourses);
} catch (e) {
console.log(e);
}
@ -133,13 +139,23 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => {
useEffect(() => {
fetchClasses();
if (token) {
getNewestTimetable();
}
}, [token]);
}, []);
return (
<coursesContext.Provider value={{ courses, basket, addToBasket, addGroup, deleteFromBasket, saveBasket }}>
<coursesContext.Provider
value={{
courses,
basket,
addCourseToBasket,
changeGroupInBasket,
deleteFromBasket,
saveBasket,
selectSchedulerEvents,
selectBasketNames,
selectBasketCourses,
}}
>
{children}
</coursesContext.Provider>
);

View File

@ -1,29 +0,0 @@
// import { Group, Course } from '../types';
export enum Types {
addToBasket = 'ADD_CHOOSEN_COURSE',
removeChoosenCourse = 'REMOVE_CHOOSEN_COURSE',
addGroup = 'ADD_CHOOSEN_GROUP',
removeChoosenGroup = 'REMOVE_CHOOSEN_GROUP',
}
// type ChoosenCoursesPayload = {
// [Types.addToBasket]: {};
// };
// type ChoosenGroupsPayload = {
// [Types.Create]: {
// id: number;
// name: string;
// price: number;
// };
// };
// export const choosenGroupsReducer = (state, action) => {
// switch (action.type) {
// case Types.addGroup:
// return add;
// }
// };
//https://dev.to/elisealcala/react-context-with-usereducer-and-typescript-4obm

View File

@ -7,7 +7,7 @@ export interface Basket {
id: number;
name: string;
lecture?: Group;
classes: Group;
classes?: Group;
}
export interface Group {
@ -24,11 +24,21 @@ export interface Course {
id: number;
name: string;
lectures?: Array<Group>;
classes: Array<Group>;
classes?: Array<Group>;
}
export interface User {
name?: string;
surname?: string;
token: string | null;
}
export interface SchedulerEvent {
id: number;
day: number;
time: [string, string];
lecturer: string;
room: string;
type: GroupType;
capacity?: number;
name: string;
}

View File

@ -0,0 +1,15 @@
import axios from 'axios';
export const axiosInstance = axios.create();
axiosInstance.interceptors.request.use(
(config) => {
const token = sessionStorage.getItem('userToken');
config.headers['Authorization'] = 'Bearer ' + token;
config.headers['Content-Type'] = 'application/json';
return config;
},
(error) => {
Promise.reject(error);
},
);

80
src/utils/index.ts Normal file
View File

@ -0,0 +1,80 @@
import { courseStartTimeToEventRow } from '../constants/index';
import { SchedulerEvent } from '../types';
export const createClassTime = (startTime: string): [string, string] => {
const startTimeMapped = courseStartTimeToEventRow[startTime];
const endTime = Object.keys(courseStartTimeToEventRow).find(
(key) => courseStartTimeToEventRow[key] === startTimeMapped + 1,
)!;
return [startTime, endTime];
};
export const selectGroupsToShow = (schedulerEvents: Array<SchedulerEvent>, index: number) => {
return schedulerEvents.filter(({ time }: { time: [string, string] }) => courseStartTimeToEventRow[time[0]] === index);
};
type Procedure = (...args: any[]) => any;
interface Debounce {
(...args: any[]): any;
clear: () => void;
flush: () => void;
}
export const debounce = (func: Procedure, wait: number, immediate: boolean = false) => {
let timeout: number | null;
let args: any;
let context: any;
let result: any;
const later = () => {
timeout = null;
if (!immediate) {
result = func.apply(context, args);
context = args = null;
}
};
const debouncedFunc: Procedure = function (this: any) {
context = this;
args = arguments;
const callNow = immediate && !timeout;
if (!timeout) {
timeout = window.setTimeout(later, wait);
}
if (callNow) {
result = func.apply(context, args);
context = args = null;
}
return result;
};
const clear = () => {
if (timeout) {
clearTimeout(timeout);
timeout = null;
}
};
const flush = () => {
if (timeout) {
result = func.apply(context, args);
context = args = null;
clearTimeout(timeout);
timeout = null;
}
};
const debounced: Debounce = (() => {
const f: any = debouncedFunc;
f.clear = clear;
f.flush = flush;
return f;
})();
return debounced;
};