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

@@ -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 (
             <Flex
@@ -47,7 +47,9 @@ class DayBlock extends React.Component {
                 >
                     <Flex row center>
                         <Flex column>
-                            {this.renderTinySetBlocks(currentTeamMember.weeklySetblocks, day)}
+                            { // 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'}>

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/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
+                <Flex
+                    center
+                    row
+                >
+                    <Text weight='900'>Loading</Text>
+                    <LoadingDots />
+                </Flex>
+            )
+        } else {
+            return (
+                <Flex
+                    center
+                    column
+                >
+                    <Text
+                        weight='900'
+                        aling='center'
+                        style={{ borderBottom: '1px solid red' }}
+                    >
+                        {match.params.teamMemberId ? currentTeamMember.name : 'Your'}
+                        {' Schedule\'s Page'}
+                    </Text>
+                    {this.renderSetBlocks(selectedDay)}
+                </Flex>
+            )
+        }
+    }
+
     render() {
-        const { match, currentTeamMember, selectedDay } = this.props;
+        const { selectedDay } = this.props;
         const { daysOfWeek } = this.state;
         return (
             <Flex
@@ -92,20 +127,7 @@ class SchedulePage extends React.Component {
                     >
                         <ScheduleHeader selectedDay={selectedDay} />
                     </Flex>
-                    <Flex
-                        center
-                        column
-                    >
-                        <Text
-                            weight='900'
-                            aling='center'
-                            style={{ borderBottom: '1px solid red' }}
-                        >
-                            {match.params.teamMemberId ? currentTeamMember.name : 'Your'}
-                            {' Schedule\'s Page'}
-                        </Text>
-                        {this.renderSetBlocks(selectedDay)}
-                    </Flex>
+                    {this.renderIfItReady()}
                 </Flex>
             </Flex>
         );

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,14 +37,21 @@ export default function reducer(state = initialState, action) {
             ...state,
             selectedDay: action.selectedDay
         }
+    case FETCHING_DATA:
+        return {
+            ...state,
+            fetchingData: action.fetchingData
+        }
     default:
         return state
     }
 }
 
 // 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
+    }
 }