From 4c10290a164bd3afc459a60bc2209c04c2c30eb3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Pastewski?= Date: Fri, 14 Aug 2020 12:13:29 +0200 Subject: [PATCH 01/11] added conection with firebase in diary section --- package-lock.json | 453 ++++++++++++++++++++++++ package.json | 9 +- src/App.js | 22 +- src/components/diary/Diary.jsx | 150 +++----- src/components/diary/DiaryCard.jsx | 75 ++-- src/components/diary/DiaryChart.jsx | 12 +- src/components/diary/DiaryDashboard.jsx | 2 +- src/components/diary/DiaryForm.jsx | 58 +-- src/components/diary/DiaryFormChart.jsx | 2 +- src/components/diary/SearchAppBar.jsx | 4 +- src/index.js | 15 + 11 files changed, 602 insertions(+), 200 deletions(-) diff --git a/package-lock.json b/package-lock.json index 523bb78..e198927 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1208,6 +1208,279 @@ "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz", "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==" }, + "@firebase/analytics": { + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/@firebase/analytics/-/analytics-0.4.1.tgz", + "integrity": "sha512-y5ZuhqX/PwLi0t7AKxNAi3NnlEwXe0rpknulUWUg3/1dALqtd2RrAOATQoV5FNnKK6YUH5UmK0Jb9KcSjsFeNw==", + "requires": { + "@firebase/analytics-types": "0.3.1", + "@firebase/component": "0.1.17", + "@firebase/installations": "0.4.15", + "@firebase/logger": "0.2.6", + "@firebase/util": "0.3.0", + "tslib": "^1.11.1" + } + }, + "@firebase/analytics-types": { + "version": "0.3.1", + "resolved": "https://registry.npmjs.org/@firebase/analytics-types/-/analytics-types-0.3.1.tgz", + "integrity": "sha512-63vVJ5NIBh/JF8l9LuPrQYSzFimk7zYHySQB4Dk9rVdJ8kV/vGQoVTvRu1UW05sEc2Ug5PqtEChtTHU+9hvPcA==" + }, + "@firebase/app": { + "version": "0.6.9", + "resolved": "https://registry.npmjs.org/@firebase/app/-/app-0.6.9.tgz", + "integrity": "sha512-X2riRgK49IK8LCQ3j7BKLu3zqHDTJSaT6YgcLewtHuOVwtpHfGODiS1cL5VMvKm3ogxP84GA70tN3sdoL/vTog==", + "requires": { + "@firebase/app-types": "0.6.1", + "@firebase/component": "0.1.17", + "@firebase/logger": "0.2.6", + "@firebase/util": "0.3.0", + "dom-storage": "2.1.0", + "tslib": "^1.11.1", + "xmlhttprequest": "1.8.0" + } + }, + "@firebase/app-types": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/@firebase/app-types/-/app-types-0.6.1.tgz", + "integrity": "sha512-L/ZnJRAq7F++utfuoTKX4CLBG5YR7tFO3PLzG1/oXXKEezJ0kRL3CMRoueBEmTCzVb/6SIs2Qlaw++uDgi5Xyg==" + }, + "@firebase/auth": { + "version": "0.14.9", + "resolved": "https://registry.npmjs.org/@firebase/auth/-/auth-0.14.9.tgz", + "integrity": "sha512-PxYa2r5qUEdheXTvqROFrMstK8W4uPiP7NVfp+2Bec+AjY5PxZapCx/YFDLkU0D7YBI82H74PtZrzdJZw7TJ4w==", + "requires": { + "@firebase/auth-types": "0.10.1" + } + }, + "@firebase/auth-interop-types": { + "version": "0.1.5", + "resolved": "https://registry.npmjs.org/@firebase/auth-interop-types/-/auth-interop-types-0.1.5.tgz", + "integrity": "sha512-88h74TMQ6wXChPA6h9Q3E1Jg6TkTHep2+k63OWg3s0ozyGVMeY+TTOti7PFPzq5RhszQPQOoCi59es4MaRvgCw==" + }, + "@firebase/auth-types": { + "version": "0.10.1", + "resolved": "https://registry.npmjs.org/@firebase/auth-types/-/auth-types-0.10.1.tgz", + "integrity": "sha512-/+gBHb1O9x/YlG7inXfxff/6X3BPZt4zgBv4kql6HEmdzNQCodIRlEYnI+/da+lN+dha7PjaFH7C7ewMmfV7rw==" + }, + "@firebase/component": { + "version": "0.1.17", + "resolved": "https://registry.npmjs.org/@firebase/component/-/component-0.1.17.tgz", + "integrity": "sha512-/tN5iLcFp9rdpTfCJPfQ/o2ziGHlDxOzNx6XD2FoHlu4pG/PPGu+59iRfQXIowBGhxcTGD/l7oJhZEY/PVg0KQ==", + "requires": { + "@firebase/util": "0.3.0", + "tslib": "^1.11.1" + } + }, + "@firebase/database": { + "version": "0.6.10", + "resolved": "https://registry.npmjs.org/@firebase/database/-/database-0.6.10.tgz", + "integrity": "sha512-Hc8zIPAroIbAoRe6xFCI5oFHubcHKoDsbYE3J5G1/BhT6DnEUSoLgx8kJ2npybVSCVyb8BvsD6swh17DGEz+0g==", + "requires": { + "@firebase/auth-interop-types": "0.1.5", + "@firebase/component": "0.1.17", + "@firebase/database-types": "0.5.2", + "@firebase/logger": "0.2.6", + "@firebase/util": "0.3.0", + "faye-websocket": "0.11.3", + "tslib": "^1.11.1" + }, + "dependencies": { + "faye-websocket": { + "version": "0.11.3", + "resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.11.3.tgz", + "integrity": "sha512-D2y4bovYpzziGgbHYtGCMjlJM36vAl/y+xUyn1C+FVx8szd1E+86KwVw6XvYSzOP8iMpm1X0I4xJD+QtUb36OA==", + "requires": { + "websocket-driver": ">=0.5.1" + } + } + } + }, + "@firebase/database-types": { + "version": "0.5.2", + "resolved": "https://registry.npmjs.org/@firebase/database-types/-/database-types-0.5.2.tgz", + "integrity": "sha512-ap2WQOS3LKmGuVFKUghFft7RxXTyZTDr0Xd8y2aqmWsbJVjgozi0huL/EUMgTjGFrATAjcf2A7aNs8AKKZ2a8g==", + "requires": { + "@firebase/app-types": "0.6.1" + } + }, + "@firebase/firestore": { + "version": "1.16.3", + "resolved": "https://registry.npmjs.org/@firebase/firestore/-/firestore-1.16.3.tgz", + "integrity": "sha512-Lwc/QqzY3zEijJoI3vgWoRnffkTd09VXjaLHoqa9wfDoQe4WL1s9w0KrXCkTfAScjpV3rd447QxeoJwvZ0UTeg==", + "requires": { + "@firebase/component": "0.1.17", + "@firebase/firestore-types": "1.12.0", + "@firebase/logger": "0.2.6", + "@firebase/util": "0.3.0", + "@firebase/webchannel-wrapper": "0.3.0", + "@grpc/grpc-js": "^1.0.0", + "@grpc/proto-loader": "^0.5.0", + "node-fetch": "2.6.0", + "tslib": "^1.11.1" + } + }, + "@firebase/firestore-types": { + "version": "1.12.0", + "resolved": "https://registry.npmjs.org/@firebase/firestore-types/-/firestore-types-1.12.0.tgz", + "integrity": "sha512-OqNxVb63wPZdUc7YnpacAW1WNIMSKERSewCRi+unCQ0YI0KNfrDSypyGCyel+S3GdOtKMk9KnvDknaGbnaFX4g==" + }, + "@firebase/functions": { + "version": "0.4.49", + "resolved": "https://registry.npmjs.org/@firebase/functions/-/functions-0.4.49.tgz", + "integrity": "sha512-ma3+z1wMKervmEJCLWxwIjbSV+n3/BTfFPSZdTjt18Wgiso5q4BzEObFkorxaXZiyT3KpZ0qOO97lgcoth2hIA==", + "requires": { + "@firebase/component": "0.1.17", + "@firebase/functions-types": "0.3.17", + "@firebase/messaging-types": "0.4.5", + "isomorphic-fetch": "2.2.1", + "tslib": "^1.11.1" + } + }, + "@firebase/functions-types": { + "version": "0.3.17", + "resolved": "https://registry.npmjs.org/@firebase/functions-types/-/functions-types-0.3.17.tgz", + "integrity": "sha512-DGR4i3VI55KnYk4IxrIw7+VG7Q3gA65azHnZxo98Il8IvYLr2UTBlSh72dTLlDf25NW51HqvJgYJDKvSaAeyHQ==" + }, + "@firebase/installations": { + "version": "0.4.15", + "resolved": "https://registry.npmjs.org/@firebase/installations/-/installations-0.4.15.tgz", + "integrity": "sha512-6uGgDocDGu5gI7FeDBDcLaH4npz0cm2f0kctOFK+5N1CyK8Tv2YGv5/uGqlrTtSwDW+8tgKNo/5XXJJOPr9Jsw==", + "requires": { + "@firebase/component": "0.1.17", + "@firebase/installations-types": "0.3.4", + "@firebase/util": "0.3.0", + "idb": "3.0.2", + "tslib": "^1.11.1" + } + }, + "@firebase/installations-types": { + "version": "0.3.4", + "resolved": "https://registry.npmjs.org/@firebase/installations-types/-/installations-types-0.3.4.tgz", + "integrity": "sha512-RfePJFovmdIXb6rYwtngyxuEcWnOrzdZd9m7xAW0gRxDIjBT20n3BOhjpmgRWXo/DAxRmS7bRjWAyTHY9cqN7Q==" + }, + "@firebase/logger": { + "version": "0.2.6", + "resolved": "https://registry.npmjs.org/@firebase/logger/-/logger-0.2.6.tgz", + "integrity": "sha512-KIxcUvW/cRGWlzK9Vd2KB864HlUnCfdTH0taHE0sXW5Xl7+W68suaeau1oKNEqmc3l45azkd4NzXTCWZRZdXrw==" + }, + "@firebase/messaging": { + "version": "0.6.21", + "resolved": "https://registry.npmjs.org/@firebase/messaging/-/messaging-0.6.21.tgz", + "integrity": "sha512-cunbFNCtUy25Zp4/jn5lenYUPqgHpjKNUwRjKc7vIzYb4IT2Vu/7kaEptO3K0KQBC6O0QV3ZtqQxKrI9aLiSHg==", + "requires": { + "@firebase/component": "0.1.17", + "@firebase/installations": "0.4.15", + "@firebase/messaging-types": "0.4.5", + "@firebase/util": "0.3.0", + "idb": "3.0.2", + "tslib": "^1.11.1" + } + }, + "@firebase/messaging-types": { + "version": "0.4.5", + "resolved": "https://registry.npmjs.org/@firebase/messaging-types/-/messaging-types-0.4.5.tgz", + "integrity": "sha512-sux4fgqr/0KyIxqzHlatI04Ajs5rc3WM+WmtCpxrKP1E5Bke8xu/0M+2oy4lK/sQ7nov9z15n3iltAHCgTRU3Q==" + }, + "@firebase/performance": { + "version": "0.3.10", + "resolved": "https://registry.npmjs.org/@firebase/performance/-/performance-0.3.10.tgz", + "integrity": "sha512-j/hsx2xfOO1hZulmz7KxemoTIVXxrv94rt79x8qO1HzysT7ziViNvQ9cQGjDZWwVSO29TpLH31GOWLVnwmnxWQ==", + "requires": { + "@firebase/component": "0.1.17", + "@firebase/installations": "0.4.15", + "@firebase/logger": "0.2.6", + "@firebase/performance-types": "0.0.13", + "@firebase/util": "0.3.0", + "tslib": "^1.11.1" + } + }, + "@firebase/performance-types": { + "version": "0.0.13", + "resolved": "https://registry.npmjs.org/@firebase/performance-types/-/performance-types-0.0.13.tgz", + "integrity": "sha512-6fZfIGjQpwo9S5OzMpPyqgYAUZcFzZxHFqOyNtorDIgNXq33nlldTL/vtaUZA8iT9TT5cJlCrF/jthKU7X21EA==" + }, + "@firebase/polyfill": { + "version": "0.3.36", + "resolved": "https://registry.npmjs.org/@firebase/polyfill/-/polyfill-0.3.36.tgz", + "integrity": "sha512-zMM9oSJgY6cT2jx3Ce9LYqb0eIpDE52meIzd/oe/y70F+v9u1LDqk5kUF5mf16zovGBWMNFmgzlsh6Wj0OsFtg==", + "requires": { + "core-js": "3.6.5", + "promise-polyfill": "8.1.3", + "whatwg-fetch": "2.0.4" + }, + "dependencies": { + "whatwg-fetch": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-2.0.4.tgz", + "integrity": "sha512-dcQ1GWpOD/eEQ97k66aiEVpNnapVj90/+R+SXTPYGHpYBBypfKJEQjLrvMZ7YXbKm21gXd4NcuxUTjiv1YtLng==" + } + } + }, + "@firebase/remote-config": { + "version": "0.1.26", + "resolved": "https://registry.npmjs.org/@firebase/remote-config/-/remote-config-0.1.26.tgz", + "integrity": "sha512-B6+nARVNcswysd6C16nK5tdGECgEpr1wdH6LyqylEQ8hUxYWN18qe49b9uPu+ktaHq0gFLg03gayZvQs7fxJOg==", + "requires": { + "@firebase/component": "0.1.17", + "@firebase/installations": "0.4.15", + "@firebase/logger": "0.2.6", + "@firebase/remote-config-types": "0.1.9", + "@firebase/util": "0.3.0", + "tslib": "^1.11.1" + } + }, + "@firebase/remote-config-types": { + "version": "0.1.9", + "resolved": "https://registry.npmjs.org/@firebase/remote-config-types/-/remote-config-types-0.1.9.tgz", + "integrity": "sha512-G96qnF3RYGbZsTRut7NBX0sxyczxt1uyCgXQuH/eAfUCngxjEGcZQnBdy6mvSdqdJh5mC31rWPO4v9/s7HwtzA==" + }, + "@firebase/storage": { + "version": "0.3.41", + "resolved": "https://registry.npmjs.org/@firebase/storage/-/storage-0.3.41.tgz", + "integrity": "sha512-2imzI78HcB7FjUqXMRHsGLlZnTYkaCHBjJflSbypwLrEty0hreR6vx3ThOO5y0MFH93WwifqUFJAa+Twkx6CIA==", + "requires": { + "@firebase/component": "0.1.17", + "@firebase/storage-types": "0.3.13", + "@firebase/util": "0.3.0", + "tslib": "^1.11.1" + } + }, + "@firebase/storage-types": { + "version": "0.3.13", + "resolved": "https://registry.npmjs.org/@firebase/storage-types/-/storage-types-0.3.13.tgz", + "integrity": "sha512-pL7b8d5kMNCCL0w9hF7pr16POyKkb3imOW7w0qYrhBnbyJTdVxMWZhb0HxCFyQWC0w3EiIFFmxoz8NTFZDEFog==" + }, + "@firebase/util": { + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/@firebase/util/-/util-0.3.0.tgz", + "integrity": "sha512-GTwC+FSLeCPc44/TXCDReNQ5FPRIS5cb8Gr1XcD1TgiNBOvmyx61Om2YLwHp2GnN++6m6xmwmXARm06HOukATA==", + "requires": { + "tslib": "^1.11.1" + } + }, + "@firebase/webchannel-wrapper": { + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/@firebase/webchannel-wrapper/-/webchannel-wrapper-0.3.0.tgz", + "integrity": "sha512-VniCGPIgSGNEgOkh5phb3iKmSGIzcwrccy3IomMFRWPCMiCk2y98UQNJEoDs1yIHtZMstVjYWKYxnunIGzC5UQ==" + }, + "@grpc/grpc-js": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/@grpc/grpc-js/-/grpc-js-1.1.3.tgz", + "integrity": "sha512-HtOsk2YUofBcm1GkPqGzb6pwHhv+74eC2CUO229USIDKRtg30ycbZmqC+HdNtY3nHqoc9IgcRlntFgopyQoYCA==", + "requires": { + "semver": "^6.2.0" + } + }, + "@grpc/proto-loader": { + "version": "0.5.5", + "resolved": "https://registry.npmjs.org/@grpc/proto-loader/-/proto-loader-0.5.5.tgz", + "integrity": "sha512-WwN9jVNdHRQoOBo9FDH7qU+mgfjPc8GygPYms3M+y3fbQLfnCe/Kv/E01t7JRgnrsOHH8euvSbed3mIalXhwqQ==", + "requires": { + "lodash.camelcase": "^4.3.0", + "protobufjs": "^6.8.6" + } + }, "@hapi/address": { "version": "2.1.4", "resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz", @@ -1540,6 +1813,60 @@ "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.4.4.tgz", "integrity": "sha512-1oO6+dN5kdIA3sKPZhRGJTfGVP4SWV6KqlMOwry4J3HfyD68sl/3KmG7DeYUzvN+RbhXDnv/D8vNNB8168tAMg==" }, + "@protobufjs/aspromise": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@protobufjs/aspromise/-/aspromise-1.1.2.tgz", + "integrity": "sha1-m4sMxmPWaafY9vXQiToU00jzD78=" + }, + "@protobufjs/base64": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@protobufjs/base64/-/base64-1.1.2.tgz", + "integrity": "sha512-AZkcAA5vnN/v4PDqKyMR5lx7hZttPDgClv83E//FMNhR2TMcLUhfRUBHCmSl0oi9zMgDDqRUJkSxO3wm85+XLg==" + }, + "@protobufjs/codegen": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/@protobufjs/codegen/-/codegen-2.0.4.tgz", + "integrity": "sha512-YyFaikqM5sH0ziFZCN3xDC7zeGaB/d0IUb9CATugHWbd1FRFwWwt4ld4OYMPWu5a3Xe01mGAULCdqhMlPl29Jg==" + }, + "@protobufjs/eventemitter": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@protobufjs/eventemitter/-/eventemitter-1.1.0.tgz", + "integrity": "sha1-NVy8mLr61ZePntCV85diHx0Ga3A=" + }, + "@protobufjs/fetch": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@protobufjs/fetch/-/fetch-1.1.0.tgz", + "integrity": "sha1-upn7WYYUr2VwDBYZ/wbUVLDYTEU=", + "requires": { + "@protobufjs/aspromise": "^1.1.1", + "@protobufjs/inquire": "^1.1.0" + } + }, + "@protobufjs/float": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/@protobufjs/float/-/float-1.0.2.tgz", + "integrity": "sha1-Xp4avctz/Ap8uLKR33jIy9l7h9E=" + }, + "@protobufjs/inquire": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@protobufjs/inquire/-/inquire-1.1.0.tgz", + "integrity": "sha1-/yAOPnzyQp4tyvwRQIKOjMY48Ik=" + }, + "@protobufjs/path": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@protobufjs/path/-/path-1.1.2.tgz", + "integrity": "sha1-bMKyDFya1q0NzP0hynZz2Nf79o0=" + }, + "@protobufjs/pool": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@protobufjs/pool/-/pool-1.1.0.tgz", + "integrity": "sha1-Cf0V8tbTq/qbZbw2ZQbWrXhG/1Q=" + }, + "@protobufjs/utf8": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@protobufjs/utf8/-/utf8-1.1.0.tgz", + "integrity": "sha1-p3c2C1s5oaLlEG+OhY8v0tBgxXA=" + }, "@restart/context": { "version": "2.1.4", "resolved": "https://registry.npmjs.org/@restart/context/-/context-2.1.4.tgz", @@ -1891,6 +2218,11 @@ "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.5.tgz", "integrity": "sha512-7+2BITlgjgDhH0vvwZU/HZJVyk+2XUlvxXe8dFMedNX/aMkaOq++rMAFXc0tM7ij15QaWlbdQASBR9dihi+bDQ==" }, + "@types/long": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/@types/long/-/long-4.0.1.tgz", + "integrity": "sha512-5tXH6Bx/kNGd3MgffdmP4dy2Z+G4eaXw0SE81Tq3BNadtnMR5/ySMzX4SLEzHJzSmPNn4HIdpQsBvXMUykr58w==" + }, "@types/minimatch": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.3.tgz", @@ -4976,6 +5308,11 @@ } } }, + "dom-storage": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/dom-storage/-/dom-storage-2.1.0.tgz", + "integrity": "sha512-g6RpyWXzl0RR6OTElHKBl7nwnK87GUyZMYC7JWsB/IA73vpqK2K6LT39x4VepLxlSsWBFrPVLnsSR5Jyty0+2Q==" + }, "dom-walk": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.2.tgz", @@ -5146,6 +5483,24 @@ "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz", "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=" }, + "encoding": { + "version": "0.1.13", + "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.13.tgz", + "integrity": "sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==", + "requires": { + "iconv-lite": "^0.6.2" + }, + "dependencies": { + "iconv-lite": { + "version": "0.6.2", + "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.2.tgz", + "integrity": "sha512-2y91h5OpQlolefMPmUlivelittSWy0rP+oYVpn6A7GwVHNE8AWzoYOBNmlwks3LobaJxgHCYZAnyNo2GgpNRNQ==", + "requires": { + "safer-buffer": ">= 2.1.2 < 3.0.0" + } + } + } + }, "end-of-stream": { "version": "1.4.4", "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz", @@ -6248,6 +6603,27 @@ "locate-path": "^3.0.0" } }, + "firebase": { + "version": "7.17.2", + "resolved": "https://registry.npmjs.org/firebase/-/firebase-7.17.2.tgz", + "integrity": "sha512-Vj60jedalU7Hr5r7N7JWRcO7AYDFsc5hRar+GbTRL5Q4HaCyWyjD3Z/T2R/Cx09zzXH6cVnf8DVgGKoJKOUBmQ==", + "requires": { + "@firebase/analytics": "0.4.1", + "@firebase/app": "0.6.9", + "@firebase/app-types": "0.6.1", + "@firebase/auth": "0.14.9", + "@firebase/database": "0.6.10", + "@firebase/firestore": "1.16.3", + "@firebase/functions": "0.4.49", + "@firebase/installations": "0.4.15", + "@firebase/messaging": "0.6.21", + "@firebase/performance": "0.3.10", + "@firebase/polyfill": "0.3.36", + "@firebase/remote-config": "0.1.26", + "@firebase/storage": "0.3.41", + "@firebase/util": "0.3.0" + } + }, "flat-cache": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-2.0.1.tgz", @@ -7047,6 +7423,11 @@ "postcss": "^7.0.14" } }, + "idb": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/idb/-/idb-3.0.2.tgz", + "integrity": "sha512-+FLa/0sTXqyux0o6C+i2lOR0VoS60LU/jzUo5xjfY6+7sEEgy4Gz1O7yFBXvjd7N0NyIGWIRg8DcQSLEG+VSPw==" + }, "identity-obj-proxy": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/identity-obj-proxy/-/identity-obj-proxy-3.0.0.tgz", @@ -7540,6 +7921,26 @@ "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz", "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=" }, + "isomorphic-fetch": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz", + "integrity": "sha1-YRrhrPFPXoH3KVB0coGf6XM1WKk=", + "requires": { + "node-fetch": "^1.0.1", + "whatwg-fetch": ">=0.10.0" + }, + "dependencies": { + "node-fetch": { + "version": "1.7.3", + "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz", + "integrity": "sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==", + "requires": { + "encoding": "^0.1.11", + "is-stream": "^1.0.1" + } + } + } + }, "isstream": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz", @@ -8567,6 +8968,11 @@ "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz", "integrity": "sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0=" }, + "lodash.camelcase": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz", + "integrity": "sha1-soqmKIorn8ZRA1x3EfZathkDMaY=" + }, "lodash.debounce": { "version": "4.0.8", "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz", @@ -8614,6 +9020,11 @@ "resolved": "https://registry.npmjs.org/loglevel/-/loglevel-1.6.8.tgz", "integrity": "sha512-bsU7+gc9AJ2SqpzxwU3+1fedl8zAntbtC5XYlt3s2j1hJcn2PsXSmgN8TaLG/J1/2mod4+cE/3vNL70/c1RNCA==" }, + "long": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/long/-/long-4.0.0.tgz", + "integrity": "sha512-XsP+KhQif4bjX1kbuSiySJFNAehNxgLb6hPRGJ9QsUr8ajHkuXGdrHmFUTUUXhDwVX2R5bY4JNZEwbUiMhV+MA==" + }, "loose-envify": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", @@ -9145,6 +9556,11 @@ "tslib": "^1.10.0" } }, + "node-fetch": { + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.0.tgz", + "integrity": "sha512-8dG4H5ujfvFiqDmVu9fQ5bOHUC15JMjMY/Zumv26oOvvVJjM67KF8koCWIabKQ1GJIa9r2mMZscBq/TbdOcmNA==" + }, "node-forge": { "version": "0.9.0", "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.9.0.tgz", @@ -10900,6 +11316,11 @@ "resolved": "https://registry.npmjs.org/promise-inflight/-/promise-inflight-1.0.1.tgz", "integrity": "sha1-mEcocL8igTL8vdhoEputEsPAKeM=" }, + "promise-polyfill": { + "version": "8.1.3", + "resolved": "https://registry.npmjs.org/promise-polyfill/-/promise-polyfill-8.1.3.tgz", + "integrity": "sha512-MG5r82wBzh7pSKDRa9y+vllNHz3e3d4CNj1PQE4BQYxLme0gKYYBm9YENq+UkEikyZ0XbiGWxYlVw3Rl9O/U8g==" + }, "prompts": { "version": "2.3.2", "resolved": "https://registry.npmjs.org/prompts/-/prompts-2.3.2.tgz", @@ -10933,6 +11354,33 @@ "resolved": "https://registry.npmjs.org/property-expr/-/property-expr-2.0.2.tgz", "integrity": "sha512-bc/5ggaYZxNkFKj374aLbEDqVADdYaLcFo8XBkishUWbaAdjlphaBFns9TvRA2pUseVL/wMFmui9X3IdNDU37g==" }, + "protobufjs": { + "version": "6.10.1", + "resolved": "https://registry.npmjs.org/protobufjs/-/protobufjs-6.10.1.tgz", + "integrity": "sha512-pb8kTchL+1Ceg4lFd5XUpK8PdWacbvV5SK2ULH2ebrYtl4GjJmS24m6CKME67jzV53tbJxHlnNOSqQHbTsR9JQ==", + "requires": { + "@protobufjs/aspromise": "^1.1.2", + "@protobufjs/base64": "^1.1.2", + "@protobufjs/codegen": "^2.0.4", + "@protobufjs/eventemitter": "^1.1.0", + "@protobufjs/fetch": "^1.1.0", + "@protobufjs/float": "^1.0.2", + "@protobufjs/inquire": "^1.1.0", + "@protobufjs/path": "^1.1.2", + "@protobufjs/pool": "^1.1.0", + "@protobufjs/utf8": "^1.1.0", + "@types/long": "^4.0.1", + "@types/node": "^13.7.0", + "long": "^4.0.0" + }, + "dependencies": { + "@types/node": { + "version": "13.13.15", + "resolved": "https://registry.npmjs.org/@types/node/-/node-13.13.15.tgz", + "integrity": "sha512-kwbcs0jySLxzLsa2nWUAGOd/s21WU1jebrEdtzhsj1D4Yps1EOuyI1Qcu+FD56dL7NRNIJtDDjcqIG22NwkgLw==" + } + } + }, "proxy-addr": { "version": "2.0.6", "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.6.tgz", @@ -15234,6 +15682,11 @@ "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz", "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==" }, + "xmlhttprequest": { + "version": "1.8.0", + "resolved": "https://registry.npmjs.org/xmlhttprequest/-/xmlhttprequest-1.8.0.tgz", + "integrity": "sha1-Z/4HXFwk/vOfnWX197f+dRcZaPw=" + }, "xregexp": { "version": "4.3.0", "resolved": "https://registry.npmjs.org/xregexp/-/xregexp-4.3.0.tgz", diff --git a/package.json b/package.json index 37ff899..b439199 100644 --- a/package.json +++ b/package.json @@ -10,19 +10,20 @@ "@testing-library/react": "^9.5.0", "@testing-library/user-event": "^7.2.1", "antd": "^4.4.3", - "formik": "^2.1.5", "bootstrap": "^4.5.0", + "firebase": "^7.17.2", + "formik": "^2.1.5", "react": "^16.13.1", - "react-circular-input": "^0.2.1", "react-bootstrap": "^1.3.0", + "react-circular-input": "^0.2.1", "react-dom": "^16.13.1", "react-icons": "^3.10.0", "react-router-dom": "^5.2.0", + "react-scripts": "3.4.1", + "react-share": "^4.2.1", "react-spring": "^8.0.27", "react-vis": "^1.11.7", "recharts": "^1.8.5", - "react-scripts": "3.4.1", - "react-share": "^4.2.1", "swiper": "^6.0.4", "yup": "^0.29.1" }, diff --git a/src/App.js b/src/App.js index 10d0106..f43b7b3 100644 --- a/src/App.js +++ b/src/App.js @@ -58,21 +58,11 @@ function AppContent() {
- - - - - - - - - - - - - - - + + + + +
@@ -84,7 +74,7 @@ function AppContent() { class App extends React.Component { state = { user: null, - log: null, + log: 'Logged', } handleApp= () => { diff --git a/src/components/diary/Diary.jsx b/src/components/diary/Diary.jsx index 1030c23..d965dbd 100644 --- a/src/components/diary/Diary.jsx +++ b/src/components/diary/Diary.jsx @@ -1,18 +1,24 @@ import React from "react"; import DiaryForm from './DiaryForm'; import DiaryDashboard from "./DiaryDashboard"; - +import { DATABASE_URL } from '../../index'; + +const startState = { + posts: [{ + id: null, + date: '', + value: 0, + }], + diaryForm: false, + postFilter: '', +} class Diary extends React.Component { state = { - chartValue: [{ - chartId: 1, - value: 0, - date: 0, - }], - postId: 1, posts: [{ - id: 1, - date: new Date().toLocaleDateString(), + id: null, + date: '', + value: 0, + date: '', title: 'Jak się dziś czujesz?', description: 'To mieisce na Twoje przemyślenia, wraenia i doznania, których doświadczasz kadego dnia...', }], @@ -20,34 +26,28 @@ class Diary extends React.Component { postFilter: '', } + fetchData = () => { + fetch(`${DATABASE_URL}/diary.json`) + .then(response => response.json()) + .then(posts => { + const arrayPosts = posts + ? Object.keys(posts) + .map(key => { + return { + id: key, + ...posts[key], + } + }) + : startState.posts + + this.setState({ + posts: arrayPosts, + }) + }); + } componentDidMount() { - const getPosts = localStorage.getItem('POSTS'); - const POSTS = JSON.parse(getPosts); - const getChartValue = localStorage.getItem('DiaryChartValue') - const VALUE = JSON.parse(getChartValue); - - if(Object.keys(localStorage).includes("DiaryChartValue") && VALUE.length > 0){ - this.setState({ - chartValue: VALUE, - posts: POSTS, - postId: POSTS.length, - }) - } else { - this.setState({ - chartValue: [{ - chartId: 1, - value: 0, - }], - postId: 1, - posts: [{ - id: 1, - date: new Date().toLocaleDateString(), - title: 'Jak się dziś czujesz?', - description: 'To mieisce na Twoje przemyślenia, wraenia i doznania, których doświadczasz kadego dnia...', - }], - }) - } + this.fetchData(); } @@ -59,80 +59,16 @@ class Diary extends React.Component { handleClickLeaveForm = () => { this.setState({ - chartValue: this.state.chartValue, - posts: this.state.posts, diaryForm: false, - postId: this.state.postId, }) } - handleClickSaveInForm = (title, description, value) => { - const newId = this.state.posts.length + 1; - const newValue = value; - if(value <= 0) { - value = 0; - } else { - value = newValue - } - - title.length <= 0 - ? this.setState({ - chartValue: this.state.chartValue, - posts: this.state.posts, - diaryForm: true, - postId: this.state.postId, - }) - : this.setState({ - chartValue: [...this.state.chartValue, { - chartId: newId, - value: value, - date: `${new Date().getDate()}.${new Date().getMonth()+1}`, - }], - posts: [{ - id: newId, - date: new Date().toLocaleDateString(), - title: title, - description: description, - }, ...this.state.posts], - diaryForm: false, - postId: newId, - }) - - const newPost = [{ - id: newId, - date: new Date().toLocaleDateString(), - title: title, - description: description, - }, ...this.state.posts]; - - const newChartValue = [...this.state.chartValue, - { - chartId: newId, - value: value, - date: `${new Date().getDate()}.${new Date().getMonth()+1}`, - }] - - if(title.length > 0) { - localStorage.setItem('POSTS', JSON.stringify(newPost)); - localStorage.setItem('DiaryChartValue', JSON.stringify(newChartValue)); - } - } - - handleClickDelete = (e) => { - const key = 'delete' + e.currentTarget.id; - const elementId = e.target.id; - if(elementId.includes(key)) { - const newPosts = this.state.posts.filter(post => post.id != e.currentTarget.id); - const newValue = this.state.chartValue.filter(value => value.chartId != e.currentTarget.id) - - this.setState({ - chartValue: newValue, - posts: newPosts, - }) - - localStorage.setItem('POSTS', JSON.stringify(newPosts)); - localStorage.setItem('DiaryChartValue', JSON.stringify(newValue)); - } + handleClickDelete = (id) => { + fetch(`${DATABASE_URL}/diary/${id}.json`, { + method: "DELETE" + }).then(() => { + this.fetchData() + }); } handleSearch = (text) => { @@ -150,10 +86,10 @@ class Diary extends React.Component { ? : ( -
- { - props.posts - .filter(post => { - const textFilter = post.title.toLowerCase().includes(props.postFilter.toLowerCase()); - const dateFilter = post.date.includes(props.postFilter); +const DiaryCard = (props) => { + const handleOnClickDelete = (e) => { + props.onDelete(e.target.id) + } - if(dateFilter) { - return dateFilter; - } else if(props.postFilter.length > 0) { - return textFilter; - } else { - return true; - } - }) - .map(post => ( -
-
-

{post.title}

- {post.date} -

{post.description}

-
-
- -
+ console.log(props.posts) + console.log(Object.entries(props.posts)) + const renderCards = props.posts.id + + return ( + <> + { + props.posts[0].id !== null + ? props.posts + .filter(post => { + const textFilter = post.title.toLowerCase().includes(props.postFilter.toLowerCase()); + const dateFilter = post.date.includes(props.postFilter); + + if(dateFilter) { + return dateFilter; + } else if(props.postFilter.length > 0) { + return textFilter; + } else { + return true; + } + }) + .reverse() + .map(post => ( +
+
+

{post.title}

+ {post.date} +

{post.description}

+
+
+ +
+
+ )) + :
+

Jak się dziś czujesz?

+

To mieisce na Twoje przemyślenia i doznania, których doświadczasz na co dzięń...

- )) - } -
-); + } + + ); +} export default DiaryCard; \ No newline at end of file diff --git a/src/components/diary/DiaryChart.jsx b/src/components/diary/DiaryChart.jsx index 149b513..793400d 100644 --- a/src/components/diary/DiaryChart.jsx +++ b/src/components/diary/DiaryChart.jsx @@ -1,9 +1,19 @@ import React, { PureComponent } from 'react'; import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts'; +import { DATABASE_URL } from '../../index'; class DiaryChart extends PureComponent { + startChartValue = [{ + id: null, + value: 0, + date: '0', + }] + + render() { + console.log(this.state) + console.log(this.props.data) return ( (
- +
); diff --git a/src/components/diary/DiaryForm.jsx b/src/components/diary/DiaryForm.jsx index c2c9387..4c1ec9e 100644 --- a/src/components/diary/DiaryForm.jsx +++ b/src/components/diary/DiaryForm.jsx @@ -1,43 +1,26 @@ import React from 'react'; import DiaryFormChart from './DiaryFormChart'; import styles from './Diary.module.css'; +import { DATABASE_URL } from '../../index'; class DiaryForm extends React.Component { state = { - chartValue: { - value: 0, - }, - post: { - title: '', - description: '', - } + value: 5, + date: new Date().toLocaleDateString(), + title: '', + description: '', } handleChangeCharForm = (value) => { - this.setState({ - chartValue: { + this.setState({ value: value, - }, }); } - - handleChangeInput = (e) => { + handleOnChange = (e) => { e.preventDefault(); this.setState({ - post:{ - title: e.target.value, - description: this.state.post.description, - } - }); - } - - handleChangeTextarea = (e) => { - this.setState({ - post: { - title: this.state.post.title, - description: e.target.value, - } + [e.target.name]: e.target.value, }) } @@ -46,33 +29,31 @@ class DiaryForm extends React.Component { } handleOnClickSaveForm = () => { - const title = this.state.post.title; - const description = this.state.post.description; - const value = this.state.chartValue.value; - this.props.onClickSaveInForm(title, description, value); + fetch(`${DATABASE_URL}/diary.json`, { + method: "POST", + body: JSON.stringify(this.state), + }) } render() { return ( - <>

Jak się dziś czujesz?

- +
-
-
+
{ e.key === 'Enter' && e.preventDefault(); }} required ={true} /> @@ -81,20 +62,19 @@ class DiaryForm extends React.Component { className={styles.form__textarea} maxLength={1000} placeholder='To jest mieisce na Twoje dzisiejsze przemyślenia, postanowienia, odczucia, lub cokolwiek tylko zechcesz.' - onChange={this.handleChangeTextarea} + onChange={this.handleOnChange} + name='description' />
-
-
- ); } } diff --git a/src/components/diary/DiaryFormChart.jsx b/src/components/diary/DiaryFormChart.jsx index 48e1e19..434d3f8 100644 --- a/src/components/diary/DiaryFormChart.jsx +++ b/src/components/diary/DiaryFormChart.jsx @@ -15,7 +15,7 @@ class DiaryFormChart extends React.Component { diff --git a/src/components/diary/SearchAppBar.jsx b/src/components/diary/SearchAppBar.jsx index 776e05a..e53b5f2 100644 --- a/src/components/diary/SearchAppBar.jsx +++ b/src/components/diary/SearchAppBar.jsx @@ -64,14 +64,14 @@ const useStyles = makeStyles((theme) => ({ transition: theme.transitions.create('width'), width: '100%', [theme.breakpoints.up('xs')]: { - width: '1px', + width: '65px', '&:focus': { width: '10ch', border: '1px solid #ccc', }, }, [theme.breakpoints.up('sm')]: { - width: '1px', + width: '65px', '&:focus': { width: '20ch', border: '1px solid #ccc', diff --git a/src/index.js b/src/index.js index f5185c1..1cacf15 100644 --- a/src/index.js +++ b/src/index.js @@ -3,6 +3,21 @@ import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import * as serviceWorker from './serviceWorker'; +import firebase from 'firebase'; + +const firebaseConfig = { + apiKey: "AIzaSyAqG1dFZbYLbWt-HlLY7WiE5_72xgl21mk", + authDomain: "javasy-vitamina-app.firebaseapp.com", + databaseURL: "https://javasy-vitamina-app.firebaseio.com", + projectId: "javasy-vitamina-app", + storageBucket: "javasy-vitamina-app.appspot.com", + messagingSenderId: "1048710133433", + appId: "1:1048710133433:web:cfc88da033083ea4af4d68" +}; + +export const DATABASE_URL = "https://javasy-vitamina-app.firebaseio.com"; + +firebase.initializeApp(firebaseConfig); ReactDOM.render( From 26bc2226214a4fd5ef314b74646ab4fda581118c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Pastewski?= Date: Mon, 17 Aug 2020 21:55:19 +0200 Subject: [PATCH 02/11] added some change in diary component --- src/components/diary/Diary.jsx | 16 ++------ src/components/diary/Diary.module.css | 9 ++++- src/components/diary/DiaryCard.jsx | 53 ------------------------- src/components/diary/DiaryCartd.jsx | 32 +++++++++++++++ src/components/diary/DiaryChart.jsx | 7 +--- src/components/diary/DiaryDashboard.jsx | 16 +++++--- src/components/diary/DiaryItemCard.jsx | 45 +++++++++++++++++++++ 7 files changed, 98 insertions(+), 80 deletions(-) delete mode 100644 src/components/diary/DiaryCard.jsx create mode 100644 src/components/diary/DiaryCartd.jsx create mode 100644 src/components/diary/DiaryItemCard.jsx diff --git a/src/components/diary/Diary.jsx b/src/components/diary/Diary.jsx index d965dbd..e4102ee 100644 --- a/src/components/diary/Diary.jsx +++ b/src/components/diary/Diary.jsx @@ -16,11 +16,10 @@ class Diary extends React.Component { state = { posts: [{ id: null, - date: '', value: 0, date: '', - title: 'Jak się dziś czujesz?', - description: 'To mieisce na Twoje przemyślenia, wraenia i doznania, których doświadczasz kadego dnia...', + title: '', + description: '', }], diaryForm: false, postFilter: '', @@ -50,7 +49,6 @@ class Diary extends React.Component { this.fetchData(); } - handleOnClickToForm = () => { this.setState({ diaryForm: true, @@ -63,14 +61,6 @@ class Diary extends React.Component { }) } - handleClickDelete = (id) => { - fetch(`${DATABASE_URL}/diary/${id}.json`, { - method: "DELETE" - }).then(() => { - this.fetchData() - }); - } - handleSearch = (text) => { this.setState({ postFilter: text, @@ -89,7 +79,7 @@ class Diary extends React.Component { data={this.state.posts} onKeyUpSearch={this.handleSearch} onClickToForm={this.handleOnClickToForm} - onDelete={this.handleClickDelete} + onDelete={this.fetchData} /> : { - const handleOnClickDelete = (e) => { - props.onDelete(e.target.id) - } - - console.log(props.posts) - console.log(Object.entries(props.posts)) - const renderCards = props.posts.id - - return ( - <> - { - props.posts[0].id !== null - ? props.posts - .filter(post => { - const textFilter = post.title.toLowerCase().includes(props.postFilter.toLowerCase()); - const dateFilter = post.date.includes(props.postFilter); - - if(dateFilter) { - return dateFilter; - } else if(props.postFilter.length > 0) { - return textFilter; - } else { - return true; - } - }) - .reverse() - .map(post => ( -
-
-

{post.title}

- {post.date} -

{post.description}

-
-
- -
-
- )) - :
-

Jak się dziś czujesz?

-

To mieisce na Twoje przemyślenia i doznania, których doświadczasz na co dzięń...

-
- } - - ); -} - -export default DiaryCard; \ No newline at end of file diff --git a/src/components/diary/DiaryCartd.jsx b/src/components/diary/DiaryCartd.jsx new file mode 100644 index 0000000..ec1d12d --- /dev/null +++ b/src/components/diary/DiaryCartd.jsx @@ -0,0 +1,32 @@ +import React from 'react'; +import Button from '@material-ui/core/Button'; +import DeleteIcon from '@material-ui/icons/Delete'; +import { DATABASE_URL } from '../../index' + +import styles from './Diary.module.css'; + +const DiaryCard = ({ id, title, date, description, onDelete }) => { + const handleOnClickDelete = () => { + fetch(`${DATABASE_URL}/diary/${id}.json`, { + method: 'DELETE' + }).then(() => onDelete()); + } + + return ( +
+
+

{title}

+ {date} +

{description}

+
+ +
+ ); +} + +export default DiaryCard; \ No newline at end of file diff --git a/src/components/diary/DiaryChart.jsx b/src/components/diary/DiaryChart.jsx index 793400d..9cbc227 100644 --- a/src/components/diary/DiaryChart.jsx +++ b/src/components/diary/DiaryChart.jsx @@ -12,17 +12,12 @@ class DiaryChart extends PureComponent { render() { - console.log(this.state) - console.log(this.props.data) return ( ( +const DiaryDashboard = ({ posts, postFilter, onDelete, onKeyUpSearch, onClickToForm, data}) => (

Twój dziennik nastrojów:

- - + +
- - + +
); diff --git a/src/components/diary/DiaryItemCard.jsx b/src/components/diary/DiaryItemCard.jsx new file mode 100644 index 0000000..99fb288 --- /dev/null +++ b/src/components/diary/DiaryItemCard.jsx @@ -0,0 +1,45 @@ +import React from 'react'; +import styles from './Diary.module.css'; +import DiaryCard from './DiaryCartd'; + +const DiaryItemCard = ({ posts, postFilter, onDelete }) => { + + return ( + <> + { + posts[0].id !== null + ? posts + .filter(post => { + const textFilter = post.title.toLowerCase().includes(postFilter.toLowerCase()); + const dateFilter = post.date.includes(postFilter); + const fillFilter = postFilter.length > 0; + + if(dateFilter) { + return dateFilter; + } else if(fillFilter) { + return textFilter; + } + }) + .reverse() + .map(post => { + return ( + + ) + }) + :
+

Jak się dziś czujesz?

+

To mieisce na Twoje przemyślenia i doznania, których doświadczasz na co dzięń...

+
+ } + + ); +} + +export default DiaryItemCard; \ No newline at end of file From 6da8965d7b5fcc2631c24b6ea0d53c0b85c5389d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Pastewski?= Date: Sun, 23 Aug 2020 19:30:53 +0200 Subject: [PATCH 03/11] added filter in DiaryItemCard --- src/components/diary/Diary.jsx | 7 +++ src/components/diary/DiaryDashboard.jsx | 2 - src/components/diary/DiaryItemCard.jsx | 70 ++++++++++++++----------- 3 files changed, 47 insertions(+), 32 deletions(-) diff --git a/src/components/diary/Diary.jsx b/src/components/diary/Diary.jsx index e4102ee..641e89f 100644 --- a/src/components/diary/Diary.jsx +++ b/src/components/diary/Diary.jsx @@ -92,3 +92,10 @@ class Diary extends React.Component { } export default Diary; + + + + +// fetch('https://javasy-vitamina-app.firebaseio.com/diary.json?orderBy="$key"&equalTo="-MFRAgObzG1CYNdGzaOW"').then(res => res.json()).then(console.log); + +// fetch('https://javasy-vitamina-app.firebaseio.com/diary.json?orderBy="title"&equalTo="rr"').then(res => res.json()).then(console.log); \ No newline at end of file diff --git a/src/components/diary/DiaryDashboard.jsx b/src/components/diary/DiaryDashboard.jsx index 91af75e..e52cbdc 100644 --- a/src/components/diary/DiaryDashboard.jsx +++ b/src/components/diary/DiaryDashboard.jsx @@ -13,14 +13,12 @@ const DiaryDashboard = ({ posts, postFilter, onDelete, onKeyUpSearch, onClickToF -
-
); diff --git a/src/components/diary/DiaryItemCard.jsx b/src/components/diary/DiaryItemCard.jsx index 99fb288..7acecf4 100644 --- a/src/components/diary/DiaryItemCard.jsx +++ b/src/components/diary/DiaryItemCard.jsx @@ -3,40 +3,50 @@ import styles from './Diary.module.css'; import DiaryCard from './DiaryCartd'; const DiaryItemCard = ({ posts, postFilter, onDelete }) => { + const filterData = ({ title, date }) => { + const textFilter = title.toLowerCase().includes(postFilter.toLowerCase()); + const dateFilter = date.includes(postFilter); + const fillFilter = postFilter.length > 0; + + if (dateFilter) { + return dateFilter; + } else if(fillFilter) { + return textFilter; + } + } + + if (posts[0].id === null) { + return (
+

Jak się dziś czujesz?

+

To mieisce na Twoje przemyślenia i doznania, których doświadczasz na co dzięń...

+
) + } + + const filteredPosts = posts.filter(filterData); + + if (filteredPosts.length === 0 && postFilter.length > 0) { + return ( +

"Nie znaleziono wpisow"

+ ) + } return ( <> { - posts[0].id !== null - ? posts - .filter(post => { - const textFilter = post.title.toLowerCase().includes(postFilter.toLowerCase()); - const dateFilter = post.date.includes(postFilter); - const fillFilter = postFilter.length > 0; - - if(dateFilter) { - return dateFilter; - } else if(fillFilter) { - return textFilter; - } - }) - .reverse() - .map(post => { - return ( - - ) - }) - :
-

Jak się dziś czujesz?

-

To mieisce na Twoje przemyślenia i doznania, których doświadczasz na co dzięń...

-
+ filteredPosts + .reverse() + .map(post => { + return ( + + ) + }) } ); From 2efd2ab83574d03aa0a13e04b10bd08bf55d16aa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Pastewski?= Date: Mon, 24 Aug 2020 18:27:49 +0200 Subject: [PATCH 04/11] added improved in filter diary --- src/App.js | 4 +--- src/components/diary/Diary.jsx | 2 +- src/components/diary/DiaryForm.jsx | 7 ++++++- 3 files changed, 8 insertions(+), 5 deletions(-) diff --git a/src/App.js b/src/App.js index b5ec9c8..7a5a24d 100644 --- a/src/App.js +++ b/src/App.js @@ -109,8 +109,7 @@ class App extends React.Component { }); } - render() { - + render() { switch(this.state.user) { case Logged: return @@ -123,7 +122,6 @@ class App extends React.Component { default: return } - } } diff --git a/src/components/diary/Diary.jsx b/src/components/diary/Diary.jsx index 641e89f..94b37f8 100644 --- a/src/components/diary/Diary.jsx +++ b/src/components/diary/Diary.jsx @@ -82,7 +82,7 @@ class Diary extends React.Component { onDelete={this.fetchData} /> : } diff --git a/src/components/diary/DiaryForm.jsx b/src/components/diary/DiaryForm.jsx index 4c1ec9e..20a93ba 100644 --- a/src/components/diary/DiaryForm.jsx +++ b/src/components/diary/DiaryForm.jsx @@ -2,6 +2,7 @@ import React from 'react'; import DiaryFormChart from './DiaryFormChart'; import styles from './Diary.module.css'; import { DATABASE_URL } from '../../index'; +import firebase from 'firebase'; class DiaryForm extends React.Component { state = { @@ -9,6 +10,7 @@ class DiaryForm extends React.Component { date: new Date().toLocaleDateString(), title: '', description: '', + identity: firebase.auth().currentUser.email, } handleChangeCharForm = (value) => { @@ -28,11 +30,14 @@ class DiaryForm extends React.Component { this.props.onClickLeaveTheForm(); } - handleOnClickSaveForm = () => { + handleOnClickSaveForm = (e) => { + e.preventDefault(); fetch(`${DATABASE_URL}/diary.json`, { method: "POST", body: JSON.stringify(this.state), }) + this.props.onClickLeaveTheForm(); + this.props.onSaveForm(); } From a785583113b96136ad186fb301c611506089b71c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Pastewski?= Date: Mon, 31 Aug 2020 12:02:45 +0200 Subject: [PATCH 05/11] added redux --- package-lock.json | 31 +++ package.json | 3 + src/components/ChallengeCard.jsx | 318 ++++++++++++++++++++----------- src/index.js | 6 +- src/state/challenges.js | 39 ++++ src/store.js | 26 +++ 6 files changed, 310 insertions(+), 113 deletions(-) create mode 100644 src/state/challenges.js create mode 100644 src/store.js diff --git a/package-lock.json b/package-lock.json index 35f1ec8..ad31179 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12248,6 +12248,18 @@ "warning": "^4.0.3" } }, + "react-redux": { + "version": "7.2.1", + "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.1.tgz", + "integrity": "sha512-T+VfD/bvgGTUA74iW9d2i5THrDQWbweXP0AVNI8tNd1Rk5ch1rnMiJkDD67ejw7YBKM4+REvcvqRuWJb7BLuEg==", + "requires": { + "@babel/runtime": "^7.5.5", + "hoist-non-react-statics": "^3.3.0", + "loose-envify": "^1.4.0", + "prop-types": "^15.7.2", + "react-is": "^16.9.0" + } + }, "react-resize-detector": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/react-resize-detector/-/react-resize-detector-2.3.0.tgz", @@ -12587,6 +12599,20 @@ "balanced-match": "^1.0.0" } }, + "redux": { + "version": "4.0.5", + "resolved": "https://registry.npmjs.org/redux/-/redux-4.0.5.tgz", + "integrity": "sha512-VSz1uMAH24DM6MF72vcojpYPtrTUu3ByVWfPL1nPfVRb5mZVTve5GnNCUV53QM/BZ66xfWrm0CTWoM+Xlz8V1w==", + "requires": { + "loose-envify": "^1.4.0", + "symbol-observable": "^1.2.0" + } + }, + "redux-thunk": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.3.0.tgz", + "integrity": "sha512-km6dclyFnmcvxhAcrQV2AkZmPQjzPDjgVlQtR0EQjxZPyJ0BnMf3in1ryuR8A2qU0HldVRfxYXbFSKlI3N7Slw==" + }, "regenerate": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.1.tgz", @@ -14065,6 +14091,11 @@ "ssr-window": "^3.0.0-alpha.4" } }, + "symbol-observable": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz", + "integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==" + }, "symbol-tree": { "version": "3.2.4", "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz", diff --git a/package.json b/package.json index 74981fb..df7f7e4 100644 --- a/package.json +++ b/package.json @@ -20,12 +20,15 @@ "react-circular-input": "^0.2.1", "react-dom": "^16.13.1", "react-icons": "^3.10.0", + "react-redux": "^7.2.1", "react-router-dom": "^5.2.0", "react-scripts": "3.4.1", "react-share": "^4.2.1", "react-spring": "^8.0.27", "react-vis": "^1.11.7", "recharts": "^1.8.5", + "redux": "^4.0.5", + "redux-thunk": "^2.3.0", "swiper": "^6.0.4", "typescript": "^3.9.7", "yup": "^0.29.1" diff --git a/src/components/ChallengeCard.jsx b/src/components/ChallengeCard.jsx index 0f564ac..08874ff 100644 --- a/src/components/ChallengeCard.jsx +++ b/src/components/ChallengeCard.jsx @@ -17,136 +17,230 @@ import ChallengeImage9 from "./image/challenge9.jpg"; import ChallengeImage10 from "./image/challenge10.jpg"; import { useHistory } from 'react-router-dom'; +import {connect} from 'react-redux'; +import { fetchChallenges } from '../state/challenges'; + import clsx from 'clsx'; import { Link } from "react-router-dom"; import { makeStyles, useTheme } from '@material-ui/core/styles'; +import { DATABASE_URL } from '../index'; + + + // const catName = [ + // "Sylwetka", "Witalność", "Zwyczaje", "Dieta" + // ] + + // const tileData = [ + // { + // img: ChallengeImage1, + // title: 'Spacer dla Twojego umysłu.', + // id: 1, + // category: catName[1] + // }, + // { + // img: ChallengeImage2, + // title: 'Wyśnij sobie spokój.', + // id: 2, + // category: catName[2] + // }, + // { + // img: ChallengeImage3, + // title: 'Pij wodę, będziesz wielki.', + // id: 3, + // category: catName[2] + // }, + // { + // img: ChallengeImage5, + // title: 'Ulepsz swoją dietę.', + // id: 4, + // category: catName[3] + // }, + // { + // img: ChallengeImage6, + // title: 'Rozciągnij się.', + // id: 5, + // category: catName[1] + // }, + // { + // img: ChallengeImage4, + // title: 'Uśmiechnij się.', + // id: 6, + // category: catName[2] + // }, + // { + // img: ChallengeImage7, + // title: 'Czas na ćwiczenia.', + // id: 7, + // category: catName[0] + // }, + // { + // img: ChallengeImage8, + // title: 'Skup się na swoim wnętrzu.', + // id: 8, + // category: catName[1] + // }, + // { + // img: ChallengeImage9, + // title: 'Czas na hobby.', + // id: 9, + // category: catName[2] + // }, + // { + // img: ChallengeImage10, + // title: 'Chwila dla relaksu.', + // id: 10, + // category: catName[2] + // } + // ] + + // const history = useHistory(); + + // const useStyles = makeStyles((theme) => ({ + // gridList: { + // height: 450, + // }, + // tileStyling: { + // width: 100, + // height: 450, + // padding: '5px !important' + // }, + // tileStyle:{ + // borderRadius: '8px', + // boxShadow: 'rgba(39, 39, 39, 0.2) 2px 2px 4px' + // }, + // })); + + // const classes = useStyles(); + + class ChellengeCard extends React.Component { + state = { + challenges: [], + } + + // goToChallange = (id) => { + // let path = 'challenges/'+id; + // history.push(path); + // } + componentDidMount() { + this.props.fetchChallenges(); + } - const catName = [ - "Sylwetka", "Witalność", "Zwyczaje", "Dieta" - ] - - const tileData = [ - { - img: ChallengeImage1, - title: 'Spacer dla Twojego umysłu.', - id: 1, - category: catName[1] - }, - { - img: ChallengeImage2, - title: 'Wyśnij sobie spokój.', - id: 2, - category: catName[2] - }, - { - img: ChallengeImage3, - title: 'Pij wodę, będziesz wielki.', - id: 3, - category: catName[2] - }, - { - img: ChallengeImage5, - title: 'Ulepsz swoją dietę.', - id: 4, - category: catName[3] - }, - { - img: ChallengeImage6, - title: 'Rozciągnij się.', - id: 5, - category: catName[1] - }, - { - img: ChallengeImage4, - title: 'Uśmiechnij się.', - id: 6, - category: catName[2] - }, - { - img: ChallengeImage7, - title: 'Czas na ćwiczenia.', - id: 7, - category: catName[0] - }, - { - img: ChallengeImage8, - title: 'Skup się na swoim wnętrzu.', - id: 8, - category: catName[1] - }, - { - img: ChallengeImage9, - title: 'Czas na hobby.', - id: 9, - category: catName[2] - }, - { - img: ChallengeImage10, - title: 'Chwila dla relaksu.', - id: 10, - category: catName[2] + render() { + return ( +
+

Twoje wyzwania na dziś

+ + {/* {tileData.map((tile) => ( + // + this.goToChallange(tile.id)} + key={tile.img} + // className={classes.tileStyling} + > + {tile.title}/ + {tile.category}} + actionIcon={ + + + } + /> + + // + ))} */} + +
+ ); } - ] + } + + const mapStateProps = (state) => ({ + challenges: state.challenges.data, + status: state.challenges.statue + }); + + const mapDispatchProps = { + fetchChallenges, + } + + export default connect( + mapStateProps, + mapDispatchProps + )(ChellengeCard); + + + + + - export default function TitlebarGridList(props) { - const history = useHistory(); - const useStyles = makeStyles((theme) => ({ - gridList: { - height: 450, - }, - tileStyling: { - width: 100, - height: 450, - padding: '5px !important' - }, - tileStyle:{ - borderRadius: '8px', - boxShadow: 'rgba(39, 39, 39, 0.2) 2px 2px 4px' - }, - })); +// export default function TitlebarGridList(props) { +// const history = useHistory(); +// const useStyles = makeStyles((theme) => ({ +// gridList: { +// height: 450, +// }, +// tileStyling: { +// width: 100, +// height: 450, +// padding: '5px !important' +// }, +// tileStyle:{ +// borderRadius: '8px', +// boxShadow: 'rgba(39, 39, 39, 0.2) 2px 2px 4px' +// }, +// })); - const classes = useStyles(); +// const classes = useStyles(); - function goToChallange(id) { - let path = 'challenges/'+id; +// function goToChallange(id) { +// let path = 'challenges/'+id; - history.push(path); - } +// history.push(path); +// } - return ( +// return ( -/* -classes={{tile: classes.boxShadow}} -*/ +// /* +// classes={{tile: classes.boxShadow}} +// */ -
-

Twoje wyzwania na dziś

- - {tileData.map((tile) => ( - // - goToChallange(tile.id)} key={tile.img} className={classes.tileStyling}> +//
+//

Twoje wyzwania na dziś

+// +// {tileData.map((tile) => ( +// // +// goToChallange(tile.id)} +// key={tile.img} +// // className={classes.tileStyling} +// > - {tile.title}/ - {tile.category}} - actionIcon={ - - - } - /> - - // - ))} - -
- ); -} \ No newline at end of file +// {tile.title}/ +// {tile.category}} +// actionIcon={ +// +// +// } +// /> +// +// // +// ))} +// +//
+// ); +// } \ No newline at end of file diff --git a/src/index.js b/src/index.js index 1cacf15..f2732a0 100644 --- a/src/index.js +++ b/src/index.js @@ -4,6 +4,8 @@ import './index.css'; import App from './App'; import * as serviceWorker from './serviceWorker'; import firebase from 'firebase'; +import { Provider } from 'react-redux'; +import store from './store'; const firebaseConfig = { apiKey: "AIzaSyAqG1dFZbYLbWt-HlLY7WiE5_72xgl21mk", @@ -21,7 +23,9 @@ firebase.initializeApp(firebaseConfig); ReactDOM.render( - + + + , document.getElementById('root') ); diff --git a/src/state/challenges.js b/src/state/challenges.js new file mode 100644 index 0000000..a45fca4 --- /dev/null +++ b/src/state/challenges.js @@ -0,0 +1,39 @@ +import { DATABASE_URL } from '../index'; + +// INITIAL STATE +const initialState = { + data: [], +} + +//ACTIONS +const SET_CHALLENGES = 'SET_CHALLENGES' + +//REDUCER +export const challenges = (state = initialState, action) => { + switch(action.type) { + case SET_CHALLENGES: + return { + data: action.payload, + } + default: + return state; + } +} + +//ACTION CREATORS +export const setChanllenges = (challenges) => ({type: SET_CHALLENGES, payload: challenges}); + +export const fetchChallenges = () => { + return (dispatch) => { + fetch(`${DATABASE_URL}/challenges.json`) + .then(resp => resp.json()) + .then(data => { + const formattedData = data + ? Object.keys(data) + .map(key => ({...data[key]})) + : [] + + dispatch(setChanllenges(formattedData)) + }) + } +} diff --git a/src/store.js b/src/store.js new file mode 100644 index 0000000..578c0fe --- /dev/null +++ b/src/store.js @@ -0,0 +1,26 @@ +import { createStore, combineReducers, applyMiddleware, compose} from 'redux'; +import thunk from 'redux-thunk'; + +import {challenges} from './state/challenges'; + +const logger = store => next => action => { + console.group(action.type); + console.log('prev state', store.getState()); + console.log('dispatching', action); + let result = next(action); + console.log('next state', store.getState()); + console.groupEnd(); + return result +}; + +const middleware = applyMiddleware(thunk, logger); +const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; +const enhancer = composeEnhancers(middleware); + +const combinedReducers = combineReducers({ + challenges, +}); + +const store = createStore(combinedReducers, enhancer); + +export default store; \ No newline at end of file From 9da30d01c2d0a39f38ca8a892c1f2b2d14b3a8f2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Pastewski?= Date: Wed, 2 Sep 2020 15:24:57 +0200 Subject: [PATCH 06/11] work at challlenges section --- src/App.js | 2 +- src/components/ChallengeCard.jsx | 252 +++++-------------------- src/components/Challenges.module.css | 12 ++ src/components/ChallengesList-old.jsx | 240 +++++++++++++++++++++++ src/components/ChallengesList.jsx | 232 ----------------------- src/components/dashboard/Dashboard.jsx | 10 +- src/state/challenges.js | 12 +- 7 files changed, 321 insertions(+), 439 deletions(-) create mode 100644 src/components/Challenges.module.css create mode 100644 src/components/ChallengesList-old.jsx delete mode 100644 src/components/ChallengesList.jsx diff --git a/src/App.js b/src/App.js index 7a5a24d..4301f79 100644 --- a/src/App.js +++ b/src/App.js @@ -14,7 +14,7 @@ import {makeStyles} from '@material-ui/core/styles'; import { BrowserRouter, Switch, Route } from 'react-router-dom' import './App.css'; -import ChallengesList from './components/ChallengesList'; +import ChallengesList from './components/ChallengesList-old'; import firebase from "firebase"; /* import Password from 'antd/lib/input/Password'; */ diff --git a/src/components/ChallengeCard.jsx b/src/components/ChallengeCard.jsx index 08874ff..390080c 100644 --- a/src/components/ChallengeCard.jsx +++ b/src/components/ChallengeCard.jsx @@ -2,9 +2,9 @@ import React from 'react'; import GridList from '@material-ui/core/GridList'; import GridListTile from '@material-ui/core/GridListTile'; import GridListTileBar from '@material-ui/core/GridListTileBar'; -import ListSubheader from '@material-ui/core/ListSubheader'; import IconButton from '@material-ui/core/IconButton'; import InfoIcon from '@material-ui/icons/Info'; + import ChallengeImage1 from "./image/challenge1.jpg"; import ChallengeImage2 from "./image/challenge2.jpg"; import ChallengeImage3 from "./image/challenge3.jpg"; @@ -15,232 +15,82 @@ import ChallengeImage7 from "./image/challenge7.jpg"; import ChallengeImage8 from "./image/challenge8.jpg"; import ChallengeImage9 from "./image/challenge9.jpg"; import ChallengeImage10 from "./image/challenge10.jpg"; -import { useHistory } from 'react-router-dom'; +import styles from './Challenges.module.css'; import {connect} from 'react-redux'; -import { fetchChallenges } from '../state/challenges'; - -import clsx from 'clsx'; -import { Link } from "react-router-dom"; -import { makeStyles, useTheme } from '@material-ui/core/styles'; -import { DATABASE_URL } from '../index'; - - - // const catName = [ - // "Sylwetka", "Witalność", "Zwyczaje", "Dieta" - // ] +import { fetchChallenges,changeStatusOnProggres } from '../state/challenges'; - // const tileData = [ - // { - // img: ChallengeImage1, - // title: 'Spacer dla Twojego umysłu.', - // id: 1, - // category: catName[1] - // }, - // { - // img: ChallengeImage2, - // title: 'Wyśnij sobie spokój.', - // id: 2, - // category: catName[2] - // }, - // { - // img: ChallengeImage3, - // title: 'Pij wodę, będziesz wielki.', - // id: 3, - // category: catName[2] - // }, - // { - // img: ChallengeImage5, - // title: 'Ulepsz swoją dietę.', - // id: 4, - // category: catName[3] - // }, - // { - // img: ChallengeImage6, - // title: 'Rozciągnij się.', - // id: 5, - // category: catName[1] - // }, - // { - // img: ChallengeImage4, - // title: 'Uśmiechnij się.', - // id: 6, - // category: catName[2] - // }, - // { - // img: ChallengeImage7, - // title: 'Czas na ćwiczenia.', - // id: 7, - // category: catName[0] - // }, - // { - // img: ChallengeImage8, - // title: 'Skup się na swoim wnętrzu.', - // id: 8, - // category: catName[1] - // }, - // { - // img: ChallengeImage9, - // title: 'Czas na hobby.', - // id: 9, - // category: catName[2] - // }, - // { - // img: ChallengeImage10, - // title: 'Chwila dla relaksu.', - // id: 10, - // category: catName[2] - // } - // ] - // const history = useHistory(); - // const useStyles = makeStyles((theme) => ({ - // gridList: { - // height: 450, - // }, - // tileStyling: { - // width: 100, - // height: 450, - // padding: '5px !important' - // }, - // tileStyle:{ - // borderRadius: '8px', - // boxShadow: 'rgba(39, 39, 39, 0.2) 2px 2px 4px' - // }, - // })); + class ChellengeCard extends React.Component { - // const classes = useStyles(); - class ChellengeCard extends React.Component { - state = { - challenges: [], + goToChallenge = (challengeId) => { + let data = {}; + this.props.challenges.map(challenge => { + if(challenge.id === challengeId) { + data = { + category: challenge.category, + description: challenge.description, + id: challenge.id, + img: challenge.img, + title: challenge.title, + status: "inProgress", + } + }; + return challenge; + }) + // console.log(data) + this.props.changeStatusOnProggres(challengeId, data); } - // goToChallange = (id) => { - // let path = 'challenges/'+id; - // history.push(path); - // } - componentDidMount() { this.props.fetchChallenges(); } render() { return ( -
-

Twoje wyzwania na dziś

+ //
+ //

Twoje wyzwania na dziś

- {/* {tileData.map((tile) => ( - // - this.goToChallange(tile.id)} - key={tile.img} - // className={classes.tileStyling} - > - {tile.title}/ - {tile.category}} - actionIcon={ - - - } - /> - - // - ))} */} + { + this.props.challenges.map(challenge => { + return ( + this.goToChallenge(challenge.id)} + key={challenge.img} + > + {challenge.title} + {challenge.category}} + actionIcon={} + /> + + ) + }) + } -
+ //
); } } const mapStateProps = (state) => ({ challenges: state.challenges.data, - status: state.challenges.statue }); const mapDispatchProps = { fetchChallenges, + changeStatusOnProggres, } - export default connect( - mapStateProps, - mapDispatchProps - )(ChellengeCard); - - - - - - - - -// export default function TitlebarGridList(props) { -// const history = useHistory(); - -// const useStyles = makeStyles((theme) => ({ -// gridList: { -// height: 450, -// }, -// tileStyling: { -// width: 100, -// height: 450, -// padding: '5px !important' -// }, -// tileStyle:{ -// borderRadius: '8px', -// boxShadow: 'rgba(39, 39, 39, 0.2) 2px 2px 4px' -// }, -// })); - -// const classes = useStyles(); - - -// function goToChallange(id) { -// let path = 'challenges/'+id; - -// history.push(path); -// } - - - -// return ( - - -// /* -// classes={{tile: classes.boxShadow}} -// */ - -//
-//

Twoje wyzwania na dziś

-// -// {tileData.map((tile) => ( -// // -// goToChallange(tile.id)} -// key={tile.img} -// // className={classes.tileStyling} -// > - -// {tile.title}/ -// {tile.category}} -// actionIcon={ -// -// -// } -// /> -// -// // -// ))} -// -//
-// ); -// } \ No newline at end of file + export default connect(mapStateProps, mapDispatchProps)(ChellengeCard); \ No newline at end of file diff --git a/src/components/Challenges.module.css b/src/components/Challenges.module.css new file mode 100644 index 0000000..e024b0e --- /dev/null +++ b/src/components/Challenges.module.css @@ -0,0 +1,12 @@ +.card { + width: 100%; + height: 450px; + /* padding: 5px !important; */ + border-radius: 8px; + box-shadow: rgba(39, 39, 39, 0.2) 2px 2px 4px; +} +.img_style { + width: 100%; + /* border-radius: 8px; + box-shadow: rgba(39, 39, 39, 0.2) 2px 2px 4px; */ +} \ No newline at end of file diff --git a/src/components/ChallengesList-old.jsx b/src/components/ChallengesList-old.jsx new file mode 100644 index 0000000..c2cf92b --- /dev/null +++ b/src/components/ChallengesList-old.jsx @@ -0,0 +1,240 @@ +import React from 'react'; +import GridList from '@material-ui/core/GridList'; +import GridListTile from '@material-ui/core/GridListTile'; +import GridListTileBar from '@material-ui/core/GridListTileBar'; +import ListSubheader from '@material-ui/core/ListSubheader'; +import IconButton from '@material-ui/core/IconButton'; +import InfoIcon from '@material-ui/icons/Info'; +import ChallengeImage1 from "./image/challenge1.jpg"; +import ChallengeImage2 from "./image/challenge2.jpg"; +import ChallengeImage3 from "./image/challenge3.jpg"; +import ChallengeImage4 from "./image/challenge4.jpg"; +import ChallengeImage5 from "./image/challenge5.jpg"; +import ChallengeImage6 from "./image/challenge6.jpg"; +import ChallengeImage7 from "./image/challenge7.jpg"; +import ChallengeImage8 from "./image/challenge8.jpg"; +import ChallengeImage9 from "./image/challenge9.jpg"; + +import ChallengeCard from './ChallengeCard'; + +import clsx from 'clsx'; +import { Link } from "react-router-dom"; +import { makeStyles, useTheme } from '@material-ui/core/styles'; +import ListGroup from "react-bootstrap/ListGroup" +import SearchBar from './SearchBar'; +import Grid from '@material-ui/core/Grid'; + +import {withStyles } from '@material-ui/core/styles'; + + // The example data is structured as follows: + + const styles = { + root: { + display: 'flex', + flexWrap: 'wrap', + justifyContent: 'flex-start', + overflow: 'hidden', + padding: 0, + + + }, + // x: { + // margin: 50 + // }, + gridList: { + width: 500, + height: 450, + + }, + tileStyling: { + width: 100, + height: 450, + }, + boxShadow:{ + boxShadow: '3px 3px 5px #aaaaaa', + margin: '5px', + padding: '0 !important' + } + }; + + class ChallengesList extends React.Component { + + + // constructor(props){ + // super(props); + // new Date(); + + // this.state = { + // filter: { + // period: [1,30], + // text: "", + // groups: [0,1,2,3] + // }, + // categories: [ + // {id: 0, title:"Sylwetka", value:5, selected: false}, + // {id: 1, title: "Witalność", value:5, selected: false}, + // {id: 2, title: "Zwyczaje", value:5, selected: false}, + // {id: 3, title: "Dieta", value:5, selected: false} + // ], + // challanges: [ + // { + // img: ChallengeImage1, + // title: 'Spacer dla Twojego umysłu.', + // id: 1, + // category: 0, + // period: 5 + // }, + // { + // img: ChallengeImage2, + // title: 'Wyśnij sobie spokój.', + // id: 2, + // category: 1, + // period: 25 + // }, + // { + // img: ChallengeImage3, + // title: 'Pij wodę, będziesz wielki.', + // id: 3, + // category: 2, + // period: 5 + // }, + // { + // img: ChallengeImage5, + // title: 'Ulepsz swoją dietę.', + // id: 4, + // category: 0, + // period: 25 + // }, + // { + // img: ChallengeImage6, + // title: 'Rozciągnij się.', + // id: 5, + // category: 1, + // period: 5 + // }, + // { + // img: ChallengeImage4, + // title: 'Uśmiechnij się.', + // id: 6, + // category: 2, + // period: 1 + // }, + // { + // img: ChallengeImage7, + // title: 'Czas na ćwiczenia.', + // id: 7, + // category: 0, + // period: 1 + // }, + // { + // img: ChallengeImage8, + // title: 'Skup się na swoim wnętrzu.', + // id: 8, + // category: 1, + // period: 1 + // }, + // { + // img: ChallengeImage9, + // title: 'Czas na hobby.', + // id: 9, + // category: 2, + // period: 1 + // } + // ] + // }; + // } + + + // handleMultiFilterChange = (grp, event, val) => { + + // switch(grp){ + // case "category": + + // // 1. Make a shallow copy of the items + // let categories = [...this.state.categories]; + // // 2. Make a shallow copy of the item you want to mutate + + // categories.forEach((category, catIndex) => { + + // category.selected = false; + + // val.forEach((value,valueIndex) => { + + // if(value.id === category.id){ + // category.selected = true; + // categories[catIndex] = category; + // } + // }); + // }); + + // this.setState({categories}); + // break; + // case "filter_text": + + // this.setState({ + // filter:{ + // text: event + // } + // }); + // break; + + // case "filter_period": + + // this.setState({ + // filter:{ + // period: val + // } + // }); + // break; + // case "filter_groups": + // let groups = event; + + // let newGroupsArr = []; + + // groups.forEach((item, index) => { + // if(item.selected){ + // newGroupsArr.push(item.key); + // } + // }); + + // this.setState({ + // filter:{ + // groups: newGroupsArr + // } + // }); + // break; + // default: + // } + + + // } + + render() { + + const {classes } = this.props; + + return ( + + +
+

Wyzwania

+
+ +
+ {/* */} +
+ + + + ); + } + +} + +export default withStyles(styles)(ChallengesList); diff --git a/src/components/ChallengesList.jsx b/src/components/ChallengesList.jsx deleted file mode 100644 index caf56de..0000000 --- a/src/components/ChallengesList.jsx +++ /dev/null @@ -1,232 +0,0 @@ -import React from 'react'; -import GridList from '@material-ui/core/GridList'; -import GridListTile from '@material-ui/core/GridListTile'; -import GridListTileBar from '@material-ui/core/GridListTileBar'; -import ListSubheader from '@material-ui/core/ListSubheader'; -import IconButton from '@material-ui/core/IconButton'; -import InfoIcon from '@material-ui/icons/Info'; -import ChallengeImage1 from "./image/challenge1.jpg"; -import ChallengeImage2 from "./image/challenge2.jpg"; -import ChallengeImage3 from "./image/challenge3.jpg"; -import ChallengeImage4 from "./image/challenge4.jpg"; -import ChallengeImage5 from "./image/challenge5.jpg"; -import ChallengeImage6 from "./image/challenge6.jpg"; -import ChallengeImage7 from "./image/challenge7.jpg"; -import ChallengeImage8 from "./image/challenge8.jpg"; -import ChallengeImage9 from "./image/challenge9.jpg"; - -import clsx from 'clsx'; -import { Link } from "react-router-dom"; -import { makeStyles, useTheme } from '@material-ui/core/styles'; -import ListGroup from "react-bootstrap/ListGroup" -import SearchBar from './SearchBar'; -import Grid from '@material-ui/core/Grid'; - -import {withStyles } from '@material-ui/core/styles'; - - // The example data is structured as follows: - - const styles = { - root: { - display: 'flex', - flexWrap: 'wrap', - justifyContent: 'flex-start', - overflow: 'hidden', - padding: 0, - - - }, - // x: { - // margin: 50 - // }, - gridList: { - width: 500, - height: 450, - - }, - tileStyling: { - width: 100, - height: 450, - }, - boxShadow:{ - boxShadow: '3px 3px 5px #aaaaaa', - margin: '5px', - padding: '0 !important' - } - }; - - class ChallengesList extends React.Component { - - - constructor(props){ - super(props); - new Date(); - - this.state = { - filter: { - period: [1,30], - text: "", - groups: [0,1,2,3] - }, - categories: [ - {id: 0, title:"Sylwetka", value:5, selected: false}, - {id: 1, title: "Witalność", value:5, selected: false}, - {id: 2, title: "Zwyczaje", value:5, selected: false}, - {id: 3, title: "Dieta", value:5, selected: false} - ], - challanges: [ - { - img: ChallengeImage1, - title: 'Spacer dla Twojego umysłu.', - id: 1, - category: 0, - period: 5 - }, - { - img: ChallengeImage2, - title: 'Wyśnij sobie spokój.', - id: 2, - category: 1, - period: 25 - }, - { - img: ChallengeImage3, - title: 'Pij wodę, będziesz wielki.', - id: 3, - category: 2, - period: 5 - }, - { - img: ChallengeImage5, - title: 'Ulepsz swoją dietę.', - id: 4, - category: 0, - period: 25 - }, - { - img: ChallengeImage6, - title: 'Rozciągnij się.', - id: 5, - category: 1, - period: 5 - }, - { - img: ChallengeImage4, - title: 'Uśmiechnij się.', - id: 6, - category: 2, - period: 1 - }, - { - img: ChallengeImage7, - title: 'Czas na ćwiczenia.', - id: 7, - category: 0, - period: 1 - }, - { - img: ChallengeImage8, - title: 'Skup się na swoim wnętrzu.', - id: 8, - category: 1, - period: 1 - }, - { - img: ChallengeImage9, - title: 'Czas na hobby.', - id: 9, - category: 2, - period: 1 - } - ] - }; - } - - - handleMultiFilterChange = (grp, event, val) => { - - switch(grp){ - case "category": - - // 1. Make a shallow copy of the items - let categories = [...this.state.categories]; - // 2. Make a shallow copy of the item you want to mutate - - categories.forEach((category, catIndex) => { - - category.selected = false; - - val.forEach((value,valueIndex) => { - - if(value.id === category.id){ - category.selected = true; - categories[catIndex] = category; - } - }); - }); - - this.setState({categories}); - break; - case "filter_text": - - this.setState({ - filter:{ - text: event - } - }); - break; - - case "filter_period": - - this.setState({ - filter:{ - period: val - } - }); - break; - case "filter_groups": - let groups = event; - - let newGroupsArr = []; - - groups.forEach((item, index) => { - if(item.selected){ - newGroupsArr.push(item.key); - } - }); - - this.setState({ - filter:{ - groups: newGroupsArr - } - }); - break; - default: - } - - - } - - render() { - - const {classes } = this.props; - - return ( - - -
-

Wyzwania

-
- -
- -
- - - - ); - } - -} - -export default withStyles(styles)(ChallengesList); diff --git a/src/components/dashboard/Dashboard.jsx b/src/components/dashboard/Dashboard.jsx index 5472b65..562b084 100644 --- a/src/components/dashboard/Dashboard.jsx +++ b/src/components/dashboard/Dashboard.jsx @@ -21,10 +21,12 @@ class Dashboard extends React.Component {

Poziom wytrwałości

- - - - +
+ +

Twoje wyzwania na dziś

+ + +
); diff --git a/src/state/challenges.js b/src/state/challenges.js index a45fca4..7f653ee 100644 --- a/src/state/challenges.js +++ b/src/state/challenges.js @@ -30,10 +30,20 @@ export const fetchChallenges = () => { .then(data => { const formattedData = data ? Object.keys(data) - .map(key => ({...data[key]})) + .map(key => ({id: key, ...data[key]})) : [] dispatch(setChanllenges(formattedData)) }) } } + +export const changeStatusOnProggres = (challengeId, data) => { + return (dispatch) => { + fetch(`${DATABASE_URL}/challenges/${challengeId}.json`, { + method: 'PUT', + body: JSON.stringify(data) + }) + .then(() => dispatch(fetchChallenges())) + } +} From 2651325e0f0919d3553bad39cf99999d33d47b80 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Pastewski?= Date: Fri, 4 Sep 2020 23:05:53 +0200 Subject: [PATCH 07/11] improved challenges-section with redux --- src/App.css | 3 + src/App.js | 6 +- src/components/ChallengeCard.jsx | 154 ++++++----- src/components/ChallengeDescription.jsx | 204 ++++++--------- src/components/ChallengeFinished.jsx | 112 ++++---- src/components/ChallengeInProgress.jsx | 118 +++------ src/components/Challenges.jsx | 45 ++++ src/components/Challenges.module.css | 48 +++- src/components/ChallengesList-old.jsx | 240 ------------------ src/components/ChallengesList.jsx | 44 ++++ src/components/Challlenges.jsx | 10 - src/components/Dashboard.jsx | 32 --- src/components/Dashboard.module.css | 15 -- src/components/Home.jsx | 12 - src/components/SearchBar-old.jsx | 120 +++++++++ src/components/SearchBar.jsx | 140 ++-------- .../dashboard/ChartsStyle.module.css | 2 +- src/components/dashboard/Dashboard.jsx | 44 +++- src/components/dashboard/Dashboard.module.css | 4 +- src/components/diary/Diary.module.css | 2 +- src/components/diary/DiaryDashboard.jsx | 2 +- src/state/challenges.js | 12 +- 22 files changed, 592 insertions(+), 777 deletions(-) create mode 100644 src/components/Challenges.jsx delete mode 100644 src/components/ChallengesList-old.jsx create mode 100644 src/components/ChallengesList.jsx delete mode 100644 src/components/Challlenges.jsx delete mode 100644 src/components/Dashboard.jsx delete mode 100644 src/components/Dashboard.module.css delete mode 100644 src/components/Home.jsx create mode 100644 src/components/SearchBar-old.jsx diff --git a/src/App.css b/src/App.css index a939087..9589bc5 100644 --- a/src/App.css +++ b/src/App.css @@ -5,4 +5,7 @@ html{ box-sizing: border-box; +} +p, h1, h2, h3, h4 { + margin: 0; } \ No newline at end of file diff --git a/src/App.js b/src/App.js index 4301f79..8d29106 100644 --- a/src/App.js +++ b/src/App.js @@ -5,7 +5,7 @@ import SignIn from './components/SignIn/SignIn'; import SignUp from './components/SignUp/SignUp'; import PasswordReset from './components/SignIn/PasswordReset'; import About from './components/About'; -import Favorite from './components/Challlenges'; +import Favorite from './components/Challenges'; import ChallengeDescription from './components/ChallengeDescription'; import UserProfile from './components/UserProfile'; import Diary from './components/diary/Diary'; @@ -14,7 +14,7 @@ import {makeStyles} from '@material-ui/core/styles'; import { BrowserRouter, Switch, Route } from 'react-router-dom' import './App.css'; -import ChallengesList from './components/ChallengesList-old'; +import Challenges from './components/Challenges'; import firebase from "firebase"; /* import Password from 'antd/lib/input/Password'; */ @@ -59,7 +59,7 @@ function AppContent() {
- + diff --git a/src/components/ChallengeCard.jsx b/src/components/ChallengeCard.jsx index 390080c..75db3a9 100644 --- a/src/components/ChallengeCard.jsx +++ b/src/components/ChallengeCard.jsx @@ -17,80 +17,100 @@ import ChallengeImage9 from "./image/challenge9.jpg"; import ChallengeImage10 from "./image/challenge10.jpg"; import styles from './Challenges.module.css'; -import {connect} from 'react-redux'; -import { fetchChallenges,changeStatusOnProggres } from '../state/challenges'; +const ChallengeCard = ({id, title, category, status}) => ( + this.goToChallenge(challenge.id)} + // key={id} + > + {title} + {category}} + actionIcon={} + /> + +); - class ChellengeCard extends React.Component { +export default ChallengeCard; - goToChallenge = (challengeId) => { - let data = {}; - this.props.challenges.map(challenge => { - if(challenge.id === challengeId) { - data = { - category: challenge.category, - description: challenge.description, - id: challenge.id, - img: challenge.img, - title: challenge.title, - status: "inProgress", - } - }; - return challenge; - }) - // console.log(data) - this.props.changeStatusOnProggres(challengeId, data); - } +// class ChellengeCard extends React.Component { - componentDidMount() { - this.props.fetchChallenges(); - } - render() { - return ( - //
- //

Twoje wyzwania na dziś

- - { - this.props.challenges.map(challenge => { - return ( - this.goToChallenge(challenge.id)} - key={challenge.img} - > - {challenge.title} - {challenge.category}} - actionIcon={} - /> - - ) - }) - } - - //
- ); - } - } +// // goToChallenge = (challengeId) => { +// // let data = {}; +// // this.props.challenges.map(challenge => { +// // if(challenge.id === challengeId) { +// // data = { +// // category: challenge.category, +// // description: challenge.description, +// // id: challenge.id, +// // img: challenge.img, +// // title: challenge.title, +// // status: "inProgress", +// // } +// // }; +// // return challenge; +// // }) +// // // console.log(data) +// // this.props.changeStatusOnProggres(challengeId, data); +// // } - const mapStateProps = (state) => ({ - challenges: state.challenges.data, - }); +// // componentDidMount() { +// // this.props.fetchChallenges(); +// // } - const mapDispatchProps = { - fetchChallenges, - changeStatusOnProggres, - } +// render() { +// return ( +// //
+// //

Twoje wyzwania na dziś

+// +// { +// this.props.challenges.map(challenge => { +// return ( +// this.goToChallenge(challenge.id)} +// key={challenge.img} +// > +// {challenge.title} +// {challenge.category}} +// actionIcon={} +// /> +// +// ) +// }) +// } +// +// //
+// ); +// } +// } - export default connect(mapStateProps, mapDispatchProps)(ChellengeCard); \ No newline at end of file +// const mapStateProps = (state) => ({ +// challenges: state.challenges.data, +// }); + +// const mapDispatchProps = { +// fetchChallenges, +// changeStatusOnProggres, +// } + +// export default connect(mapStateProps, mapDispatchProps)(ChellengeCard); \ No newline at end of file diff --git a/src/components/ChallengeDescription.jsx b/src/components/ChallengeDescription.jsx index 0e4fcc4..6bbebff 100644 --- a/src/components/ChallengeDescription.jsx +++ b/src/components/ChallengeDescription.jsx @@ -1,6 +1,9 @@ import React from 'react'; import Button from "@material-ui/core/Button"; -import { makeStyles, useTheme } from '@material-ui/core/styles'; + +import { connect } from 'react-redux'; +import { fetchChallenges, changeStatusOnDone, changeStatusOnProgress } from '../state/challenges'; + import ChallengeImage1 from "./image/challenge1.jpg"; import ChallengeImage2 from "./image/challenge2.jpg"; import ChallengeImage3 from "./image/challenge3.jpg"; @@ -12,136 +15,91 @@ import ChallengeImage8 from "./image/challenge8.jpg"; import ChallengeImage9 from "./image/challenge9.jpg"; import ChallengeImage10 from "./image/challenge10.jpg"; -/*import { tileData } from './ChallengesList';*/ -import { useParams } from 'react-router-dom'; -import { useState, useEffect } from 'react'; +class ChallengeDescription extends React.Component { -const useStyles = makeStyles((theme) => ({ - root: { - display: 'flex', - }, - boxShadow: { - boxShadow: '3px 3px 5px #aaaaaa', + componentDidMount() { + this.props.fetchChallenges(); } -})); - -const catName = [ - "Sylwetka", "Witalność", "Zwyczaje", "Dieta" - ] - const tileData = [ - { - img: ChallengeImage1, - title: 'Spacer dla Twojego umysłu.', - id: 1, - category: catName[1] - }, - { - img: ChallengeImage2, - title: 'Wyśnij sobie spokój.', - id: 2, - category: catName[2] - }, - { - img: ChallengeImage3, - title: 'Pij wodę, będziesz wielki.', - id: 3, - category: catName[2] - }, - { - img: ChallengeImage5, - title: 'Ulepsz swoją dietę.', - id: 4, - category: catName[3] - }, - { - img: ChallengeImage6, - title: 'Rozciągnij się.', - id: 5, - category: catName[1] - }, - { - img: ChallengeImage4, - title: 'Uśmiechnij się.', - id: 6, - category: catName[2] - }, - { - img: ChallengeImage7, - title: 'Czas na ćwiczenia.', - id: 7, - category: catName[0] - }, - { - img: ChallengeImage8, - title: 'Skup się na swoim wnętrzu.', - id: 8, - category: catName[1] - }, - { - img: ChallengeImage9, - title: 'Czas na hobby.', - id: 9, - category: catName[2] - }, - { - img: ChallengeImage10, - title: 'Chwila dla relaksu.', - id: 10, - category: catName[2] + handleFinished = (itemId) => { + let data = {}; + this.props.challenges.map(challenge => { + if(challenge.id === itemId) { + data = { + category: challenge.category, + description: challenge.description, + id: challenge.id, + img: challenge.img, + title: challenge.title, + status: "isDone", + } + }; + return challenge; + }) + this.props.changeStatusOnDone(itemId, data); } - ] - -const ChallengeDescription = (props) => { - - const classes = useStyles(); - const theme = useTheme(); - - const [finished, setFinished] = useState(null) - - let { id } = useParams() - const challenge = tileData.find(challenge => challenge.id.toString() === id); - const handleInProgress = () => { - setFinished(false) - console.log(finished) - localStorage.setItem(`InProgress${challenge.id}`, JSON.stringify(challenge)) + handleInProgress = (itemId) => { + let data = {}; + this.props.challenges.map(challenge => { + if(challenge.id === itemId) { + data = { + category: challenge.category, + description: challenge.description, + id: challenge.id, + img: challenge.img, + title: challenge.title, + status: "inProgress", + } + }; + return challenge; + }) + this.props.changeStatusOnProgress(itemId, data); } - const handleFinished = () => { - setFinished(true) - console.log(finished) - localStorage.removeItem(`InProgress${challenge.id}`) - localStorage.setItem(`Finished${challenge.id}`, JSON.stringify(challenge)) -} - let challengeList = []; - for(let i = 0; i < localStorage.length; i++){ - let key = localStorage.key(i); - challengeList.push(key); - } -return ( - <> -
- -

{challenge.title}

-
Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis voluptatem blanditiis ullam nisi ea animi excepturi tempora facere, adipisci assumenda necessitatibus nulla aut consectetur sunt dolorem ipsum enim nam facilis. - Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam expedita incidunt, quos provident ex mollitia eaque dolore molestiae praesentium laboriosam similique temporibus fugit! Velit dolor, harum voluptate excepturi est ratione! -
- - { !challengeList.includes(`InProgress${challenge.id}`) || finished ? ( - ) : - () } -
- - -) + render() { + return ( +
+ { + this.props.challenges.filter(challenge => challenge.id === this.props.match.params.id) + .map(challenge => ( +
+ +

{challenge.title}

+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis voluptatem blanditiis ullam nisi ea animi excepturi tempora facere, adipisci assumenda necessitatibus nulla aut consectetur sunt dolorem ipsum enim nam facilis. + Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam expedita incidunt, quos provident ex mollitia eaque dolore molestiae praesentium laboriosam similique temporibus fugit! Velit dolor, harum voluptate excepturi est ratione! +
+ { + challenge.status === 'inProgress' + ? + : + } +
+ )) + } +
+ ) + } } +const mapStateProps = (state) => ({ + challenges: state.challenges.data, +}); +const mapDispatchProps = { + fetchChallenges, + changeStatusOnDone, + changeStatusOnProgress, +} -export default ChallengeDescription; -export { tileData }; +export default connect(mapStateProps, mapDispatchProps)(ChallengeDescription); diff --git a/src/components/ChallengeFinished.jsx b/src/components/ChallengeFinished.jsx index 7b6b50f..34eeae4 100644 --- a/src/components/ChallengeFinished.jsx +++ b/src/components/ChallengeFinished.jsx @@ -1,65 +1,65 @@ -import React from 'react'; -import GridList from '@material-ui/core/GridList'; -import GridListTile from '@material-ui/core/GridListTile'; -import GridListTileBar from '@material-ui/core/GridListTileBar'; -import IconButton from '@material-ui/core/IconButton'; -import { makeStyles, useTheme } from '@material-ui/core/styles'; -import { Link } from "react-router-dom"; -import { tileData } from './ChallengeDescription'; +// import React from 'react'; +// import GridList from '@material-ui/core/GridList'; +// import GridListTile from '@material-ui/core/GridListTile'; +// import GridListTileBar from '@material-ui/core/GridListTileBar'; +// import IconButton from '@material-ui/core/IconButton'; +// import { makeStyles, useTheme } from '@material-ui/core/styles'; +// import { Link } from "react-router-dom"; +// import { tileData } from './ChallengeDescription'; -const ChallengeFinished = () => { - const useStyles = makeStyles((theme) => ({ - gridList: { - height: 450, - }, - tileStyling: { - width: 100, - height: 450, - padding: '10px', - borderRadius: '8px' - }, - tileStyle: { - borderRadius: '8px', - boxShadow: 'rgba(39, 39, 39, 0.2) 2px 2px 4px' - } +// const ChallengeFinished = () => { +// const useStyles = makeStyles((theme) => ({ +// gridList: { +// height: 450, +// }, +// tileStyling: { +// width: 100, +// height: 450, +// padding: '10px', +// borderRadius: '8px' +// }, +// tileStyle: { +// borderRadius: '8px', +// boxShadow: 'rgba(39, 39, 39, 0.2) 2px 2px 4px' +// } - })); - const classes = useStyles(); +// })); +// const classes = useStyles(); - let challengeList = []; - for(let i = 0; i < localStorage.length; i++){ - let key = localStorage.key(i); - challengeList.push(key); - } +// let challengeList = []; +// for(let i = 0; i < localStorage.length; i++){ +// let key = localStorage.key(i); +// challengeList.push(key); +// } - return ( -
-

Wyzwania zakończone

- - {tileData.map(tile => { - if(challengeList.includes(`Finished${tile.id}`)){ - return ( - +// return ( +//
+//

Wyzwania zakończone

+// +// {tileData.map(tile => { +// if(challengeList.includes(`Finished${tile.id}`)){ +// return ( +// - {tile.title} - - {tile.category}} - actionIcon={ - - - } - /> - - - ) } })} - -
- ) +// {tile.title} +// +// {tile.category}} +// actionIcon={ +// +// +// } +// /> +// +// +// ) } })} +// +//
+// ) -}; +// }; -export default ChallengeFinished; \ No newline at end of file +// export default ChallengeFinished; \ No newline at end of file diff --git a/src/components/ChallengeInProgress.jsx b/src/components/ChallengeInProgress.jsx index 3ba8641..b884d3f 100644 --- a/src/components/ChallengeInProgress.jsx +++ b/src/components/ChallengeInProgress.jsx @@ -1,91 +1,45 @@ import React from 'react'; -import GridList from '@material-ui/core/GridList'; -import GridListTile from '@material-ui/core/GridListTile'; -import GridListTileBar from '@material-ui/core/GridListTileBar'; -import IconButton from '@material-ui/core/IconButton'; -import { makeStyles, useTheme } from '@material-ui/core/styles'; import { Link } from "react-router-dom"; -import { tileData } from './ChallengeDescription'; import trophy from './image/trophy.png'; -import { useHistory } from 'react-router-dom'; - -const ChallengeInProgress = () => { - const useStyles = makeStyles((theme) => ({ - gridList: { - height: 450, - }, - tileStyling: { - width: 100, - height: 450, - padding: '10px', - }, - tileStyle: { - borderRadius: '8px', - boxShadow: 'rgba(39, 39, 39, 0.2) 2px 2px 4px' - } - - })); - const classes = useStyles(); - const history = useHistory(); - - - let challengeList = []; - for(let i = 0; i < localStorage.length; i++){ - let key = localStorage.key(i); - challengeList.push(key); - } - const inprogress = challengeList.filter(function (v) { return /InProgress/.test(v)}); - - function goToChallangesList() { - let path = 'challenges'; - - history.push(path); - } - - return ( - -
-

Wyzwania w trakcie realizacji

- {inprogress.length > 0 && - - {tileData.map(tile => { - if(challengeList.includes(`InProgress${tile.id}`)){ - return ( - - - {tile.title}/ - - {tile.category}} - actionIcon={ - - - } - /> - - - ) } })} - - } - - {inprogress.length == 0 && - - - -
goToChallangesList()}> - - -

Nie masz aktualnie zadnych wyzwań

-

Kliknij aby dodać nowe!

-
- +import styles from './Challenges.module.css'; +import challengeImage2 from './image/challenge2.jpg'; + +const ChallengeInProgress = ({challenges}) => { + const inProgress = challenges.filter(challenge => challenge.status === 'inProgress'); + + return ( + +
+

Wyzwania w trakcie realizacji

+ { + inProgress.length > 0 + ?
+ { + inProgress.map(challenge => ( +
+ {challenge.title} + +
+

{challenge.title}

+

{challenge.category}

+
+ +
+ )) } -
- ) + :
+ + +

Nie masz aktualnie zadnych wyzwań

+

Kliknij aby dodać nowe!

+ +
+ } +
+ ) }; - + export default ChallengeInProgress; \ No newline at end of file diff --git a/src/components/Challenges.jsx b/src/components/Challenges.jsx new file mode 100644 index 0000000..ee00997 --- /dev/null +++ b/src/components/Challenges.jsx @@ -0,0 +1,45 @@ +import React from "react"; +import { connect } from "react-redux"; +import { fetchChallenges, changeStatusOnProgress } from "../state/challenges"; + +import styles from "./Challenges.module.css"; +import ChallengesList from "./ChallengesList"; +import SearchBar from './SearchBar'; + +class Challenges extends React.Component { + componentDidMount() { + this.props.fetchChallenges(); + } + + handleOnProgress = (itemId, data) => { + this.props.changeStatusOnProgress(itemId, data); + } + + + render() { + return ( +
+

Wyzwania

+ + + +
+ ); + } +} + +const mapStateProps = (state) => ({ + challenges: state.challenges.data, +}); + +const mapDispatchProps = { + fetchChallenges, + changeStatusOnProgress, +}; + +export default connect(mapStateProps, mapDispatchProps)(Challenges); diff --git a/src/components/Challenges.module.css b/src/components/Challenges.module.css index e024b0e..06c6554 100644 --- a/src/components/Challenges.module.css +++ b/src/components/Challenges.module.css @@ -1,12 +1,48 @@ -.card { +.section { + width: min(1024px, 100%); + margin: 0 auto; +} +.title { + font-size: 2em; +} +.card_list { width: 100%; - height: 450px; - /* padding: 5px !important; */ + display: flex; + flex-wrap: wrap; + justify-content: space-between; +} +.card { + position: relative; + width: 49%; + height: 185px; + margin-bottom: 8px; + cursor: pointer; border-radius: 8px; box-shadow: rgba(39, 39, 39, 0.2) 2px 2px 4px; } -.img_style { +.img { width: 100%; - /* border-radius: 8px; - box-shadow: rgba(39, 39, 39, 0.2) 2px 2px 4px; */ + height: inherit; + object-fit: cover; + border-radius: 8px; +} +.card_title { + position: absolute; + bottom: 0; + width: 100%; + height: 35%; + padding: 10px; + color: #fff; + background: rgba(32, 32, 32, 0.582); + border-radius: 0 0 8px 8px; + z-index: 1; +} +.challenge_card_info { + width: 50%; + padding: 20px; + text-align: center; + background-color: #FFF; + border-radius: 8px; + box-shadow: 2px 2px 4px rgba(39, 39, 39, 0.2); + cursor: pointer; } \ No newline at end of file diff --git a/src/components/ChallengesList-old.jsx b/src/components/ChallengesList-old.jsx deleted file mode 100644 index c2cf92b..0000000 --- a/src/components/ChallengesList-old.jsx +++ /dev/null @@ -1,240 +0,0 @@ -import React from 'react'; -import GridList from '@material-ui/core/GridList'; -import GridListTile from '@material-ui/core/GridListTile'; -import GridListTileBar from '@material-ui/core/GridListTileBar'; -import ListSubheader from '@material-ui/core/ListSubheader'; -import IconButton from '@material-ui/core/IconButton'; -import InfoIcon from '@material-ui/icons/Info'; -import ChallengeImage1 from "./image/challenge1.jpg"; -import ChallengeImage2 from "./image/challenge2.jpg"; -import ChallengeImage3 from "./image/challenge3.jpg"; -import ChallengeImage4 from "./image/challenge4.jpg"; -import ChallengeImage5 from "./image/challenge5.jpg"; -import ChallengeImage6 from "./image/challenge6.jpg"; -import ChallengeImage7 from "./image/challenge7.jpg"; -import ChallengeImage8 from "./image/challenge8.jpg"; -import ChallengeImage9 from "./image/challenge9.jpg"; - -import ChallengeCard from './ChallengeCard'; - -import clsx from 'clsx'; -import { Link } from "react-router-dom"; -import { makeStyles, useTheme } from '@material-ui/core/styles'; -import ListGroup from "react-bootstrap/ListGroup" -import SearchBar from './SearchBar'; -import Grid from '@material-ui/core/Grid'; - -import {withStyles } from '@material-ui/core/styles'; - - // The example data is structured as follows: - - const styles = { - root: { - display: 'flex', - flexWrap: 'wrap', - justifyContent: 'flex-start', - overflow: 'hidden', - padding: 0, - - - }, - // x: { - // margin: 50 - // }, - gridList: { - width: 500, - height: 450, - - }, - tileStyling: { - width: 100, - height: 450, - }, - boxShadow:{ - boxShadow: '3px 3px 5px #aaaaaa', - margin: '5px', - padding: '0 !important' - } - }; - - class ChallengesList extends React.Component { - - - // constructor(props){ - // super(props); - // new Date(); - - // this.state = { - // filter: { - // period: [1,30], - // text: "", - // groups: [0,1,2,3] - // }, - // categories: [ - // {id: 0, title:"Sylwetka", value:5, selected: false}, - // {id: 1, title: "Witalność", value:5, selected: false}, - // {id: 2, title: "Zwyczaje", value:5, selected: false}, - // {id: 3, title: "Dieta", value:5, selected: false} - // ], - // challanges: [ - // { - // img: ChallengeImage1, - // title: 'Spacer dla Twojego umysłu.', - // id: 1, - // category: 0, - // period: 5 - // }, - // { - // img: ChallengeImage2, - // title: 'Wyśnij sobie spokój.', - // id: 2, - // category: 1, - // period: 25 - // }, - // { - // img: ChallengeImage3, - // title: 'Pij wodę, będziesz wielki.', - // id: 3, - // category: 2, - // period: 5 - // }, - // { - // img: ChallengeImage5, - // title: 'Ulepsz swoją dietę.', - // id: 4, - // category: 0, - // period: 25 - // }, - // { - // img: ChallengeImage6, - // title: 'Rozciągnij się.', - // id: 5, - // category: 1, - // period: 5 - // }, - // { - // img: ChallengeImage4, - // title: 'Uśmiechnij się.', - // id: 6, - // category: 2, - // period: 1 - // }, - // { - // img: ChallengeImage7, - // title: 'Czas na ćwiczenia.', - // id: 7, - // category: 0, - // period: 1 - // }, - // { - // img: ChallengeImage8, - // title: 'Skup się na swoim wnętrzu.', - // id: 8, - // category: 1, - // period: 1 - // }, - // { - // img: ChallengeImage9, - // title: 'Czas na hobby.', - // id: 9, - // category: 2, - // period: 1 - // } - // ] - // }; - // } - - - // handleMultiFilterChange = (grp, event, val) => { - - // switch(grp){ - // case "category": - - // // 1. Make a shallow copy of the items - // let categories = [...this.state.categories]; - // // 2. Make a shallow copy of the item you want to mutate - - // categories.forEach((category, catIndex) => { - - // category.selected = false; - - // val.forEach((value,valueIndex) => { - - // if(value.id === category.id){ - // category.selected = true; - // categories[catIndex] = category; - // } - // }); - // }); - - // this.setState({categories}); - // break; - // case "filter_text": - - // this.setState({ - // filter:{ - // text: event - // } - // }); - // break; - - // case "filter_period": - - // this.setState({ - // filter:{ - // period: val - // } - // }); - // break; - // case "filter_groups": - // let groups = event; - - // let newGroupsArr = []; - - // groups.forEach((item, index) => { - // if(item.selected){ - // newGroupsArr.push(item.key); - // } - // }); - - // this.setState({ - // filter:{ - // groups: newGroupsArr - // } - // }); - // break; - // default: - // } - - - // } - - render() { - - const {classes } = this.props; - - return ( - - -
-

Wyzwania

-
- -
- {/* */} -
- - - - ); - } - -} - -export default withStyles(styles)(ChallengesList); diff --git a/src/components/ChallengesList.jsx b/src/components/ChallengesList.jsx new file mode 100644 index 0000000..dcfb88f --- /dev/null +++ b/src/components/ChallengesList.jsx @@ -0,0 +1,44 @@ +import React from 'react'; + +import challengeImage1 from './image/challenge1.jpg'; +import styles from './Challenges.module.css'; + + +const ChallengesList = ({challenges, inProgress}) => { + const handleOnProgress = (itemId) => { + let data = {}; + challenges.map(challenge => { + if(challenge.id === itemId) { + data = { + category: challenge.category, + description: challenge.description, + id: challenge.id, + img: challenge.img, + title: challenge.title, + status: "inProgress", + } + }; + return challenge; + }) + inProgress(itemId, data); + } + + return ( +
+ { + challenges.map(challenge => ( +
handleOnProgress(challenge.id)}> + {challenge.title} +
+

{challenge.title}

+

{challenge.category}

+
+
+ )) + } +
+ ); +} + +export default ChallengesList; diff --git a/src/components/Challlenges.jsx b/src/components/Challlenges.jsx deleted file mode 100644 index dee1a01..0000000 --- a/src/components/Challlenges.jsx +++ /dev/null @@ -1,10 +0,0 @@ -import React from "react"; - - -const Challenges = () => ( -
-

WYZWANIA

-
-); - -export default Challenges; \ No newline at end of file diff --git a/src/components/Dashboard.jsx b/src/components/Dashboard.jsx deleted file mode 100644 index 407e1a6..0000000 --- a/src/components/Dashboard.jsx +++ /dev/null @@ -1,32 +0,0 @@ -// import React from "react"; -// import styles from "./Dashboard.module.css"; - -// function ProposedChallengeItem() { -// const imgUrl = `https://images.unsplash.com/photo-1549372691-289fcc650e4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=200&q=80` -// return ( -//
  • -// -//
    -//

    Pij wodę, będziesz wielki!

    -//
    -//
    • -// ); -// } - -// function ProposedChallenges() { -// return ( -// -// ); -// } - -// function Dashboard() { -// return ( -//
    -// -//
    -// ); -// } - -// export default Dashboard; - - diff --git a/src/components/Dashboard.module.css b/src/components/Dashboard.module.css deleted file mode 100644 index 74c9e67..0000000 --- a/src/components/Dashboard.module.css +++ /dev/null @@ -1,15 +0,0 @@ -/* .proposed__challenge__box { - height: 100px; - width: 100px; - list-style: none; - display: block; - /* display: flex; - flex-wrap: nowrap; - flex-direction: row; */ -/* } - -.proposed__challenges__list { - display: flex; - flex-wrap: wrap; - flex-direction: column; -} */ \ No newline at end of file diff --git a/src/components/Home.jsx b/src/components/Home.jsx deleted file mode 100644 index dfcc2ba..0000000 --- a/src/components/Home.jsx +++ /dev/null @@ -1,12 +0,0 @@ -import React from "react"; -import ChallengeCard from "./ChallengeCard" - -const Home = () => ( -
    -

    Elo, Mordo!

    -

    Twoje postępy

    - -
    -); - -export default Home; \ No newline at end of file diff --git a/src/components/SearchBar-old.jsx b/src/components/SearchBar-old.jsx new file mode 100644 index 0000000..ec59ac6 --- /dev/null +++ b/src/components/SearchBar-old.jsx @@ -0,0 +1,120 @@ +import React from 'react'; +import SearchResults from './SearchResults'; +import GridList from '@material-ui/core/GridList'; +import GridListTile from '@material-ui/core/GridListTile'; +import GridListTileBar from '@material-ui/core/GridListTileBar'; +import ListSubheader from '@material-ui/core/ListSubheader'; +import IconButton from '@material-ui/core/IconButton'; +import InfoIcon from '@material-ui/icons/Info'; +import ChallengeImage1 from "./image/challenge1.jpg"; +import ChallengeImage2 from "./image/challenge2.jpg"; +import ChallengeImage3 from "./image/challenge3.jpg"; +import clsx from 'clsx'; +import { Link } from "react-router-dom"; +import { makeStyles, useTheme } from '@material-ui/core/styles'; +import ListGroup from "react-bootstrap/ListGroup" +import SearchFilters from './SearchFilters'; +import SearchForm from './SearchForm'; + +const ChallengesHeader = () => ( +
    +

    Wyzwania

    +
    +); + +class SearchBar extends React.Component { + + constructor(props) { + super(props); + + this.showFilters = this.showFilters.bind(this); + this.hideFilters = this.hideFilters.bind(this); + this.operateFilters = this.operateFilters.bind(this); + + this.applyFilters = this.applyFilters.bind(this); + + + this.state = {filtersOpen: false} + } + + handleOnFilterChange = (name, value) => { + this.setState({ + filter: {text: name} + }); + } + + applyFilters = (f1, f2, f3) => { + + //document.querySelector(".filtersBar").display = "block"; + } + + showFilters = () => { + //document.querySelector(".filtersBar").display = "block"; + } + + + hideFilters = () => { + //document.querySelector(".filtersBar").display = "none"; + } + + operateFilters = () => { + if(this.state.filtersOpen){ + this.hideFilters(); + + this.setState({ + filtersOpen: false + }); + } + else { + this.showFilters(); + + this.setState({ + filtersOpen: true + }); + } + } + + handleMultiFilterChange = (grp, event ,val) => { + + this.props.multiFilterChange(grp, event, val); + + } + handleFilterTextChange = (text) => { + + this.props.multiFilterChange("filter_text", text); + + + } + + render() { + + if(this.props && this.props.classes){ + + return ( +
    +
    +
    + + {this.state.filtersOpen + ? + : + } +
    + {this.state.filtersOpen && + + } +
    + + +
    + ) + } + else { + return + } + + } + +} + +export default SearchBar; diff --git a/src/components/SearchBar.jsx b/src/components/SearchBar.jsx index ec59ac6..352ff90 100644 --- a/src/components/SearchBar.jsx +++ b/src/components/SearchBar.jsx @@ -1,120 +1,30 @@ import React from 'react'; -import SearchResults from './SearchResults'; -import GridList from '@material-ui/core/GridList'; -import GridListTile from '@material-ui/core/GridListTile'; -import GridListTileBar from '@material-ui/core/GridListTileBar'; -import ListSubheader from '@material-ui/core/ListSubheader'; -import IconButton from '@material-ui/core/IconButton'; -import InfoIcon from '@material-ui/icons/Info'; -import ChallengeImage1 from "./image/challenge1.jpg"; -import ChallengeImage2 from "./image/challenge2.jpg"; -import ChallengeImage3 from "./image/challenge3.jpg"; -import clsx from 'clsx'; -import { Link } from "react-router-dom"; -import { makeStyles, useTheme } from '@material-ui/core/styles'; -import ListGroup from "react-bootstrap/ListGroup" -import SearchFilters from './SearchFilters'; -import SearchForm from './SearchForm'; - -const ChallengesHeader = () => ( -
    -

    Wyzwania

    -
    -); class SearchBar extends React.Component { - - constructor(props) { - super(props); - - this.showFilters = this.showFilters.bind(this); - this.hideFilters = this.hideFilters.bind(this); - this.operateFilters = this.operateFilters.bind(this); - - this.applyFilters = this.applyFilters.bind(this); - - - this.state = {filtersOpen: false} - } - - handleOnFilterChange = (name, value) => { - this.setState({ - filter: {text: name} - }); - } - - applyFilters = (f1, f2, f3) => { - - //document.querySelector(".filtersBar").display = "block"; - } - - showFilters = () => { - //document.querySelector(".filtersBar").display = "block"; - } - - - hideFilters = () => { - //document.querySelector(".filtersBar").display = "none"; - } - - operateFilters = () => { - if(this.state.filtersOpen){ - this.hideFilters(); - - this.setState({ - filtersOpen: false - }); - } - else { - this.showFilters(); - - this.setState({ - filtersOpen: true - }); - } - } - - handleMultiFilterChange = (grp, event ,val) => { - - this.props.multiFilterChange(grp, event, val); - - } - handleFilterTextChange = (text) => { - - this.props.multiFilterChange("filter_text", text); - - - } - - render() { - - if(this.props && this.props.classes){ - - return ( -
    -
    -
    - - {this.state.filtersOpen - ? - : - } -
    - {this.state.filtersOpen && - - } -
    - - -
    - ) - } - else { - return - } - - } - + state = { + sliderValue: 1, + } + + handleSliderChange = (value) => { + console.log(value) + // this.setState({ + // sliderValue: e.target.value, + // }) + } + + valuetext = () => `${this.state.sliderValue} day` + + render() { + return( +
    + + +
    + ); + } } -export default SearchBar; +export default SearchBar; \ No newline at end of file diff --git a/src/components/dashboard/ChartsStyle.module.css b/src/components/dashboard/ChartsStyle.module.css index 540a90b..b44052d 100644 --- a/src/components/dashboard/ChartsStyle.module.css +++ b/src/components/dashboard/ChartsStyle.module.css @@ -1,5 +1,5 @@ .chart__content { - width: clamp(320px, 100%, 400px); + width: clamp(320px, 100%, 505px); padding: 24px; background-color: #fff; color: #364954; diff --git a/src/components/dashboard/Dashboard.jsx b/src/components/dashboard/Dashboard.jsx index 562b084..88c555c 100644 --- a/src/components/dashboard/Dashboard.jsx +++ b/src/components/dashboard/Dashboard.jsx @@ -2,16 +2,27 @@ import React from 'react'; import ChartPie from './ChartPie'; import ChartLine from './ChartLine'; import styles from './Dashboard.module.css'; -import ChallengeFinished from "../ChallengeFinished" -import ChallengeCard from "../ChallengeCard" -import ChallengeInProgress from "../ChallengeInProgress" -import { withRouter } from 'react-router-dom'; +import ChallengesList from '../ChallengesList'; +import ChallengeInProgress from "../ChallengeInProgress"; +import ChallengeFinished from "../ChallengeFinished"; + +import { connect } from "react-redux"; +import { fetchChallenges, changeStatusOnProgress } from "../../state/challenges"; class Dashboard extends React.Component { + componentDidMount() { + this.props.fetchChallenges(); + } + + isDoneChallenges = () => this.props.challenges.filter(challenge => challenge.status === 'isDone'); + + inProgressChallenges = () => this.props.challenges.filter(challenge => challenge.status === 'inProgress'); + + handleOnProgress = (itemId, data) => this.props.changeStatusOnProgress(itemId, data); + render() { return ( - <>

    Twoje postępy

    @@ -22,14 +33,27 @@ class Dashboard extends React.Component {
    - +

    Twoje wyzwania na dziś

    - - + +

    Wyzwania zakończone

    +
    - ); } } -export default Dashboard; + +const mapStateProps = (state) => ({ + challenges: state.challenges.data, +}); + +const mapDispatchProps = { + fetchChallenges, + changeStatusOnProgress, +}; + +export default connect(mapStateProps, mapDispatchProps)(Dashboard); diff --git a/src/components/dashboard/Dashboard.module.css b/src/components/dashboard/Dashboard.module.css index d66fae7..a2eae20 100644 --- a/src/components/dashboard/Dashboard.module.css +++ b/src/components/dashboard/Dashboard.module.css @@ -1,5 +1,5 @@ .chart__section { - width: min(980px, 100%); + width: min(1024px, 100%); margin: 0 auto; display: flex; @@ -7,7 +7,7 @@ justify-content: space-around; } .chart__box { - width: clamp(320px, 100%, 400px); + width: clamp(320px, 100%, 510px); margin-bottom: 5px; } .chart__box__header { diff --git a/src/components/diary/Diary.module.css b/src/components/diary/Diary.module.css index 68c2017..4bffbc6 100644 --- a/src/components/diary/Diary.module.css +++ b/src/components/diary/Diary.module.css @@ -1,5 +1,5 @@ .diary__section { - width: min(980px, 100%); + width: min(1024psx, 100%); margin: 0 auto; display: flex; diff --git a/src/components/diary/DiaryDashboard.jsx b/src/components/diary/DiaryDashboard.jsx index e52cbdc..2fd29ce 100644 --- a/src/components/diary/DiaryDashboard.jsx +++ b/src/components/diary/DiaryDashboard.jsx @@ -8,8 +8,8 @@ import styles from './Diary.module.css'; const DiaryDashboard = ({ posts, postFilter, onDelete, onKeyUpSearch, onClickToForm, data}) => (
    +

    Twój dziennik nastrojów:

    -

    Twój dziennik nastrojów:

    diff --git a/src/state/challenges.js b/src/state/challenges.js index 7f653ee..dedfbd5 100644 --- a/src/state/challenges.js +++ b/src/state/challenges.js @@ -38,7 +38,7 @@ export const fetchChallenges = () => { } } -export const changeStatusOnProggres = (challengeId, data) => { +export const changeStatusOnProgress = (challengeId, data) => { return (dispatch) => { fetch(`${DATABASE_URL}/challenges/${challengeId}.json`, { method: 'PUT', @@ -47,3 +47,13 @@ export const changeStatusOnProggres = (challengeId, data) => { .then(() => dispatch(fetchChallenges())) } } + +export const changeStatusOnDone = (challengeId, data) => { + return(dispatch) => { + fetch(`${DATABASE_URL}/challenges/${challengeId}.json`, { + method: 'PUT', + body: JSON.stringify(data), + }) + .then(() => dispatch(fetchChallenges())); + } +} From 6ec304f9551313645720740fb3609f6df6339c22 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Pastewski?= Date: Fri, 4 Sep 2020 23:35:41 +0200 Subject: [PATCH 08/11] modification in chellenges compoonents --- src/components/ChallengeCard.jsx | 116 ------------------------ src/components/ChallengeDescription.jsx | 4 +- src/components/ChallengeInProgress.jsx | 7 +- src/components/Challenges.jsx | 1 - src/components/ChallengesList.jsx | 32 ++----- 5 files changed, 12 insertions(+), 148 deletions(-) delete mode 100644 src/components/ChallengeCard.jsx diff --git a/src/components/ChallengeCard.jsx b/src/components/ChallengeCard.jsx deleted file mode 100644 index 75db3a9..0000000 --- a/src/components/ChallengeCard.jsx +++ /dev/null @@ -1,116 +0,0 @@ -import React from 'react'; -import GridList from '@material-ui/core/GridList'; -import GridListTile from '@material-ui/core/GridListTile'; -import GridListTileBar from '@material-ui/core/GridListTileBar'; -import IconButton from '@material-ui/core/IconButton'; -import InfoIcon from '@material-ui/icons/Info'; - -import ChallengeImage1 from "./image/challenge1.jpg"; -import ChallengeImage2 from "./image/challenge2.jpg"; -import ChallengeImage3 from "./image/challenge3.jpg"; -import ChallengeImage4 from "./image/challenge4.jpg"; -import ChallengeImage5 from "./image/challenge5.jpg"; -import ChallengeImage6 from "./image/challenge6.jpg"; -import ChallengeImage7 from "./image/challenge7.jpg"; -import ChallengeImage8 from "./image/challenge8.jpg"; -import ChallengeImage9 from "./image/challenge9.jpg"; -import ChallengeImage10 from "./image/challenge10.jpg"; - -import styles from './Challenges.module.css'; - - -const ChallengeCard = ({id, title, category, status}) => ( - this.goToChallenge(challenge.id)} - // key={id} - > - {title} - {category}} - actionIcon={} - /> - -); - -export default ChallengeCard; - - -// class ChellengeCard extends React.Component { - - -// // goToChallenge = (challengeId) => { -// // let data = {}; -// // this.props.challenges.map(challenge => { -// // if(challenge.id === challengeId) { -// // data = { -// // category: challenge.category, -// // description: challenge.description, -// // id: challenge.id, -// // img: challenge.img, -// // title: challenge.title, -// // status: "inProgress", -// // } -// // }; -// // return challenge; -// // }) -// // // console.log(data) -// // this.props.changeStatusOnProggres(challengeId, data); -// // } - -// // componentDidMount() { -// // this.props.fetchChallenges(); -// // } - -// render() { -// return ( -// //
    -// //

    Twoje wyzwania na dziś

    -// -// { -// this.props.challenges.map(challenge => { -// return ( -// this.goToChallenge(challenge.id)} -// key={challenge.img} -// > -// {challenge.title} -// {challenge.category}} -// actionIcon={} -// /> -// -// ) -// }) -// } -// -// //
    -// ); -// } -// } - -// const mapStateProps = (state) => ({ -// challenges: state.challenges.data, -// }); - -// const mapDispatchProps = { -// fetchChallenges, -// changeStatusOnProggres, -// } - -// export default connect(mapStateProps, mapDispatchProps)(ChellengeCard); \ No newline at end of file diff --git a/src/components/ChallengeDescription.jsx b/src/components/ChallengeDescription.jsx index 6bbebff..63d9f97 100644 --- a/src/components/ChallengeDescription.jsx +++ b/src/components/ChallengeDescription.jsx @@ -73,13 +73,13 @@ class ChallengeDescription extends React.Component { { challenge.status === 'inProgress' ? :
    ); diff --git a/src/components/ChallengesList.jsx b/src/components/ChallengesList.jsx index dcfb88f..ff1a883 100644 --- a/src/components/ChallengesList.jsx +++ b/src/components/ChallengesList.jsx @@ -1,40 +1,22 @@ import React from 'react'; +import { Link } from 'react-router-dom'; import challengeImage1 from './image/challenge1.jpg'; import styles from './Challenges.module.css'; const ChallengesList = ({challenges, inProgress}) => { - const handleOnProgress = (itemId) => { - let data = {}; - challenges.map(challenge => { - if(challenge.id === itemId) { - data = { - category: challenge.category, - description: challenge.description, - id: challenge.id, - img: challenge.img, - title: challenge.title, - status: "inProgress", - } - }; - return challenge; - }) - inProgress(itemId, data); - } - return (
    { challenges.map(challenge => ( -
    handleOnProgress(challenge.id)}> + {challenge.title} -
    -

    {challenge.title}

    -

    {challenge.category}

    -
    -
    +
    +

    {challenge.title}

    +

    {challenge.category}

    +
    + )) }
    From f1bc3d130805861b5bd0153b13493d8cb4386a9e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Pastewski?= Date: Sun, 6 Sep 2020 17:34:35 +0200 Subject: [PATCH 09/11] some modification in challenges --- src/components/ChallengeDescription.jsx | 3 +- src/components/ChallengeInProgress.jsx | 15 ++- src/components/Challenges.jsx | 19 ++- src/components/ChallengesList.jsx | 62 ++++++++- src/components/SearchBar-old.jsx | 120 ------------------ src/components/SearchBar.jsx | 70 ++++++---- src/components/SearchForm.jsx | 12 +- .../dashboard/ChartsStyle.module.css | 6 +- src/components/dashboard/Dashboard.jsx | 2 +- src/components/dashboard/Dashboard.module.css | 2 +- src/components/diary/Diary.jsx | 19 +-- src/components/diary/DiaryItemCard.jsx | 16 +-- 12 files changed, 162 insertions(+), 184 deletions(-) delete mode 100644 src/components/SearchBar-old.jsx diff --git a/src/components/ChallengeDescription.jsx b/src/components/ChallengeDescription.jsx index 63d9f97..79cd2b6 100644 --- a/src/components/ChallengeDescription.jsx +++ b/src/components/ChallengeDescription.jsx @@ -3,6 +3,7 @@ import Button from "@material-ui/core/Button"; import { connect } from 'react-redux'; import { fetchChallenges, changeStatusOnDone, changeStatusOnProgress } from '../state/challenges'; +import { getImage } from './ChallengesList'; import ChallengeImage1 from "./image/challenge1.jpg"; import ChallengeImage2 from "./image/challenge2.jpg"; @@ -65,7 +66,7 @@ class ChallengeDescription extends React.Component { this.props.challenges.filter(challenge => challenge.id === this.props.match.params.id) .map(challenge => (
    - +

    {challenge.title}

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis voluptatem blanditiis ullam nisi ea animi excepturi tempora facere, adipisci assumenda necessitatibus nulla aut consectetur sunt dolorem ipsum enim nam facilis. Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam expedita incidunt, quos provident ex mollitia eaque dolore molestiae praesentium laboriosam similique temporibus fugit! Velit dolor, harum voluptate excepturi est ratione! diff --git a/src/components/ChallengeInProgress.jsx b/src/components/ChallengeInProgress.jsx index 31389e9..13587b7 100644 --- a/src/components/ChallengeInProgress.jsx +++ b/src/components/ChallengeInProgress.jsx @@ -5,6 +5,19 @@ import trophy from './image/trophy.png'; import styles from './Challenges.module.css'; import challengeImage2 from './image/challenge2.jpg'; import { AiOutlineLink } from 'react-icons/ai'; +import { getImage } from './ChallengesList'; + +import ChallengeImage1 from "./image/challenge1.jpg"; +import ChallengeImage2 from "./image/challenge2.jpg"; +import ChallengeImage3 from "./image/challenge3.jpg"; +import ChallengeImage4 from "./image/challenge4.jpg"; +import ChallengeImage5 from "./image/challenge5.jpg"; +import ChallengeImage6 from "./image/challenge6.jpg"; +import ChallengeImage7 from "./image/challenge7.jpg"; +import ChallengeImage8 from "./image/challenge8.jpg"; +import ChallengeImage9 from "./image/challenge9.jpg"; +import ChallengeImage10 from "./image/challenge10.jpg"; + const ChallengeInProgress = ({challenges}) => { const inProgress = challenges.filter(challenge => challenge.status === 'inProgress'); @@ -19,7 +32,7 @@ const ChallengeInProgress = ({challenges}) => { { inProgress.map(challenge => ( - {challenge.title} + {challenge.title}

    {challenge.title}

    {challenge.category}

    diff --git a/src/components/Challenges.jsx b/src/components/Challenges.jsx index 766cb93..4e48fcf 100644 --- a/src/components/Challenges.jsx +++ b/src/components/Challenges.jsx @@ -5,16 +5,28 @@ import { fetchChallenges, changeStatusOnProgress } from "../state/challenges"; import styles from "./Challenges.module.css"; import ChallengesList from "./ChallengesList"; import SearchBar from './SearchBar'; +import firebase from 'firebase'; class Challenges extends React.Component { - componentDidMount() { - this.props.fetchChallenges(); + state = { + filterText: '', } handleOnProgress = (itemId, data) => { + // const user = firebase.auth().currentUser.email; this.props.changeStatusOnProgress(itemId, data); } + handleFilterChange = (text) => { + this.setState({ + filterText: text, + }) + } + + // componentDidMount() { + // const user = firebase.auth().currentUser.email; + // this.props.fetchChallenges(user) + // } render() { return ( @@ -23,9 +35,10 @@ class Challenges extends React.Component { - + ); diff --git a/src/components/ChallengesList.jsx b/src/components/ChallengesList.jsx index ff1a883..29724b9 100644 --- a/src/components/ChallengesList.jsx +++ b/src/components/ChallengesList.jsx @@ -1,17 +1,71 @@ import React from 'react'; import { Link } from 'react-router-dom'; -import challengeImage1 from './image/challenge1.jpg'; +import ChallengeImage1 from "./image/challenge1.jpg"; +import ChallengeImage2 from "./image/challenge2.jpg"; +import ChallengeImage3 from "./image/challenge3.jpg"; +import ChallengeImage4 from "./image/challenge4.jpg"; +import ChallengeImage5 from "./image/challenge5.jpg"; +import ChallengeImage6 from "./image/challenge6.jpg"; +import ChallengeImage7 from "./image/challenge7.jpg"; +import ChallengeImage8 from "./image/challenge8.jpg"; +import ChallengeImage9 from "./image/challenge9.jpg"; +import ChallengeImage10 from "./image/challenge10.jpg"; import styles from './Challenges.module.css'; +export const getImage = (imgKey) => { + + switch(imgKey) { + case 'ChallengeImage1': + return ChallengeImage1; + case 'ChallengeImage2': + return ChallengeImage2; + case 'ChallengeImage3': + return ChallengeImage3; + case 'ChallengeImage4': + return ChallengeImage4; + case 'ChallengeImage5': + return ChallengeImage5; + case 'ChallengeImage6': + return ChallengeImage6; + case 'ChallengeImage7': + return ChallengeImage7; + case 'ChallengeImage8': + return ChallengeImage8; + case 'ChallengeImage9': + return ChallengeImage9; + case 'ChallengeImage10': + return ChallengeImage10; + default: + return null; + } +} + +const ChallengesList = ({challenges, filter}) => { + + const filterTitle = ({title}) => { + if(filter) { + return title.toLowerCase().includes(filter.toLowerCase()); + } else { + return challenges; + } + } + const filteredChallenge = challenges.filter(filterTitle); + + if(filteredChallenge.length === 0) { + return ( +
    +

    wpisany tytuł nieistnieje

    +
    + ) + } -const ChallengesList = ({challenges, inProgress}) => { return (
    { - challenges.map(challenge => ( + filteredChallenge.map(challenge => ( - {challenge.title} + {challenge.title}

    {challenge.title}

    {challenge.category}

    diff --git a/src/components/SearchBar-old.jsx b/src/components/SearchBar-old.jsx deleted file mode 100644 index ec59ac6..0000000 --- a/src/components/SearchBar-old.jsx +++ /dev/null @@ -1,120 +0,0 @@ -import React from 'react'; -import SearchResults from './SearchResults'; -import GridList from '@material-ui/core/GridList'; -import GridListTile from '@material-ui/core/GridListTile'; -import GridListTileBar from '@material-ui/core/GridListTileBar'; -import ListSubheader from '@material-ui/core/ListSubheader'; -import IconButton from '@material-ui/core/IconButton'; -import InfoIcon from '@material-ui/icons/Info'; -import ChallengeImage1 from "./image/challenge1.jpg"; -import ChallengeImage2 from "./image/challenge2.jpg"; -import ChallengeImage3 from "./image/challenge3.jpg"; -import clsx from 'clsx'; -import { Link } from "react-router-dom"; -import { makeStyles, useTheme } from '@material-ui/core/styles'; -import ListGroup from "react-bootstrap/ListGroup" -import SearchFilters from './SearchFilters'; -import SearchForm from './SearchForm'; - -const ChallengesHeader = () => ( -
    -

    Wyzwania

    -
    -); - -class SearchBar extends React.Component { - - constructor(props) { - super(props); - - this.showFilters = this.showFilters.bind(this); - this.hideFilters = this.hideFilters.bind(this); - this.operateFilters = this.operateFilters.bind(this); - - this.applyFilters = this.applyFilters.bind(this); - - - this.state = {filtersOpen: false} - } - - handleOnFilterChange = (name, value) => { - this.setState({ - filter: {text: name} - }); - } - - applyFilters = (f1, f2, f3) => { - - //document.querySelector(".filtersBar").display = "block"; - } - - showFilters = () => { - //document.querySelector(".filtersBar").display = "block"; - } - - - hideFilters = () => { - //document.querySelector(".filtersBar").display = "none"; - } - - operateFilters = () => { - if(this.state.filtersOpen){ - this.hideFilters(); - - this.setState({ - filtersOpen: false - }); - } - else { - this.showFilters(); - - this.setState({ - filtersOpen: true - }); - } - } - - handleMultiFilterChange = (grp, event ,val) => { - - this.props.multiFilterChange(grp, event, val); - - } - handleFilterTextChange = (text) => { - - this.props.multiFilterChange("filter_text", text); - - - } - - render() { - - if(this.props && this.props.classes){ - - return ( -
    -
    -
    - - {this.state.filtersOpen - ? - : - } -
    - {this.state.filtersOpen && - - } -
    - - -
    - ) - } - else { - return - } - - } - -} - -export default SearchBar; diff --git a/src/components/SearchBar.jsx b/src/components/SearchBar.jsx index 352ff90..d70e52a 100644 --- a/src/components/SearchBar.jsx +++ b/src/components/SearchBar.jsx @@ -1,30 +1,46 @@ import React from 'react'; +import { connect } from "react-redux"; +import { fetchChallenges } from "../state/challenges"; + +import SearchResults from './SearchResults'; +import SearchFilters from './SearchFilters'; +import SearchForm from './SearchForm'; + class SearchBar extends React.Component { - state = { - sliderValue: 1, - } - - handleSliderChange = (value) => { - console.log(value) - // this.setState({ - // sliderValue: e.target.value, - // }) - } - - valuetext = () => `${this.state.sliderValue} day` - - render() { - return( -
    - - -
    - ); - } -} - -export default SearchBar; \ No newline at end of file + componentDidMount() { + this.props.fetchChallenges(); + } + + + render() { + return ( +
    +
    +
    + + {/* {this.state.filtersOpen + ? + : + } */} +
    + {/* {this.state.filtersOpen && + + } */} +
    + + {/* */} +
    + ) + } + } + +const mapStateProps = (state) => ({ + challenges: state.challenges.data, +}); + +const mapDispatchProps = { + fetchChallenges, +}; + +export default connect(mapStateProps, mapDispatchProps)(SearchBar); \ No newline at end of file diff --git a/src/components/SearchForm.jsx b/src/components/SearchForm.jsx index e5ce74d..9bd821c 100644 --- a/src/components/SearchForm.jsx +++ b/src/components/SearchForm.jsx @@ -5,12 +5,12 @@ import Form from 'react-bootstrap/Form' class SearchForm extends React.Component { state={ - filter: this.props.filter + filter: '', } - handleOnChange = (event, name, value) => { + handleOnChange = (event) => { this.setState({ - filter:{text: event.target.value} + filter: event.target.value, }); this.props.onFilterChange(event.target.value); } @@ -18,9 +18,9 @@ class SearchForm extends React.Component { render() { return ( - diff --git a/src/components/dashboard/ChartsStyle.module.css b/src/components/dashboard/ChartsStyle.module.css index b44052d..ddb0da4 100644 --- a/src/components/dashboard/ChartsStyle.module.css +++ b/src/components/dashboard/ChartsStyle.module.css @@ -1,5 +1,5 @@ .chart__content { - width: clamp(320px, 100%, 505px); + width: clamp(320px, 100%, 501px); padding: 24px; background-color: #fff; color: #364954; @@ -8,7 +8,7 @@ display: flex; align-items: center; - justify-content: space-between; + justify-content: space-around; } .chart__paragraph { @@ -17,7 +17,7 @@ } .chart___pie { - margin-right: 5%; + margin-right: 0; } @media screen and (max-width: 414px) { diff --git a/src/components/dashboard/Dashboard.jsx b/src/components/dashboard/Dashboard.jsx index 88c555c..92e94d5 100644 --- a/src/components/dashboard/Dashboard.jsx +++ b/src/components/dashboard/Dashboard.jsx @@ -39,7 +39,7 @@ class Dashboard extends React.Component { challenges={this.props.challenges} inProgress={this.handleOnProgress} /> -

    Wyzwania zakończone

    +

    Wyzwania zakończone

    diff --git a/src/components/dashboard/Dashboard.module.css b/src/components/dashboard/Dashboard.module.css index a2eae20..2c6b2bc 100644 --- a/src/components/dashboard/Dashboard.module.css +++ b/src/components/dashboard/Dashboard.module.css @@ -7,7 +7,7 @@ justify-content: space-around; } .chart__box { - width: clamp(320px, 100%, 510px); + width: clamp(320px, 100%, 501px); margin-bottom: 5px; } .chart__box__header { diff --git a/src/components/diary/Diary.jsx b/src/components/diary/Diary.jsx index 94b37f8..41b3c38 100644 --- a/src/components/diary/Diary.jsx +++ b/src/components/diary/Diary.jsx @@ -2,6 +2,7 @@ import React from "react"; import DiaryForm from './DiaryForm'; import DiaryDashboard from "./DiaryDashboard"; import { DATABASE_URL } from '../../index'; +import firebase from 'firebase'; const startState = { posts: [{ @@ -12,6 +13,7 @@ const startState = { diaryForm: false, postFilter: '', } + class Diary extends React.Component { state = { posts: [{ @@ -26,7 +28,8 @@ class Diary extends React.Component { } fetchData = () => { - fetch(`${DATABASE_URL}/diary.json`) + const USER_EMAIL = firebase.auth().currentUser.email; + fetch(`${DATABASE_URL}/diary.json?orderBy="identity"&equalTo="${USER_EMAIL}"`) //?orderBy="email"&equalTo="${USER_EMAIL}"' .then(response => response.json()) .then(posts => { const arrayPosts = posts @@ -42,6 +45,11 @@ class Diary extends React.Component { this.setState({ posts: arrayPosts, }) + }) + .catch(() => { + this.setState({ + posts: this.state.posts, + }) }); } @@ -91,11 +99,4 @@ class Diary extends React.Component { } } -export default Diary; - - - - -// fetch('https://javasy-vitamina-app.firebaseio.com/diary.json?orderBy="$key"&equalTo="-MFRAgObzG1CYNdGzaOW"').then(res => res.json()).then(console.log); - -// fetch('https://javasy-vitamina-app.firebaseio.com/diary.json?orderBy="title"&equalTo="rr"').then(res => res.json()).then(console.log); \ No newline at end of file +export default Diary; \ No newline at end of file diff --git a/src/components/diary/DiaryItemCard.jsx b/src/components/diary/DiaryItemCard.jsx index 7acecf4..93c8d33 100644 --- a/src/components/diary/DiaryItemCard.jsx +++ b/src/components/diary/DiaryItemCard.jsx @@ -4,16 +4,16 @@ import DiaryCard from './DiaryCartd'; const DiaryItemCard = ({ posts, postFilter, onDelete }) => { const filterData = ({ title, date }) => { - const textFilter = title.toLowerCase().includes(postFilter.toLowerCase()); - const dateFilter = date.includes(postFilter); - const fillFilter = postFilter.length > 0; + const textFilter = title.toLowerCase().includes(postFilter.toLowerCase()); + const dateFilter = date.includes(postFilter); + const fillFilter = postFilter.length > 0; - if (dateFilter) { - return dateFilter; - } else if(fillFilter) { - return textFilter; + if (dateFilter) { + return dateFilter; + } else if(fillFilter) { + return textFilter; + } } - } if (posts[0].id === null) { return (
    From e12d8cdd0b19ac370698e87995acdc2bccae5ced Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Pastewski?= Date: Sun, 6 Sep 2020 17:56:53 +0200 Subject: [PATCH 10/11] improved fetch --- src/components/Challenges.jsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/components/Challenges.jsx b/src/components/Challenges.jsx index aacaf52..7fce52b 100644 --- a/src/components/Challenges.jsx +++ b/src/components/Challenges.jsx @@ -23,6 +23,10 @@ class Challenges extends React.Component { }) } + componentDidMount() { + this.props.fetchChallenges(); + } + render() { return (
    From 93c1b62901303553814b92edc07660c55cea7d8f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Pastewski?= Date: Sun, 6 Sep 2020 18:05:30 +0200 Subject: [PATCH 11/11] added style search in challenge --- src/components/SearchForm.jsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/SearchForm.jsx b/src/components/SearchForm.jsx index 7a29b59..9dbbd06 100644 --- a/src/components/SearchForm.jsx +++ b/src/components/SearchForm.jsx @@ -39,9 +39,10 @@ class SearchForm extends React.Component { return ( )