Github #166, Messaging: unposted content alert

-- Implemented the required behaviour with Discussions page. Took liberty to implement the same behaviour when user has unposted content and tries to change the thread from the left panel of thread list.

Author: Vikas Agarwal

src/components/Feed/NewPost.jsx

@@ -41,12 +41,13 @@ class NewPost extends React.Component {
   constructor(props) {
     super(props)
     this.state = {editorState: EditorState.createEmpty(), expandedEditor: false, canSubmit: false}
+    this.onTitleChange = this.onTitleChange.bind(this)
     this.onEditorChange = this.onEditorChange.bind(this)
     this.handleKeyCommand = this.handleKeyCommand.bind(this)
     this.toggleBlockType = this.toggleBlockType.bind(this)
     this.toggleInlineStyle = this.toggleInlineStyle.bind(this)
     this.onClickOutside = this.onClickOutside.bind(this)
-    this.onNewPostChange = this.onNewPostChange.bind(this)
+    this.validateSubmitState = this.validateSubmitState.bind(this)
   }
 
   componentDidMount() {
@@ -59,11 +60,11 @@ class NewPost extends React.Component {
   }
 
   componentWillReceiveProps(nextProps) {
-    if (!(nextProps.isCreating || nextProps.hasError && !nextProps.isCreating)) {
+    if (nextProps.isCreating !== this.props.isCreating && !nextProps.isCreating && !nextProps.hasError) {
       this.setState({editorState: EditorState.createEmpty()})
       this.refs.title.value = ''
     }
-    this.onNewPostChange()
+    this.validateSubmitState()
   }
 
   onClickOutside(evt) {
@@ -125,15 +126,27 @@ class NewPost extends React.Component {
 
   onEditorChange(editorState) {
     this.setState({editorState})
-    this.onNewPostChange()
+    this.validateSubmitState()
+    if (this.props.onNewPostChange) {
+      this.props.onNewPostChange(this.refs.title.value, stateToMarkdown(editorState.getCurrentContent()))
+    }
   }
 
-  onNewPostChange() {
+  validateSubmitState() {
+    const { editorState } = this.state
     this.setState({
-      canSubmit: this.refs.title && !!this.refs.title.value.trim().length && this.state.editorState.getCurrentContent().hasText()
+      canSubmit: this.refs.title && !!this.refs.title.value.trim().length && editorState.getCurrentContent().hasText()
     })
   }
 
+  onTitleChange() {
+    const { editorState } = this.state
+    this.validateSubmitState()
+    if (this.props.onNewPostChange) {
+      this.props.onNewPostChange(this.refs.title.value, stateToMarkdown(editorState.getCurrentContent()))
+    }
+  }
+
   render() {
     const {currentUser, titlePlaceholder, isCreating} = this.props
     const {editorState, canSubmit} = this.state
@@ -191,7 +204,7 @@ class NewPost extends React.Component {
               ref="title"
               className="new-post-title"
               type="text"
-              onChange={this.onNewPostChange}
+              onChange={this.onTitleChange}
               placeholder={ titlePlaceholder || 'Title of the post'}
             />
             <div className="draftjs-editor tc-textarea">

src/projects/detail/Messages.jsx

@@ -4,7 +4,12 @@ import MessagesContainer from './containers/MessagesContainer'
 
 require('./Messages.scss')
 
-const Messages = ({ location, project, currentMemberRole }) => (
-  <MessagesContainer location={ location } project={ project } currentMemberRole={ currentMemberRole } />
+const Messages = ({ location, project, currentMemberRole, route }) => (
+  <MessagesContainer
+    location={ location }
+    project={ project }
+    currentMemberRole={ currentMemberRole }
+    route={ route }
+  />
 )
 export default Messages

src/projects/detail/containers/MessagesContainer.js

@@ -1,5 +1,6 @@
 import _ from 'lodash'
 import React from 'react'
+import { withRouter } from 'react-router'
 import { connect } from 'react-redux'
 import update from 'react-addons-update'
 import MessageList from '../../../components/MessageList/MessageList'
@@ -30,12 +31,27 @@ class MessagesView extends React.Component {
 
   constructor(props) {
     super(props)
-    this.state = { threads : [], activeThreadId : null, showEmptyState : true, showAll: []}
+    this.state = {
+      threads : [],
+      activeThreadId : null,
+      showEmptyState : true,
+      showAll: [],
+      newPost: {}
+    }
     this.onThreadSelect = this.onThreadSelect.bind(this)
     this.onShowAllComments = this.onShowAllComments.bind(this)
     this.onAddNewMessage = this.onAddNewMessage.bind(this)
     this.onNewMessageChange = this.onNewMessageChange.bind(this)
     this.onNewThread = this.onNewThread.bind(this)
+    this.onLeave = this.onLeave.bind(this)
+    this.isChanged = this.isChanged.bind(this)
+    this.onNewPostChange = this.onNewPostChange.bind(this)
+    this.changeThread = this.changeThread.bind(this)
+  }
+
+  componentDidMount() {
+    this.props.router.setRouteLeaveHook(this.props.route, this.onLeave)
+    window.addEventListener('beforeunload', this.onLeave)
   }
 
   componentWillMount() {
@@ -46,6 +62,24 @@ class MessagesView extends React.Component {
     this.init(nextProps)
   }
 
+  componentWillUnmount() {
+    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 hasMessage = !_.isUndefined(_.find(this.state.threads, (thread) => thread.newMessage && thread.newMessage.length))
+    const hasThread = (newPost.title && !!newPost.title.trim().length) || ( newPost.content && !!newPost.content.trim().length)
+    return hasThread || hasMessage
+  }
+
   mapFeed(feed, isActive, showAll = false) {
     const { allMembers } = this.props
     const item = _.pick(feed, ['id', 'date', 'read', 'tag', 'title', 'totalPosts', 'userId', 'reference', 'referenceId', 'postIds', 'isAddingComment', 'isLoadingComments', 'error'])
@@ -137,15 +171,28 @@ class MessagesView extends React.Component {
   }
 
   onThreadSelect(thread) {
+    const unsavedContentMsg = this.onLeave({})
+    if (unsavedContentMsg) {
+      const changeConfirmed = confirm(unsavedContentMsg)
+      if (changeConfirmed) {
+        this.changeThread(thread)
+      }
+    } else {
+      this.changeThread(thread)
+    }
+  }
+
+  changeThread(thread) {
     this.setState({
       isCreateNewMessage: false,
+      newPost: {},
       activeThreadId: thread.id,
       threads: this.state.threads.map((item) => {
         if (item.isActive) {
           if (item.id === thread.id) {
             return item
           }
-          return {...item, isActive: false, messages: item.messages.map((msg) => ({...msg, unread: false}))}
+          return {...item, isActive: false, newMessage: '', messages: item.messages.map((msg) => ({...msg, unread: false}))}
         }
         if (item.id === thread.id) {
           return {...item, isActive: true, unreadCount: 0}
@@ -155,6 +202,12 @@ class MessagesView extends React.Component {
     })
   }
 
+  onNewPostChange(title, content) {
+    this.setState({
+      newPost: {title, content}
+    })
+  }
+
   onNewMessageChange(content) {
     this.setState({
       threads: this.state.threads.map((item) => {
@@ -200,6 +253,7 @@ class MessagesView extends React.Component {
           <NewPost
             currentUser={currentUser}
             onPost={this.onNewThread}
+            onNewPostChange={ this.onNewPostChange }
             isCreating={isCreatingFeed}
             hasError={error}
             heading="New Discussion Post"
@@ -251,7 +305,7 @@ class MessagesView extends React.Component {
 }
 
 const enhance = spinnerWhileLoading(props => !props.isLoading)
-const EnhancedMessagesView = enhance(MessagesView)
+const EnhancedMessagesView = withRouter(enhance(MessagesView))
 
 class MessagesContainer extends React.Component {
   constructor(props) {