Close Issue #8 and #12

package.json

@@ -49,7 +49,7 @@
     "forever": "^0.15.3",
     "formik": "^1.3.0",
     "fs-extra": "^2.0.0",
-    "graphql": "^0.4.9",
+    "graphql": "^0.4.18",
     "graphql-bookshelf": "github:otech47/graphql-bookshelf",
     "knex": "^0.12.6",
     "lodash": "^4.16.4",

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 

web/components/DayBlock.jsx

@@ -1,12 +1,61 @@
 import React from 'react';
+import Flex from './Flex';
+import Text from './Text';
+import Card from './Card';
 
 export default class DayBlock extends React.Component {
+
+    renderTinySetBlocks = (setBlocks) => {
+        return setBlocks.map( setBlock => (
+            <Card
+                key={setBlock.id}
+                height='8px'
+                width='5px'
+                borderBottom={setBlock.blockFraction === '1.0' ? '' : '4px lightGrey solid'}
+                bg='red'
+                my='0.3rem'
+                mr='0.3rem'
+            >
+            </Card>
+        ))
+    }
+
     render() {
+        const { day, selected, onClick } = this.props
+
+        // 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 (
-            <div className='DayBlock'>
-                <h6>DayBlock</h6>
-            </div>
+            <Flex
+                column
+                center
+                className='DayBlock'
+                mx='0.5rem'
+            >
+                <Card
+                    width='100%'
+                    bg='white'
+                    borderLeft={selected ? '2px solid red' : '2px solid white'}
+                    depth={9}
+                    mx='0.5rem'
+                    onClick={() => onClick(day)}
+                >
+                    <Flex row center>
+                        <Flex column>
+                            {this.renderTinySetBlocks(setBlocks)}
+                        </Flex>
+                        <Flex column>
+                            <Text align='center' mb='0rem' color={selected ? 'red' : 'textSecondary'}>
+                                {day.getDate()}
+                            </Text>
+                            <Text align='center' mt='0rem' color={selected ? 'red' : 'textSecondary'}>
+                                {day.toDateString().slice(0, 3)}
+                            </Text>
+                        </Flex>
+                    </Flex>
+                </Card>
+            </Flex>
         );
     }
 }
-

web/components/Header.jsx

@@ -12,7 +12,9 @@ export default class Header extends React.Component {
                 width='375px'
             >
                 <Image
-                    src={require('../images/CombinedHeader.png')}
+                    my='auto'
+                    mx='auto'
+                    src={require('../images/SetBlockHeading2.png')}
                 />
             </Flex>
         );

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' }}
         >
             <Card
-                bg={selected ? 'black' : 'grey'}
+                bg='white'
                 width='100%'
                 height='100%'
+                borderTop={selected ? '2px green solid' : ''}
+                depth={8}
             >
                 <Flex
                     column
@@ -28,10 +31,10 @@ export default ({
                 >
                     {React.createElement(icon, {
                         size: 24,
-                        color: selected ? 'white' : 'black'
+                        color: selected ? 'green' : 'black'
                     })}
                     <Text
-                        color={selected ? 'white' : 'black'}
+                        color={selected ? 'green' : 'black'}
                         size={[10]}
                         my='0'
                         weight='600'
@@ -42,4 +45,4 @@ export default ({
             </Card>
         </Link>
     </Box>
-)
+)

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 (
             <NavLinkItem
                 {...item}
-                selected={item.route === path}
+                selected={item.route === route}
                 width={100 / NAVIGATION.items.length}
             />
         )

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 (
-            <div className='ScheduleHeader'>
-                <h6>ScheduleHeader</h6>
-            </div>
+            <Flex
+                row
+                className='ScheduleHeader'
+            >
+                <Card
+                    width='10px'
+                    height='10px'
+                    bg='green' // TODO This color must be the color of the member
+                    borderRadius={50}
+                    my='auto'
+                    mx='1rem'
+                />
+                <Text
+                    weight='600'
+                    align='center'
+                    color='textSecondary'
+                >
+                    {moment(selectedDay).format('dddd, MMMM D, YYYY')}
+                </Text>
+            </Flex>
         );
     }
 }
-

web/components/SchedulePage.jsx

@@ -1,33 +1,143 @@
 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) => {
-        if (match.params.teamMemberId) {
-            return (
-                <h6>
-                teamMemberId:
-                    {match.params.teamMemberId}
-                </h6>
-            )
+
+    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() {
+        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 })
         }
+    }
 
-        if (match.params.dayOfWeek) {
+    renderSetBlocks = () => {
+        const { setBlocks } = this.state;
+        if (setBlocks) {
+            return setBlocks.map(setBlock => {
+                return <SetBlock data={setBlock} key={setBlock.id} />
+            })
+        } else {
             return (
-                <h6>
-                    dayOfWeek:
-                    {match.params.dayOfWeek}
-                </h6>
+                <Text align='center'> This user hasn't committed any Setblocks for this day </Text>
             )
         }
     }
 
+    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');
+        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,
+            selectedDay: days[0]
+        })
+    }
+
     render() {
         const { match } = this.props;
+        const { daysOfWeek, selectedDay } = this.state;
         return (
-            <div className='SchedulePage'>
-                <h6>SchedulePage</h6>
-                {this.renderBaseOnParams(match)}
-            </div>
+            <Flex
+                row
+                flexDirection='horizontal'
+                width='100%'
+                className='SchedulePage'
+            >
+                <Flex row>
+                    <SideBar
+                        days={daysOfWeek}
+                        selectedDay={selectedDay}
+                        goToScheduleDay={this.goToScheduleDay}
+                    />
+                </Flex>
+                <Flex
+                    column
+                    width='100%'
+                >
+                    <Flex
+                        bg='red'
+                        center
+                    >
+                        <ScheduleHeader selectedDay={selectedDay} />
+                    </Flex>
+                    <Flex
+                        center
+                        column
+                    >
+                        <Text
+                            weight='900'
+                            aling='center'
+                            style={{ borderBottom: '1px solid red' }}
+                        >
+                            { // TODO Print the name of the team member
+                                match.params.teamMemberId ? 'Team Member ' : 'Your '
+                            }
+
+
+                            Schedule's Page
+                        </Text>
+                        {this.renderSetBlocks()}
+                    </Flex>
+                </Flex>
+            </Flex>
         );
     }
 }