Skip to content

Commit be0a42d

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 3f175bf commit be0a42d

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() {
@@ -72,7 +73,7 @@ class SchedulePage extends React.Component {
7273
}
7374
if ((editModeSchedule && currentTeamMember !== nextProps.currentTeamMember) || selectedDay !== nextProps.selectedDay) {
7475
this.makeSetBlocksForEdit(nextProps.currentWeeklySetblocks);
75-
this.setState({ enableSubmit: false })
76+
this.props.setEnableSubmit(false)
7677
}
7778
}
7879

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

142104
renderIfItReady() {
143105
const {
144-
match, currentTeamMember, fetchingData, selectedDay, editModeSchedule
106+
match, currentTeamMember, fetchingData, editModeSchedule, enableSubmit
145107
} = this.props
146-
const { enableSubmit } = this.state
147108

148109
if (fetchingData) {
149110
return ( // If you are waiting for the API to respond, render a loading
@@ -164,7 +125,7 @@ class SchedulePage extends React.Component {
164125
{match.params.teamMemberId ? currentTeamMember.name : 'Your'}
165126
{' Schedule\'s Page'}
166127
</Text>
167-
{this.renderSetBlocks(selectedDay)}
128+
<BlockList />
168129
{editModeSchedule && (<CommitBlock enableSubmit={enableSubmit} />)}
169130
</Flex>
170131
)
@@ -215,6 +176,7 @@ const mapDispatchToProps = (dispatch) => {
215176
fetchCurrentTeamMemberById: (params) => dispatch(fetchCurrentTeamMemberById(params)),
216177
setSelectedDay: (selectedDay) => dispatch(setSelectedDay(selectedDay)),
217178
setEditModeSchedule: (editMode) => dispatch(setEditModeSchedule(editMode)),
179+
setEnableSubmit: (enableSubmit) => dispatch(setEnableSubmit(enableSubmit)),
218180
updateUnsavedSetblocks: (unsavedSetBlocks) => dispatch(updateUnsavedSetblocks(unsavedSetBlocks))
219181
};
220182
};

‎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)