Github #166, Messaging: unposted content alert

-- Implemented the required behaviour with Dashboard page.
-- Tried to handle the warning of multiple leave hooks for the same route, however, the solution didn't work. Moving ahead as right now it is a warning and not causing any problem. May be we can launch a challenge to get it fixed.

Author: Vikas Agarwal

src/components/Feed/NewPost.jsx

@@ -128,7 +128,8 @@ class NewPost extends React.Component {
     this.setState({editorState})
     this.validateSubmitState()
     if (this.props.onNewPostChange) {
-      this.props.onNewPostChange(this.refs.title.value, stateToMarkdown(editorState.getCurrentContent()))
+      // NOTE: uses getPlainText method to avoid newline character for empty content
+      this.props.onNewPostChange(this.refs.title.value, editorState.getCurrentContent().getPlainText())
     }
   }
 
@@ -143,7 +144,8 @@ class NewPost extends React.Component {
     const { editorState } = this.state
     this.validateSubmitState()
     if (this.props.onNewPostChange) {
-      this.props.onNewPostChange(this.refs.title.value, stateToMarkdown(editorState.getCurrentContent()))
+      // NOTE: uses getPlainText method to avoid newline character for empty content
+      this.props.onNewPostChange(this.refs.title.value, editorState.getCurrentContent().getPlainText())
     }
   }
 

src/projects/detail/Dashboard.jsx

@@ -5,7 +5,7 @@ import Sticky from 'react-stickynode'
 
 require('./Dashboard.scss')
 
-const Dashboard = ({project, currentMemberRole}) => (
+const Dashboard = ({project, currentMemberRole, route}) => (
   <div>
     <div className="dashboard-container">
       <div className="left-area">
@@ -16,7 +16,7 @@ const Dashboard = ({project, currentMemberRole}) => (
         </Sticky>
       </div>
       <div className="right-area">
-        <FeedContainer currentMemberRole={currentMemberRole} project={project} />
+        <FeedContainer currentMemberRole={currentMemberRole} project={project} route={route} />
       </div>
     </div>
   </div>

src/projects/detail/containers/FeedContainer.js

@@ -1,4 +1,5 @@
 import React, { PropTypes } from 'react'
+import { withRouter } from 'react-router'
 import _ from 'lodash'
 import {
   THREAD_MESSAGES_PAGE_SIZE,
@@ -36,7 +37,16 @@ class FeedView extends React.Component {
     this.onNewCommentChange = this.onNewCommentChange.bind(this)
     this.onShowAllComments = this.onShowAllComments.bind(this)
     this.onAddNewComment = this.onAddNewComment.bind(this)
-    this.state = { feeds : [], showAll: [] }
+    this.onLeave = this.onLeave.bind(this)
+    this.isChanged = this.isChanged.bind(this)
+    this.onNewPostChange = this.onNewPostChange.bind(this)
+    this.state = { feeds : [], showAll: [], newPost: {} }
+  }
+
+  componentDidMount() {
+    const routeLeaveHook = this.props.router.setRouteLeaveHook(this.props.route, this.onLeave)
+    window.addEventListener('beforeunload', this.onLeave)
+    this.setState({ routeLeaveHook })
   }
 
   componentWillMount() {
@@ -47,6 +57,27 @@ class FeedView extends React.Component {
     this.init(nextProps)
   }
 
+  componentWillUnmount() {
+    if (this.state.routeLeaveHook) {
+      this.state.routeLeaveHook()
+    }
+    window.removeEventListener('beforeunload', this.onLeave)
+  }
+
+  // Notify user if they navigate away while the form is modified.
+  onLeave(e) {
+    if (this.isChanged()) {
+      return e.returnValue = 'You have uposted content. Are you sure you want to leave?'
+    }
+  }
+
+  isChanged() {
+    const { newPost } = this.state
+    const hasComment = !_.isUndefined(_.find(this.state.feeds, (feed) => feed.newComment && feed.newComment.length))
+    const hasThread = (newPost.title && !!newPost.title.trim().length) || ( newPost.content && !!newPost.content.trim().length)
+    return hasThread || hasComment
+  }
+
   mapFeed(feed, showAll = false) {
     const { allMembers } = this.props
     const item = _.pick(feed, ['id', 'date', 'read', 'tag', 'title', 'totalPosts', 'userId', 'reference', 'referenceId', 'postIds', 'isAddingComment', 'isLoadingComments', 'error'])
@@ -99,6 +130,12 @@ class FeedView extends React.Component {
     })
   }
 
+  onNewPostChange(title, content) {
+    this.setState({
+      newPost: {title, content}
+    })
+  }
+
   onNewPost({title, content}) {
     const { project } = this.props
     const newFeed = {
@@ -194,6 +231,7 @@ class FeedView extends React.Component {
             isCreating={ isCreatingFeed }
             hasError={ error }
             heading="NEW STATUS POST"
+            onNewPostChange={this.onNewPostChange}
             titlePlaceholder="Share the latest project updates with the team"
           />
         }
@@ -203,7 +241,7 @@ class FeedView extends React.Component {
   }
 }
 const enhance = spinnerWhileLoading(props => !props.isLoading)
-const EnhancedFeedView = enhance(FeedView)
+const EnhancedFeedView = withRouter(enhance(FeedView))
 
 
 class FeedContainer extends React.Component {

src/projects/detail/containers/MessagesContainer.js

@@ -47,11 +47,14 @@ class MessagesView extends React.Component {
     this.isChanged = this.isChanged.bind(this)
     this.onNewPostChange = this.onNewPostChange.bind(this)
     this.changeThread = this.changeThread.bind(this)
+    this.onNewThreadClick = this.onNewThreadClick.bind(this)
+    this.showNewThreadForm = this.showNewThreadForm.bind(this)
   }
 
   componentDidMount() {
-    this.props.router.setRouteLeaveHook(this.props.route, this.onLeave)
+    const routeLeaveHook = this.props.router.setRouteLeaveHook(this.props.route, this.onLeave)
     window.addEventListener('beforeunload', this.onLeave)
+    this.setState({ routeLeaveHook })
   }
 
   componentWillMount() {
@@ -64,6 +67,9 @@ class MessagesView extends React.Component {
 
   componentWillUnmount() {
     window.removeEventListener('beforeunload', this.onLeave)
+    if (this.state.routeLeaveHook) {
+      this.state.routeLeaveHook()
+    }
   }
 
   // Notify user if they navigate away while the form is modified.
@@ -208,6 +214,30 @@ class MessagesView extends React.Component {
     })
   }
 
+  onNewThreadClick() {
+    const unsavedContentMsg = this.onLeave({})
+    if (unsavedContentMsg) {
+      const changeConfirmed = confirm(unsavedContentMsg)
+      if (changeConfirmed) {
+        this.showNewThreadForm()
+      }
+    } else {
+      this.showNewThreadForm()
+    }
+  }
+
+  showNewThreadForm() {
+    this.setState({
+      isCreateNewMessage: true,
+      threads: this.state.threads.map((item) => {
+        if (item.isActive) {
+          return {...item, newMessage: ''}
+        }
+        return item
+      })
+    })
+  }
+
   onNewMessageChange(content) {
     this.setState({
       threads: this.state.threads.map((item) => {
@@ -281,7 +311,7 @@ class MessagesView extends React.Component {
         <div className="messages-container">
             <div className="left-area">
               <MessageList
-                onAdd={() => this.setState({isCreateNewMessage: true})}
+                onAdd={ this.onNewThreadClick }
                 threads={threads}
                 onSelect={this.onThreadSelect}
                 showAddButton={ !!currentMemberRole }