PLT-6282 Make post list stay visible when post textbox height changes (#6323)

* PLT-6282 Changed post drafts to use an action when being stored

* PLT-6282 Triggered post list to update scroll position when post draft changes

* PLT-6282 Changed SuggestionBox to complete suggestions without an event

webapp/components/create_post.jsx

@@ -71,10 +71,11 @@ export default class CreatePost extends React.Component {
 
         PostStore.clearDraftUploads();
 
-        const draft = PostStore.getCurrentDraft();
+        const channelId = ChannelStore.getCurrentId();
+        const draft = PostStore.getPostDraft(channelId);
 
         this.state = {
-            channelId: ChannelStore.getCurrentId(),
+            channelId,
             message: draft.message,
             uploadsInProgress: draft.uploadsInProgress,
             fileInfos: draft.fileInfos,
@@ -136,7 +137,7 @@ export default class CreatePost extends React.Component {
 
         const isReaction = REACTION_PATTERN.exec(post.message);
         if (post.message.indexOf('/') === 0) {
-            PostStore.storeDraft(this.state.channelId, null);
+            PostActions.storePostDraft(this.state.channelId, null);
             this.setState({message: '', postError: null, fileInfos: [], enableSendButton: false});
 
             const args = {};
@@ -241,7 +242,7 @@ export default class CreatePost extends React.Component {
             PostActions.removeReaction(this.state.channelId, postId, emojiName);
         }
 
-        PostStore.storeCurrentDraft(null);
+        PostActions.storePostDraft(this.state.channelId, null);
     }
 
     focusTextbox(keepFocus = false) {
@@ -271,9 +272,9 @@ export default class CreatePost extends React.Component {
             enableSendButton
         });
 
-        const draft = PostStore.getCurrentDraft();
+        const draft = PostStore.getPostDraft(this.state.channelId);
         draft.message = message;
-        PostStore.storeCurrentDraft(draft);
+        PostActions.storePostDraft(this.state.channelId, draft);
     }
 
     handleFileUploadChange() {
@@ -281,10 +282,10 @@ export default class CreatePost extends React.Component {
     }
 
     handleUploadStart(clientIds, channelId) {
-        const draft = PostStore.getDraft(channelId);
+        const draft = PostStore.getPostDraft(channelId);
 
         draft.uploadsInProgress = draft.uploadsInProgress.concat(clientIds);
-        PostStore.storeDraft(channelId, draft);
+        PostActions.storePostDraft(channelId, draft);
 
         this.setState({uploadsInProgress: draft.uploadsInProgress});
 
@@ -294,7 +295,7 @@ export default class CreatePost extends React.Component {
     }
 
     handleFileUploadComplete(fileInfos, clientIds, channelId) {
-        const draft = PostStore.getDraft(channelId);
+        const draft = PostStore.getPostDraft(channelId);
 
         // remove each finished file from uploads
         for (let i = 0; i < clientIds.length; i++) {
@@ -306,7 +307,7 @@ export default class CreatePost extends React.Component {
         }
 
         draft.fileInfos = draft.fileInfos.concat(fileInfos);
-        PostStore.storeDraft(channelId, draft);
+        PostActions.storePostDraft(channelId, draft);
 
         if (channelId === this.state.channelId) {
             this.setState({
@@ -325,14 +326,14 @@ export default class CreatePost extends React.Component {
         }
 
         if (clientId !== -1) {
-            const draft = PostStore.getDraft(channelId);
+            const draft = PostStore.getPostDraft(channelId);
 
             const index = draft.uploadsInProgress.indexOf(clientId);
             if (index !== -1) {
                 draft.uploadsInProgress.splice(index, 1);
             }
 
-            PostStore.storeDraft(channelId, draft);
+            PostActions.storePostDraft(channelId, draft);
 
             if (channelId === this.state.channelId) {
                 this.setState({uploadsInProgress: draft.uploadsInProgress});
@@ -362,10 +363,10 @@ export default class CreatePost extends React.Component {
             fileInfos.splice(index, 1);
         }
 
-        const draft = PostStore.getCurrentDraft();
+        const draft = PostStore.getPostDraft(this.state.channelId);
         draft.fileInfos = fileInfos;
         draft.uploadsInProgress = uploadsInProgress;
-        PostStore.storeCurrentDraft(draft);
+        PostActions.storePostDraft(this.state.channelId, draft);
         const enableSendButton = this.handleEnableSendButton(this.state.message, fileInfos);
 
         this.setState({fileInfos, uploadsInProgress, enableSendButton});
@@ -432,7 +433,7 @@ export default class CreatePost extends React.Component {
     onChange() {
         const channelId = ChannelStore.getCurrentId();
         if (this.state.channelId !== channelId) {
-            const draft = PostStore.getCurrentDraft();
+            const draft = PostStore.getPostDraft(channelId);
 
             this.setState({channelId, message: draft.message, submitting: false, serverError: null, postError: null, fileInfos: draft.fileInfos, uploadsInProgress: draft.uploadsInProgress});
         }
@@ -453,7 +454,7 @@ export default class CreatePost extends React.Component {
             return this.state.fileInfos.length + this.state.uploadsInProgress.length;
         }
 
-        const draft = PostStore.getDraft(channelId);
+        const draft = PostStore.getPostDraft(channelId);
         return draft.fileInfos.length + draft.uploadsInProgress.length;
     }
 

webapp/components/post_view/components/post_list.jsx

@@ -21,6 +21,7 @@ import * as ChannelActions from 'actions/channel_actions.jsx';
 import Constants from 'utils/constants.jsx';
 const ScrollTypes = Constants.ScrollTypes;
 
+import PostStore from 'stores/post_store.jsx';
 import PreferenceStore from 'stores/preference_store.jsx';
 
 import {FormattedDate, FormattedMessage} from 'react-intl';
@@ -96,6 +97,11 @@ export default class PostList extends React.Component {
             }, 0);
         }
         this.setState({unViewedCount});
+
+        if (this.props.channelId !== nextProps.channelId) {
+            PostStore.removePostDraftChangeListener(this.props.channelId, this.handlePostDraftChange);
+            PostStore.addPostDraftChangeListener(nextProps.channelId, this.handlePostDraftChange);
+        }
     }
 
     handleKeyDown(e) {
@@ -527,6 +533,16 @@ export default class PostList extends React.Component {
 
         window.addEventListener('resize', this.handleResize);
         window.addEventListener('keydown', this.handleKeyDown);
+
+        PostStore.addPostDraftChangeListener(this.props.channelId, this.handlePostDraftChange);
+    }
+
+    handlePostDraftChange = (draft) => {
+        // this.state.draft isn't used anywhere, but this will cause an update to the scroll position
+        // without causing two updates to trigger when something else changes
+        this.setState({
+            draft
+        });
     }
 
     componentWillUnmount() {
@@ -534,6 +550,8 @@ export default class PostList extends React.Component {
         window.removeEventListener('resize', this.handleResize);
         window.removeEventListener('keydown', this.handleKeyDown);
         this.scrollStopAction.cancel();
+
+        PostStore.removePostDraftChangeListener(this.handlePostDraftChange);
     }
 
     componentDidUpdate() {
@@ -545,13 +563,6 @@ export default class PostList extends React.Component {
     }
 
     render() {
-        if (this.props.postList == null) {
-            return <div/>;
-        }
-
-        const posts = this.props.postList.posts;
-        const order = this.props.postList.order;
-
         // Create intro message or top loadmore link
         let moreMessagesTop;
         if (this.props.showMoreMessagesTop) {
@@ -588,11 +599,17 @@ export default class PostList extends React.Component {
         }
 
         // Create post elements
-        const postElements = this.createPosts(posts, order);
-
+        let postElements = null;
         let topPostCreateAt = 0;
-        if (this.state.topPostId && this.props.postList.posts[this.state.topPostId]) {
-            topPostCreateAt = this.props.postList.posts[this.state.topPostId].create_at;
+        if (this.props.postList) {
+            const posts = this.props.postList.posts;
+            const order = this.props.postList.order;
+
+            postElements = this.createPosts(posts, order);
+
+            if (this.state.topPostId && this.props.postList.posts[this.state.topPostId]) {
+                topPostCreateAt = this.props.postList.posts[this.state.topPostId].create_at;
+            }
         }
 
         return (
@@ -642,6 +659,7 @@ PostList.propTypes = {
     postList: PropTypes.object,
     profiles: PropTypes.object,
     channel: PropTypes.object,
+    channelId: PropTypes.string.isRequired,
     currentUser: PropTypes.object,
     scrollPostId: PropTypes.string,
     scrollType: PropTypes.number,

webapp/components/post_view/post_view_controller.jsx

@@ -363,6 +363,7 @@ export default class PostViewController extends React.Component {
                 <PostList
                     postList={this.state.postList}
                     profiles={this.state.profiles}
+                    channelId={this.state.channel.id}
                     channel={this.state.channel}
                     currentUser={this.state.currentUser}
                     showMoreMessagesTop={!this.state.atTop}

webapp/components/suggestion/suggestion_box.jsx

@@ -37,12 +37,10 @@ export default class SuggestionBox extends React.Component {
     }
 
     componentDidMount() {
-        SuggestionStore.addCompleteWordListener(this.suggestionId, this.handleCompleteWord);
         SuggestionStore.addPretextChangedListener(this.suggestionId, this.handlePretextChanged);
     }
 
     componentWillUnmount() {
-        SuggestionStore.removeCompleteWordListener(this.suggestionId, this.handleCompleteWord);
         SuggestionStore.removePretextChangedListener(this.suggestionId, this.handlePretextChanged);
 
         SuggestionStore.unregisterSuggestionBox(this.suggestionId);
@@ -161,6 +159,8 @@ export default class SuggestionBox extends React.Component {
                 provider.handleCompleteWord(term, matchedPretext);
             }
         }
+
+        GlobalActions.emitCompleteWordSuggestion(this.suggestionId);
     }
 
     handleKeyDown(e) {
@@ -172,7 +172,7 @@ export default class SuggestionBox extends React.Component {
                 GlobalActions.emitSelectNextSuggestion(this.suggestionId);
                 e.preventDefault();
             } else if (e.which === KeyCodes.ENTER || e.which === KeyCodes.TAB) {
-                GlobalActions.emitCompleteWordSuggestion(this.suggestionId);
+                this.handleCompleteWord(SuggestionStore.getSelection(this.suggestionId), SuggestionStore.getSelectedMatchedPretext(this.suggestionId));
                 this.props.onKeyDown(e);
                 e.preventDefault();
             } else if (e.which === KeyCodes.ESCAPE) {
@@ -212,6 +212,7 @@ export default class SuggestionBox extends React.Component {
 
         // Don't pass props used by SuggestionBox
         Reflect.deleteProperty(props, 'providers');
+        Reflect.deleteProperty(props, 'onChange'); // We use onInput instead of onChange on the actual input
         Reflect.deleteProperty(props, 'onItemSelected');
 
         const childProps = {
@@ -260,6 +261,7 @@ export default class SuggestionBox extends React.Component {
                     suggestionId={this.suggestionId}
                     location={listStyle}
                     renderDividers={renderDividers}
+                    onCompleteWord={this.handleCompleteWord}
                 />
             </div>
         );

webapp/components/suggestion/suggestion_list.jsx

@@ -2,20 +2,19 @@
 // See License.txt for license information.
 
 import $ from 'jquery';
+import PropTypes from 'prop-types';
+import React from 'react';
 import ReactDOM from 'react-dom';
-import * as GlobalActions from 'actions/global_actions.jsx';
-import SuggestionStore from 'stores/suggestion_store.jsx';
 import {FormattedMessage} from 'react-intl';
 
-import PropTypes from 'prop-types';
-
-import React from 'react';
+import SuggestionStore from 'stores/suggestion_store.jsx';
 
 export default class SuggestionList extends React.Component {
     static propTypes = {
         suggestionId: PropTypes.string.isRequired,
         location: PropTypes.string,
-        renderDividers: PropTypes.bool
+        renderDividers: PropTypes.bool,
+        onCompleteWord: PropTypes.func.isRequired
     };
 
     static defaultProps = {
@@ -29,7 +28,6 @@ export default class SuggestionList extends React.Component {
 
         this.getContent = this.getContent.bind(this);
 
-        this.handleItemClick = this.handleItemClick.bind(this);
         this.handleSuggestionsChanged = this.handleSuggestionsChanged.bind(this);
 
         this.scrollToItem = this.scrollToItem.bind(this);
@@ -67,10 +65,6 @@ export default class SuggestionList extends React.Component {
         return $(ReactDOM.findDOMNode(this.refs.content));
     }
 
-    handleItemClick(term, matchedPretext) {
-        GlobalActions.emitCompleteWordSuggestion(this.props.suggestionId, term, matchedPretext);
-    }
-
     handleSuggestionsChanged() {
         this.setState(this.getStateFromStores());
     }
@@ -145,7 +139,7 @@ export default class SuggestionList extends React.Component {
                     term={term}
                     matchedPretext={this.state.matchedPretext[i]}
                     isSelection={isSelection}
-                    onClick={this.handleItemClick}
+                    onClick={this.props.onCompleteWord}
                 />
             );
         }