MM-9915 - Transition showPreview away from being mutable state on the… (

mattermost#4651) * MM-9915 - Transition showPreview away from being mutable state on the textbox component * fix variable naming * refactor: create textbox redux flow * fix errors after merge * fix bug on edit channel header page with updatePreview * fix bugs when textbox doesn't reset on channel change and on rhs open/close * move actions triggers to appropriate functions * fix current issues Co-authored-by: mattermod <[email protected]>
koox00 · Mar 31, 2020 · 81d41a1 · 81d41a1
1 parent 9545390
commit 81d41a1
Show file tree

Hide file tree

Showing 19 changed files with 316 additions and 57 deletions.
diff --git a/actions/views/textbox.js b/actions/views/textbox.js
@@ -0,0 +1,31 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+import {ActionTypes} from '../../utils/constants';
+
+export function setShowPreviewOnCreateComment(showPreview) {
+ return {
+ type: ActionTypes.SET_SHOW_PREVIEW_ON_CREATE_COMMENT,
+ showPreview,
+ };
+}
+
+export function setShowPreviewOnCreatePost(showPreview) {
+ return {
+ type: ActionTypes.SET_SHOW_PREVIEW_ON_CREATE_POST,
+ showPreview,
+ };
+}
+
+export function setShowPreviewOnEditChannelHeaderModal(showPreview) {
+ return {
+ type: ActionTypes.SET_SHOW_PREVIEW_ON_EDIT_CHANNEL_HEADER_MODAL,
+ showPreview,
+ };
+}
+
+export function setShowPreviewOnEditPostModal(showPreview) {
+ return {
+ type: ActionTypes.SET_SHOW_PREVIEW_ON_EDIT_POST_MODAL,
+ showPreview,
+ };
+}
diff --git a/components/create_comment/create_comment.jsx b/components/create_comment/create_comment.jsx
@@ -200,6 +200,16 @@ class CreateComment extends React.PureComponent {
  * To determine if the current user can send special channel mentions
  */
  useChannelMentions: PropTypes.bool.isRequired,
+
+ /**
+ * Set show preview for textbox
+ */
+ setShowPreview: PropTypes.func.isRequired,
+
+ /**
+ * Should preview be showed
+ */
+ shouldShowPreview: PropTypes.bool.isRequired,
  }
 
  static getDerivedStateFromProps(props, state) {
@@ -230,13 +240,11 @@ class CreateComment extends React.PureComponent {
  showPostDeletedModal: false,
  showConfirmModal: false,
  showEmojiPicker: false,
- showPreview: false,
  channelTimezoneCount: 0,
  uploadsProgressPercent: {},
  renderScrollbar: false,
  suggestionListStyle: 'top',
  };
-
  this.lastBlurAt = 0;
  this.draftsForPost = {};
  this.doInitialScrollToBottom = false;
@@ -245,6 +253,8 @@ class CreateComment extends React.PureComponent {
  componentDidMount() {
  this.props.clearCommentDraftUploads();
  this.props.onResetHistoryIndex();
+ this.props.setShowPreview(false);
+
  this.focusTextbox();
  document.addEventListener('paste', this.pasteHandler);
  document.addEventListener('keydown', this.focusTextboxIfNecessary);
@@ -274,7 +284,7 @@ class CreateComment extends React.PureComponent {
  }
 
  // Focus on textbox when returned from preview mode
- if (prevState.showPreview && !this.state.showPreview) {
+ if (prevProps.shouldShowPreview && !this.props.shouldShowPreview) {
  this.focusTextbox();
  }
 
@@ -288,8 +298,8 @@ class CreateComment extends React.PureComponent {
  }
  }
 
- updatePreview = (newState) => {
- this.setState({showPreview: newState});
+ setShowPreview = (newPreviewValue) => {
+ this.props.setShowPreview(newPreviewValue);
  }
 
  focusTextboxIfNecessary = (e) => {
@@ -437,7 +447,7 @@ class CreateComment extends React.PureComponent {
 
  handleSubmit = async (e) => {
  e.preventDefault();
- this.updatePreview(false);
+ this.setShowPreview(false);
 
  const {channelMembersCount, enableConfirmNotificationsToChannel, useChannelMentions, isTimezoneEnabled} = this.props;
  const {draft} = this.state;
@@ -556,7 +566,7 @@ class CreateComment extends React.PureComponent {
  this.handleSubmit(e);
  }
 
- this.updatePreview(false);
+ this.setShowPreview(false);
  setTimeout(() => {
  this.focusTextbox();
  });
@@ -620,7 +630,7 @@ class CreateComment extends React.PureComponent {
  Utils.isKeyPressed(e, Constants.KeyCodes.ENTER) &&
  (e.ctrlKey || e.metaKey)
  ) {
- this.updatePreview(false);
+ this.setShowPreview(false);
  this.commentMsgKeyPress(e);
  return;
  }
@@ -933,7 +943,7 @@ class CreateComment extends React.PureComponent {
  }
 
  let fileUpload;
- if (!readOnlyChannel && !this.state.showPreview) {
+ if (!readOnlyChannel && !this.props.shouldShowPreview) {
  fileUpload = (
  <FileUpload
  ref='fileUpload'
@@ -953,7 +963,7 @@ class CreateComment extends React.PureComponent {
  let emojiPicker = null;
  const emojiButtonAriaLabel = formatMessage({id: 'emoji_picker.emojiPicker', defaultMessage: 'Emoji Picker'}).toLowerCase();
 
- if (this.props.enableEmojiPicker && !readOnlyChannel && !this.state.showPreview) {
+ if (this.props.enableEmojiPicker && !readOnlyChannel && !this.props.shouldShowPreview) {
  emojiPicker = (
  <div>
  <EmojiPickerOverlay
@@ -1036,7 +1046,7 @@ class CreateComment extends React.PureComponent {
  ref='textbox'
  disabled={readOnlyChannel}
  characterLimit={this.props.maxPostSize}
- preview={this.state.showPreview}
+ preview={this.props.shouldShowPreview}
  suggestionListStyle={this.state.suggestionListStyle}
  badConnection={this.props.badConnection}
  listenForMentionKeyClick={true}
@@ -1065,8 +1075,8 @@ class CreateComment extends React.PureComponent {
  <div className='col col-auto'>
  <TextboxLinks
  characterLimit={this.props.maxPostSize}
- showPreview={this.state.showPreview}
- updatePreview={this.updatePreview}
+ showPreview={this.props.shouldShowPreview}
+ updatePreview={this.setShowPreview}
  message={readOnlyChannel ? '' : this.state.message}
  isMarkdownPreviewEnabled={this.props.isMarkdownPreviewEnabled}
  />

diff --git a/components/create_comment/create_comment.test.jsx b/components/create_comment/create_comment.test.jsx
@@ -38,6 +38,8 @@ describe('components/CreateComment', () => {
  onMoveHistoryIndexForward: jest.fn(),
  onEditLatestPost: jest.fn(),
  resetCreatePostRequest: jest.fn(),
+ setShowPreview: jest.fn(),
+ shouldShowPreview: false,
  readOnlyChannel: false,
  enableEmojiPicker: true,
  enableGifPicker: true,
@@ -1149,18 +1151,16 @@ describe('components/CreateComment', () => {
  );
  const instance = wrapper.instance();
  instance.focusTextbox = jest.fn();
-
- expect(wrapper.state('showPreview')).toBe(false);
  expect(instance.focusTextbox).not.toBeCalled();
 
- instance.updatePreview(true);
+ instance.setShowPreview(true);
 
- expect(wrapper.state('showPreview')).toBe(true);
+ expect(baseProps.setShowPreview).toHaveBeenCalledWith(true);
  expect(instance.focusTextbox).not.toBeCalled();
 
- instance.updatePreview(false);
-
- expect(wrapper.state('showPreview')).toBe(false);
+ wrapper.setProps({shouldShowPreview: true});
+ expect(instance.focusTextbox).not.toBeCalled();
+ wrapper.setProps({shouldShowPreview: false});
  expect(instance.focusTextbox).toBeCalled();
  });
 });
diff --git a/components/create_comment/index.js b/components/create_comment/index.js
@@ -27,6 +27,8 @@ import {
 } from 'actions/views/create_comment';
 import {emitShortcutReactToLastPostFrom} from 'actions/post_actions';
 import {getPostDraft, getIsRhsExpanded, getSelectedPostFocussedAt} from 'selectors/rhs';
+import {showPreviewOnCreateComment} from 'selectors/views/textbox';
+import {setShowPreviewOnCreateComment} from 'actions/views/textbox';
 
 import CreateComment from './create_comment.jsx';
 
@@ -84,6 +86,7 @@ function makeMapStateToProps() {
  selectedPostFocussedAt: getSelectedPostFocussedAt(state),
  canPost,
  useChannelMentions,
+ shouldShowPreview: showPreviewOnCreateComment(state),
  };
  };
 }
@@ -137,7 +140,8 @@ function makeMapDispatchToProps() {
  onEditLatestPost,
  resetCreatePostRequest,
  getChannelTimezones,
- emitShortcutReactToLastPostFrom
+ emitShortcutReactToLastPostFrom,
+ setShowPreview: setShowPreviewOnCreateComment,
  }, dispatch);
  };
 }

diff --git a/components/create_post/create_post.jsx b/components/create_post/create_post.jsx
@@ -185,8 +185,19 @@ class CreatePost extends React.PureComponent {
  useChannelMentions: PropTypes.bool.isRequired,
 
  intl: intlShape.isRequired,
+
+ /**
+ * Should preview be showed
+ */
+ shouldShowPreview: PropTypes.bool.isRequired,
+
  actions: PropTypes.shape({
 
+ /**
+ * Set show preview for textbox
+ */
+ setShowPreview: PropTypes.func.isRequired,
+
  /**
  * func called after message submit.
  */
@@ -279,7 +290,6 @@ class CreatePost extends React.PureComponent {
  message: props.draft.message,
  submitting: false,
  serverError: null,
- showPreview: false,
  };
  }
  return updatedState;
@@ -295,7 +305,6 @@ class CreatePost extends React.PureComponent {
  showEmojiPicker: false,
  showConfirmModal: false,
  channelTimezoneCount: 0,
- showPreview: false,
  uploadsProgressPercent: {},
  renderScrollbar: false,
  currentChannel: props.currentChannel,
@@ -309,6 +318,7 @@ class CreatePost extends React.PureComponent {
 
  componentDidMount() {
  this.onOrientationChange();
+ this.props.actions.setShowPreview(false);
  this.props.actions.clearDraftUploads(StoragePrefixes.DRAFT, (key, value) => {
  if (value) {
  return {...value, uploadsInProgress: []};
@@ -328,6 +338,10 @@ class CreatePost extends React.PureComponent {
  this.focusTextbox();
  }
 
+ if (this.props.currentChannel.id !== prevProps.currentChannel.id) {
+ this.props.actions.setShowPreview(false);
+ }
+
  // Focus on textbox when emoji picker is closed
  if (prevState.showEmojiPicker && !this.state.showEmojiPicker) {
  this.focusTextbox();
@@ -345,8 +359,8 @@ class CreatePost extends React.PureComponent {
  }
  }
 
- updatePreview = (newState) => {
- this.setState({showPreview: newState});
+ setShowPreview = (newPreviewValue) => {
+ this.props.actions.setShowPreview(newPreviewValue);
  }
 
  setOrientationListeners = () => {
@@ -701,7 +715,7 @@ class CreatePost extends React.PureComponent {
  this.handleSubmit(e);
  }
 
- this.updatePreview(false);
+ this.setShowPreview(false);
  }
 
  this.emitTypingEvent();
@@ -1237,7 +1251,7 @@ class CreatePost extends React.PureComponent {
  }
 
  let fileUpload;
- if (!readOnlyChannel && !this.state.showPreview) {
+ if (!readOnlyChannel && !this.props.shouldShowPreview) {
  fileUpload = (
  <FileUpload
  ref='fileUpload'
@@ -1256,7 +1270,7 @@ class CreatePost extends React.PureComponent {
  let emojiPicker = null;
  const emojiButtonAriaLabel = formatMessage({id: 'emoji_picker.emojiPicker', defaultMessage: 'Emoji Picker'}).toLowerCase();
 
- if (this.props.enableEmojiPicker && !readOnlyChannel && !this.state.showPreview) {
+ if (this.props.enableEmojiPicker && !readOnlyChannel && !this.props.shouldShowPreview) {
  emojiPicker = (
  <div>
  <EmojiPickerOverlay
@@ -1334,7 +1348,7 @@ class CreatePost extends React.PureComponent {
  ref='textbox'
  disabled={readOnlyChannel}
  characterLimit={this.props.maxPostSize}
- preview={this.state.showPreview}
+ preview={this.props.shouldShowPreview}
  badConnection={this.props.badConnection}
  listenForMentionKeyClick={true}
  useChannelMentions={this.props.useChannelMentions}
@@ -1379,8 +1393,8 @@ class CreatePost extends React.PureComponent {
  />
  <TextboxLinks
  characterLimit={this.props.maxPostSize}
- showPreview={this.state.showPreview}
- updatePreview={this.updatePreview}
+ showPreview={this.props.shouldShowPreview}
+ updatePreview={this.setShowPreview}
  message={readOnlyChannel ? '' : this.state.message}
  />
  </div>

diff --git a/components/create_post/create_post.test.jsx b/components/create_post/create_post.test.jsx
@@ -73,6 +73,7 @@ const actionsProp = {
  setDraft: jest.fn(),
  setEditingPost: jest.fn(),
  openModal: jest.fn(),
+ setShowPreview: jest.fn(),
  executeCommand: async () => {
  return {data: true};
  },
@@ -133,6 +134,7 @@ function createPost({
  rhsExpanded={false}
  emojiMap={emojiMap}
  badConnection={false}
+ shouldShowPreview={false}
  isTimezoneEnabled={false}
  canPost={true}
  useChannelMentions={true}
@@ -265,10 +267,6 @@ describe('components/create_post', () => {
  const wrapper = shallowWithIntl(createPost());
  wrapper.instance().refs = {textbox: {getWrappedInstance: () => ({blur: jest.fn()})}};
 
- wrapper.setState({
- showPreview: false,
- });
-
  const postTextbox = wrapper.find('#post_textbox');
  postTextbox.simulate('KeyPress', {key: KeyCodes.ENTER[0], preventDefault: jest.fn(), persist: jest.fn()});
  expect(GlobalActions.emitLocalUserTypingEvent).toHaveBeenCalledWith(currentChannelProp.id, '');

diff --git a/components/create_post/index.js b/components/create_post/index.js
@@ -32,9 +32,11 @@ import {connectionErrorCount} from 'selectors/views/system';
 import {addReaction, createPost, setEditingPost, emitShortcutReactToLastPostFrom} from 'actions/post_actions.jsx';
 import {scrollPostListToBottom} from 'actions/views/channel';
 import {selectPostFromRightHandSideSearchByPostId} from 'actions/views/rhs';
+import {setShowPreviewOnCreatePost} from 'actions/views/textbox';
 import {executeCommand} from 'actions/command';
 import {runMessageWillBePostedHooks, runSlashCommandWillBePostedHooks} from 'actions/hooks';
 import {getPostDraft, getIsRhsExpanded} from 'selectors/rhs';
+import {showPreviewOnCreatePost} from 'selectors/views/textbox';
 import {getCurrentLocale} from 'selectors/i18n';
 import {getEmojiMap, getShortcutReactToLastPostEmittedFrom} from 'selectors/emojis';
 import {setGlobalItem, actionOnGlobalItemsWithPrefix} from 'actions/storage';
@@ -109,6 +111,7 @@ function makeMapStateToProps() {
  shortcutReactToLastPostEmittedFrom,
  canPost,
  useChannelMentions,
+ shouldShowPreview: showPreviewOnCreatePost(state),
  };
  };
 }
@@ -139,6 +142,7 @@ function mapDispatchToProps(dispatch) {
  runMessageWillBePostedHooks,
  runSlashCommandWillBePostedHooks,
  scrollPostListToBottom,
+ setShowPreview: setShowPreviewOnCreatePost,
  }, dispatch),
  };
 }