Skip to content

Commit 18c4c0e

Browse files
author
Federico Madoery
committed
[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"
1 parent ccfba9f commit 18c4c0e

10 files changed

+151
-98
lines changed

‎config/paths.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
var path = require('path')
2-
var fs = require('fs')
1+
const path = require('path')
2+
const fs = require('fs')
33

44
const projectDirectory = fs.realpathSync(process.cwd())
55
const resolve = relativePath => path.resolve(projectDirectory, relativePath)

‎web/components/BlockList.jsx

+81-6
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,87 @@
11
import React from 'react';
2+
import { connect } from 'react-redux';
3+
import moment from 'moment';
4+
import { cloneDeep } from 'lodash';
5+
6+
import SetBlock from './SetBlock';
7+
import Text from './Text';
8+
import { DEFAULT_SETBLOCKS } from '../constants';
9+
10+
import {
11+
setEnableSubmit, updateUnsavedSetblocks,
12+
} from '../reducers/environment';
13+
14+
class BlockList extends React.Component {
15+
16+
completeWithEmptySetBlocks(setBlocks) {
17+
const defaultSetBlocks = cloneDeep(DEFAULT_SETBLOCKS);
18+
let replacedBlocks = 0;
19+
setBlocks = _.orderBy(setBlocks, ['blockTime'], ['asc']); // Use Lodash to sort array by 'name'
20+
setBlocks = _.uniqBy(setBlocks, 'blockTime'); // Use Lodash to delete repeated blockTimes
21+
if (setBlocks && setBlocks.length > 0) { // To avoid iterate if the array is empty, return default
22+
defaultSetBlocks.forEach((setBlock, index, theArray) => {
23+
if (setBlocks && replacedBlocks < setBlocks.length && setBlock.blockTime === setBlocks[replacedBlocks].blockTime) {
24+
theArray[index] = setBlocks[replacedBlocks];
25+
replacedBlocks++;
26+
}
27+
});
28+
}
29+
return defaultSetBlocks
30+
}
31+
32+
updateUnsavedSetBlock(selectedDay, index, editedSetBlock ) {
33+
const { unsavedSetBlocks } = this.props
34+
let dayEdited = unsavedSetBlocks[selectedDay];
35+
dayEdited[index] = editedSetBlock; // index 0 = SetBlock with blockTime 1
36+
this.props.updateUnsavedSetblocks({
37+
...unsavedSetBlocks,
38+
[selectedDay]: dayEdited
39+
})
40+
this.props.setEnableSubmit(true)
41+
}
242

3-
export default class BlockList extends React.Component {
443
render() {
5-
return (
6-
<div className='BlockList'>
7-
<h6>BlockList</h6>
8-
</div>
9-
);
44+
const {
45+
editModeSchedule, currentWeeklySetblocks, unsavedSetBlocks, selectedDay
46+
} = this.props;
47+
const selectedDayFormatted = moment(selectedDay).format('YYYY-MM-DD')
48+
let setBlocksByDate = _.groupBy(currentWeeklySetblocks, 'date');
49+
let setBlocks = setBlocksByDate[selectedDayFormatted];
50+
51+
if (editModeSchedule && unsavedSetBlocks ) {
52+
// As it is your schedule, you can see the empty blocks, to complete then, that's why it is completed with the missing ones
53+
return this.completeWithEmptySetBlocks(setBlocks).map((setBlock, index) => {
54+
return (
55+
<SetBlock
56+
data={setBlock}
57+
key={setBlock.id || (index + selectedDayFormatted)}
58+
editMode={editModeSchedule}
59+
updateSetBlock={(editedSetBlock) => this.updateUnsavedSetBlock(selectedDayFormatted, index, editedSetBlock )}
60+
/>
61+
)
62+
})
63+
} else if (!editModeSchedule && setBlocks) {
64+
return setBlocks.map((setBlock, index) => {
65+
return <SetBlock data={setBlock} key={setBlock.id || index} />
66+
})
67+
} else {
68+
return (
69+
<Text weight='600' align='center'> This user hasn't committed any Setblocks for this day </Text>
70+
)
71+
}
1072
}
1173
}
1274

75+
const mapStateToProps = ({ environment }) => {
76+
return {
77+
...environment
78+
};
79+
};
80+
81+
const mapDispatchToProps = (dispatch) => {
82+
return {
83+
setEnableSubmit: (enableSubmit) => dispatch(setEnableSubmit(enableSubmit)),
84+
updateUnsavedSetblocks: (unsavedSetBlocks) => dispatch(updateUnsavedSetblocks(unsavedSetBlocks))
85+
};
86+
};
87+
export default connect(mapStateToProps, mapDispatchToProps)(BlockList);

‎web/components/CommitBlock.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@ import moment from 'moment';
33
import { connect } from 'react-redux';
44
import { Check } from 'styled-icons/feather/Check.cjs'
55

6-
import Text from './Text';
76
import Card from './Card';
87
import Flex from './Flex';
8+
import Text from './Text';
99

1010
import { createSetBlock, setEditModeSchedule, updateSetBlock } from '../reducers/environment';
1111

‎web/components/DayBlock.jsx

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
1+
import React from 'react';
12
import { connect } from 'react-redux';
23
import moment from 'moment';
3-
import React from 'react';
44

5+
6+
import Card from './Card';
57
import Flex from './Flex';
68
import Text from './Text';
7-
import Card from './Card';
89

910
class DayBlock extends React.Component {
1011

‎web/components/NavigationBar.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22
import { connect } from 'react-redux';
3-
var _ = require('lodash');
3+
import _ from 'lodash'
44

55
import NavLinkItem from './NavLinkItem';
66

‎web/components/SchedulePage.jsx

+19-57
Original file line numberDiff line numberDiff line change
@@ -3,18 +3,20 @@ import moment from 'moment';
33
import { connect } from 'react-redux';
44
import { cloneDeep } from 'lodash';
55

6+
import BlockList from './BlockList';
7+
import CommitBlock from './CommitBlock';
8+
import Flex from './Flex';
9+
import LoadingDots from './Loading';
610
import ScheduleHeader from './ScheduleHeader';
711
import SideBar from './SideBar';
8-
import Flex from './Flex';
9-
import SetBlock from './SetBlock';
1012
import Text from './Text';
11-
import LoadingDots from './Loading';
12-
import CommitBlock from './CommitBlock';
13-
import { DEFAULT_SETBLOCKS } from '../constants/index';
13+
14+
import { DEFAULT_SETBLOCKS } from '../constants';
1415

1516
import {
1617
fetchCurrentTeamMemberById,
1718
setEditModeSchedule,
19+
setEnableSubmit,
1820
setSelectedDay,
1921
updateUnsavedSetblocks
2022
} from '../reducers/environment';
@@ -23,7 +25,6 @@ import {
2325
class SchedulePage extends React.Component {
2426
state = {
2527
daysOfWeek: [],
26-
enableSubmit: false,
2728
}
2829

2930
componentDidMount() {
@@ -69,7 +70,7 @@ class SchedulePage extends React.Component {
6970
// This only take effect if change the currentTeamMember
7071
if ((editModeSchedule && currentTeamMember !== nextProps.currentTeamMember) || selectedDay !== nextProps.selectedDay) {
7172
this.makeSetBlocksForEdit(nextProps.currentWeeklySetblocks);
72-
this.setState({ enableSubmit: false })
73+
this.props.setEnableSubmit(false)
7374
}
7475
}
7576

@@ -86,61 +87,21 @@ class SchedulePage extends React.Component {
8687
let replacedBlocks = 0;
8788
setBlocks = _.orderBy(setBlocks, ['blockTime'], ['asc']); // Use Lodash to sort array by 'name'
8889
setBlocks = _.uniqBy(setBlocks, 'blockTime'); // Use Lodash to delete repeated blockTimes
89-
defaultSetBlocks.forEach((setBlock, index, theArray) => {
90-
if (setBlocks && replacedBlocks < setBlocks.length && setBlock.blockTime === setBlocks[replacedBlocks].blockTime) {
91-
theArray[index] = setBlocks[replacedBlocks];
92-
replacedBlocks++;
93-
}
94-
});
95-
return defaultSetBlocks
96-
}
97-
98-
updateUnsavedSetBlock(selectedDay, index, editedSetBlock ) {
99-
const { unsavedSetBlocks } = this.props
100-
let dayEdited = unsavedSetBlocks[selectedDay];
101-
dayEdited[index] = editedSetBlock; // index 0 = SetBlock with blockTime 1
102-
this.props.updateUnsavedSetblocks({
103-
...unsavedSetBlocks,
104-
[selectedDay]: dayEdited
105-
})
106-
this.setState({ enableSubmit: true })
107-
}
108-
109-
renderSetBlocks = (selectedDay) => {
110-
const { editModeSchedule, currentWeeklySetblocks, unsavedSetBlocks } = this.props;
111-
selectedDay = moment(selectedDay).format('YYYY-MM-DD')
112-
const setBlocksByDate = _.groupBy(currentWeeklySetblocks, 'date')
113-
let setBlocks = setBlocksByDate[selectedDay];
114-
115-
if (editModeSchedule && unsavedSetBlocks) {
116-
// If the match.params don't have a teamMemberId are u seeing your schedule
117-
// As it is your schedule, you can see the empty blocks, to complete then, that's why it is completed with the missing ones
118-
return this.completeWithEmptySetBlocks(setBlocks).map((setBlock, index) => {
119-
return (
120-
<SetBlock
121-
data={setBlock}
122-
key={setBlock.id || (index + selectedDay)}
123-
editMode={editModeSchedule}
124-
updateSetBlock={(editedSetBlock) => this.updateUnsavedSetBlock(selectedDay, index, editedSetBlock )}
125-
/>
126-
)
127-
})
128-
} else if (!editModeSchedule && setBlocks) {
129-
return setBlocks.map((setBlock, index) => {
130-
return <SetBlock data={setBlock} key={setBlock.id || index} />
131-
})
132-
} else {
133-
return (
134-
<Text weight='600' align='center'> This user hasn't committed any Setblocks for this day </Text>
135-
)
90+
if (setBlocks && setBlocks.length > 0) { // To avoid iterate if the array is empty, return default
91+
defaultSetBlocks.forEach((setBlock, index, theArray) => {
92+
if (setBlocks && replacedBlocks < setBlocks.length && setBlock.blockTime === setBlocks[replacedBlocks].blockTime) {
93+
theArray[index] = setBlocks[replacedBlocks];
94+
replacedBlocks++;
95+
}
96+
});
13697
}
98+
return defaultSetBlocks
13799
}
138100

139101
renderIfItReady() {
140102
const {
141-
match, currentTeamMember, fetchingData, selectedDay, editModeSchedule
103+
match, currentTeamMember, fetchingData, editModeSchedule, enableSubmit
142104
} = this.props
143-
const { enableSubmit } = this.state
144105

145106
if (fetchingData) {
146107
return ( // If you are waiting for the API to respond, render a loading
@@ -161,7 +122,7 @@ class SchedulePage extends React.Component {
161122
{match.params.teamMemberId ? currentTeamMember.name : 'Your'}
162123
{' Schedule\'s Page'}
163124
</Text>
164-
{this.renderSetBlocks(selectedDay)}
125+
<BlockList />
165126
{editModeSchedule && (<CommitBlock enableSubmit={enableSubmit} />)}
166127
</Flex>
167128
)
@@ -212,6 +173,7 @@ const mapDispatchToProps = (dispatch) => {
212173
fetchCurrentTeamMemberById: (params) => dispatch(fetchCurrentTeamMemberById(params)),
213174
setSelectedDay: (selectedDay) => dispatch(setSelectedDay(selectedDay)),
214175
setEditModeSchedule: (editMode) => dispatch(setEditModeSchedule(editMode)),
176+
setEnableSubmit: (enableSubmit) => dispatch(setEnableSubmit(enableSubmit)),
215177
updateUnsavedSetblocks: (unsavedSetBlocks) => dispatch(updateUnsavedSetblocks(unsavedSetBlocks))
216178
};
217179
};

‎web/components/SetBlock.jsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,12 @@ import React from 'react';
22
import { connect } from 'react-redux';
33
import { Edit3 } from 'styled-icons/feather/Edit3.cjs'
44

5-
import Flex from './Flex';
6-
import Text from './Text';
5+
import Box from './Box';
76
import Card from './Card';
7+
import Flex from './Flex';
88
import Modal from './Modal';
9-
import Box from './Box';
109
import Input from './Input';
10+
import Text from './Text';
1111

1212

1313
class SetBlock extends React.Component {

‎web/components/SideBar.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@ import React from 'react';
22
import { withRouter } from 'react-router-dom';
33
import { connect } from 'react-redux';
44

5-
import Flex from './Flex';
65
import DayBlock from './DayBlock';
6+
import Flex from './Flex';
77

88
import { setEditModeSchedule, setSelectedDay } from '../reducers/environment';
99

‎web/components/TeamMember.jsx

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
import React from 'react';
22

3-
import Flex from './Flex';
4-
import Text from './Text';
53
import Card from './Card';
4+
import Flex from './Flex';
65
import Image from './Image';
6+
import Text from './Text';
7+
78

89
export default class TeamMember extends React.Component {
910
render() {

0 commit comments

Comments
 (0)