-)
\ No newline at end of file
+)
diff --git a/web/components/NavigationBar.js b/web/components/NavigationBar.js
index 5dfe146..39722ba 100644
--- a/web/components/NavigationBar.js
+++ b/web/components/NavigationBar.js
@@ -1,5 +1,6 @@
import React from 'react';
import { connect } from 'react-redux';
+var _ = require('lodash');
import NavLinkItem from './NavLinkItem';
@@ -9,10 +10,11 @@ import Flex from './Flex';
class NavigationBar extends React.Component {
renderNavItem = (item) => {
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..ff57ff4 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 D, YYYY')}
+
+
);
}
}
-
diff --git a/web/components/SchedulePage.jsx b/web/components/SchedulePage.jsx
index 7069a95..f129566 100644
--- a/web/components/SchedulePage.jsx
+++ b/web/components/SchedulePage.jsx
@@ -1,33 +1,149 @@
import React from 'react';
+import moment from 'moment';
+import { connect } from 'react-redux';
-export default class SchedulePage extends React.Component {
- renderBaseOnParams = (match) => {
- if (match.params.teamMemberId) {
+import ScheduleHeader from './ScheduleHeader';
+import SideBar from './SideBar';
+import Flex from './Flex';
+import SetBlock from './SetBlock';
+import Text from './Text';
+
+import { fetchCurrentTeamMemberById, setSelectedDay } from '../reducers/environment';
+import LoadingDots from './Loading';
+
+class SchedulePage extends React.Component {
+ state = {
+ daysOfWeek: [],
+ }
+
+ componentDidMount() {
+ const { history, match } = this.props;
+ const teamMemberId = match.params.teamMemberId || 'recGVSamjigJbZoJ8';// mocked id until to have a login
+ this.props.fetchCurrentTeamMemberById({ id: teamMemberId })
+ 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.props.setSelectedDay(today)
+ }
+ }
+
+ 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 (
-
- teamMemberId:
- {match.params.teamMemberId}
-
+ This user hasn't committed any Setblocks for this day
)
}
+ }
+
+ getDaysOfWeek = () => {
+ const startOfWeek = moment()
+ .startOf('isoWeek');
+ const endOfWeek = moment()
+ .endOf('isoWeek');
+
+ const days = [];
+ let day = startOfWeek;
+
+ while (day <= endOfWeek) {
+ days.push(day.toDate());
+ day = day.clone()
+ .add(1, 'd');
+ }
+
+ this.setState({
+ daysOfWeek: days,
+ })
+ this.props.setSelectedDay(days[0])
+ }
- if (match.params.dayOfWeek) {
+ 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 (
-
- dayOfWeek:
- {match.params.dayOfWeek}
-
+
+
+ {match.params.teamMemberId ? currentTeamMember.name : 'Your'}
+ {' Schedule\'s Page'}
+
+ {this.renderSetBlocks(selectedDay)}
+
)
}
}
render() {
- const { match } = this.props;
+ const { selectedDay } = this.props;
+ const { daysOfWeek } = this.state;
return (
-
-
SchedulePage
- {this.renderBaseOnParams(match)}
-
+
+
+
+
+
+
+
+
+ {this.renderIfItReady()}
+
+
);
}
}
+
+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 e48c3ba..5390e7e 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..1bd0db8 100644
--- a/web/components/SideBar.jsx
+++ b/web/components/SideBar.jsx
@@ -1,11 +1,59 @@
import React from 'react';
+import { withRouter } from 'react-router-dom';
+import { connect } from 'react-redux';
+
+import Flex from './Flex';
+import DayBlock from './DayBlock';
+
+import { setSelectedDay } from '../reducers/environment';
+
+class SideBar extends React.Component {
+
+ 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);
+ }
-export default class SideBar extends React.Component {
render() {
+ const { days, selectedDay } = this.props;
return (
-
-
SideBar
-
+
+ {
+ days.map(day => (
+ this.goToScheduleDay(day)}
+ />
+ ))
+ }
+
+
);
}
}
+
+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 fa80c58..16058de 100644
--- a/web/components/TeamList.js
+++ b/web/components/TeamList.js
@@ -7,46 +7,29 @@ import { fetchAllTeamMembers } from '../reducers/environment'
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 +41,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'
>
-
-
-
+