[WIP] Issue setlife-network#22

Code Cleanup
 Alphabetical ordering of imports and actions (in redux)
 Implementation of BlockList to manage and render the Set Blocks, to improve the readability of Schedule Page by reducing your code length
 Enable Submit now is managed through redux

UI Polish
 Fix alignment for Setblocks scheduled within the same day and make sure the setblock dots (on both the sidebar and the main page are perfect squares instead of rectangles - Was Fixed some commits ago in PR "Close Issue setlife-network#9"
 Fix alignment on the empty state UI "This user hasn't committed..." - Was Fixed some commits ago in PR "Close Issue setlife-network#9"

config/paths.js

@@ -1,5 +1,5 @@
-var path = require('path')
-var fs = require('fs')
+const path = require('path')
+const fs = require('fs')
 
 const projectDirectory = fs.realpathSync(process.cwd())
 const resolve = relativePath => path.resolve(projectDirectory, relativePath)

web/components/BlockList.jsx

@@ -1,12 +1,87 @@
 import React from 'react';
+import { connect } from 'react-redux';
+import moment from 'moment';
+import { cloneDeep } from 'lodash';
+
+import SetBlock from './SetBlock';
+import Text from './Text';
+import { DEFAULT_SETBLOCKS } from '../constants';
+
+import {
+    setEnableSubmit, updateUnsavedSetblocks,
+} from '../reducers/environment';
+
+class BlockList extends React.Component {
+
+    completeWithEmptySetBlocks(setBlocks) {
+        const defaultSetBlocks = cloneDeep(DEFAULT_SETBLOCKS);
+        let replacedBlocks = 0;
+        setBlocks = _.orderBy(setBlocks, ['blockTime'], ['asc']); // Use Lodash to sort array by 'name'
+        setBlocks = _.uniqBy(setBlocks, 'blockTime'); // Use Lodash to delete repeated blockTimes
+        if (setBlocks && setBlocks.length > 0) { // To avoid iterate if the array is empty, return default
+            defaultSetBlocks.forEach((setBlock, index, theArray) => {
+                if (setBlocks && replacedBlocks < setBlocks.length && setBlock.blockTime === setBlocks[replacedBlocks].blockTime) {
+                    theArray[index] = setBlocks[replacedBlocks];
+                    replacedBlocks++;
+                }
+            });
+        }
+        return defaultSetBlocks
+    }
+
+    updateUnsavedSetBlock(selectedDay, index, editedSetBlock ) {
+        const { unsavedSetBlocks } = this.props
+        let dayEdited = unsavedSetBlocks[selectedDay];
+        dayEdited[index] = editedSetBlock; // index 0 = SetBlock with blockTime 1
+        this.props.updateUnsavedSetblocks({
+            ...unsavedSetBlocks,
+            [selectedDay]: dayEdited
+        })
+        this.props.setEnableSubmit(true)
+    }
 
-export default class BlockList extends React.Component {
     render() {
-        return (
-            <div className='BlockList'>
-                <h6>BlockList</h6>
-            </div>
-        );
+        const {
+            editModeSchedule, currentWeeklySetblocks, unsavedSetBlocks, selectedDay 
+        } = this.props;
+        const selectedDayFormatted = moment(selectedDay).format('YYYY-MM-DD')
+        let setBlocksByDate =  _.groupBy(currentWeeklySetblocks, 'date');
+        let setBlocks = setBlocksByDate[selectedDayFormatted];
+
+        if (editModeSchedule && unsavedSetBlocks ) {
+            // As it is your schedule, you can see the empty blocks, to complete then, that's why it is completed with the missing ones
+            return this.completeWithEmptySetBlocks(setBlocks).map((setBlock, index) => {
+                return (
+                    <SetBlock
+                        data={setBlock}
+                        key={setBlock.id || (index + selectedDayFormatted)}
+                        editMode={editModeSchedule}
+                        updateSetBlock={(editedSetBlock) => this.updateUnsavedSetBlock(selectedDayFormatted, index, editedSetBlock )}
+                    />
+                )
+            })
+        } else if (!editModeSchedule && setBlocks) {
+            return setBlocks.map((setBlock, index) => {
+                return <SetBlock data={setBlock} key={setBlock.id || index} />
+            })
+        } else {
+            return (
+                <Text weight='600' align='center'> This user hasn't committed any Setblocks for this day </Text>
+            )
+        }
     }
 }
 
+const mapStateToProps = ({ environment }) => {
+    return {
+        ...environment
+    };
+};
+
+const mapDispatchToProps = (dispatch) => {
+    return {
+        setEnableSubmit: (enableSubmit) => dispatch(setEnableSubmit(enableSubmit)),
+        updateUnsavedSetblocks: (unsavedSetBlocks) => dispatch(updateUnsavedSetblocks(unsavedSetBlocks))
+    };
+};
+export default connect(mapStateToProps, mapDispatchToProps)(BlockList);

web/components/CommitBlock.jsx

@@ -3,9 +3,9 @@ import moment from 'moment';
 import { connect } from 'react-redux';
 import { Check } from 'styled-icons/feather/Check.cjs'
 
-import Text from './Text';
 import Card from './Card';
 import Flex from './Flex';
+import Text from './Text';
 
 import { createSetBlock, setEditModeSchedule, updateSetBlock } from '../reducers/environment';
 

web/components/DayBlock.jsx

@@ -1,10 +1,11 @@
+import React from 'react';
 import { connect } from 'react-redux';
 import moment from 'moment';
-import React from 'react';
 
+
+import Card from './Card';
 import Flex from './Flex';
 import Text from './Text';
-import Card from './Card';
 
 class DayBlock extends React.Component {
 

web/components/NavigationBar.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { connect } from 'react-redux';
-var _ = require('lodash');
+import _ from 'lodash'
 
 import NavLinkItem from './NavLinkItem';
 

web/components/SchedulePage.jsx

@@ -3,18 +3,20 @@ import moment from 'moment';
 import { connect } from 'react-redux';
 import { cloneDeep } from 'lodash';
 
+import BlockList from './BlockList';
+import CommitBlock from './CommitBlock';
+import Flex from './Flex';
+import LoadingDots from './Loading';
 import ScheduleHeader from './ScheduleHeader';
 import SideBar from './SideBar';
-import Flex from './Flex';
-import SetBlock from './SetBlock';
 import Text from './Text';
-import LoadingDots from './Loading';
-import CommitBlock from './CommitBlock';
-import { DEFAULT_SETBLOCKS } from '../constants/index';
+
+import { DEFAULT_SETBLOCKS } from '../constants';
 
 import {
     fetchCurrentTeamMemberById,
     setEditModeSchedule,
+    setEnableSubmit,
     setSelectedDay,
     updateUnsavedSetblocks
 } from '../reducers/environment';
@@ -23,7 +25,6 @@ import {
 class SchedulePage extends React.Component {
     state = {
         daysOfWeek: [],
-        enableSubmit: false,
     }
 
     componentDidMount() {
@@ -69,7 +70,7 @@ class SchedulePage extends React.Component {
         // This only take effect if change the currentTeamMember
         if ((editModeSchedule && currentTeamMember !== nextProps.currentTeamMember) || selectedDay !== nextProps.selectedDay) {
             this.makeSetBlocksForEdit(nextProps.currentWeeklySetblocks);
-            this.setState({ enableSubmit: false })
+            this.props.setEnableSubmit(false)
         }
     }
 
@@ -86,61 +87,21 @@ class SchedulePage extends React.Component {
         let replacedBlocks = 0;
         setBlocks = _.orderBy(setBlocks, ['blockTime'], ['asc']); // Use Lodash to sort array by 'name'
         setBlocks = _.uniqBy(setBlocks, 'blockTime'); // Use Lodash to delete repeated blockTimes
-        defaultSetBlocks.forEach((setBlock, index, theArray) => {
-            if (setBlocks && replacedBlocks < setBlocks.length && setBlock.blockTime === setBlocks[replacedBlocks].blockTime) {
-                theArray[index] = setBlocks[replacedBlocks];
-                replacedBlocks++;
-            }
-        });
-        return defaultSetBlocks
-    }
-
-    updateUnsavedSetBlock(selectedDay, index, editedSetBlock ) {
-        const { unsavedSetBlocks } = this.props
-        let dayEdited = unsavedSetBlocks[selectedDay];
-        dayEdited[index] = editedSetBlock; // index 0 = SetBlock with blockTime 1
-        this.props.updateUnsavedSetblocks({
-            ...unsavedSetBlocks,
-            [selectedDay]: dayEdited
-        })
-        this.setState({ enableSubmit: true })
-    }
-
-    renderSetBlocks = (selectedDay) => {
-        const { editModeSchedule, currentWeeklySetblocks, unsavedSetBlocks } = this.props;
-        selectedDay = moment(selectedDay).format('YYYY-MM-DD')
-        const setBlocksByDate = _.groupBy(currentWeeklySetblocks, 'date')
-        let setBlocks = setBlocksByDate[selectedDay];
-
-        if (editModeSchedule && unsavedSetBlocks) {
-            // If the match.params don't have a teamMemberId are u seeing your schedule
-            // As it is your schedule, you can see the empty blocks, to complete then, that's why it is completed with the missing ones
-            return this.completeWithEmptySetBlocks(setBlocks).map((setBlock, index) => {
-                return (
-                    <SetBlock
-                        data={setBlock}
-                        key={setBlock.id || (index + selectedDay)}
-                        editMode={editModeSchedule} 
-                        updateSetBlock={(editedSetBlock) => this.updateUnsavedSetBlock(selectedDay, index, editedSetBlock )}
-                    />
-                )
-            })
-        } else if (!editModeSchedule && setBlocks) {
-            return setBlocks.map((setBlock, index) => {
-                return <SetBlock data={setBlock} key={setBlock.id || index} />
-            })
-        } else {
-            return (
-                <Text weight='600' align='center'> This user hasn't committed any Setblocks for this day </Text>
-            )
+        if (setBlocks && setBlocks.length > 0) { // To avoid iterate if the array is empty, return default
+            defaultSetBlocks.forEach((setBlock, index, theArray) => {
+                if (setBlocks && replacedBlocks < setBlocks.length && setBlock.blockTime === setBlocks[replacedBlocks].blockTime) {
+                    theArray[index] = setBlocks[replacedBlocks];
+                    replacedBlocks++;
+                }
+            });
         }
+        return defaultSetBlocks
     }
 
     renderIfItReady() {
         const {
-            match, currentTeamMember, fetchingData, selectedDay, editModeSchedule
+            match, currentTeamMember, fetchingData, editModeSchedule, enableSubmit
         } = this.props
-        const { enableSubmit } = this.state
 
         if (fetchingData) {
             return ( // If you are waiting for the API to respond, render a loading
@@ -161,7 +122,7 @@ class SchedulePage extends React.Component {
                         {match.params.teamMemberId ? currentTeamMember.name : 'Your'}
                         {' Schedule\'s Page'}
                     </Text>
-                    {this.renderSetBlocks(selectedDay)}
+                    <BlockList />
                     {editModeSchedule && (<CommitBlock enableSubmit={enableSubmit} />)}
                 </Flex>
             )
@@ -212,6 +173,7 @@ const mapDispatchToProps = (dispatch) => {
         fetchCurrentTeamMemberById: (params) => dispatch(fetchCurrentTeamMemberById(params)),
         setSelectedDay: (selectedDay) => dispatch(setSelectedDay(selectedDay)),
         setEditModeSchedule: (editMode) => dispatch(setEditModeSchedule(editMode)),
+        setEnableSubmit: (enableSubmit) => dispatch(setEnableSubmit(enableSubmit)),
         updateUnsavedSetblocks: (unsavedSetBlocks) => dispatch(updateUnsavedSetblocks(unsavedSetBlocks))
     };
 };

web/components/SetBlock.jsx

@@ -2,12 +2,12 @@ import React from 'react';
 import { connect } from 'react-redux';
 import { Edit3 } from 'styled-icons/feather/Edit3.cjs'
 
-import Flex from './Flex';
-import Text from './Text';
+import Box from './Box';
 import Card from './Card';
+import Flex from './Flex';
 import Modal from './Modal';
-import Box from './Box';
 import Input from './Input';
+import Text from './Text';
 
 
 class SetBlock extends React.Component {

web/components/SideBar.jsx

@@ -2,8 +2,8 @@ import React from 'react';
 import { withRouter } from 'react-router-dom';
 import { connect } from 'react-redux';
 
-import Flex from './Flex';
 import DayBlock from './DayBlock';
+import Flex from './Flex';
 
 import { setEditModeSchedule, setSelectedDay } from '../reducers/environment';
 

web/components/TeamMember.jsx

@@ -1,9 +1,10 @@
 import React from 'react';
 
-import Flex from './Flex';
-import Text from './Text';
 import Card from './Card';
+import Flex from './Flex';
 import Image from './Image';
+import Text from './Text';
+
 
 export default class TeamMember extends React.Component {
     render() {