y0rune/frontend
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

refactor

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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", "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz",
"integrity": "sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==" "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": { "@svgr/babel-plugin-add-jsx-attribute": {
"version": "4.2.0", "version": "4.2.0",
"resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-4.2.0.tgz", "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" "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": { "@types/babel__core": {
"version": "7.1.7", "version": "7.1.7",
"resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.1.7.tgz", "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.1.7.tgz",
@ -1794,26 +1640,11 @@
"@types/istanbul-lib-report": "*" "@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": { "@types/json-schema": {
"version": "7.0.5", "version": "7.0.5",
"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.5.tgz", "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.5.tgz",
"integrity": "sha512-7+2BITlgjgDhH0vvwZU/HZJVyk+2XUlvxXe8dFMedNX/aMkaOq++rMAFXc0tM7ij15QaWlbdQASBR9dihi+bDQ==" "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": { "@types/minimatch": {
"version": "3.0.3", "version": "3.0.3",
"resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.3.tgz", "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.3.tgz",
@ -1859,6 +1690,7 @@
"version": "16.9.8", "version": "16.9.8",
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-16.9.8.tgz", "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-16.9.8.tgz",
"integrity": "sha512-ykkPQ+5nFknnlU6lDd947WbQ6TE3NNzbQAkInC2EKY1qeYdTKp7onFusmYZb+ityzx2YviqT6BXSu+LyWWJwcA==", "integrity": "sha512-ykkPQ+5nFknnlU6lDd947WbQ6TE3NNzbQAkInC2EKY1qeYdTKp7onFusmYZb+ityzx2YviqT6BXSu+LyWWJwcA==",
"dev": true,
"requires": { "requires": {
"@types/react": "*" "@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": { "@types/yargs": {
"version": "13.0.9", "version": "13.0.9",
"resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.9.tgz", "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", "resolved": "https://registry.npmjs.org/css-what/-/css-what-3.2.1.tgz",
"integrity": "sha512-WwOrosiQTvyms+Ti5ZC5vGEK0Vod3FTt1ca+payZqvKuGJF+dq7bG63DstxtN0dpm6FxY27a/zS3Wten+gEtGw==" "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": { "cssdb": {
"version": "4.4.0", "version": "4.4.0",
"resolved": "https://registry.npmjs.org/cssdb/-/cssdb-4.4.0.tgz", "resolved": "https://registry.npmjs.org/cssdb/-/cssdb-4.4.0.tgz",
@ -4680,11 +4413,6 @@
"esutils": "^2.0.2" "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": { "dom-converter": {
"version": "0.2.0", "version": "0.2.0",
"resolved": "https://registry.npmjs.org/dom-converter/-/dom-converter-0.2.0.tgz", "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", "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
"integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==" "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": { "mini-css-extract-plugin": {
"version": "0.9.0", "version": "0.9.0",
"resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.9.0.tgz", "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.9.0.tgz",
@ -10313,7 +10036,7 @@
}, },
"prettier": { "prettier": {
"version": "2.0.5", "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==", "integrity": "sha512-7PtVymN48hGcO4fGjybyBSIWDsLU4H4XlvOHfq91pz9kkGlonzwTfYkaIEwiRg/dAJF9YlbsduBAgtYLi+8cFg==",
"dev": true "dev": true
}, },
@ -11165,15 +10888,6 @@
"minimatch": "3.0.4" "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": { "regenerate": {
"version": "1.4.0", "version": "1.4.0",
"resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.0.tgz", "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", "resolved": "https://registry.npmjs.org/strip-eof/-/strip-eof-1.0.0.tgz",
"integrity": "sha1-u0P/VZim6wXYm1n80SnJgzE2Br8=" "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": { "strip-json-comments": {
"version": "3.1.1", "version": "3.1.1",
"resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz", "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" "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": { "walker": {
"version": "1.0.7", "version": "1.0.7",
"resolved": "https://registry.npmjs.org/walker/-/walker-1.0.7.tgz", "resolved": "https://registry.npmjs.org/walker/-/walker-1.0.7.tgz",

6
package.json
View File

@ -5,9 +5,6 @@
"dependencies": { "dependencies": {
"@material-ui/core": "^4.10.0", "@material-ui/core": "^4.10.0",
"@material-ui/lab": "^4.0.0-alpha.56", "@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", "axios": "^0.19.2",
"notistack": "^1.0.1", "notistack": "^1.0.1",
"react": "^16.13.1", "react": "^16.13.1",
@ -17,9 +14,6 @@
"styled-components": "^5.1.1" "styled-components": "^5.1.1"
}, },
"devDependencies": { "devDependencies": {
"@types/jest": "^24.9.1",
"@types/lodash": "^4.14.162",
"@types/node": "^12.12.54",
"@types/react": "^16.9.46", "@types/react": "^16.9.46",
"@types/react-dom": "^16.9.8", "@types/react-dom": "^16.9.8",
"@types/styled-components": "^5.1.2", "@types/styled-components": "^5.1.2",

47
src/components/CourseCard.tsx
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 Collapse from '@material-ui/core/Collapse';
import { ReactComponent as Expand } from '../assets/expand.svg'; import { ReactComponent as Expand } from '../assets/expand.svg';
import { Course, Group } from '../types/index'; import { Course, Group } from '../types/index';
@ -16,19 +16,18 @@ const CourseCardWrapper = styled.div`
justify-content: center; justify-content: center;
flex-direction: column; flex-direction: column;
margin-top: 10px; margin-top: 10px;
border-radius: 10px; border-radius: 10px;
cursor: pointer; cursor: pointer;
align-items: stretch; align-items: stretch;
box-shadow: 9px 9px 8px -2px rgba(0, 0, 0, 0.59); box-shadow: 9px 9px 8px -2px rgba(0, 0, 0, 0.59);
`; `;
const TitleWrapper = styled.div` const TitleWrapper = styled.div`
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 10px; padding: 10px;
` `;
const BinIcon = styled(Bin)` const BinIcon = styled(Bin)`
width: 20px; width: 20px;
@ -59,16 +58,16 @@ const ClassGroupStyled = styled.div`
`; `;
interface ExpandIconProps { interface ExpandIconProps {
isSelected: boolean; selected: boolean;
} }
const ExpandIcon = styled(Expand) <ExpandIconProps>` const ExpandIcon = styled(Expand)<ExpandIconProps>`
width: 20px; width: 20px;
height: 20px; height: 20px;
max-width: 20px; max-width: 20px;
min-width: 20px; min-width: 20px;
transition: 0.2s; transition: 0.2s;
transform: ${({ isSelected }) => (isSelected ? 'scaleY(-1);' : 'scaleY(1);')}; transform: ${({ selected }) => (selected ? 'scaleY(-1);' : 'scaleY(1);')};
`; `;
const TypeClass = styled.div` const TypeClass = styled.div`
@ -102,38 +101,36 @@ const useStyles = makeStyles({
}, },
}); });
interface CourseCardProps { interface CourseCardProps {
course: Course; course: Course;
} }
export const CourseCard = ({ course }: CourseCardProps) => { export const CourseCard = ({ course }: CourseCardProps) => {
const classes = useStyles(); const classes = useStyles();
const { addGroup, deleteFromBasket } = useContext(coursesContext)!; const { changeGroupInBasket, deleteFromBasket } = useContext(coursesContext)!;
const [isSelected, setSelected] = useState(false);
const groups = course.lectures === undefined ? course.classes : [...course.lectures, ...course.classes];
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 ( return (
<CourseCardWrapper> <CourseCardWrapper>
<TitleWrapper> <TitleWrapper>
<BinIcon onClick={() => deleteFromBasket(course.id)}></BinIcon> <BinIcon onClick={() => deleteFromBasket(course.id)}></BinIcon>
<CourseName onClick={() => setSelected(!isSelected)}>{course.name}</CourseName> <CourseName onClick={() => setSelected(!isSelected)}>{course.name}</CourseName>
<ExpandIcon onClick={() => setSelected(!isSelected)} isSelected={isSelected} /> <ExpandIcon onClick={() => setSelected(!isSelected)} selected={isSelected} />
</TitleWrapper> </TitleWrapper>
<Collapse className={classes.expanded} in={isSelected} timeout="auto" unmountOnExit> <Collapse className={classes.expanded} in={isSelected} timeout="auto" unmountOnExit>
{groups {groups.map((group, index) => (
.sort((a, b) => b.type.localeCompare(a.type)) <ClassGroupStyled key={index} onClick={() => onGroupClick(group, course.id)}>
.map((group, index) => ( <TypeClass>{group.type === 'CLASS' ? 'Ćw.' : 'Wyk.'}</TypeClass>
<ClassGroupStyled key={index} onClick={() => onGroupClick(group, course.id)}> <p>
<TypeClass>{group.type === 'CLASS' ? 'Ćw.' : 'Wyk.'}</TypeClass> {group.time} {group.room} <br></br> {group.lecturer}
<p> </p>
{group.time} {group.room} <br></br> {group.lecturer} </ClassGroupStyled>
</p> ))}
</ClassGroupStyled>
))}
</Collapse> </Collapse>
</CourseCardWrapper> </CourseCardWrapper>
); );

53
src/components/Dropdown.tsx
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 { coursesContext } from '../contexts/CoursesProvider';
import { Course } from '../types'; import { Course } from '../types';
import styled from 'styled-components'; import styled from 'styled-components';
const DropdownContainer = styled.div` const DropdownContainer = styled.div`
position: relative; position: relative;
z-index: 99999999; z-index: 99999999;
@ -48,30 +46,25 @@ interface DropdownProps {
handleCloseDropdown: () => void; handleCloseDropdown: () => void;
} }
export const Dropdown = forwardRef(({ open, input, handleCloseDropdown }: DropdownProps, ref: any) => { export const Dropdown = ({ open, input, handleCloseDropdown }: DropdownProps) => {
//courses - choosenCourses
const { courses, basket, addCourseToBasket } = useContext(coursesContext)!;
const basketNames = basket.map(({ name }) => name.trim());
const [filteredCourses, setFilteredCourses] = useState<Array<Course>>([]); const [filteredCourses, setFilteredCourses] = useState<Array<Course>>([]);
const { courses, basket, addToBasket } = useContext(coursesContext)!; const onCourseClick = (event: MouseEvent) => {
const target = event.currentTarget;
const sortedCourses = courses.sort((a, b) => (a.name > b.name ? 1 : -1)); if (target.id && target.textContent) {
const course = filteredCourses.find(({ id }) => id.toString() === target.id)!;
useEffect(() => { addCourseToBasket(course);
console.log('wut'); handleCloseDropdown();
}, [open, input, handleCloseDropdown]); }
};
useEffect(() => {
console.log('input is: ', input);
}, [input]);
useEffect(() => {
console.log('is open: ', open);
}, [open]);
useEffect(() => { useEffect(() => {
const filterCourses = (input: string) => { const filterCourses = (input: string) => {
const choosenCoursesNames = basket.map(({ name }) => name.trim()); const filteredCourses = courses.filter(
const filteredCourses = sortedCourses.filter(
({ name }) => ({ name }) =>
name name
.toLowerCase() .toLowerCase()
@ -82,25 +75,13 @@ export const Dropdown = forwardRef(({ open, input, handleCloseDropdown }: Dropdo
.toLowerCase() .toLowerCase()
.normalize('NFD') .normalize('NFD')
.replace(/[\u0300-\u036f]/g, ''), .replace(/[\u0300-\u036f]/g, ''),
) && !choosenCoursesNames.includes(name), ) && !basketNames.includes(name),
); );
setFilteredCourses(filteredCourses); setFilteredCourses(filteredCourses);
}; };
console.log("filtering courses");
filterCourses(input); filterCourses(input);
}, [open, input, basket]); }, [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 ( return (
<DropdownContainer> <DropdownContainer>
{open && ( {open && (
@ -114,4 +95,4 @@ export const Dropdown = forwardRef(({ open, input, handleCloseDropdown }: Dropdo
)} )}
</DropdownContainer> </DropdownContainer>
); );
}); };

26
src/components/Rightbar.tsx
View File

@ -2,7 +2,7 @@ import React, { useContext } from 'react';
import { CourseCard } from './CourseCard'; import { CourseCard } from './CourseCard';
import { coursesContext } from '../contexts/CoursesProvider'; import { coursesContext } from '../contexts/CoursesProvider';
import styled from 'styled-components'; import styled from 'styled-components';
import { debounce } from 'lodash'; import { debounce } from '../utils/index';
const RightbarStyled = styled.div` const RightbarStyled = styled.div`
padding-top: 10px; padding-top: 10px;
@ -46,33 +46,15 @@ const SaveButton = styled.div`
`; `;
export const Rightbar = () => { export const Rightbar = () => {
const { courses, basket, saveBasket } = useContext(coursesContext)!; const { selectBasketCourses, 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 basketCourses = selectBasketCourses();
const handleSave = debounce(() => saveBasket(), 500); const handleSave = debounce(() => saveBasket(), 500);
//need to insert student name from db and course maybe based on current time or from db too
return ( return (
<RightbarStyled> <RightbarStyled>
<SaveButton onClick={handleSave}>ZAPISZ</SaveButton> <SaveButton onClick={handleSave}>ZAPISZ</SaveButton>
{filteredCourses.map((course, index) => ( {basketCourses.map((course, index) => (
<CourseCard course={course} key={index} /> <CourseCard course={course} key={index} />
))} ))}
</RightbarStyled> </RightbarStyled>

15
src/components/Scheduler.tsx
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 { useState } from 'react';
import { SchedulerEvents } from './SchedulerEvents'; import { SchedulerEvents } from './SchedulerEvents';
import { days, hours } from '../constants/index'; import { days, hours } from '../constants/index';
@ -11,7 +11,7 @@ const SchedulerWrapper = styled.div`
padding: 10px 40px 25px 10px; padding: 10px 40px 25px 10px;
border-radius: 5px; border-radius: 5px;
margin-right: 20px; margin-right: 20px;
margin-left:20px; margin-left: 20px;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -62,18 +62,15 @@ const TableCell = styled.div<TableCellProps>`
`; `;
export const Scheduler = () => { export const Scheduler = () => {
const cellRef = useRef<HTMLDivElement>(null); const cellRef = useRef<HTMLDivElement>(null);
const [cellWidth, setCellWidth] = useState(0); const [cellWidth, setCellWidth] = useState(0);
const [cellTop, setCellTop] = useState(0);
const [cellHeight, setCellHeight] = useState(0); const [cellHeight, setCellHeight] = useState(0);
console.log('cell height: ', cellHeight);
useEffect(() => { useEffect(() => {
const handleResize = () => { const handleResize = () => {
if (cellRef.current) { if (cellRef.current) {
setCellWidth(cellRef.current.getBoundingClientRect().width); setCellWidth(cellRef.current.getBoundingClientRect().width);
setCellTop(cellRef.current.getBoundingClientRect().top);
setCellHeight(cellRef.current.getBoundingClientRect().height); setCellHeight(cellRef.current.getBoundingClientRect().height);
} }
}; };
@ -115,9 +112,9 @@ export const Scheduler = () => {
{value} {value}
</TableCell> </TableCell>
) : indexRow === 5 ? ( ) : 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} {value}
</TableCell> </TableCell>
) : indexRow % 2 !== 0 ? ( ) : indexRow % 2 !== 0 ? (
<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} {value}
@ -128,7 +125,7 @@ export const Scheduler = () => {
)} )}
</TableRow> </TableRow>
))} ))}
<SchedulerEvents cellTop={cellTop} cellWidth={cellWidth} cellHeight={cellHeight} /> <SchedulerEvents cellWidth={cellWidth} cellHeight={cellHeight} />
</TableBody> </TableBody>
</SchedulerWrapper> </SchedulerWrapper>
</> </>

60
src/components/SchedulerEvents.tsx
View File

@ -1,68 +1,26 @@
import React, { useContext, useEffect, useState, MouseEvent } from 'react'; import React, { useContext } from 'react';
import { SchedulerRow } from './SchedulerRow'; import { SchedulerRow } from './SchedulerRow';
import { coursesContext } from '../contexts/CoursesProvider'; import { coursesContext } from '../contexts/CoursesProvider';
import { Group, Basket } from '../types'; import { selectGroupsToShow } from '../utils/index';
import { ROWS_COUNT } from '../constants';
interface SchedulerEventsProps { interface SchedulerEventsProps {
cellTop: number;
cellWidth: number; cellWidth: number;
cellHeight: number; cellHeight: number;
} }
export const SchedulerEvents = ({ cellTop, cellWidth, cellHeight }: SchedulerEventsProps) => { export const SchedulerEvents = ({ cellWidth, cellHeight }: SchedulerEventsProps) => {
const { basket } = useContext(coursesContext)!; const { selectSchedulerEvents } = useContext(coursesContext)!;
console.log(`values: cellTop: ${cellTop}, cellWidth: ${cellWidth}, cellHeight: ${cellHeight}`);
const [choosenGroupsMappedToEvents, setChoosenGroupsMappedToEvents] = useState<any>([]);
const groupTimeToEventRowMapping: { [time: string]: number } = { const schedulerEvents = selectSchedulerEvents();
'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]);
return ( return (
<div> <div>
{[...Array(6)].map((_, index) => ( {[...Array(ROWS_COUNT)].map((_, index) => (
<SchedulerRow <SchedulerRow
key={index} key={index}
groups={choosenGroupsMappedToEvents.filter((group: any) => group.eventRow === index)} groups={selectGroupsToShow(schedulerEvents, index)}
indexRow={index} indexRow={index}
cellTop={ rowTop={
index === 0 index === 0
? cellHeight / 2 ? cellHeight / 2
: index === 1 : index === 1

49
src/components/SchedulerRow.tsx
View File

@ -1,9 +1,10 @@
import React, { MouseEvent, useState } from 'react'; import React, { MouseEvent, useState } from 'react';
import { Group, GroupType } from '../types'; import { GroupType, SchedulerEvent } from '../types';
import styled from 'styled-components/macro'; import styled from 'styled-components/macro';
import Popover from '@material-ui/core/Popover'; import Popover from '@material-ui/core/Popover';
import Typography from '@material-ui/core/Typography'; import Typography from '@material-ui/core/Typography';
import { makeStyles, createStyles, Theme } from '@material-ui/core/styles'; import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
import { MONDAY_TO_FRIDAY } from '../constants';
const useStyles = makeStyles((theme: Theme) => const useStyles = makeStyles((theme: Theme) =>
createStyles({ createStyles({
@ -18,17 +19,17 @@ const useStyles = makeStyles((theme: Theme) =>
}), }),
); );
interface ClassesWrapperProps { interface SchedulerEventsWrapperProps {
eventIndex: number; eventIndex: number;
cellTop: number; rowTop: number;
cellWidth: number; cellWidth: number;
cellHeight: number; cellHeight: number;
} }
const ClassesWrapper = styled.div<ClassesWrapperProps>` const SchedulerEventsWrapper = styled.div<SchedulerEventsWrapperProps>`
position: absolute; position: absolute;
display: flex; display: flex;
top: ${({ cellTop }) => cellTop}px; top: ${({ rowTop }) => rowTop}px;
left: ${({ cellWidth, eventIndex }) => (cellWidth * 1) / 5 + 4 + cellWidth * eventIndex}px; left: ${({ cellWidth, eventIndex }) => (cellWidth * 1) / 5 + 4 + cellWidth * eventIndex}px;
width: ${({ cellWidth }) => cellWidth - 10}px; width: ${({ cellWidth }) => cellWidth - 10}px;
height: ${({ cellHeight }) => cellHeight * 3}px; height: ${({ cellHeight }) => cellHeight * 3}px;
@ -36,13 +37,13 @@ const ClassesWrapper = styled.div<ClassesWrapperProps>`
padding-left: 10px; padding-left: 10px;
`; `;
interface ClassesProps { interface SchedulerEventProps {
cellWidth: number; cellWidth: number;
cellHeight: number; cellHeight: number;
groupType: GroupType; groupType: GroupType;
} }
const Classes = styled.div<ClassesProps>` const StyledSchedulerEvent = styled.div<SchedulerEventProps>`
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -51,28 +52,27 @@ const Classes = styled.div<ClassesProps>`
line-height: normal; line-height: normal;
border-radius: 10px; border-radius: 10px;
height: ${({ cellHeight }) => cellHeight * 3}px; height: ${({ cellHeight }) => cellHeight * 3}px;
width: ${({ cellWidth }) => cellWidth *3/4}px; width: ${({ cellWidth }) => (cellWidth * 3) / 4}px;
margin-right: 5px; margin-right: 5px;
padding: 5px 5px 5px 5px; padding: 5px 5px 5px 5px;
text-align: center; text-align: center;
background-color: ${({ groupType }) => (groupType === 'CLASS' ? '#FFDC61' : '#9ed3ff')}; 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)` const StyledTypography = styled(Typography)`
background-color:white; background-color: white;
` `;
interface SchedulerRowProps { interface SchedulerRowProps {
groups: Array<Group & { name: string }>; groups: Array<SchedulerEvent>;
indexRow: number; indexRow: number;
cellTop: number; rowTop: number;
cellWidth: number; cellWidth: number;
cellHeight: 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 classes = useStyles();
const [anchorEl, setAnchorEl] = React.useState<HTMLDivElement | null>(null); const [anchorEl, setAnchorEl] = React.useState<HTMLDivElement | null>(null);
const [popoverId, setPopoverId] = useState<string | null>(null); const [popoverId, setPopoverId] = useState<string | null>(null);
@ -92,10 +92,10 @@ export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth, cellHeight
return ( return (
<div> <div>
{[...Array(5)].map((_, eventIndex) => ( {[...Array(MONDAY_TO_FRIDAY)].map((_, eventIndex) => (
<ClassesWrapper <SchedulerEventsWrapper
eventIndex={eventIndex} eventIndex={eventIndex}
cellTop={cellTop} rowTop={rowTop}
cellWidth={cellWidth} cellWidth={cellWidth}
cellHeight={cellHeight} cellHeight={cellHeight}
key={eventIndex} key={eventIndex}
@ -105,10 +105,7 @@ export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth, cellHeight
(group, index) => (group, index) =>
group.day === eventIndex && ( group.day === eventIndex && (
<> <>
<Classes <StyledSchedulerEvent
onClick={() => {
console.log('group: ', group);
}}
groupType={group.type} groupType={group.type}
cellWidth={cellWidth} cellWidth={cellWidth}
cellHeight={cellHeight} cellHeight={cellHeight}
@ -121,9 +118,11 @@ export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth, cellHeight
> >
<div> <div>
<p style={{ fontWeight: 700 }}>{groups[index].name}</p> <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> </div>
</Classes> </StyledSchedulerEvent>
<Popover <Popover
id={`mouse-over-popover`} id={`mouse-over-popover`}
className={classes.popover} className={classes.popover}
@ -152,7 +151,7 @@ export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth, cellHeight
</> </>
), ),
)} )}
</ClassesWrapper> </SchedulerEventsWrapper>
))} ))}
</div> </div>
); );

73
src/constants/index.ts
View File

@ -1,37 +1,44 @@
export const days = [ export const days = ['', 'Poniedziałek', 'Wtorek', 'Środa', 'Czwartek', 'Piątek'];
"",
"Poniedziałek",
"Wtorek",
"Środa",
"Czwartek",
"Piątek",
];
export const hours = [ export const hours = [
"8:00", '8:00',
"", '',
"9:00", '9:00',
"", '',
"10:00", '10:00',
"", '',
"11:00", '11:00',
"", '',
"12:00", '12:00',
"", '',
"13:00", '13:00',
"", '',
"14:00", '14:00',
"", '',
"15:00", '15:00',
"", '',
"16:00", '16:00',
"", '',
"17:00", '17:00',
"", '',
"18:00", '18:00',
"", '',
"19: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;

7
src/contexts/CASProvider.tsx
View File

@ -5,6 +5,7 @@ import axios from 'axios';
export interface CASContext { export interface CASContext {
user?: User; user?: User;
logout: () => void; logout: () => void;
token?: string | null;
} }
export const CASContext = createContext<CASContext | undefined>(undefined); export const CASContext = createContext<CASContext | undefined>(undefined);
@ -15,6 +16,7 @@ export interface CASProviderProps {
export const CASProvider = ({ children }: CASProviderProps) => { export const CASProvider = ({ children }: CASProviderProps) => {
const [user, setUser] = useState<User | undefined>(undefined); const [user, setUser] = useState<User | undefined>(undefined);
const [token, setToken] = useState<string | null>(null);
useEffect(() => { useEffect(() => {
login(); login();
}, []); }, []);
@ -29,10 +31,9 @@ export const CASProvider = ({ children }: CASProviderProps) => {
if (!sessionStorage.getItem('userToken')) { if (!sessionStorage.getItem('userToken')) {
const { data: token } = await axios.get(`${process.env.REACT_APP_API_URL}/token?ticket=${ticket}`); const { data: token } = await axios.get(`${process.env.REACT_APP_API_URL}/token?ticket=${ticket}`);
sessionStorage.setItem('userToken', token); sessionStorage.setItem('userToken', token);
setUser({ ...user, token });
} }
const token = sessionStorage.getItem('userToken'); const token = sessionStorage.getItem('userToken');
setUser({ ...user, token }); setToken(token);
} catch (e) { } catch (e) {
console.log(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`); 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>;
}; };

118
src/contexts/CoursesProvider.tsx
View File

@ -1,16 +1,18 @@
import React, { useState, createContext, useEffect, ReactNode, useContext } from 'react'; import React, { useState, createContext, useEffect, ReactNode, useContext } from 'react';
import { Course, Group, Basket, GroupType } from '../types'; import { Course, Group, Basket, GroupType, SchedulerEvent } from '../types';
import axios from 'axios';
import { CASContext } from './CASProvider';
import { useSnackbar } from 'notistack'; import { useSnackbar } from 'notistack';
import { createClassTime } from '../utils';
import { axiosInstance } from '../utils/axiosInstance';
interface CourseContext { interface CourseContext {
courses: Array<Course>; courses: Array<Course>;
basket: Array<Basket>; basket: Array<Basket>;
addToBasket: (courses: Course) => void; addCourseToBasket: (courses: Course) => void;
addGroup: (group: Group, id: number) => void; changeGroupInBasket: (group: Group, id: number) => void;
deleteFromBasket: (id: number) => void; deleteFromBasket: (id: number) => void;
saveBasket: () => void; saveBasket: () => void;
selectSchedulerEvents: () => Array<SchedulerEvent>;
selectBasketNames: () => Array<string>;
selectBasketCourses: () => Array<Course>;
} }
export const coursesContext = createContext<CourseContext | undefined>(undefined); export const coursesContext = createContext<CourseContext | undefined>(undefined);
@ -19,28 +21,48 @@ interface CoursesProviderProps {
} }
export const CoursesProvider = ({ children }: CoursesProviderProps) => { export const CoursesProvider = ({ children }: CoursesProviderProps) => {
const { enqueueSnackbar } = useSnackbar();
const { closeSnackbar } = useSnackbar();
//fetch courses with groups //fetch courses with groups
const [courses, setCourses] = useState<Array<Course>>([]); const [courses, setCourses] = useState<Array<Course>>([]);
const [basket, setBasket] = useState<Array<Basket>>([]); const [basket, setBasket] = useState<Array<Basket>>([]);
const { enqueueSnackbar } = useSnackbar(); const selectBasketIds = () => {
const { closeSnackbar } = useSnackbar(); const classesIds = basket.map((course) => course?.classes?.id).filter((course) => course !== undefined);
const lecturesIds = basket.map((course) => course?.lecture?.id).filter((course) => course !== undefined);
const CAS = useContext(CASContext)!; return [...classesIds, ...lecturesIds];
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 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 = { const courseToBasket: Basket = {
name: course.name, name: course.name,
id: course.id, id: course.id,
classes: course.classes[0], classes: course.classes !== undefined ? course.classes[0] : undefined,
lecture: course.lectures !== undefined ? course.lectures[0] : undefined, lecture: course.lectures !== undefined ? course.lectures[0] : undefined,
}; };
setBasket([...basket, courseToBasket]); setBasket([...basket, courseToBasket]);
@ -49,18 +71,7 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => {
const deleteFromBasket = (id: number) => setBasket(basket.filter((course) => course.id !== id)); const deleteFromBasket = (id: number) => setBasket(basket.filter((course) => course.id !== id));
const saveBasket = async () => { const saveBasket = async () => {
const basketIds = selectBasketIds(basket); const basketIds = selectBasketIds();
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 action = (key: any) => ( const action = (key: any) => (
<> <>
<button <button
@ -74,12 +85,13 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => {
); );
try { 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', { enqueueSnackbar('Plan został zapisany', {
variant: 'success', variant: 'success',
action, action,
}); });
} catch (e) { } catch (e) {
console.log('error: ', e);
enqueueSnackbar('Zapisywanie planu nie powiodło się', { enqueueSnackbar('Zapisywanie planu nie powiodło się', {
variant: 'error', variant: 'error',
action, 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 basketCourse = basket.filter((course) => course.id === id)[0];
const { type } = choosenGroup; const { type } = choosenGroup;
if (type === GroupType.CLASS) { if (type === GroupType.CLASS) {
@ -102,18 +114,11 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => {
}; };
const getNewestTimetable = async () => { 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 { try {
let { data: basket } = await axios.request(config); const { data } = await axiosInstance.get(
if (basket === '') { `${process.env.REACT_APP_API_URL}/api/v1/assignments/getCurrentAssignments`,
basket = []; );
} const basket = data === '' ? [] : data;
setBasket(basket); setBasket(basket);
} catch (e) { } catch (e) {
console.log(e); console.log(e);
@ -122,10 +127,11 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => {
const fetchClasses = async () => { const fetchClasses = async () => {
try { 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`, `${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) { } catch (e) {
console.log(e); console.log(e);
} }
@ -133,13 +139,23 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => {
useEffect(() => { useEffect(() => {
fetchClasses(); fetchClasses();
if (token) { getNewestTimetable();
getNewestTimetable(); }, []);
}
}, [token]);
return ( return (
<coursesContext.Provider value={{ courses, basket, addToBasket, addGroup, deleteFromBasket, saveBasket }}> <coursesContext.Provider
value={{
courses,
basket,
addCourseToBasket,
changeGroupInBasket,
deleteFromBasket,
saveBasket,
selectSchedulerEvents,
selectBasketNames,
selectBasketCourses,
}}
>
{children} {children}
</coursesContext.Provider> </coursesContext.Provider>
); );

29
src/contexts/reducers.ts
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

16
src/types/index.ts
View File

@ -7,7 +7,7 @@ export interface Basket {
id: number; id: number;
name: string; name: string;
lecture?: Group; lecture?: Group;
classes: Group; classes?: Group;
} }
export interface Group { export interface Group {
@ -24,11 +24,21 @@ export interface Course {
id: number; id: number;
name: string; name: string;
lectures?: Array<Group>; lectures?: Array<Group>;
classes: Array<Group>; classes?: Array<Group>;
} }
export interface User { export interface User {
name?: string; name?: string;
surname?: 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
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;
};