From ece8b6d0b31e6ca194751ccedbd312c15ef01321 Mon Sep 17 00:00:00 2001 From: Federico Madoery Date: Tue, 18 Dec 2018 16:53:02 -0300 Subject: [PATCH 1/4] [WIP] Issue #8 and Issue #12 SchedulePage is working for read only with mock data SideBar is working to nav between days TeamPage have a new look and feel NavLinkItems now are mark as selected if your are in '/team/somthing' or '/schedule/something' TeamMember colors is randomly generate, this will be changed soon --- package-lock.json | 112 ++++++++++++++++--------- package.json | 3 +- web/components/Card.js | 2 +- web/components/DayBlock.jsx | 27 +++++- web/components/Header.jsx | 4 +- web/components/NavLinkItem.js | 9 +- web/components/NavigationBar.js | 4 +- web/components/ScheduleHeader.jsx | 31 ++++++- web/components/SchedulePage.jsx | 132 ++++++++++++++++++++++++++---- web/components/SetBlock.jsx | 36 +++++++- web/components/SideBar.jsx | 29 ++++++- web/components/TeamList.js | 47 ++++------- web/components/TeamLogo.jsx | 19 ++--- web/components/TeamMember.jsx | 37 ++++----- web/components/TeamPage.js | 10 ++- web/images/SetBlockHeading2.png | Bin 0 -> 7539 bytes web/routes.js | 6 +- web/styles/theme.js | 17 +++- 18 files changed, 376 insertions(+), 149 deletions(-) create mode 100644 web/images/SetBlockHeading2.png diff --git a/package-lock.json b/package-lock.json index 1ede7b8..24f95bc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -135,7 +135,7 @@ }, "is-accessor-descriptor": { "version": "0.1.6", - "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz", + "resolved": "http://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz", "integrity": "sha1-qeEss66Nh2cn7u84Q/igiXtcmNY=", "dev": true, "optional": true, @@ -157,7 +157,7 @@ }, "is-data-descriptor": { "version": "0.1.4", - "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz", + "resolved": "http://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz", "integrity": "sha1-C17mSDiOLIYCgueT8YVv7D8wG1Y=", "dev": true, "optional": true, @@ -1283,6 +1283,30 @@ "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.1.7.tgz", "integrity": "sha512-ego8jRVSHfq/iq4KRZJKQeUAdi3ZjGNrqw4oPN3fNdvTBnLCSntwVCnc37bsAJP9UB8MhrTfPnZYxkv2vpS4pg==" }, + "@fortawesome/fontawesome-svg-core": { + "version": "1.2.10", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.10.tgz", + "integrity": "sha512-x9rYQ4jPVWnXgsle/MzaV2qDwNfc1Gm5DB0T76WOp4RDZ/esjEE0OvKtMa2qFvG1NqYbelgN4gChA+ttAqPtaw==", + "requires": { + "@fortawesome/fontawesome-common-types": "^0.2.10" + }, + "dependencies": { + "@fortawesome/fontawesome-common-types": { + "version": "0.2.10", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.10.tgz", + "integrity": "sha512-FbrzSgFDzoC6Dm8w7gCWxgdffFbYV7O/4THOtYDQEplZVOpYIA3vjgnxCXApY49YaIQ91mxIGROS3d7wS+fO3A==" + } + } + }, + "@fortawesome/react-fontawesome": { + "version": "0.1.3", + "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.3.tgz", + "integrity": "sha512-tc689l67rPZ7+ynZVUgOXY80rAt5KxvuH1qjPpJcbyJzJHzk5yhrD993BjsSEdPBLTtPqmvwynsO/XrAQqHbtg==", + "requires": { + "humps": "^2.0.1", + "prop-types": "^15.5.10" + } + }, "@sendgrid/client": { "version": "6.3.0", "resolved": "https://registry.npmjs.org/@sendgrid/client/-/client-6.3.0.tgz", @@ -1736,7 +1760,7 @@ }, "array-flatten": { "version": "1.1.1", - "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz", + "resolved": "http://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz", "integrity": "sha1-ml9pkFGx5wczKPKgCJaLZOopVdI=" }, "array-union": { @@ -2620,7 +2644,7 @@ "dependencies": { "resolve": { "version": "1.1.7", - "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.1.7.tgz", + "resolved": "http://registry.npmjs.org/resolve/-/resolve-1.1.7.tgz", "integrity": "sha1-IDEU2CrSxe2ejgQRs5ModeiJ6Xs=", "dev": true } @@ -2833,7 +2857,7 @@ }, "callsites": { "version": "2.0.0", - "resolved": "https://registry.npmjs.org/callsites/-/callsites-2.0.0.tgz", + "resolved": "http://registry.npmjs.org/callsites/-/callsites-2.0.0.tgz", "integrity": "sha1-BuuE8A7qQT2oav/vrL/7Ngk7PFA=", "dev": true }, @@ -3674,7 +3698,7 @@ }, "regexpu-core": { "version": "1.0.0", - "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-1.0.0.tgz", + "resolved": "http://registry.npmjs.org/regexpu-core/-/regexpu-core-1.0.0.tgz", "integrity": "sha1-hqdj9Y7k18L2sQLkdkBQ3n7ZDGs=", "dev": true, "requires": { @@ -3691,7 +3715,7 @@ }, "regjsparser": { "version": "0.1.5", - "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.1.5.tgz", + "resolved": "http://registry.npmjs.org/regjsparser/-/regjsparser-0.1.5.tgz", "integrity": "sha1-fuj4Tcb6eS0/0K4ijSS9lJ6tIFw=", "dev": true, "requires": { @@ -4070,7 +4094,7 @@ "dependencies": { "globby": { "version": "6.1.0", - "resolved": "https://registry.npmjs.org/globby/-/globby-6.1.0.tgz", + "resolved": "http://registry.npmjs.org/globby/-/globby-6.1.0.tgz", "integrity": "sha1-9abXDoOV4hyFj7BInWTfAkJNUGw=", "dev": true, "requires": { @@ -4956,7 +4980,7 @@ }, "expand-range": { "version": "1.8.2", - "resolved": "https://registry.npmjs.org/expand-range/-/expand-range-1.8.2.tgz", + "resolved": "http://registry.npmjs.org/expand-range/-/expand-range-1.8.2.tgz", "integrity": "sha1-opnv/TNf4nIeuujiV+x5ZE/IUzc=", "requires": { "fill-range": "^2.1.0" @@ -5297,7 +5321,7 @@ }, "flagged-respawn": { "version": "0.3.2", - "resolved": "https://registry.npmjs.org/flagged-respawn/-/flagged-respawn-0.3.2.tgz", + "resolved": "http://registry.npmjs.org/flagged-respawn/-/flagged-respawn-0.3.2.tgz", "integrity": "sha1-/xke3c1wiKZ1smEP/8l2vpuAdLU=" }, "flat-cache": { @@ -5386,7 +5410,7 @@ }, "forever": { "version": "0.15.3", - "resolved": "https://registry.npmjs.org/forever/-/forever-0.15.3.tgz", + "resolved": "http://registry.npmjs.org/forever/-/forever-0.15.3.tgz", "integrity": "sha1-d9nX4V/S9RGtnYShEMfdj8js68I=", "requires": { "cliff": "~0.1.9", @@ -5993,6 +6017,11 @@ "integrity": "sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=", "dev": true }, + "g": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/g/-/g-2.0.1.tgz", + "integrity": "sha1-C1lj69DKcOO8jGdmk0oCGCHIuFc=" + }, "generic-pool": { "version": "2.5.4", "resolved": "https://registry.npmjs.org/generic-pool/-/generic-pool-2.5.4.tgz", @@ -6570,7 +6599,7 @@ }, "string_decoder": { "version": "0.10.31", - "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz", + "resolved": "http://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz", "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=", "dev": true } @@ -6698,7 +6727,7 @@ }, "is-accessor-descriptor": { "version": "0.1.6", - "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz", + "resolved": "http://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz", "integrity": "sha1-qeEss66Nh2cn7u84Q/igiXtcmNY=", "dev": true, "requires": { @@ -6718,7 +6747,7 @@ }, "is-data-descriptor": { "version": "0.1.4", - "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz", + "resolved": "http://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz", "integrity": "sha1-C17mSDiOLIYCgueT8YVv7D8wG1Y=", "dev": true, "requires": { @@ -6914,6 +6943,11 @@ "integrity": "sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM=", "dev": true }, + "humps": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/humps/-/humps-2.0.1.tgz", + "integrity": "sha1-3QLqYIG9BWjcXQcxhEY5V7qe+ao=" + }, "i": { "version": "0.3.6", "resolved": "https://registry.npmjs.org/i/-/i-0.3.6.tgz", @@ -7155,7 +7189,7 @@ }, "is-accessor-descriptor": { "version": "0.1.6", - "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz", + "resolved": "http://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz", "integrity": "sha1-qeEss66Nh2cn7u84Q/igiXtcmNY=", "requires": { "kind-of": "^3.0.2" @@ -7219,7 +7253,7 @@ }, "is-data-descriptor": { "version": "0.1.4", - "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz", + "resolved": "http://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz", "integrity": "sha1-C17mSDiOLIYCgueT8YVv7D8wG1Y=", "requires": { "kind-of": "^3.0.2" @@ -8413,7 +8447,7 @@ }, "string_decoder": { "version": "0.10.31", - "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz", + "resolved": "http://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz", "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=" }, "supports-color": { @@ -9626,7 +9660,7 @@ }, "path-browserify": { "version": "0.0.0", - "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-0.0.0.tgz", + "resolved": "http://registry.npmjs.org/path-browserify/-/path-browserify-0.0.0.tgz", "integrity": "sha1-oLhwcpquIUAFt9UDLsLLuw+0RRo=", "dev": true }, @@ -10441,7 +10475,7 @@ }, "ps-tree": { "version": "0.0.3", - "resolved": "https://registry.npmjs.org/ps-tree/-/ps-tree-0.0.3.tgz", + "resolved": "http://registry.npmjs.org/ps-tree/-/ps-tree-0.0.3.tgz", "integrity": "sha1-2/jXUqf+Ivp9WGNWiUmWEOknbdw=", "requires": { "event-stream": "~0.5" @@ -10910,7 +10944,7 @@ }, "is-accessor-descriptor": { "version": "0.1.6", - "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz", + "resolved": "http://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz", "integrity": "sha1-qeEss66Nh2cn7u84Q/igiXtcmNY=", "requires": { "kind-of": "^3.0.2" @@ -10928,7 +10962,7 @@ }, "is-data-descriptor": { "version": "0.1.4", - "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz", + "resolved": "http://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz", "integrity": "sha1-C17mSDiOLIYCgueT8YVv7D8wG1Y=", "requires": { "kind-of": "^3.0.2" @@ -11386,7 +11420,7 @@ }, "callsites": { "version": "0.2.0", - "resolved": "https://registry.npmjs.org/callsites/-/callsites-0.2.0.tgz", + "resolved": "http://registry.npmjs.org/callsites/-/callsites-0.2.0.tgz", "integrity": "sha1-r6uWJikQp/M8GaV3WCXGnzTjUMo=", "dev": true }, @@ -11423,7 +11457,7 @@ }, "resolve-dir": { "version": "0.1.1", - "resolved": "https://registry.npmjs.org/resolve-dir/-/resolve-dir-0.1.1.tgz", + "resolved": "http://registry.npmjs.org/resolve-dir/-/resolve-dir-0.1.1.tgz", "integrity": "sha1-shklmlYC+sXFxJatiUpujMQwJh4=", "requires": { "expand-tilde": "^1.2.2", @@ -11482,7 +11516,7 @@ }, "rgba-regex": { "version": "1.0.0", - "resolved": "https://registry.npmjs.org/rgba-regex/-/rgba-regex-1.0.0.tgz", + "resolved": "http://registry.npmjs.org/rgba-regex/-/rgba-regex-1.0.0.tgz", "integrity": "sha1-QzdOLiyglosO8VI0YLfXMP8i7rM=", "dev": true }, @@ -11657,7 +11691,7 @@ }, "is-accessor-descriptor": { "version": "0.1.6", - "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz", + "resolved": "http://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz", "integrity": "sha1-qeEss66Nh2cn7u84Q/igiXtcmNY=", "dev": true, "requires": { @@ -11677,7 +11711,7 @@ }, "is-data-descriptor": { "version": "0.1.4", - "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz", + "resolved": "http://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz", "integrity": "sha1-C17mSDiOLIYCgueT8YVv7D8wG1Y=", "dev": true, "requires": { @@ -12277,7 +12311,7 @@ "dependencies": { "source-map": { "version": "0.5.6", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.6.tgz", + "resolved": "http://registry.npmjs.org/source-map/-/source-map-0.5.6.tgz", "integrity": "sha1-dc449SvwczxafwwRjYEzSiu19BI=", "dev": true } @@ -12354,7 +12388,7 @@ }, "sprintf-js": { "version": "1.0.3", - "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz", + "resolved": "http://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz", "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=", "dev": true }, @@ -12441,7 +12475,7 @@ }, "stream-browserify": { "version": "2.0.1", - "resolved": "https://registry.npmjs.org/stream-browserify/-/stream-browserify-2.0.1.tgz", + "resolved": "http://registry.npmjs.org/stream-browserify/-/stream-browserify-2.0.1.tgz", "integrity": "sha1-ZiZu5fm9uZQKTkUUyvtDu3Hlyds=", "dev": true, "requires": { @@ -12532,7 +12566,7 @@ }, "string_decoder": { "version": "1.1.1", - "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz", + "resolved": "http://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz", "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==", "requires": { "safe-buffer": "~5.1.0" @@ -12712,7 +12746,7 @@ }, "tape": { "version": "2.3.3", - "resolved": "https://registry.npmjs.org/tape/-/tape-2.3.3.tgz", + "resolved": "http://registry.npmjs.org/tape/-/tape-2.3.3.tgz", "integrity": "sha1-Lnzgox3wn41oUWZKcYQuDKUFevc=", "requires": { "deep-equal": "~0.1.0", @@ -13193,7 +13227,7 @@ }, "tty-browserify": { "version": "0.0.0", - "resolved": "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz", + "resolved": "http://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz", "integrity": "sha1-oVe6QC2iTpv5V/mqadUk7tQpAaY=", "dev": true }, @@ -13639,7 +13673,7 @@ }, "vm-browserify": { "version": "0.0.4", - "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-0.0.4.tgz", + "resolved": "http://registry.npmjs.org/vm-browserify/-/vm-browserify-0.0.4.tgz", "integrity": "sha1-XX6kW7755Kb/ZflUOOCofDV9WnM=", "dev": true, "requires": { @@ -13808,7 +13842,7 @@ }, "is-accessor-descriptor": { "version": "0.1.6", - "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz", + "resolved": "http://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz", "integrity": "sha1-qeEss66Nh2cn7u84Q/igiXtcmNY=", "dev": true, "requires": { @@ -13828,7 +13862,7 @@ }, "is-data-descriptor": { "version": "0.1.4", - "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz", + "resolved": "http://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz", "integrity": "sha1-C17mSDiOLIYCgueT8YVv7D8wG1Y=", "dev": true, "requires": { @@ -14179,7 +14213,7 @@ }, "is-accessor-descriptor": { "version": "0.1.6", - "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz", + "resolved": "http://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz", "integrity": "sha1-qeEss66Nh2cn7u84Q/igiXtcmNY=", "dev": true, "requires": { @@ -14199,7 +14233,7 @@ }, "is-data-descriptor": { "version": "0.1.4", - "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz", + "resolved": "http://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz", "integrity": "sha1-C17mSDiOLIYCgueT8YVv7D8wG1Y=", "dev": true, "requires": { @@ -14869,7 +14903,7 @@ }, "is-accessor-descriptor": { "version": "0.1.6", - "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz", + "resolved": "http://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz", "integrity": "sha1-qeEss66Nh2cn7u84Q/igiXtcmNY=", "dev": true, "requires": { @@ -14889,7 +14923,7 @@ }, "is-data-descriptor": { "version": "0.1.4", - "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz", + "resolved": "http://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz", "integrity": "sha1-C17mSDiOLIYCgueT8YVv7D8wG1Y=", "dev": true, "requires": { diff --git a/package.json b/package.json index 5b8934d..1c0cf2c 100644 --- a/package.json +++ b/package.json @@ -49,7 +49,8 @@ "forever": "^0.15.3", "formik": "^1.3.0", "fs-extra": "^2.0.0", - "graphql": "^0.4.9", + "g": "^2.0.1", + "graphql": "^0.4.18", "graphql-bookshelf": "github:otech47/graphql-bookshelf", "knex": "^0.12.6", "lodash": "^4.16.4", diff --git a/web/components/Card.js b/web/components/Card.js index 2f8d883..77a1e49 100644 --- a/web/components/Card.js +++ b/web/components/Card.js @@ -37,7 +37,7 @@ Card.propTypes = { ...backgroundSize.propTypes, ...backgroundPosition.propTypes, ...backgroundRepeat.propTypes, - depth: PropTypes.oneOf([1, 2, 3, 4, 5, 6, 7]) + depth: PropTypes.oneOf([1, 2, 3, 4, 5, 6, 7, 8, 9]) } export default Card \ No newline at end of file diff --git a/web/components/DayBlock.jsx b/web/components/DayBlock.jsx index fb1cfa6..345ce5a 100644 --- a/web/components/DayBlock.jsx +++ b/web/components/DayBlock.jsx @@ -1,12 +1,31 @@ import React from 'react'; +import Flex from './Flex'; +import Text from './Text'; +import Card from './Card'; export default class DayBlock extends React.Component { render() { + const { day, selected, onClick } = this.props + + //TODO Do something when is selected return ( -
-
DayBlock
-
+ + onClick(day)} + > + {day.getDate()} + {day.toDateString().slice(0, 3)} + + ); } } - diff --git a/web/components/Header.jsx b/web/components/Header.jsx index fb7d09e..02987fe 100644 --- a/web/components/Header.jsx +++ b/web/components/Header.jsx @@ -12,7 +12,9 @@ export default class Header extends React.Component { width='375px' > ); diff --git a/web/components/NavLinkItem.js b/web/components/NavLinkItem.js index 5293998..f16db08 100644 --- a/web/components/NavLinkItem.js +++ b/web/components/NavLinkItem.js @@ -1,5 +1,6 @@ import React from 'react' import { Link } from 'react-router-dom' + import Box from './Box' import Flex from './Flex' import Text from './Text' @@ -16,9 +17,11 @@ export default ({ style={{ textDecoration: 'none' }} > {React.createElement(icon, { size: 24, - color: selected ? 'white' : 'black' + color: selected ? 'green' : 'black' })} { const { path } = this.props; + const route = '/' + _.split(path, '/', 2)[1]; return ( ) diff --git a/web/components/ScheduleHeader.jsx b/web/components/ScheduleHeader.jsx index 0edb8b5..afc537a 100644 --- a/web/components/ScheduleHeader.jsx +++ b/web/components/ScheduleHeader.jsx @@ -1,12 +1,35 @@ import React from 'react'; +import moment from 'moment'; + +import Text from './Text'; +import Card from './Card'; +import Flex from './Flex'; + export default class ScheduleHeader extends React.Component { render() { + const { selectedDay } = this.props; return ( -
-
ScheduleHeader
-
+ + + + {moment(selectedDay).format('dddd, MMMM Do YYYY')} + + ); } } - diff --git a/web/components/SchedulePage.jsx b/web/components/SchedulePage.jsx index 7069a95..515f59f 100644 --- a/web/components/SchedulePage.jsx +++ b/web/components/SchedulePage.jsx @@ -1,33 +1,129 @@ import React from 'react'; +import moment from 'moment'; +import ScheduleHeader from './ScheduleHeader'; +import SideBar from './SideBar'; +import Flex from './Flex'; +import SetBlock from './SetBlock'; +import Text from './Text'; export default class SchedulePage extends React.Component { - renderBaseOnParams = (match) => { + + constructor(props) { + super(props) + this.state = { + daysOfWeek: [], + selectedDay: moment.now(), + setBlocks: [{ + id: '1', + date: '12/12/18', + blockTime: 'Setblock 1 (12am - 4am)', + blockFraction: '1.0', + issueUrl: 'http://issueURL', + description: 'A mocked setBlock', + teamMember: '', + }, { + id: '2', + date: '13/12/18', + blockTime: 'Setblock 2 (4:30am - 8:30am)', + blockFraction: '0.5', + issueUrl: 'http://issue2URL', + description: 'A mocked setBlock2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tellus metus, scelerisque id nisl nec, ', + teamMember: '', + } + ] + } + } + + componentDidMount( + ) { + this.getDaysOfWeek() + } + + renderBaseOnParams = () => { + const { setBlocks } = this.state; + return setBlocks.map(setBlock => { + return + }) + } + + goToScheduleDay = (day) => { + const { history, match } = this.props; if (match.params.teamMemberId) { - return ( -
- teamMemberId: - {match.params.teamMemberId} -
- ) + history.push('/team/' + match.params.teamMemberId + '/' + day.getDay()); + } else { + // If the match.params don't have a teamMemberId are u seeing your schedule + history.push('/schedule/' + day.getDay()); } + this.setState({ selectedDay: day }) + } + + getDaysOfWeek = () => { + const startOfWeek = moment() + .startOf('isoWeek'); + const endOfWeek = moment() + .endOf('isoWeek'); - if (match.params.dayOfWeek) { - return ( -
- dayOfWeek: - {match.params.dayOfWeek} -
- ) + const days = []; + let day = startOfWeek; + + while (day <= endOfWeek) { + days.push(day.toDate()); + day = day.clone() + .add(1, 'd'); } + + this.setState({ + daysOfWeek: days, + selectedDay: days[0] + }) } render() { const { match } = this.props; + const { daysOfWeek, selectedDay } = this.state; return ( -
-
SchedulePage
- {this.renderBaseOnParams(match)} -
+ + + + + + + + + + + { // TODO Print the name of the team member + match.params.teamMemberId ? 'Team Member ' : 'Your ' + } + + Schedule's Page + + {this.renderBaseOnParams(match)} + + + ); } } diff --git a/web/components/SetBlock.jsx b/web/components/SetBlock.jsx index e48c3ba..9d8fa6a 100644 --- a/web/components/SetBlock.jsx +++ b/web/components/SetBlock.jsx @@ -1,12 +1,40 @@ import React from 'react'; +import Flex from './Flex'; +import Text from './Text'; +import Card from './Card'; + export default class SetBlock extends React.Component { render() { + const { data } = this.props; return ( -
-
SetBlock
-
+ + + + + + {data.blockTime} + + + + + {data.description} + + + ); } } - diff --git a/web/components/SideBar.jsx b/web/components/SideBar.jsx index bc439cd..864fd8a 100644 --- a/web/components/SideBar.jsx +++ b/web/components/SideBar.jsx @@ -1,11 +1,34 @@ import React from 'react'; +import Flex from './Flex'; +import DayBlock from './DayBlock'; export default class SideBar extends React.Component { + + constructor(props) { + super(props) + } + render() { + const { days, selectedDay, goToScheduleDay } = this.props; return ( -
-
SideBar
-
+ + { + days.map(day => ( + + )) + } + + ); } } diff --git a/web/components/TeamList.js b/web/components/TeamList.js index fa80c58..1541105 100644 --- a/web/components/TeamList.js +++ b/web/components/TeamList.js @@ -9,44 +9,31 @@ class TeamList extends React.Component { constructor(props) { super(props); - this.state = { - mockTeamMembers: ['Oscar Lafarga', 'Vitoria Lafarga', 'Quinn Pruit', 'David Lafarga'] - } } componentDidMount() { this.props.fetchAllTeamMembers() } - goToPage = () => { - console.log('goToTeamMember') - }; - + generateColor () { + return '#' + Math.random().toString(16).substr(-6); + } render() { - const { mockTeamMembers } = this.state; + const { teamMembers, goToPage } = this.props; return ( <> - - - - + {teamMembers.map(teamMember => { + return ( + { goToPage(teamMember) }} + color={this.generateColor()} + /> + ) + }) + } ) } @@ -58,9 +45,9 @@ const mapStateToProps = ({ environment }) => { }; }; -const mapDispatchToProps = () => { +const mapDispatchToProps = (dispatch) => { return { - fetchAllTeamMembers + fetchAllTeamMembers: () => dispatch(fetchAllTeamMembers()) }; }; diff --git a/web/components/TeamLogo.jsx b/web/components/TeamLogo.jsx index 5814f86..de68630 100644 --- a/web/components/TeamLogo.jsx +++ b/web/components/TeamLogo.jsx @@ -1,7 +1,6 @@ import React from 'react'; import Image from './Image'; -import Card from './Card'; import Flex from './Flex'; export default class TeamLogo extends React.Component { @@ -12,19 +11,13 @@ export default class TeamLogo extends React.Component { alignItems='center' mx='auto' my='1rem' - width='100px' + width='375px' > - - - + ); } diff --git a/web/components/TeamMember.jsx b/web/components/TeamMember.jsx index 1bd0cfc..f7bdd6c 100644 --- a/web/components/TeamMember.jsx +++ b/web/components/TeamMember.jsx @@ -11,44 +11,43 @@ export default class TeamMember extends React.Component { return ( <> + {name} - - - + diff --git a/web/components/TeamPage.js b/web/components/TeamPage.js index e6ffa15..c0ea101 100644 --- a/web/components/TeamPage.js +++ b/web/components/TeamPage.js @@ -6,23 +6,27 @@ import Header from './Header'; import Flex from './Flex'; - export default class TeamPage extends React.Component { + goToPage = (teamMember) => { + const { history } = this.props; + history.push('/team/' + teamMember.id + '/1'); + } + render() { return (
- + ); } diff --git a/web/images/SetBlockHeading2.png b/web/images/SetBlockHeading2.png new file mode 100644 index 0000000000000000000000000000000000000000..3baa6b115b9f994552687dc2e8e0c82c34ac8ce1 GIT binary patch literal 7539 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 literal 0 HcmV?d00001 diff --git a/web/routes.js b/web/routes.js index 070ff00..8fa7be2 100644 --- a/web/routes.js +++ b/web/routes.js @@ -21,9 +21,9 @@ export default ( - - } /> - } /> + + + diff --git a/web/styles/theme.js b/web/styles/theme.js index d3cbd30..b0717c5 100644 --- a/web/styles/theme.js +++ b/web/styles/theme.js @@ -17,7 +17,9 @@ export default { 4: '0px 4px 21px rgba(0,0,0,0.14)', 5: '0px 5px 25px rgba(0,0,0,0.14)', 6: '-2px 0px 10px rgba(0,0,0,0.5)', - 7: '-1px 0px 15px rgba(0,0,0,0.65)' + 7: '1px 0px 5px rgba(0,0,0,0.65)', + 8: '1px 0px 5px 0px rgba(136,136,136, 0.8)', + 9: '5px 5px 5px -1px rgba(136,136,136, 0.8)' }, // Colors (styled-system) colors: { @@ -38,7 +40,18 @@ export default { facebook: '#32529F', overlay: 'rgba(0,0,0,0.5)', transparent: 'transparent', - bottomColor: '#3B3B3B' + bottomColor: '#3B3B3B', + + backgroundPrimary: '#E1E2E1', + backgroundSecondary: '#F5F5F6', + primary: '#304ffe', + primaryLight: '#7a7cff', + primaryDark: '#0026ca', + textPrimary: '#ffffff', + secondary: '#00e676', + secondaryLight: '#66ffa6', + secondaryDark: '#00b248', + textSecondary: '#000000' }, gradients: { vertical: 'linear-gradient(#1C9EF6, #0ACFFE)', From 9d85bd1ed247f2d9be44bbfb303b3f056b70f9d6 Mon Sep 17 00:00:00 2001 From: Federico Madoery Date: Wed, 19 Dec 2018 16:11:56 -0300 Subject: [PATCH 2/4] Close Issue #8 and #12 DayBlocks show a tiny setBlocks, with mock data for now SchedulePage show messsege when the user hasnt committed any setblock Some functions was renamed to better understand its functionality --- package.json | 1 - web/components/DayBlock.jsx | 38 +++++++++++++++++++++++++++---- web/components/NavLinkItem.js | 2 +- web/components/ScheduleHeader.jsx | 2 +- web/components/SchedulePage.jsx | 28 +++++++++++++++++------ web/components/SideBar.jsx | 4 ++-- web/components/TeamMember.jsx | 2 +- web/styles/theme.js | 8 +++---- 8 files changed, 64 insertions(+), 21 deletions(-) diff --git a/package.json b/package.json index 1c0cf2c..0d5815c 100644 --- a/package.json +++ b/package.json @@ -49,7 +49,6 @@ "forever": "^0.15.3", "formik": "^1.3.0", "fs-extra": "^2.0.0", - "g": "^2.0.1", "graphql": "^0.4.18", "graphql-bookshelf": "github:otech47/graphql-bookshelf", "knex": "^0.12.6", diff --git a/web/components/DayBlock.jsx b/web/components/DayBlock.jsx index 345ce5a..9ad8973 100644 --- a/web/components/DayBlock.jsx +++ b/web/components/DayBlock.jsx @@ -4,26 +4,56 @@ import Text from './Text'; import Card from './Card'; export default class DayBlock extends React.Component { + + renderTinySetBlocks = (setBlocks) => { + return setBlocks.map( setBlock => ( + + + )) + } + render() { const { day, selected, onClick } = this.props - //TODO Do something when is selected + // TODO Remove this mock data and use a graphQl api + const setBlocks = [{ id: '1', blockFraction: '1.0' }, { id: '2', blockFraction: '0.5' }, { id: '3', blockFraction: '1' }, { id: '4', blockFraction: '-0.5' }]; + return ( onClick(day)} > - {day.getDate()} - {day.toDateString().slice(0, 3)} + + + {this.renderTinySetBlocks(setBlocks)} + + + + {day.getDate()} + + + {day.toDateString().slice(0, 3)} + + + ); diff --git a/web/components/NavLinkItem.js b/web/components/NavLinkItem.js index f16db08..3b53c94 100644 --- a/web/components/NavLinkItem.js +++ b/web/components/NavLinkItem.js @@ -45,4 +45,4 @@ export default ({ -) \ No newline at end of file +) diff --git a/web/components/ScheduleHeader.jsx b/web/components/ScheduleHeader.jsx index afc537a..5ff7f31 100644 --- a/web/components/ScheduleHeader.jsx +++ b/web/components/ScheduleHeader.jsx @@ -27,7 +27,7 @@ export default class ScheduleHeader extends React.Component { align='center' color='textSecondary' > - {moment(selectedDay).format('dddd, MMMM Do YYYY')} + {moment(selectedDay).format('dddd, MMMM D, YYYY')} ); diff --git a/web/components/SchedulePage.jsx b/web/components/SchedulePage.jsx index 515f59f..3d94910 100644 --- a/web/components/SchedulePage.jsx +++ b/web/components/SchedulePage.jsx @@ -34,16 +34,29 @@ export default class SchedulePage extends React.Component { } } - componentDidMount( - ) { + componentDidMount() { + const { history, match } = this.props; this.getDaysOfWeek() + if (!match.params.teamMemberId) { + const today = moment().toDate(); + // If the match.params don't have a teamMemberId are u seeing your schedule + history.push('/schedule/' + today.getDay()); + // /schedule - SchedulePage, have today's day selected by default + this.setState({ selectedDay: today }) + } } - renderBaseOnParams = () => { + renderSetBlocks = () => { const { setBlocks } = this.state; - return setBlocks.map(setBlock => { - return - }) + if (setBlocks) { + return setBlocks.map(setBlock => { + return + }) + } else { + return ( + This user hasn't committed any Setblocks for this day + ) + } } goToScheduleDay = (day) => { @@ -118,9 +131,10 @@ export default class SchedulePage extends React.Component { match.params.teamMemberId ? 'Team Member ' : 'Your ' } + Schedule's Page - {this.renderBaseOnParams(match)} + {this.renderSetBlocks()} diff --git a/web/components/SideBar.jsx b/web/components/SideBar.jsx index 864fd8a..197ec43 100644 --- a/web/components/SideBar.jsx +++ b/web/components/SideBar.jsx @@ -15,14 +15,14 @@ export default class SideBar extends React.Component { column className='SideBar' justifyContent='space-around' - bg='white' + bg='lightGrey' > { days.map(day => ( )) diff --git a/web/components/TeamMember.jsx b/web/components/TeamMember.jsx index f7bdd6c..49d8b9d 100644 --- a/web/components/TeamMember.jsx +++ b/web/components/TeamMember.jsx @@ -11,7 +11,7 @@ export default class TeamMember extends React.Component { return ( <> Date: Wed, 2 Jan 2019 15:58:45 -0300 Subject: [PATCH 3/4] Close Issue #8, #12 and remove mock data Fixed color for circle in the ScheduleHeader Action to fech a teamMember by ID was added Now Redux managge the CurrentTeamMember and the SelectedDay GoToSchedule was moved to SideBar Similar Routes have diferents key to make re-mounte when navigate to this extencions Several unused constructors were removed --- web/components/DayBlock.jsx | 32 ++++++++---- web/components/ScheduleHeader.jsx | 2 +- web/components/SchedulePage.jsx | 86 +++++++++++++------------------ web/components/SetBlock.jsx | 2 +- web/components/SideBar.jsx | 37 ++++++++++--- web/components/TeamList.js | 4 -- web/reducers/environment.js | 62 +++++++++++++++++++++- web/routes.js | 10 ++-- 8 files changed, 157 insertions(+), 78 deletions(-) diff --git a/web/components/DayBlock.jsx b/web/components/DayBlock.jsx index 9ad8973..9b9d020 100644 --- a/web/components/DayBlock.jsx +++ b/web/components/DayBlock.jsx @@ -1,17 +1,24 @@ +import { connect } from 'react-redux'; +import moment from 'moment'; import React from 'react'; + import Flex from './Flex'; import Text from './Text'; import Card from './Card'; -export default class DayBlock extends React.Component { +class DayBlock extends React.Component { + + renderTinySetBlocks = (setBlocks, day) => { + const blockDay = moment(day).format('YYYY-MM-DD') + const setBlocksByDate = _.groupBy(setBlocks, 'date') + const setBlocksToRender = setBlocksByDate[blockDay] || []; - renderTinySetBlocks = (setBlocks) => { - return setBlocks.map( setBlock => ( + return setBlocksToRender.map( setBlock => ( - {this.renderTinySetBlocks(setBlocks)} + {this.renderTinySetBlocks(currentTeamMember.weeklySetblocks, day)} @@ -59,3 +63,13 @@ export default class DayBlock extends React.Component { ); } } + +const mapStateToProps = ({ environment }) => { + return { + ...environment + }; +}; + +const mapDispatchToProps = { +}; +export default connect(mapStateToProps, mapDispatchToProps)(DayBlock) \ No newline at end of file diff --git a/web/components/ScheduleHeader.jsx b/web/components/ScheduleHeader.jsx index 5ff7f31..ff57ff4 100644 --- a/web/components/ScheduleHeader.jsx +++ b/web/components/ScheduleHeader.jsx @@ -17,7 +17,7 @@ export default class ScheduleHeader extends React.Component { { - const { setBlocks } = this.state; + renderSetBlocks = (selectedDay) => { + const { currentTeamMember } = this.props; + selectedDay = moment(selectedDay).format('YYYY-MM-DD') + const setBlocksByDate = _.groupBy(currentTeamMember.weeklySetblocks, 'date') + const setBlocks = setBlocksByDate[selectedDay]; if (setBlocks) { return setBlocks.map(setBlock => { return }) } else { return ( - This user hasn't committed any Setblocks for this day + This user hasn't committed any Setblocks for this day ) } } - goToScheduleDay = (day) => { - const { history, match } = this.props; - if (match.params.teamMemberId) { - history.push('/team/' + match.params.teamMemberId + '/' + day.getDay()); - } else { - // If the match.params don't have a teamMemberId are u seeing your schedule - history.push('/schedule/' + day.getDay()); - } - this.setState({ selectedDay: day }) - } - getDaysOfWeek = () => { const startOfWeek = moment() .startOf('isoWeek'); @@ -87,13 +62,13 @@ export default class SchedulePage extends React.Component { this.setState({ daysOfWeek: days, - selectedDay: days[0] }) + this.props.setSelectedDay(days[0]) } render() { - const { match } = this.props; - const { daysOfWeek, selectedDay } = this.state; + const { match, currentTeamMember, selectedDay } = this.props; + const { daysOfWeek } = this.state; return ( - { // TODO Print the name of the team member - match.params.teamMemberId ? 'Team Member ' : 'Your ' - } - - - Schedule's Page + {match.params.teamMemberId ? currentTeamMember.name : 'Your'} + {' Schedule\'s Page'} - {this.renderSetBlocks()} + {this.renderSetBlocks(selectedDay)} ); } } + +const mapStateToProps = ({ environment }) => { + return { + ...environment + }; +}; + +const mapDispatchToProps = (dispatch) => { + return { + fetchCurrentTeamMemberById: (params) => dispatch(fetchCurrentTeamMemberById(params)), + setSelectedDay: (selectedDay) => dispatch(setSelectedDay(selectedDay)) + }; +}; +export default connect(mapStateToProps, mapDispatchToProps)(SchedulePage); diff --git a/web/components/SetBlock.jsx b/web/components/SetBlock.jsx index 9d8fa6a..5390e7e 100644 --- a/web/components/SetBlock.jsx +++ b/web/components/SetBlock.jsx @@ -13,7 +13,7 @@ export default class SetBlock extends React.Component { diff --git a/web/components/SideBar.jsx b/web/components/SideBar.jsx index 197ec43..1bd0db8 100644 --- a/web/components/SideBar.jsx +++ b/web/components/SideBar.jsx @@ -1,15 +1,27 @@ import React from 'react'; +import { withRouter } from 'react-router-dom'; +import { connect } from 'react-redux'; + import Flex from './Flex'; import DayBlock from './DayBlock'; -export default class SideBar extends React.Component { +import { setSelectedDay } from '../reducers/environment'; + +class SideBar extends React.Component { - constructor(props) { - super(props) + goToScheduleDay(day) { + const { history, match } = this.props; + if (match.params.teamMemberId) { + history.push('/team/' + match.params.teamMemberId + '/' + day.getDay()); + } else { + // If the match.params don't have a teamMemberId are u seeing your schedule + history.push('/schedule/' + day.getDay()); + } + this.props.setSelectedDay(day); } - + render() { - const { days, selectedDay, goToScheduleDay } = this.props; + const { days, selectedDay } = this.props; return ( this.goToScheduleDay(day)} /> )) } @@ -32,3 +44,16 @@ export default class SideBar extends React.Component { ); } } + +const mapStateToProps = ({ environment }) => { + return { + ...environment + }; +}; + +const mapDispatchToProps = (dispatch) => { + return { + setSelectedDay: (selectedDay) => dispatch(setSelectedDay(selectedDay)) + }; +}; +export default withRouter(connect(mapStateToProps, mapDispatchToProps)(SideBar)); diff --git a/web/components/TeamList.js b/web/components/TeamList.js index 1541105..16058de 100644 --- a/web/components/TeamList.js +++ b/web/components/TeamList.js @@ -7,10 +7,6 @@ import { fetchAllTeamMembers } from '../reducers/environment' class TeamList extends React.Component { - constructor(props) { - super(props); - } - componentDidMount() { this.props.fetchAllTeamMembers() } diff --git a/web/reducers/environment.js b/web/reducers/environment.js index 56fc9ff..0cda5fa 100644 --- a/web/reducers/environment.js +++ b/web/reducers/environment.js @@ -1,11 +1,18 @@ +import moment from 'moment'; + import api from 'scripts/api' // Index of Action Types const RECEIVE_TEAM_MEMBERS = 'RECEIVE_TEAM_MEMBERS' +const RECEIVE_TEAM_MEMBER = 'RECEIVE_TEAM_MEMBER' +const SET_SELECTED_DAY = 'SET_SELECTED_DAY' +const GOTO_SCHEDULE_DAY = 'GOTO_SCHEDULE_DAY' // Reducer const initialState = { - teamMembers: [] + teamMembers: [], + currentTeamMember: {}, + selectedDay: moment.now() } export default function reducer(state = initialState, action) { @@ -15,6 +22,16 @@ export default function reducer(state = initialState, action) { ...state, teamMembers: action.members } + case RECEIVE_TEAM_MEMBER: + return { + ...state, + currentTeamMember: action.member + } + case SET_SELECTED_DAY: + return { + ...state, + selectedDay: action.selectedDay + } default: return state } @@ -42,9 +59,52 @@ export function fetchAllTeamMembers(params) { } } +export function fetchCurrentTeamMemberById(params) { + return dispatch => { + api.graph({ + query: `query { + teamMemberById(id: "${params.id}") { + id, + name, + weeklySetblocks { + id, + date, + blockTime, + blockFraction, + description + } + } + }` + }) + .then(payload => { + // Handle payload + // Dispatch additional actions + dispatch(receiveTeamMember(payload.teamMemberById)) + }) + .catch(err => { + // Handle error + }) + } +} + + export function receiveTeamMembers(members) { return { type: RECEIVE_TEAM_MEMBERS, members } } + +export function receiveTeamMember(member) { + return { + type: RECEIVE_TEAM_MEMBER, + member + } +} + +export function setSelectedDay(selectedDay) { + return { + type: SET_SELECTED_DAY, + selectedDay + } +} \ No newline at end of file diff --git a/web/routes.js b/web/routes.js index 8fa7be2..be41ac0 100644 --- a/web/routes.js +++ b/web/routes.js @@ -21,11 +21,11 @@ export default ( - - - - - + + + + + ); \ No newline at end of file From 40ac08f9aea7060455bb922a8cbc3d6c3cad388d Mon Sep 17 00:00:00 2001 From: Federico Madoery Date: Wed, 2 Jan 2019 16:47:24 -0300 Subject: [PATCH 4/4] Minor fix in environment.js Not used prop and better declaration of currentTeamMember Minor feature: Since there is a delay in the response of the API, a simple loading componentt is added --- web/components/DayBlock.jsx | 6 ++-- web/components/Loading.js | 34 +++++++++++++++++++++ web/components/SchedulePage.jsx | 52 +++++++++++++++++++++++---------- web/reducers/environment.js | 28 ++++++++++++++++-- 4 files changed, 100 insertions(+), 20 deletions(-) create mode 100644 web/components/Loading.js diff --git a/web/components/DayBlock.jsx b/web/components/DayBlock.jsx index 9b9d020..64925fc 100644 --- a/web/components/DayBlock.jsx +++ b/web/components/DayBlock.jsx @@ -28,7 +28,7 @@ class DayBlock extends React.Component { } render() { - const { day, selected, onClick, currentTeamMember } = this.props + const { day, selected, onClick, currentTeamMember, fetchingData } = this.props return ( - {this.renderTinySetBlocks(currentTeamMember.weeklySetblocks, day)} + { // If you are waiting for the API to respond, it does not render + !fetchingData && this.renderTinySetBlocks(currentTeamMember.weeklySetblocks, day) + } diff --git a/web/components/Loading.js b/web/components/Loading.js new file mode 100644 index 0000000..e1284bc --- /dev/null +++ b/web/components/Loading.js @@ -0,0 +1,34 @@ +import React, { Component } from 'react'; +import styled, { keyframes } from 'styled-components'; + +const BounceAnimation = keyframes` + 0% { margin-bottom: 0; } + 50% { margin-bottom: 5px } + 100% { margin-bottom: 0 } +`; +const DotWrapper = styled.div` + display: flex; + align-items: flex-end; +`; +const Dot = styled.div` + background-color: rgb(46,73,122); + border-radius: 50%; + width: 4px; + height: 4px; + margin: 0 3px; + /* Animation */ + animation: ${BounceAnimation} 0.5s linear infinite; + animation-delay: ${props => props.delay}; +`; + +export default class LoadingDots extends Component { + render() { + return ( + + + + + + ) + } +} \ No newline at end of file diff --git a/web/components/SchedulePage.jsx b/web/components/SchedulePage.jsx index 33cc074..f129566 100644 --- a/web/components/SchedulePage.jsx +++ b/web/components/SchedulePage.jsx @@ -9,6 +9,7 @@ import SetBlock from './SetBlock'; import Text from './Text'; import { fetchCurrentTeamMemberById, setSelectedDay } from '../reducers/environment'; +import LoadingDots from './Loading'; class SchedulePage extends React.Component { state = { @@ -66,8 +67,42 @@ class SchedulePage extends React.Component { this.props.setSelectedDay(days[0]) } + renderIfItReady() { + const { + match, currentTeamMember, fetchingData, selectedDay + } = this.props + if (fetchingData) { + return ( // If you are waiting for the API to respond, render a loading + + Loading + + + ) + } else { + return ( + + + {match.params.teamMemberId ? currentTeamMember.name : 'Your'} + {' Schedule\'s Page'} + + {this.renderSetBlocks(selectedDay)} + + ) + } + } + render() { - const { match, currentTeamMember, selectedDay } = this.props; + const { selectedDay } = this.props; const { daysOfWeek } = this.state; return ( - - - {match.params.teamMemberId ? currentTeamMember.name : 'Your'} - {' Schedule\'s Page'} - - {this.renderSetBlocks(selectedDay)} - + {this.renderIfItReady()} ); diff --git a/web/reducers/environment.js b/web/reducers/environment.js index 0cda5fa..44bc7c4 100644 --- a/web/reducers/environment.js +++ b/web/reducers/environment.js @@ -6,13 +6,18 @@ import api from 'scripts/api' const RECEIVE_TEAM_MEMBERS = 'RECEIVE_TEAM_MEMBERS' const RECEIVE_TEAM_MEMBER = 'RECEIVE_TEAM_MEMBER' const SET_SELECTED_DAY = 'SET_SELECTED_DAY' -const GOTO_SCHEDULE_DAY = 'GOTO_SCHEDULE_DAY' +const FETCHING_DATA = 'FETCHING_DATA' // Reducer const initialState = { teamMembers: [], - currentTeamMember: {}, - selectedDay: moment.now() + currentTeamMember: { + id: '', + name: '', + weeklySetblocks: [] + }, + selectedDay: moment.now(), + fetchingData: false } export default function reducer(state = initialState, action) { @@ -32,6 +37,11 @@ export default function reducer(state = initialState, action) { ...state, selectedDay: action.selectedDay } + case FETCHING_DATA: + return { + ...state, + fetchingData: action.fetchingData + } default: return state } @@ -39,7 +49,9 @@ export default function reducer(state = initialState, action) { // Actions export function fetchAllTeamMembers(params) { + return dispatch => { + dispatch(setFetchingData(true)) api.graph({ query: `query { teamMembers { @@ -52,6 +64,7 @@ export function fetchAllTeamMembers(params) { // Handle payload // Dispatch additional actions dispatch(receiveTeamMembers(payload.teamMembers)) + dispatch(setFetchingData(false)) }) .catch(err => { // Handle error @@ -61,6 +74,7 @@ export function fetchAllTeamMembers(params) { export function fetchCurrentTeamMemberById(params) { return dispatch => { + dispatch(setFetchingData(true)) api.graph({ query: `query { teamMemberById(id: "${params.id}") { @@ -80,6 +94,7 @@ export function fetchCurrentTeamMemberById(params) { // Handle payload // Dispatch additional actions dispatch(receiveTeamMember(payload.teamMemberById)) + dispatch(setFetchingData(false)) }) .catch(err => { // Handle error @@ -107,4 +122,11 @@ export function setSelectedDay(selectedDay) { type: SET_SELECTED_DAY, selectedDay } +} + +export function setFetchingData(fetchingData) { + return { + type: FETCHING_DATA, + fetchingData + } } \ No newline at end of file