From 55bb7945c9d33d7502687a1c3b1d57aad14fdce5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maciek=20G=C5=82owacki?= Date: Mon, 17 Aug 2020 22:05:13 +0200 Subject: [PATCH] Restructured components and refactored topbar to functional --- package-lock.json | 195 ++++++------------ package.json | 6 +- public/manifest.json | 22 +- src/App.tsx | 40 ---- src/{components/TopBar => assets}/PL.png | Bin src/{components/TopBar => assets}/UK.png | Bin src/{components/TopBar => assets}/close.svg | 0 .../RightBar/CourseCard => assets}/expand.png | Bin src/{components/TopBar => assets}/search.svg | 0 .../TopBar => assets}/transfer.png | Bin src/{components/TopBar => assets}/user.png | Bin src/components/App.tsx | 32 +++ .../CourseCard/index.tsx => CourseCard.tsx} | 57 +++-- src/components/{TopBar => }/Profile.tsx | 0 .../{TopBar/Results/index.tsx => Results.tsx} | 7 +- .../{RightBar/index.tsx => Rightbar.tsx} | 23 +-- .../{Scheduler/index.tsx => Scheduler.tsx} | 2 +- .../index.tsx => SchedulerEvents.tsx} | 6 +- .../index.tsx => SchedulerRow.tsx} | 2 +- src/components/TopBar/index.tsx | 152 -------------- src/components/Topbar.tsx | 114 ++++++++++ src/components/Transfer/Transfer.tsx | 57 +++++ src/components/Transfer/index.tsx | 70 ------- src/index.tsx | 2 +- 24 files changed, 321 insertions(+), 466 deletions(-) delete mode 100644 src/App.tsx rename src/{components/TopBar => assets}/PL.png (100%) rename src/{components/TopBar => assets}/UK.png (100%) rename src/{components/TopBar => assets}/close.svg (100%) rename src/{components/RightBar/CourseCard => assets}/expand.png (100%) rename src/{components/TopBar => assets}/search.svg (100%) rename src/{components/TopBar => assets}/transfer.png (100%) rename src/{components/TopBar => assets}/user.png (100%) create mode 100644 src/components/App.tsx rename src/components/{RightBar/CourseCard/index.tsx => CourseCard.tsx} (69%) rename src/components/{TopBar => }/Profile.tsx (100%) rename src/components/{TopBar/Results/index.tsx => Results.tsx} (96%) rename src/components/{RightBar/index.tsx => Rightbar.tsx} (71%) rename src/components/{Scheduler/index.tsx => Scheduler.tsx} (98%) rename src/components/{Scheduler/SchedulerEvents/index.tsx => SchedulerEvents.tsx} (93%) rename src/components/{Scheduler/SchedulerRow/index.tsx => SchedulerRow.tsx} (96%) delete mode 100644 src/components/TopBar/index.tsx create mode 100644 src/components/Topbar.tsx create mode 100644 src/components/Transfer/Transfer.tsx delete mode 100644 src/components/Transfer/index.tsx diff --git a/package-lock.json b/package-lock.json index c18cd30..a4d832b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1415,7 +1415,7 @@ }, "@sheerun/mutationobserver-shim": { "version": "0.3.3", - "resolved": "https://registry.npmjs.org/@sheerun/mutationobserver-shim/-/mutationobserver-shim-0.3.3.tgz", + "resolved": "https://npm.mlabs.pl:443/@sheerun%2fmutationobserver-shim/-/mutationobserver-shim-0.3.3.tgz", "integrity": "sha512-DetpxZw1fzPD5xUBrIAoplLChO2VB8DlL5Gg+I1IR9b2wPqYIca2WSUxL5g1vLeR4MsQq1NeWriXAVffV+U1Fw==" }, "@svgr/babel-plugin-add-jsx-attribute": { @@ -1529,7 +1529,7 @@ }, "@testing-library/dom": { "version": "6.16.0", - "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-6.16.0.tgz", + "resolved": "https://npm.mlabs.pl:443/@testing-library%2fdom/-/dom-6.16.0.tgz", "integrity": "sha512-lBD88ssxqEfz0wFL6MeUyyWZfV/2cjEZZV3YRpb2IoJRej/4f1jB0TzqIOznTpfR1r34CNesrubxwIlAQ8zgPA==", "requires": { "@babel/runtime": "^7.8.4", @@ -1552,7 +1552,7 @@ }, "@jest/types": { "version": "25.5.0", - "resolved": "https://registry.npmjs.org/@jest/types/-/types-25.5.0.tgz", + "resolved": "https://npm.mlabs.pl:443/@jest%2ftypes/-/types-25.5.0.tgz", "integrity": "sha512-OXD0RgQ86Tu3MazKo8bnrkDRaDXXMGUqd+kTtLtK1Zb7CRzQcaSRPPPV37SvYTdevXEBVxe0HXylEjs8ibkmCw==", "requires": { "@types/istanbul-lib-coverage": "^2.0.0", @@ -1563,7 +1563,7 @@ }, "@types/yargs": { "version": "15.0.5", - "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-15.0.5.tgz", + "resolved": "https://npm.mlabs.pl:443/@types%2fyargs/-/yargs-15.0.5.tgz", "integrity": "sha512-Dk/IDOPtOgubt/IaevIUbTgV7doaKkoorvOyYM2CMwuDyP89bekI7H4xLIwunNYiK9jhCkmc6pUrJk3cj2AB9w==", "requires": { "@types/yargs-parser": "*" @@ -1571,7 +1571,7 @@ }, "ansi-styles": { "version": "4.2.1", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz", + "resolved": "https://npm.mlabs.pl:443/ansi-styles/-/ansi-styles-4.2.1.tgz", "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==", "requires": { "@types/color-name": "^1.1.1", @@ -1599,7 +1599,7 @@ }, "chalk": { "version": "3.0.0", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz", + "resolved": "https://npm.mlabs.pl:443/chalk/-/chalk-3.0.0.tgz", "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==", "requires": { "ansi-styles": "^4.1.0", @@ -1608,7 +1608,7 @@ }, "color-convert": { "version": "2.0.1", - "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "resolved": "https://npm.mlabs.pl:443/color-convert/-/color-convert-2.0.1.tgz", "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", "requires": { "color-name": "~1.1.4" @@ -1616,17 +1616,17 @@ }, "color-name": { "version": "1.1.4", - "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "resolved": "https://npm.mlabs.pl:443/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", + "resolved": "https://npm.mlabs.pl:443/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", + "resolved": "https://npm.mlabs.pl:443/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", @@ -1637,7 +1637,7 @@ }, "supports-color": { "version": "7.1.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.1.0.tgz", + "resolved": "https://npm.mlabs.pl:443/supports-color/-/supports-color-7.1.0.tgz", "integrity": "sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==", "requires": { "has-flag": "^4.0.0" @@ -1647,7 +1647,7 @@ }, "@testing-library/jest-dom": { "version": "4.2.4", - "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-4.2.4.tgz", + "resolved": "https://npm.mlabs.pl:443/@testing-library%2fjest-dom/-/jest-dom-4.2.4.tgz", "integrity": "sha512-j31Bn0rQo12fhCWOUWy9fl7wtqkp7In/YP2p5ZFyRuiiB9Qs3g+hS4gAmDWONbAHcRmVooNJ5eOHQDCOmUFXHg==", "requires": { "@babel/runtime": "^7.5.1", @@ -1663,7 +1663,7 @@ }, "@testing-library/react": { "version": "9.5.0", - "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-9.5.0.tgz", + "resolved": "https://npm.mlabs.pl:443/@testing-library%2freact/-/react-9.5.0.tgz", "integrity": "sha512-di1b+D0p+rfeboHO5W7gTVeZDIK5+maEgstrZbWZSSvxDyfDRkkyBE1AJR5Psd6doNldluXlCWqXriUfqu/9Qg==", "requires": { "@babel/runtime": "^7.8.4", @@ -1673,7 +1673,7 @@ }, "@testing-library/user-event": { "version": "7.2.1", - "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-7.2.1.tgz", + "resolved": "https://npm.mlabs.pl:443/@testing-library%2fuser-event/-/user-event-7.2.1.tgz", "integrity": "sha512-oZ0Ib5I4Z2pUEcoo95cT1cr6slco9WY7yiPpG+RGNkj8YcYgJnM7pXmYmorNOReh8MIGcKSqXyeGjxnr8YiZbA==" }, "@types/babel__core": { @@ -1877,7 +1877,7 @@ }, "@types/testing-library__dom": { "version": "6.14.0", - "resolved": "https://registry.npmjs.org/@types/testing-library__dom/-/testing-library__dom-6.14.0.tgz", + "resolved": "https://npm.mlabs.pl:443/@types%2ftesting-library__dom/-/testing-library__dom-6.14.0.tgz", "integrity": "sha512-sMl7OSv0AvMOqn1UJ6j1unPMIHRXen0Ita1ujnMX912rrOcawe4f7wu0Zt9GIQhBhJvH2BaibqFgQ3lP+Pj2hA==", "requires": { "pretty-format": "^24.3.0" @@ -1885,7 +1885,7 @@ }, "@types/testing-library__react": { "version": "9.1.3", - "resolved": "https://registry.npmjs.org/@types/testing-library__react/-/testing-library__react-9.1.3.tgz", + "resolved": "https://npm.mlabs.pl:443/@types%2ftesting-library__react/-/testing-library__react-9.1.3.tgz", "integrity": "sha512-iCdNPKU3IsYwRK9JieSYAiX0+aYDXOGAmrC/3/M7AqqSDKnWWVv07X+Zk1uFSL7cMTUYzv4lQRfohucEocn5/w==", "requires": { "@types/react-dom": "*", @@ -1895,7 +1895,7 @@ "dependencies": { "@jest/types": { "version": "25.5.0", - "resolved": "https://registry.npmjs.org/@jest/types/-/types-25.5.0.tgz", + "resolved": "https://npm.mlabs.pl:443/@jest%2ftypes/-/types-25.5.0.tgz", "integrity": "sha512-OXD0RgQ86Tu3MazKo8bnrkDRaDXXMGUqd+kTtLtK1Zb7CRzQcaSRPPPV37SvYTdevXEBVxe0HXylEjs8ibkmCw==", "requires": { "@types/istanbul-lib-coverage": "^2.0.0", @@ -1906,7 +1906,7 @@ }, "@types/yargs": { "version": "15.0.5", - "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-15.0.5.tgz", + "resolved": "https://npm.mlabs.pl:443/@types%2fyargs/-/yargs-15.0.5.tgz", "integrity": "sha512-Dk/IDOPtOgubt/IaevIUbTgV7doaKkoorvOyYM2CMwuDyP89bekI7H4xLIwunNYiK9jhCkmc6pUrJk3cj2AB9w==", "requires": { "@types/yargs-parser": "*" @@ -1914,7 +1914,7 @@ }, "ansi-styles": { "version": "4.2.1", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz", + "resolved": "https://npm.mlabs.pl:443/ansi-styles/-/ansi-styles-4.2.1.tgz", "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==", "requires": { "@types/color-name": "^1.1.1", @@ -1923,7 +1923,7 @@ }, "chalk": { "version": "3.0.0", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz", + "resolved": "https://npm.mlabs.pl:443/chalk/-/chalk-3.0.0.tgz", "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==", "requires": { "ansi-styles": "^4.1.0", @@ -1932,7 +1932,7 @@ }, "color-convert": { "version": "2.0.1", - "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "resolved": "https://npm.mlabs.pl:443/color-convert/-/color-convert-2.0.1.tgz", "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", "requires": { "color-name": "~1.1.4" @@ -1940,17 +1940,17 @@ }, "color-name": { "version": "1.1.4", - "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "resolved": "https://npm.mlabs.pl:443/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", + "resolved": "https://npm.mlabs.pl:443/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", + "resolved": "https://npm.mlabs.pl:443/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", @@ -1961,7 +1961,7 @@ }, "supports-color": { "version": "7.1.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.1.0.tgz", + "resolved": "https://npm.mlabs.pl:443/supports-color/-/supports-color-7.1.0.tgz", "integrity": "sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==", "requires": { "has-flag": "^4.0.0" @@ -1982,68 +1982,46 @@ "resolved": "https://registry.npmjs.org/@types/yargs-parser/-/yargs-parser-15.0.0.tgz", "integrity": "sha512-FA/BWv8t8ZWJ+gEOnLLd8ygxH/2UFbAvgEonyfN6yWGLKc7zVjbpl2Y4CTjid9h2RfgPP6SEt6uHwEOply00yw==" }, - "@typescript-eslint/eslint-plugin": { - "version": "3.9.0", - "resolved": "https://npm.mlabs.pl:443/@typescript-eslint%2feslint-plugin/-/eslint-plugin-3.9.0.tgz", - "integrity": "sha512-UD6b4p0/hSe1xdTvRCENSx7iQ+KR6ourlZFfYuPC7FlXEzdHuLPrEmuxZ23b2zW96KJX9Z3w05GE/wNOiEzrVg==", - "dev": true, - "requires": { - "@typescript-eslint/experimental-utils": "3.9.0", - "debug": "^4.1.1", - "functional-red-black-tree": "^1.0.1", - "regexpp": "^3.0.0", - "semver": "^7.3.2", - "tsutils": "^3.17.1" - }, - "dependencies": { - "semver": { - "version": "7.3.2", - "resolved": "https://npm.mlabs.pl:443/semver/-/semver-7.3.2.tgz", - "integrity": "sha512-OrOb32TeeambH6UrhtShmF7CRDqhL6/5XpPNp2DuRH6+9QLw/orhp72j87v8Qa1ScDkvrrBNpZcDejAirJmfXQ==", - "dev": true - } - } - }, "@typescript-eslint/experimental-utils": { - "version": "3.9.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-3.9.0.tgz", - "integrity": "sha512-/vSHUDYizSOhrOJdjYxPNGfb4a3ibO8zd4nUKo/QBFOmxosT3cVUV7KIg8Dwi6TXlr667G7YPqFK9+VSZOorNA==", + "version": "3.9.1", + "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-3.9.1.tgz", + "integrity": "sha512-lkiZ8iBBaYoyEKhCkkw4SAeatXyBq9Ece5bZXdLe1LWBUwTszGbmbiqmQbwWA8cSYDnjWXp9eDbXpf9Sn0hLAg==", "dev": true, "requires": { "@types/json-schema": "^7.0.3", - "@typescript-eslint/types": "3.9.0", - "@typescript-eslint/typescript-estree": "3.9.0", + "@typescript-eslint/types": "3.9.1", + "@typescript-eslint/typescript-estree": "3.9.1", "eslint-scope": "^5.0.0", "eslint-utils": "^2.0.0" } }, "@typescript-eslint/parser": { - "version": "3.9.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-3.9.0.tgz", - "integrity": "sha512-rDHOKb6uW2jZkHQniUQVZkixQrfsZGUCNWWbKWep4A5hGhN5dLHMUCNAWnC4tXRlHedXkTDptIpxs6e4Pz8UfA==", + "version": "3.9.1", + "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-3.9.1.tgz", + "integrity": "sha512-y5QvPFUn4Vl4qM40lI+pNWhTcOWtpZAJ8pOEQ21fTTW4xTJkRplMjMRje7LYTXqVKKX9GJhcyweMz2+W1J5bMg==", "dev": true, "requires": { "@types/eslint-visitor-keys": "^1.0.0", - "@typescript-eslint/experimental-utils": "3.9.0", - "@typescript-eslint/types": "3.9.0", - "@typescript-eslint/typescript-estree": "3.9.0", + "@typescript-eslint/experimental-utils": "3.9.1", + "@typescript-eslint/types": "3.9.1", + "@typescript-eslint/typescript-estree": "3.9.1", "eslint-visitor-keys": "^1.1.0" } }, "@typescript-eslint/types": { - "version": "3.9.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-3.9.0.tgz", - "integrity": "sha512-rb6LDr+dk9RVVXO/NJE8dT1pGlso3voNdEIN8ugm4CWM5w5GimbThCMiMl4da1t5u3YwPWEwOnKAULCZgBtBHg==", + "version": "3.9.1", + "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-3.9.1.tgz", + "integrity": "sha512-15JcTlNQE1BsYy5NBhctnEhEoctjXOjOK+Q+rk8ugC+WXU9rAcS2BYhoh6X4rOaXJEpIYDl+p7ix+A5U0BqPTw==", "dev": true }, "@typescript-eslint/typescript-estree": { - "version": "3.9.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-3.9.0.tgz", - "integrity": "sha512-N+158NKgN4rOmWVfvKOMoMFV5n8XxAliaKkArm/sOypzQ0bUL8MSnOEBW3VFIeffb/K5ce/cAV0yYhR7U4ALAA==", + "version": "3.9.1", + "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-3.9.1.tgz", + "integrity": "sha512-IqM0gfGxOmIKPhiHW/iyAEXwSVqMmR2wJ9uXHNdFpqVvPaQ3dWg302vW127sBpAiqM9SfHhyS40NKLsoMpN2KA==", "dev": true, "requires": { - "@typescript-eslint/types": "3.9.0", - "@typescript-eslint/visitor-keys": "3.9.0", + "@typescript-eslint/types": "3.9.1", + "@typescript-eslint/visitor-keys": "3.9.1", "debug": "^4.1.1", "glob": "^7.1.6", "is-glob": "^4.0.1", @@ -2054,16 +2032,16 @@ "dependencies": { "semver": { "version": "7.3.2", - "resolved": "https://npm.mlabs.pl:443/semver/-/semver-7.3.2.tgz", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.2.tgz", "integrity": "sha512-OrOb32TeeambH6UrhtShmF7CRDqhL6/5XpPNp2DuRH6+9QLw/orhp72j87v8Qa1ScDkvrrBNpZcDejAirJmfXQ==", "dev": true } } }, "@typescript-eslint/visitor-keys": { - "version": "3.9.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-3.9.0.tgz", - "integrity": "sha512-O1qeoGqDbu0EZUC/MZ6F1WHTIzcBVhGqDj3LhTnj65WUA548RXVxUHbYhAW9bZWfb2rnX9QsbbP5nmeJ5Z4+ng==", + "version": "3.9.1", + "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-3.9.1.tgz", + "integrity": "sha512-zxdtUjeoSh+prCpogswMwVUJfEFmCOjdzK9rpNjNBfm6EyPt99x3RrJoBOGZO23FCt0WPKUCOL5mb/9D5LjdwQ==", "dev": true, "requires": { "eslint-visitor-keys": "^1.1.0" @@ -4380,7 +4358,7 @@ }, "css.escape": { "version": "1.5.1", - "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz", + "resolved": "https://npm.mlabs.pl:443/css.escape/-/css.escape-1.5.1.tgz", "integrity": "sha1-QuJ9T6BK4y+TGktNQZH6nN3ul8s=" }, "cssdb": { @@ -4834,7 +4812,7 @@ }, "dom-accessibility-api": { "version": "0.3.0", - "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.3.0.tgz", + "resolved": "https://npm.mlabs.pl:443/dom-accessibility-api/-/dom-accessibility-api-0.3.0.tgz", "integrity": "sha512-PzwHEmsRP3IGY4gv/Ug+rMeaTIyTJvadCb+ujYXYeIylbHJezIyNToe8KfEgHTCEYyC+/bUghYOGg8yMGlZ6vA==" }, "dom-converter": { @@ -5186,23 +5164,6 @@ } } }, - "eslint-config-prettier": { - "version": "6.11.0", - "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-6.11.0.tgz", - "integrity": "sha512-oB8cpLWSAjOVFEJhhyMZh6NOEOtBVziaqdDQ86+qhDHFbZXoRTM7pNSvFRfW/W/L/LrQ38C99J5CGuRBBzBsdA==", - "dev": true, - "requires": { - "get-stdin": "^6.0.0" - }, - "dependencies": { - "get-stdin": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-6.0.0.tgz", - "integrity": "sha512-jp4tHawyV7+fkkSKyvjuLZswblUtz+SQKzSWnBbii16BuZksJlU1wuBYXY75r+duh/llF1ur6oNwi+2ZzjKZ7g==", - "dev": true - } - } - }, "eslint-config-react-app": { "version": "5.2.1", "resolved": "https://registry.npmjs.org/eslint-config-react-app/-/eslint-config-react-app-5.2.1.tgz", @@ -5404,15 +5365,6 @@ } } }, - "eslint-plugin-prettier": { - "version": "3.1.4", - "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-3.1.4.tgz", - "integrity": "sha512-jZDa8z76klRqo+TdGDTFJSavwbnWK2ZpqGKNZ+VvweMW516pDUMmQ2koXvxEE4JhzNvTv+radye/bWGBmA6jmg==", - "dev": true, - "requires": { - "prettier-linter-helpers": "^1.0.0" - } - }, "eslint-plugin-react": { "version": "7.19.0", "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.19.0.tgz", @@ -5450,12 +5402,6 @@ } } }, - "eslint-plugin-react-hooks": { - "version": "4.1.0", - "resolved": "https://npm.mlabs.pl:443/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.1.0.tgz", - "integrity": "sha512-36zilUcDwDReiORXmcmTc6rRumu9JIM3WjSvV0nclHoUQ0CNrX866EwONvLR/UqaeqFutbAnVu8PEmctdo2SRQ==", - "dev": true - }, "eslint-scope": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.0.tgz", @@ -5815,12 +5761,6 @@ "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.1.tgz", "integrity": "sha512-8UEa58QDLauDNfpbrX55Q9jrGHThw2ZMdOky5Gl1CDtVeJDPVrG4Jxx1N8jw2gkWaff5UUuX1KJd+9zGe2B+ZA==" }, - "fast-diff": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.2.0.tgz", - "integrity": "sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==", - "dev": true - }, "fast-glob": { "version": "2.2.7", "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-2.2.7.tgz", @@ -9148,7 +9088,7 @@ }, "node-sass": { "version": "4.14.1", - "resolved": "https://registry.npmjs.org/node-sass/-/node-sass-4.14.1.tgz", + "resolved": "https://npm.mlabs.pl:443/node-sass/-/node-sass-4.14.1.tgz", "integrity": "sha512-sjCuOlvGyCJS40R8BscF5vhVlQjNN069NtQ1gSxyK1u9iqvn6tf7O1R4GNowVZfiZUCRt5MmMs1xd+4V/7Yr0g==", "requires": { "async-foreach": "^0.1.3", @@ -9172,17 +9112,17 @@ "dependencies": { "ansi-regex": { "version": "2.1.1", - "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz", + "resolved": "https://npm.mlabs.pl:443/ansi-regex/-/ansi-regex-2.1.1.tgz", "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=" }, "ansi-styles": { "version": "2.2.1", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz", + "resolved": "https://npm.mlabs.pl:443/ansi-styles/-/ansi-styles-2.2.1.tgz", "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=" }, "chalk": { "version": "1.1.3", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz", + "resolved": "https://npm.mlabs.pl:443/chalk/-/chalk-1.1.3.tgz", "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=", "requires": { "ansi-styles": "^2.2.1", @@ -9194,7 +9134,7 @@ }, "cross-spawn": { "version": "3.0.1", - "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-3.0.1.tgz", + "resolved": "https://npm.mlabs.pl:443/cross-spawn/-/cross-spawn-3.0.1.tgz", "integrity": "sha1-ElYDfsufDF9549bvE14wdwGEuYI=", "requires": { "lru-cache": "^4.0.1", @@ -9203,7 +9143,7 @@ }, "lru-cache": { "version": "4.1.5", - "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.5.tgz", + "resolved": "https://npm.mlabs.pl:443/lru-cache/-/lru-cache-4.1.5.tgz", "integrity": "sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==", "requires": { "pseudomap": "^1.0.2", @@ -9212,7 +9152,7 @@ }, "strip-ansi": { "version": "3.0.1", - "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz", + "resolved": "https://npm.mlabs.pl:443/strip-ansi/-/strip-ansi-3.0.1.tgz", "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", "requires": { "ansi-regex": "^2.0.0" @@ -9220,12 +9160,12 @@ }, "supports-color": { "version": "2.0.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz", + "resolved": "https://npm.mlabs.pl:443/supports-color/-/supports-color-2.0.0.tgz", "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=" }, "yallist": { "version": "2.1.2", - "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz", + "resolved": "https://npm.mlabs.pl:443/yallist/-/yallist-2.1.2.tgz", "integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI=" } } @@ -10880,19 +10820,10 @@ }, "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 }, - "prettier-linter-helpers": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz", - "integrity": "sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==", - "dev": true, - "requires": { - "fast-diff": "^1.1.2" - } - }, "pretty-bytes": { "version": "5.3.0", "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.3.0.tgz", @@ -11743,7 +11674,7 @@ }, "redent": { "version": "3.0.0", - "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz", + "resolved": "https://npm.mlabs.pl:443/redent/-/redent-3.0.0.tgz", "integrity": "sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==", "requires": { "indent-string": "^4.0.0", @@ -13202,7 +13133,7 @@ }, "strip-indent": { "version": "3.0.0", - "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz", + "resolved": "https://npm.mlabs.pl:443/strip-indent/-/strip-indent-3.0.0.tgz", "integrity": "sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==", "requires": { "min-indent": "^1.0.0" @@ -14007,7 +13938,7 @@ }, "wait-for-expect": { "version": "3.0.2", - "resolved": "https://registry.npmjs.org/wait-for-expect/-/wait-for-expect-3.0.2.tgz", + "resolved": "https://npm.mlabs.pl:443/wait-for-expect/-/wait-for-expect-3.0.2.tgz", "integrity": "sha512-cfS1+DZxuav1aBYbaO/kE06EOS8yRw7qOFoD3XtjTkYvCvh3zUvNST8DXK/nPaeqIzIv3P3kL3lRJn8iwOiSag==" }, "walker": { diff --git a/package.json b/package.json index e7ea6bd..9b6e4e6 100644 --- a/package.json +++ b/package.json @@ -21,11 +21,7 @@ "@types/react": "^16.9.46", "@types/react-dom": "^16.9.8", "@types/styled-components": "^5.1.2", - "@typescript-eslint/eslint-plugin": "^3.9.0", - "@typescript-eslint/parser": "^3.9.0", - "eslint-config-prettier": "^6.11.0", - "eslint-plugin-prettier": "^3.1.4", - "eslint-plugin-react-hooks": "^4.1.0", + "@typescript-eslint/parser": "^3.9.1", "prettier": "^2.0.5", "typescript": "^3.9.7" }, diff --git a/public/manifest.json b/public/manifest.json index a43a8e1..e631f33 100644 --- a/public/manifest.json +++ b/public/manifest.json @@ -1,13 +1,13 @@ { - "short_name": "PlanNaPlan", - "name": "PlanNaPlan", - "icons": [ - { - "src": "logo.svg" - } - ], - "start_url": ".", - "display": "standalone", - "theme_color": "#000000", - "background_color": "#ffffff" + "short_name": "PlanNaPlan", + "name": "PlanNaPlan", + "icons": [ + { + "src": "logo.svg" + } + ], + "start_url": ".", + "display": "standalone", + "theme_color": "#000000", + "background_color": "#ffffff" } diff --git a/src/App.tsx b/src/App.tsx deleted file mode 100644 index 2188477..0000000 --- a/src/App.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import React, { useState, useContext } from 'react'; -import TopBar from './components/TopBar/'; -import Transfer from './components/Transfer/'; -import { Scheduler } from './components/Scheduler'; -import RightBar from './components/RightBar'; -import { CASContext } from './contexts/CASProvider'; -import styled from 'styled-components'; - -const Wrapper = styled.div` - display: flex; -`; - -export const App = () => { - const [isOpenTransfer, setOpenTransfer] = useState(false); - - const { logout } = useContext(CASContext)!; - - const handleCloseTransfer = () => { - setOpenTransfer(!isOpenTransfer); - }; - - const onLangChange = () => { - console.log('Language changed'); - }; - - const onGroupMouseOver = () => { - console.log(`On groupmouse over`); - }; - - return ( - <> - - - - - - - - ); -}; diff --git a/src/components/TopBar/PL.png b/src/assets/PL.png similarity index 100% rename from src/components/TopBar/PL.png rename to src/assets/PL.png diff --git a/src/components/TopBar/UK.png b/src/assets/UK.png similarity index 100% rename from src/components/TopBar/UK.png rename to src/assets/UK.png diff --git a/src/components/TopBar/close.svg b/src/assets/close.svg similarity index 100% rename from src/components/TopBar/close.svg rename to src/assets/close.svg diff --git a/src/components/RightBar/CourseCard/expand.png b/src/assets/expand.png similarity index 100% rename from src/components/RightBar/CourseCard/expand.png rename to src/assets/expand.png diff --git a/src/components/TopBar/search.svg b/src/assets/search.svg similarity index 100% rename from src/components/TopBar/search.svg rename to src/assets/search.svg diff --git a/src/components/TopBar/transfer.png b/src/assets/transfer.png similarity index 100% rename from src/components/TopBar/transfer.png rename to src/assets/transfer.png diff --git a/src/components/TopBar/user.png b/src/assets/user.png similarity index 100% rename from src/components/TopBar/user.png rename to src/assets/user.png diff --git a/src/components/App.tsx b/src/components/App.tsx new file mode 100644 index 0000000..8a62321 --- /dev/null +++ b/src/components/App.tsx @@ -0,0 +1,32 @@ +import React, { useState, useContext } from 'react'; +import { Topbar } from './Topbar'; +import { Transfer } from './Transfer/Transfer'; +import { Scheduler } from './Scheduler'; +import RightBar from './Rightbar'; +import { CASContext } from '../contexts/CASProvider'; +import styled from 'styled-components'; + +const Wrapper = styled.div` + display: flex; +`; + +export const App = () => { + const [isOpenTransfer, setOpenTransfer] = useState(false); + + const { logout } = useContext(CASContext)!; + + const handleTransfer = () => { + setOpenTransfer(!isOpenTransfer); + }; + + return ( + <> + + + + + + + + ); +}; diff --git a/src/components/RightBar/CourseCard/index.tsx b/src/components/CourseCard.tsx similarity index 69% rename from src/components/RightBar/CourseCard/index.tsx rename to src/components/CourseCard.tsx index 68c5e98..1b85153 100644 --- a/src/components/RightBar/CourseCard/index.tsx +++ b/src/components/CourseCard.tsx @@ -1,25 +1,15 @@ import React, { useContext } from 'react'; import Collapse from '@material-ui/core/Collapse'; -import ExpandIcon from './expand.png'; -import { Course, Group } from '../../../types/index'; -import { coursesContext } from '../../../contexts/CoursesProvider'; -import { group } from 'console'; +import ExpandIcon from '../assets/expand.png'; +import { Course, Group } from '../types/index'; +import { coursesContext } from '../contexts/CoursesProvider'; import styled from 'styled-components'; import { makeStyles } from '@material-ui/core/styles'; -interface CourseCardProps { - onGroupMouseOver: (id: number, name: string) => void; - onCardClick: (e: React.MouseEvent) => void; - course: Course; - id: string; - isSelected: boolean; -} - interface ClassExandIconProps { isSelected: boolean; } - const ClassStyled = styled.div` display: flex; min-height: 50px; @@ -51,33 +41,40 @@ const ClassGroupStyled = styled.div` `; const ClassExandIconStyled = styled.img` - margin-top: 5px; - width: 20px; - transition: 0.2s; - transform: ${props => props.isSelected ? 'scaleY(-1);' : 'scaleY(1);'}; -` + margin-top: 5px; + width: 20px; + transition: 0.2s; + transform: ${(props) => (props.isSelected ? 'scaleY(-1);' : 'scaleY(1);')}; +`; const useStyles = makeStyles({ expanded: { - maxHeight: "244px", - overflowY: "auto", + maxHeight: '244px', + overflowY: 'auto', }, '@global': { '*::-webkit-scrollbar': { - width: '0.4em' + width: '0.4em', }, '*::-webkit-scrollbar-track': { - '-webkit-box-shadow': 'inset 0 0 6px rgba(1,0,0,0.1)' + '-webkit-box-shadow': 'inset 0 0 6px rgba(1,0,0,0.1)', }, '*::-webkit-scrollbar-thumb': { - borderRadius: "10px", + borderRadius: '10px', backgroundColor: '#d4b851', - outline: '1px solid slategrey' - } - } + outline: '1px solid slategrey', + }, + }, }); -export function CourseCard({ onGroupMouseOver, onCardClick, course, id, isSelected }: CourseCardProps) { +interface CourseCardProps { + onCardClick: (e: React.MouseEvent) => void; + course: Course; + id: string; + isSelected: boolean; +} + +export function CourseCard({ onCardClick, course, id, isSelected }: CourseCardProps) { const classes = useStyles(); const { addGroup, courses } = useContext(coursesContext)!; @@ -92,11 +89,7 @@ export function CourseCard({ onGroupMouseOver, onCardClick, course, id, isSelect {courses.map((course, index) => ( <> {course.groups.map((group, index) => ( - onGroupMouseOver(group.id, course.name)} - onClick={() => onGroupClick(group)} - > + onGroupClick(group)}>

{group.time} {group.room}

{group.lecturer}

{' '} diff --git a/src/components/TopBar/Profile.tsx b/src/components/Profile.tsx similarity index 100% rename from src/components/TopBar/Profile.tsx rename to src/components/Profile.tsx diff --git a/src/components/TopBar/Results/index.tsx b/src/components/Results.tsx similarity index 96% rename from src/components/TopBar/Results/index.tsx rename to src/components/Results.tsx index c397fca..31d8655 100644 --- a/src/components/TopBar/Results/index.tsx +++ b/src/components/Results.tsx @@ -2,8 +2,8 @@ import React, { useState, useContext, useEffect } from 'react'; import axios from 'axios'; import { Input } from '@material-ui/core'; import ClickAwayListener from '@material-ui/core/ClickAwayListener'; -import { coursesContext } from '../../../contexts/CoursesProvider'; -import { Course } from '../../../types'; +import { coursesContext } from '../contexts/CoursesProvider'; +import { Course } from '../types'; import styled from 'styled-components'; import { makeStyles } from '@material-ui/core/styles'; @@ -36,7 +36,7 @@ const Dropdown = styled.div` const useStyles = makeStyles({ topbarInput: { - marginTop:"8px", + marginTop: '8px', width: '100%', }, }); @@ -121,7 +121,6 @@ export const Results: React.FC = () => { // } }; - return (
diff --git a/src/components/RightBar/index.tsx b/src/components/Rightbar.tsx similarity index 71% rename from src/components/RightBar/index.tsx rename to src/components/Rightbar.tsx index 813a957..a3d7e51 100644 --- a/src/components/RightBar/index.tsx +++ b/src/components/Rightbar.tsx @@ -1,13 +1,9 @@ import React, { useState, useContext } from 'react'; -import { CourseCard } from './CourseCard/index'; -import { coursesContext } from '../../contexts/CoursesProvider'; +import { CourseCard } from './CourseCard'; +import { coursesContext } from '../contexts/CoursesProvider'; import styled from 'styled-components'; -interface RightBarProps { - onGroupMouseOver: (id: number, name: string) => void; -} - -const RightBarStyled = styled.div` +const RightbarStyled = styled.div` padding-top: 10px; padding-left: 15px; padding-right: 15px; @@ -30,11 +26,11 @@ const RightBarStyled = styled.div` border: 1px solid; } `; -const RightBarTextStyled = styled.div` +const RightbarTextStyled = styled.div` border-bottom: 1px solid; `; -export default function RightBar({ onGroupMouseOver }: RightBarProps) { +export default function Rightbar() { const [selectedCardId, setSelectedCardId] = useState(null); const { courses } = useContext(coursesContext)!; @@ -45,21 +41,20 @@ export default function RightBar({ onGroupMouseOver }: RightBarProps) { }; return ( - - + + Hubert Wrzesiński

Semestr zimowy 2020/2021 - + {courses.map((course, index) => ( ))} - + ); } diff --git a/src/components/Scheduler/index.tsx b/src/components/Scheduler.tsx similarity index 98% rename from src/components/Scheduler/index.tsx rename to src/components/Scheduler.tsx index 40522c9..8d31ff9 100644 --- a/src/components/Scheduler/index.tsx +++ b/src/components/Scheduler.tsx @@ -1,7 +1,7 @@ import React, { useEffect, useRef } from "react"; import { useState } from "react"; import { SchedulerEvents } from "./SchedulerEvents"; -import { days, hours } from "../../constants/index"; +import { days, hours } from "../constants/index"; import styled from "styled-components"; const SchedulerWrapper = styled.div` diff --git a/src/components/Scheduler/SchedulerEvents/index.tsx b/src/components/SchedulerEvents.tsx similarity index 93% rename from src/components/Scheduler/SchedulerEvents/index.tsx rename to src/components/SchedulerEvents.tsx index 665bbcf..0a635fb 100644 --- a/src/components/Scheduler/SchedulerEvents/index.tsx +++ b/src/components/SchedulerEvents.tsx @@ -1,7 +1,7 @@ import React, { useContext, useEffect, useState } from 'react'; -import { SchedulerRow } from '../SchedulerRow'; -import { coursesContext } from '../../../contexts/CoursesProvider'; -import { Group } from '../../../types'; +import { SchedulerRow } from './SchedulerRow'; +import { coursesContext } from '../contexts/CoursesProvider'; +import { Group } from '../types'; interface SchedulerEventsProps { cellTop: number; diff --git a/src/components/Scheduler/SchedulerRow/index.tsx b/src/components/SchedulerRow.tsx similarity index 96% rename from src/components/Scheduler/SchedulerRow/index.tsx rename to src/components/SchedulerRow.tsx index 5366158..94cf8b7 100644 --- a/src/components/Scheduler/SchedulerRow/index.tsx +++ b/src/components/SchedulerRow.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Group } from '../../../types'; +import { Group } from '../types'; import styled from 'styled-components'; interface SchedulerEventProps { diff --git a/src/components/TopBar/index.tsx b/src/components/TopBar/index.tsx deleted file mode 100644 index 5556ced..0000000 --- a/src/components/TopBar/index.tsx +++ /dev/null @@ -1,152 +0,0 @@ -import React from 'react'; -import Transfer from './transfer.png'; -import Search from './search.svg'; -import UK from './UK.png'; -import PL from './PL.png'; -import User from './user.png'; -import CloseIcon from './close.svg'; -import { Profile } from './Profile'; -import { Results } from './Results'; -import styled from 'styled-components'; - -interface TopBarProps { - handleTransfer: (e: React.MouseEvent) => void; - onLangChange: (lang: boolean) => void; - handleLogout: () => void; -} - -interface TopBarState { - isPolish: boolean; - anchorEl: HTMLElement | null; -} - -const TopBarTekstStyled = styled.div` - @media only screen and (max-width: 670px) { - display: none; - } -`; - -const TopBarStyled = styled.div` - background-color: #ffdc61; - height: 80px; - padding: 5px; - font-family: comic sans MS; - font-size: 24px; - font-weight: bold; - display: flex; - justify-content: space-between; -`; - -const TopBarLogoStyled = styled.div` - display: flex; - align-items: center; - flex-grow: 0.5; - justify-content: flex-start; -`; - -const TopBarLogoImageStyled = styled.img` - width: 80px; - height: 80px; - @media only screen and (max-width: 670px) { - width: 60px; - height: 60px; - } -`; - -const TopBarInputDivStyled = styled.div` - width: 70%; - display: flex; - flex-grow: 3; -`; - -const TopBarInputFieldStyled = styled.div` - width: 96%; - margin-top: 10px; -`; - -const TopBarInputIconStyled = styled.img` - width: 35px; - @media only screen and (max-width: 670px) { - width: 25px; - } -`; - -const TopBarIcon = styled.img` - width: 50px; - cursor: pointer; - @media only screen and (max-width: 670px) { - width: 35px; - } -`; - -const TopBarIconBox = styled.div` - display: flex; - align-items: center; - justify-content: space-around; - flex-grow: 1.5; -`; - -export default class TopBar extends React.Component { - constructor(props: TopBarProps) { - super(props); - this.handleProfile = this.handleProfile.bind(this); - this.handleClose = this.handleClose.bind(this); - this.onLangChange = this.onLangChange.bind(this); - this.handleTransfer = this.handleTransfer.bind(this); - this.state = { - isPolish: true, - anchorEl: null, - }; - } - - handleTransfer(e: React.MouseEvent) { - this.props.handleTransfer(e); - } - - onLangChange(e: React.MouseEvent) { - this.setState({ - isPolish: !this.state.isPolish, - }); - this.props.onLangChange(this.state.isPolish); - } - - handleProfile(event: React.MouseEvent) { - this.setState({ - anchorEl: event.currentTarget, - }); - } - - handleClose() { - this.setState({ - anchorEl: null, - }); - } - - render() { - return ( - - - - plan na plan - - - - - - - - - - - - - - - - ); - } -} diff --git a/src/components/Topbar.tsx b/src/components/Topbar.tsx new file mode 100644 index 0000000..0aa2742 --- /dev/null +++ b/src/components/Topbar.tsx @@ -0,0 +1,114 @@ +import React, { useState } from 'react'; +import Transfer from '../assets/transfer.png'; +import Search from '../assets/search.svg'; +import UK from '../assets/UK.png'; +import PL from '../assets/PL.png'; +import User from '../assets/user.png'; +import CloseIcon from '../assets/close.svg'; +import { Profile } from './Profile'; +import { Results } from './Results'; +import styled from 'styled-components'; + +const TopbarTextStyled = styled.div` + @media only screen and (max-width: 670px) { + display: none; + } +`; + +const TopbarStyled = styled.div` + background-color: #ffdc61; + height: 80px; + padding: 5px; + font-family: comic sans MS; + font-size: 24px; + font-weight: bold; + display: flex; + justify-content: space-between; +`; + +const TopbarLogoStyled = styled.div` + display: flex; + align-items: center; + flex-grow: 0.5; + justify-content: flex-start; +`; + +const TopbarLogoImageStyled = styled.img` + width: 80px; + height: 80px; + @media only screen and (max-width: 670px) { + width: 60px; + height: 60px; + } +`; + +const TopbarInputDivStyled = styled.div` + width: 70%; + display: flex; + flex-grow: 3; +`; + +const TopbarInputFieldStyled = styled.div` + width: 96%; + margin-top: 10px; +`; + +const TopbarInputIconStyled = styled.img` + width: 35px; + @media only screen and (max-width: 670px) { + width: 25px; + } +`; + +const TopbarIcon = styled.img` + width: 50px; + cursor: pointer; + @media only screen and (max-width: 670px) { + width: 35px; + } +`; + +const TopbarIconBox = styled.div` + display: flex; + align-items: center; + justify-content: space-around; + flex-grow: 1.5; +`; + +interface TopbarProps { + handleTransfer: (e: React.MouseEvent) => void; + handleLogout: () => void; +} + +export const Topbar = ({ handleTransfer, handleLogout }: TopbarProps) => { + const [isPolish, setIsPolish] = useState(false); + const [anchorEl, setAnchorEl] = useState(null); + + const onLangChange = (event: React.MouseEvent) => setIsPolish(!isPolish); + + const handleProfile = (event: React.MouseEvent) => setAnchorEl(event.currentTarget as HTMLImageElement); + + const handleClose = () => setAnchorEl(null); + + return ( + + + + plan na plan + + + + + + + + + + + + + + + + ); +}; diff --git a/src/components/Transfer/Transfer.tsx b/src/components/Transfer/Transfer.tsx new file mode 100644 index 0000000..59c66e6 --- /dev/null +++ b/src/components/Transfer/Transfer.tsx @@ -0,0 +1,57 @@ +import React from 'react'; +import Modal from '@material-ui/core/Modal'; +import './index.scss'; +import Fade from '@material-ui/core/Fade'; +import Input from '@material-ui/core/Input'; +import { makeStyles } from '@material-ui/core/styles'; +import styled from 'styled-components'; + +interface TransferProps { + handleClose: (e: React.MouseEvent) => void; + isOpen: boolean; +} + +const useStyles = makeStyles({ + wrapper: { + display: 'flex', + justifyContent: 'center', + textAlign: 'center', + alignItems: 'center', + }, +}); + +export const Transfer = ({ handleClose, isOpen }: TransferProps) => { + const classes = useStyles(); + + return ( +
+ + +
+
+
Oddam
+
+ {' '} + +
+
+
+
Przyjmę
+ +
+
+ + +
+ ); +}; diff --git a/src/components/Transfer/index.tsx b/src/components/Transfer/index.tsx deleted file mode 100644 index 40ed89f..0000000 --- a/src/components/Transfer/index.tsx +++ /dev/null @@ -1,70 +0,0 @@ -import React from "react"; -import Modal from "@material-ui/core/Modal"; -import "./index.scss"; -import Fade from '@material-ui/core/Fade'; -import Input from "@material-ui/core/Input"; -import { makeStyles } from '@material-ui/core/styles'; -import styled from 'styled-components'; - -interface TransferProps { - handleClose: (e: React.MouseEvent) => void; - isOpen: boolean; -} - -interface TransferState {} - -const useStyles = makeStyles({ - wrapper: { - display: "flex", - justifyContent: "center", - textAlign: "center", - alignItems: "center", - }, -}); - -export default class Transfer extends React.Component< - TransferProps, - TransferState -> { - constructor(props: TransferProps) { - super(props); - - this.handleClose = this.handleClose.bind(this); - } - - handleClose(e: React.MouseEvent) { - this.props.handleClose(e); - } - - render() { - return ( -
- - -
-
-
Oddam
-
-
-
-
Przyjmę
- -
-
- - - -
- ); - } -} diff --git a/src/index.tsx b/src/index.tsx index 9c2e4c8..53cd61e 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,6 +1,6 @@ import React from 'react'; import ReactDOM from 'react-dom'; -import { App } from './App'; +import { App } from './components/App'; import { CASProvider } from './contexts/CASProvider'; import { CoursesProvider } from './contexts/CoursesProvider'; import { GlobalStyles } from './styles/GlobalStyles';