PLT-3101 Added message history (#3205)

* Added message history

* Minor logical changes

* Fixed indexes resetting

* Fixed double messages

* Fixed resetting main history when RHS opened

1 files changed, 30 insertions, 12 deletions

diff --git a/webapp/components/create_comment.jsx b/webapp/components/create_comment.jsx
index 6cd2054a1..8c80ad993 100644
--- a/webapp/components/create_comment.jsx
+++ b/webapp/components/create_comment.jsx
@@ -11,6 +11,7 @@ import UserStore from 'stores/user_store.jsx';
 import PostDeletedModal from './post_deleted_modal.jsx';
 import PostStore from 'stores/post_store.jsx';
 import PreferenceStore from 'stores/preference_store.jsx';
+import MessageHistoryStore from 'stores/message_history_store.jsx';
 import Textbox from './textbox.jsx';
 import MsgTyping from './msg_typing.jsx';
 import FileUpload from './file_upload.jsx';
@@ -68,11 +69,11 @@ class CreateComment extends React.Component {
         this.hidePostDeletedModal = this.hidePostDeletedModal.bind(this);
 
         PostStore.clearCommentDraftUploads();
+        MessageHistoryStore.resetHistoryIndex('comment');
 
         const draft = PostStore.getCommentDraft(this.props.rootId);
         this.state = {
             messageText: draft.message,
-            lastMessage: '',
             uploadsInProgress: draft.uploadsInProgress,
             previews: draft.previews,
             submitting: false,
@@ -80,18 +81,22 @@ class CreateComment extends React.Component {
             showPostDeletedModal: false
         };
     }
+
     componentDidMount() {
         PreferenceStore.addChangeListener(this.onPreferenceChange);
         this.focusTextbox();
     }
+
     componentWillUnmount() {
         PreferenceStore.removeChangeListener(this.onPreferenceChange);
     }
+
     onPreferenceChange() {
         this.setState({
             ctrlSend: PreferenceStore.getBool(Constants.Preferences.CATEGORY_ADVANCED_SETTINGS, 'send_on_ctrl_enter')
         });
     }
+
     componentDidUpdate(prevProps, prevState) {
         if (prevState.uploadsInProgress < this.state.uploadsInProgress) {
             $('.post-right__scroll').scrollTop($('.post-right__scroll')[0].scrollHeight);
@@ -101,6 +106,7 @@ class CreateComment extends React.Component {
             this.focusTextbox();
         }
     }
+
     handleSubmit(e) {
         e.preventDefault();
 
@@ -125,6 +131,8 @@ class CreateComment extends React.Component {
             return;
         }
 
+        MessageHistoryStore.storeMessageInHistory(this.state.messageText);
+
         const userId = UserStore.getCurrentId();
 
         post.channel_id = this.props.channelId;
@@ -173,13 +181,13 @@ class CreateComment extends React.Component {
 
         this.setState({
             messageText: '',
-            lastMessage: this.state.messageText,
             submitting: false,
             postError: null,
             previews: [],
             serverError: null
         });
     }
+
     commentMsgKeyPress(e) {
         if (this.state.ctrlSend && e.ctrlKey || !this.state.ctrlSend) {
             if (e.which === KeyCodes.ENTER && !e.shiftKey && !e.altKey) {
@@ -191,6 +199,7 @@ class CreateComment extends React.Component {
 
         GlobalActions.emitLocalUserTypingEvent(this.props.channelId, this.props.rootId);
     }
+
     handleUserInput(messageText) {
         const draft = PostStore.getCommentDraft(this.props.rootId);
         draft.message = messageText;
@@ -199,6 +208,7 @@ class CreateComment extends React.Component {
         $('.post-right__scroll').parent().scrollTop($('.post-right__scroll')[0].scrollHeight);
         this.setState({messageText: messageText});
     }
+
     handleKeyDown(e) {
         if (this.state.ctrlSend && e.keyCode === KeyCodes.ENTER && e.ctrlKey === true) {
             this.commentMsgKeyPress(e);
@@ -224,22 +234,21 @@ class CreateComment extends React.Component {
             });
         }
 
-        if ((e.ctrlKey || e.metaKey) && !e.altKey && !e.shiftKey && e.keyCode === KeyCodes.UP) {
-            const lastPost = PostStore.getCurrentUsersLatestPost(this.props.channelId, this.props.rootId);
-            if (!lastPost || this.state.messageText !== '') {
-                return;
-            }
-            e.preventDefault();
-            let message = lastPost.message;
-            if (this.state.lastMessage !== '') {
-                message = this.state.lastMessage;
+        if ((e.ctrlKey || e.metaKey) && !e.altKey && !e.shiftKey && (e.keyCode === Constants.KeyCodes.UP || e.keyCode === Constants.KeyCodes.DOWN)) {
+            const lastMessage = MessageHistoryStore.nextMessageInHistory(e.keyCode, this.state.messageText, 'comment');
+            if (lastMessage !== null) {
+                e.preventDefault();
+                this.setState({
+                    messageText: lastMessage
+                });
             }
-            this.setState({messageText: message});
         }
     }
+
     handleUploadClick() {
         this.focusTextbox();
     }
+
     handleUploadStart(clientIds) {
         const draft = PostStore.getCommentDraft(this.props.rootId);
 
@@ -252,6 +261,7 @@ class CreateComment extends React.Component {
         // but this also resets the focus after a drag and drop
         this.focusTextbox();
     }
+
     handleFileUploadComplete(filenames, clientIds) {
         const draft = PostStore.getCommentDraft(this.props.rootId);
 
@@ -269,6 +279,7 @@ class CreateComment extends React.Component {
 
         this.setState({uploadsInProgress: draft.uploadsInProgress, previews: draft.previews});
     }
+
     handleUploadError(err, clientId) {
         if (clientId === -1) {
             this.setState({serverError: err});
@@ -285,6 +296,7 @@ class CreateComment extends React.Component {
             this.setState({uploadsInProgress: draft.uploadsInProgress, serverError: err});
         }
     }
+
     removePreview(id) {
         const previews = this.state.previews;
         const uploadsInProgress = this.state.uploadsInProgress;
@@ -309,30 +321,36 @@ class CreateComment extends React.Component {
 
         this.setState({previews: previews, uploadsInProgress: uploadsInProgress});
     }
+
     componentWillReceiveProps(newProps) {
         if (newProps.rootId !== this.props.rootId) {
             const draft = PostStore.getCommentDraft(newProps.rootId);
             this.setState({messageText: draft.message, uploadsInProgress: draft.uploadsInProgress, previews: draft.previews});
         }
     }
+
     getFileCount() {
         return this.state.previews.length + this.state.uploadsInProgress.length;
     }
+
     focusTextbox() {
         if (!Utils.isMobile()) {
             this.refs.textbox.focus();
         }
     }
+
     showPostDeletedModal() {
         this.setState({
             showPostDeletedModal: true
         });
     }
+
     hidePostDeletedModal() {
         this.setState({
             showPostDeletedModal: false
         });
     }
+
     render() {
         let serverError = null;
         if (this.state.serverError) {