refactor
This commit is contained in:
parent
9a88736584
commit
05fffbe378
303
package-lock.json
generated
303
package-lock.json
generated
@ -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",
|
||||
|
@ -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",
|
||||
|
@ -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) <ExpandIconProps>`
|
||||
const ExpandIcon = styled(Expand)<ExpandIconProps>`
|
||||
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 (
|
||||
<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) => (
|
||||
<ClassGroupStyled key={index} onClick={() => onGroupClick(group, course.id)}>
|
||||
<TypeClass>{group.type === 'CLASS' ? 'Ćw.' : 'Wyk.'}</TypeClass>
|
||||
<p>
|
||||
{group.time} {group.room} <br></br> {group.lecturer}
|
||||
</p>
|
||||
</ClassGroupStyled>
|
||||
))}
|
||||
{groups.map((group, index) => (
|
||||
<ClassGroupStyled key={index} onClick={() => onGroupClick(group, course.id)}>
|
||||
<TypeClass>{group.type === 'CLASS' ? 'Ćw.' : 'Wyk.'}</TypeClass>
|
||||
<p>
|
||||
{group.time} {group.room} <br></br> {group.lecturer}
|
||||
</p>
|
||||
</ClassGroupStyled>
|
||||
))}
|
||||
</Collapse>
|
||||
</CourseCardWrapper>
|
||||
);
|
||||
|
@ -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>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
@ -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>
|
||||
|
@ -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<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);
|
||||
}
|
||||
};
|
||||
@ -115,9 +112,9 @@ export const Scheduler = () => {
|
||||
{value}
|
||||
</TableCell>
|
||||
) : indexRow === 5 ? (
|
||||
<TableCell style={{ borderBottom: '2px solid rgb(242, 243, 245)' }} key={`${indexRow}${indexCell}`}>
|
||||
<TableCell style={{ borderBottom: '2px solid rgb(242, 243, 245)' }} key={`${indexRow}${indexCell}`}>
|
||||
{value}
|
||||
</TableCell>
|
||||
</TableCell>
|
||||
) : indexRow % 2 !== 0 ? (
|
||||
<TableCell style={{ borderBottom: '2px solid rgb(242, 243, 245)' }} key={`${indexRow}${indexCell}`}>
|
||||
{value}
|
||||
@ -128,7 +125,7 @@ export const Scheduler = () => {
|
||||
)}
|
||||
</TableRow>
|
||||
))}
|
||||
<SchedulerEvents cellTop={cellTop} cellWidth={cellWidth} cellHeight={cellHeight} />
|
||||
<SchedulerEvents cellWidth={cellWidth} cellHeight={cellHeight} />
|
||||
</TableBody>
|
||||
</SchedulerWrapper>
|
||||
</>
|
||||
|
@ -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
|
||||
|
@ -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);
|
||||
|
||||
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<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>
|
||||
);
|
||||
|
@ -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;
|
||||
//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;
|
||||
|
@ -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>;
|
||||
};
|
||||
|
@ -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]);
|
||||
getNewestTimetable();
|
||||
}, []);
|
||||
|
||||
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>
|
||||
);
|
||||
|
@ -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
|
@ -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;
|
||||
}
|
||||
|
15
src/utils/axiosInstance.ts
Normal file
15
src/utils/axiosInstance.ts
Normal 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
80
src/utils/index.ts
Normal 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;
|
||||
};
|
Loading…
Reference in New Issue
Block a user