diff --git a/config/webpack.config.dev.js b/config/webpack.config.dev.js index 7d3ebf1..8464cfc 100644 --- a/config/webpack.config.dev.js +++ b/config/webpack.config.dev.js @@ -23,6 +23,7 @@ module.exports = merge(common, { publicPath: '/', historyApiFallback: true, hot: true, + host: '0.0.0.0', inline: true, open: false }, diff --git a/web/components/CommitBlock.jsx b/web/components/CommitBlock.jsx index b6aa25f..a2bdfee 100644 --- a/web/components/CommitBlock.jsx +++ b/web/components/CommitBlock.jsx @@ -7,7 +7,7 @@ import Text from './Text'; import Card from './Card'; import Flex from './Flex'; -import { createSetBlock, updateSetBlock } from '../reducers/environment'; +import { createSetBlock, setEditModeSchedule, updateSetBlock } from '../reducers/environment'; class CommitBlock extends React.Component { @@ -33,10 +33,11 @@ class CommitBlock extends React.Component { this.setState({ showToast: true // Improve toast system in a future }) - _.delay( () => { + _.delay( () => { // This probably made a warning but is only temporal, this will be removed with the toast system this.setState({ showToast: false // Improve toast system in a future }) + this.props.setEditModeSchedule(false); }, 1000); @@ -85,16 +86,19 @@ class CommitBlock extends React.Component { - - {' Commit ' + this.countBlockFractions() + ' SetBlocks \n ' + {enableSubmit + && ( + + {' Commit ' + this.countBlockFractions() + ' SetBlocks \n ' + 'for ' + moment(selectedDay).format('dddd, MMM Do') + '?'} - + + )} { const mapDispatchToProps = (dispatch) => { return { createSetBlock: (params) => dispatch(createSetBlock(params)), - updateSetBlock: (params) => dispatch(updateSetBlock(params)) + updateSetBlock: (params) => dispatch(updateSetBlock(params)), + setEditModeSchedule: (editMode) => dispatch(setEditModeSchedule(editMode)) }; }; diff --git a/web/components/SchedulePage.jsx b/web/components/SchedulePage.jsx index ce81beb..e913d75 100644 --- a/web/components/SchedulePage.jsx +++ b/web/components/SchedulePage.jsx @@ -162,7 +162,7 @@ class SchedulePage extends React.Component { {' Schedule\'s Page'} {this.renderSetBlocks(selectedDay)} - {editModeSchedule && ()} + {editModeSchedule && ()} ) } diff --git a/web/components/SetBlock.jsx b/web/components/SetBlock.jsx index adbc986..184c3fa 100644 --- a/web/components/SetBlock.jsx +++ b/web/components/SetBlock.jsx @@ -21,9 +21,12 @@ class SetBlock extends React.Component { touchStartX: 0, prevTouchX: 0, beingTouched: false, + beingMoved: false, widthRight: 0, widthLeft: 0, - toggled: false + toggled: false, + descriptionUnsaved: '', + issueUrlUnsaved: '' }; componentDidMount() { @@ -53,7 +56,7 @@ class SetBlock extends React.Component { timeOfLastDragEvent: 0, touchStartX: 0, prevTouchX: 0, - beingTouched: false, + beingTouched: true, widthRight: 110, data: { ...data, @@ -80,7 +83,7 @@ class SetBlock extends React.Component { timeOfLastDragEvent: 0, touchStartX: 0, prevTouchX: 0, - beingTouched: false, + beingTouched: true, widthLeft: 110, data: { ...data, @@ -115,22 +118,26 @@ class SetBlock extends React.Component { this.handleLeftSwipe(); } else if (deltaX > 50) { this.handleRightSwipe(); + } else { + this.setState({ + left: deltaX, + velocity, + timeOfLastDragEvent: currTime, + prevTouchX: touchX, + beingMoved: true + }); } - this.setState({ - left: deltaX, - velocity, - timeOfLastDragEvent: currTime, - prevTouchX: touchX - }); } } handleEnd() { const { velocity } = this.state; this.setState({ + left: 0, velocity: velocity, touchStartX: 0, beingTouched: false, + beingMoved: false }); } @@ -156,7 +163,7 @@ class SetBlock extends React.Component { } handleMouseUp() { - this.handleEnd(); + _.delay(this.handleEnd.bind(this), 500); } handleMouseLeave() { @@ -165,51 +172,52 @@ class SetBlock extends React.Component { handleTap() { const { updateSetBlock } = this.props; - const { data } = this.state; - // If the blockFraction is 0, set in 1, if not set in 0. - const newBlockFraction = data.blockFraction === 0 ? 1 : 0 - updateSetBlock({ ...data, blockFraction: newBlockFraction }); - this.setState({ - data: { - ...data, - blockFraction: newBlockFraction - }, - widthLeft: newBlockFraction * 110, - widthRight: newBlockFraction * 110 - }); + const { data, beingMoved } = this.state; + if (!beingMoved) { + // If the blockFraction is 0, set in 1, if not set in 0. + const newBlockFraction = data.blockFraction === 0 ? 1 : 0 + updateSetBlock({ ...data, blockFraction: newBlockFraction }); + this.setState({ + data: { + ...data, + blockFraction: newBlockFraction + }, + widthLeft: newBlockFraction * 110, + widthRight: newBlockFraction * 110, + beingTouched: false + }); + } } editDialog = () => { - const { toggled, data } = this.state + const { + toggled, data, issueUrlUnsaved, descriptionUnsaved + } = this.state const onToggle = () => { this.setState(prevState => ({ - toggled: !prevState.toggled + toggled: !prevState.toggled, + descriptionUnsaved: prevState.data.description, + issueUrlUnsaved: prevState.data.issueUrl, })); } const onReady = () => { const { updateSetBlock } = this.props - const { data } = this.state - updateSetBlock({ ...data }) + const { data, issueUrlUnsaved, descriptionUnsaved } = this.state + const dataToSave = { ...data, description: descriptionUnsaved, issueUrl: issueUrlUnsaved } + this.setState({ data: { ...dataToSave } }) // Save in the data state, only when press Ready + updateSetBlock({ ...dataToSave }) // Save in the parent component state, only when press Ready onToggle() } const handleDescriptionChange = (event) => { - const { data } = this.state const description = event.target.value this.setState({ - data: { - ...data, - description: description - } + descriptionUnsaved: description }) } const handleIssueChange = (event) => { - const { data } = this.state const issueUrl = event.target.value this.setState({ - data: { - ...data, - issueUrl: issueUrl - } + issueUrlUnsaved: issueUrl }) } @@ -236,12 +244,12 @@ class SetBlock extends React.Component { {'What issues are you going to work on?'} - + {'Issue URL: '} - +