11import React , { PropTypes } from 'react'
2+ import { withRouter } from 'react-router'
23import _ from 'lodash'
34import {
45 THREAD_MESSAGES_PAGE_SIZE ,
@@ -36,7 +37,16 @@ class FeedView extends React.Component {
3637 this . onNewCommentChange = this . onNewCommentChange . bind ( this )
3738 this . onShowAllComments = this . onShowAllComments . bind ( this )
3839 this . onAddNewComment = this . onAddNewComment . bind ( this )
39- this . state = { feeds : [ ] , showAll : [ ] }
40+ this . onLeave = this . onLeave . bind ( this )
41+ this . isChanged = this . isChanged . bind ( this )
42+ this . onNewPostChange = this . onNewPostChange . bind ( this )
43+ this . state = { feeds : [ ] , showAll : [ ] , newPost : { } }
44+ }
45+
46+ componentDidMount ( ) {
47+ const routeLeaveHook = this . props . router . setRouteLeaveHook ( this . props . route , this . onLeave )
48+ window . addEventListener ( 'beforeunload' , this . onLeave )
49+ this . setState ( { routeLeaveHook } )
4050 }
4151
4252 componentWillMount ( ) {
@@ -47,7 +57,28 @@ class FeedView extends React.Component {
4757 this . init ( nextProps )
4858 }
4959
50- mapFeed ( feed , showAll = false ) {
60+ componentWillUnmount ( ) {
61+ if ( this . state . routeLeaveHook ) {
62+ this . state . routeLeaveHook ( )
63+ }
64+ window . removeEventListener ( 'beforeunload' , this . onLeave )
65+ }
66+
67+ // Notify user if they navigate away while the form is modified.
68+ onLeave ( e ) {
69+ if ( this . isChanged ( ) ) {
70+ return e . returnValue = 'You have uposted content. Are you sure you want to leave?'
71+ }
72+ }
73+
74+ isChanged ( ) {
75+ const { newPost } = this . state
76+ const hasComment = ! _ . isUndefined ( _ . find ( this . state . feeds , ( feed ) => feed . newComment && feed . newComment . length ) )
77+ const hasThread = ( newPost . title && ! ! newPost . title . trim ( ) . length ) || ( newPost . content && ! ! newPost . content . trim ( ) . length )
78+ return hasThread || hasComment
79+ }
80+
81+ mapFeed ( feed , showAll = false , resetNewComment = false ) {
5182 const { allMembers } = this . props
5283 const item = _ . pick ( feed , [ 'id' , 'date' , 'read' , 'tag' , 'title' , 'totalPosts' , 'userId' , 'reference' , 'referenceId' , 'postIds' , 'isAddingComment' , 'isLoadingComments' , 'error' ] )
5384 if ( isSystemUser ( item . userId ) ) {
@@ -72,20 +103,27 @@ class FeedView extends React.Component {
72103 author : isSystemUser ( p . userId ) ? SYSTEM_USER : allMembers [ p . userId ]
73104 }
74105 }
106+ const validPost = ( post ) => {
107+ return post . type === 'post' && ( post . body && post . body . trim ( ) . length || ! isSystemUser ( post . userId ) )
108+ }
75109 if ( showAll ) {
76110 // if we are showing all comments, just iterate through the entire array
77111 _ . forEach ( _ . slice ( feed . posts , 1 ) , p => {
78- p . type === 'post' ? item . comments . push ( _toComment ( p ) ) : item . totalComments --
112+ validPost ( p ) ? item . comments . push ( _toComment ( p ) ) : item . totalComments --
79113 } )
80114 } else {
81115 // otherwise iterate from right and add to the beginning of the array
82116 _ . forEachRight ( _ . slice ( feed . posts , 1 ) , ( p ) => {
83- p . type === 'post' ? item . comments . unshift ( _toComment ( p ) ) : item . totalComments --
117+ validPost ( p ) ? item . comments . unshift ( _toComment ( p ) ) : item . totalComments --
84118 if ( ! feed . showAll && item . comments . length === THREAD_MESSAGES_PAGE_SIZE )
85119 return false
86120 } )
87121 }
88122 item . newComment = ''
123+ if ( ! resetNewComment ) {
124+ const feedFromState = _ . find ( this . state . feeds , f => feed . id === f . id )
125+ item . newComment = feedFromState ? feedFromState . newComment : ''
126+ }
89127 item . hasMoreComments = item . comments . length !== item . totalComments
90128 return item
91129 }
@@ -99,6 +137,12 @@ class FeedView extends React.Component {
99137 } )
100138 }
101139
140+ onNewPostChange ( title , content ) {
141+ this . setState ( {
142+ newPost : { title, content}
143+ } )
144+ }
145+
102146 onNewPost ( { title, content} ) {
103147 const { project } = this . props
104148 const newFeed = {
@@ -194,6 +238,7 @@ class FeedView extends React.Component {
194238 isCreating = { isCreatingFeed }
195239 hasError = { error }
196240 heading = "NEW STATUS POST"
241+ onNewPostChange = { this . onNewPostChange }
197242 titlePlaceholder = "Share the latest project updates with the team"
198243 />
199244 }
@@ -203,7 +248,7 @@ class FeedView extends React.Component {
203248 }
204249}
205250const enhance = spinnerWhileLoading ( props => ! props . isLoading )
206- const EnhancedFeedView = enhance ( FeedView )
251+ const EnhancedFeedView = withRouter ( enhance ( FeedView ) )
207252
208253
209254class FeedContainer extends React . Component {
0 commit comments