Close Issue setlife-network#9

 Now it can be accessed from devices on the network. - WebPack Config
 When commit a change, the schedulePage change to the readOnly mode
 Now description and issueUrl is saved only if you press "Ready"

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
     },

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 {
                 </Text>
 
                 <Flex row center>
-                    <Text
-                        weight='600'
-                        aling='center'
-                        size='10px'
-                        whiteSpace='pre'
-                        mx='0.5rem'
-                    >
-                        {' Commit ' + this.countBlockFractions() + ' SetBlocks \n '
+                    {enableSubmit
+                    && (
+                        <Text
+                            weight='600'
+                            aling='center'
+                            size='10px'
+                            whiteSpace='pre'
+                            mx='0.5rem'
+                        >
+                            {' Commit ' + this.countBlockFractions() + ' SetBlocks \n '
                         + 'for ' + moment(selectedDay).format('dddd, MMM Do') + '?'}
-                    </Text>
+                        </Text>
+                    )}
                     <Card
                         bg={enableSubmit ? '#F5F5F6' : 'overlay'}
                         minWidth='20%'
@@ -129,7 +133,8 @@ const mapStateToProps = ({ environment }) => {
 const mapDispatchToProps = (dispatch) => {
     return {
         createSetBlock: (params) => dispatch(createSetBlock(params)),
-        updateSetBlock: (params) => dispatch(updateSetBlock(params))
+        updateSetBlock: (params) => dispatch(updateSetBlock(params)),
+        setEditModeSchedule: (editMode) => dispatch(setEditModeSchedule(editMode))
     };
 };
 

web/components/SchedulePage.jsx

@@ -162,7 +162,7 @@ class SchedulePage extends React.Component {
                         {' Schedule\'s Page'}
                     </Text>
                     {this.renderSetBlocks(selectedDay)}
-                    {editModeSchedule && (<CommitBlock enableSubmit={enableSubmit}></CommitBlock>)}
+                    {editModeSchedule && (<CommitBlock enableSubmit={enableSubmit} />)}
                 </Flex>
             )
         }

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 {
                             <Text mb='0'>
                                 {'What issues are you going to work on?'}
                             </Text>
-                            <Input textArea value={data.description} onChange={handleDescriptionChange} />
+                            <Input textArea value={descriptionUnsaved || ''} onChange={handleDescriptionChange} />
 
                             <Text mb='0'>
                                 {'Issue URL: '}
                             </Text>
-                            <Input textArea={false} value={data.issueUrl} onChange={handleIssueChange} />
+                            <Input textArea={false} value={issueUrlUnsaved || ''} onChange={handleIssueChange} />
 
                             <Card
                                 bg='backgroundSecondary'