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,77 @@
+import { connect } from 'react-redux';
+import moment from 'moment';
 import React from 'react';
 
-export default class DayBlock extends React.Component {
+import Flex from './Flex';
+import Text from './Text';
+import Card from './Card';
+
+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] || [];
+
+        return setBlocksToRender.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, currentTeamMember, fetchingData } = this.props
+
         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>
+                            { // If you are waiting for the API to respond, it does not render
+                                !fetchingData && this.renderTinySetBlocks(currentTeamMember.weeklySetblocks, day)
+                            }
+                        </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>
         );
     }
 }
 
+const mapStateToProps = ({ environment }) => {
+    return {
+        ...environment
+    };
+};
+
+const mapDispatchToProps = {
+};
+export default connect(mapStateToProps, mapDispatchToProps)(DayBlock)

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/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 (
+            <DotWrapper>
+                <Dot delay='0s' />
+                <Dot delay='.1s' />
+                <Dot delay='.2s' />
+            </DotWrapper>
+        )
+    }
+}

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'
+                    borderRadius={50}
+                    my='auto'
+                    mx='1rem'
+                />
+                <Text
+                    weight='600'
+                    align='center'
+                    color='textSecondary'
+                >
+                    {moment(selectedDay).format('dddd, MMMM D, YYYY')}
+                </Text>
+            </Flex>
         );
     }
 }
-