diff --git a/src/components/ActionCard/AddComment.jsx b/src/components/ActionCard/AddComment.jsx index 72fbab580..0a02c49d5 100644 --- a/src/components/ActionCard/AddComment.jsx +++ b/src/components/ActionCard/AddComment.jsx @@ -25,7 +25,7 @@ export default class AddComment extends React.Component { } render() { - const { className, avatarUrl, authorName, placeholder, isAdding, hasError, allMembers, projectMembers } = this.props + const { className, avatarUrl, authorName, placeholder, isAdding, hasError, allMembers, projectMembers, defaultContent } = this.props return ( ) } @@ -57,5 +58,9 @@ AddComment.propTypes = { hasError: PropTypes.bool, isAdding: PropTypes.bool, allMembers: PropTypes.object, - projectMembers: PropTypes.object + projectMembers: PropTypes.object, + /** + * Default value for comment content + */ + defaultContent: PropTypes.string, } diff --git a/src/components/Feed/Feed.jsx b/src/components/Feed/Feed.jsx index feeb4e4cd..9eec7834c 100644 --- a/src/components/Feed/Feed.jsx +++ b/src/components/Feed/Feed.jsx @@ -104,7 +104,7 @@ class Feed extends React.Component { allowComments, comments, children, onNewCommentChange, onAddNewComment, isAddingComment, onSaveMessageChange, onEditMessage, onSaveMessage, isSavingTopic, onDeleteMessage, onDeleteTopic, isDeletingTopic, error, allMembers, onEnterFullscreenClick, onExitFullscreenClick, isFullScreen, commentId, projectMembers, commentAnchorPrefix, tag, - inTopicDrawer, onDrawerClose + inTopicDrawer, onDrawerClose, newComment } = this.props const { editTopicMode, headerHeight } = this.state @@ -222,6 +222,7 @@ class Feed extends React.Component { commentId={commentId} error={error} commentAnchorPrefix={commentAnchorPrefix} + newComment={newComment} /> {children} {isDeletingTopic && diff --git a/src/components/Feed/FeedComments.jsx b/src/components/Feed/FeedComments.jsx index 0c16e242c..6cbf2a63d 100644 --- a/src/components/Feed/FeedComments.jsx +++ b/src/components/Feed/FeedComments.jsx @@ -180,7 +180,7 @@ class FeedComments extends React.Component { const { currentUser, onLoadMoreComments, isLoadingComments, hasMoreComments, onAddNewComment, onNewCommentChange, error, avatarUrl, isAddingComment, allowComments, onSaveMessage, onDeleteMessage, allMembers, - totalComments, isFullScreen, headerHeight, projectMembers, commentAnchorPrefix + totalComments, isFullScreen, headerHeight, projectMembers, commentAnchorPrefix, newComment } = this.props let { comments } = this.props comments = _.sortBy(comments, 'createdBy') @@ -383,6 +383,7 @@ class FeedComments extends React.Component { hasError={error} allMembers={allMembers} projectMembers={projectMembers} + defaultContent={newComment} /> } diff --git a/src/projects/detail/containers/FeedContainer.js b/src/projects/detail/containers/FeedContainer.js index 991ab6dd8..4ab05e360 100644 --- a/src/projects/detail/containers/FeedContainer.js +++ b/src/projects/detail/containers/FeedContainer.js @@ -113,7 +113,7 @@ class FeedView extends React.Component { return hasThread || hasComment } - mapFeed(feed, showAll = false, resetNewComment = false, prevProps) { + mapFeed(feed, showAll = false, resetNewComment = false, prevProps, currentProps) { const { allMembers, project, currentMemberRole } = this.props const item = _.pick(feed, ['id', 'date', 'read', 'tag', 'title', 'totalPosts', 'userId', 'reference', 'referenceId', 'postIds', 'isSavingTopic', 'isDeletingTopic', 'isAddingComment', 'isLoadingComments', 'error']) // Github issue##623, allow comments on all posts (including system posts) @@ -189,7 +189,8 @@ class FeedView extends React.Component { item.newComment = '' if (!resetNewComment) { const feedFromState = _.find(this.state.feeds, f => feed.id === f.id) - item.newComment = feedFromState ? feedFromState.newComment : '' + const preservedNewComment =_.find(currentProps && currentProps.preservedNewComments, { feedId: feed.id }) + item.newComment = (feedFromState || preservedNewComment) ? (feedFromState || preservedNewComment).newComment : '' } item.hasMoreComments = item.comments.length !== item.totalComments // adds permalink for the feed @@ -214,7 +215,7 @@ class FeedView extends React.Component { } // reset new comment if we were adding comment and there is no error in doing so const resetNewComment = prevFeed && prevFeed.isAddingComment && !feed.isAddingComment && !feed.error - return this.mapFeed(feed, this.state.showAll.indexOf(feed.id) > -1, resetNewComment, prevProps) + return this.mapFeed(feed, this.state.showAll.indexOf(feed.id) > -1, resetNewComment, prevProps, props) }).filter(item => item) }) } @@ -247,6 +248,8 @@ class FeedView extends React.Component { return item }) }) + // also save new comment to a place where we can keep it even during feed reloading + this.props.updatePreservedNewComment(feedId, content) } onShowAllComments(feedId) { @@ -489,6 +492,32 @@ const EnhancedFeedView = enhance(FeedView) class FeedContainer extends React.Component { constructor(props) { super(props) + + this.state = { + // as we loose `newComment` in the state inside `EnhancedFeedView` we have to keep it here + // so we can restore the currently edited new comment, in case the feed has been reloaded + preservedNewComments: [] + } + + this.updatePreservedNewComment = this.updatePreservedNewComment.bind(this) + } + + updatePreservedNewComment (feedId, newComment) { + const feedIndex = _.findIndex(this.state.preservedNewComments, { feedId }) + + if (feedIndex !== -1) { + this.setState({ + preservedNewComments: [ + ...this.state.preservedNewComments.slice(0, feedIndex), + { feedId, newComment }, + ...this.state.preservedNewComments.slice(feedIndex + 1), + ] + }) + } else { + this.setState({ + preservedNewComments: [...this.state.preservedNewComments, { feedId, newComment }] + }) + } } componentWillMount() { @@ -502,11 +531,14 @@ class FeedContainer extends React.Component { } render() { + console.log('preservedNewComments', this.state.preservedNewComments) // Load only specified topics if topics input is available. Otherwise, load all feeds const {feeds, topics} = this.props const props = { ...this.props, - feeds: topics ? feeds.filter(f => _.includes(topics, f.id)) : feeds + feeds: topics ? feeds.filter(f => _.includes(topics, f.id)) : feeds, + preservedNewComments: this.state.preservedNewComments, + updatePreservedNewComment: this.updatePreservedNewComment, } return }