From 69f3f2fdce4ae21a037ca61d753279efcc70f0ec Mon Sep 17 00:00:00 2001 From: Harrison Healey Date: Tue, 23 May 2017 10:17:06 -0400 Subject: 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 | 33 +++++++++--------- .../components/post_view/components/post_list.jsx | 40 ++++++++++++++++------ .../components/post_view/post_view_controller.jsx | 1 + webapp/components/suggestion/suggestion_box.jsx | 8 +++-- webapp/components/suggestion/suggestion_list.jsx | 18 ++++------ 5 files changed, 58 insertions(+), 42 deletions(-) (limited to 'webapp/components') diff --git a/webapp/components/create_post.jsx b/webapp/components/create_post.jsx index 6e59b88b1..59c12e059 100644 --- a/webapp/components/create_post.jsx +++ b/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; } diff --git a/webapp/components/post_view/components/post_list.jsx b/webapp/components/post_view/components/post_list.jsx index 0d1244c55..f79cbec19 100644 --- a/webapp/components/post_view/components/post_list.jsx +++ b/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
; - } - - 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, diff --git a/webapp/components/post_view/post_view_controller.jsx b/webapp/components/post_view/post_view_controller.jsx index 2d4afb7d7..12112ac10 100644 --- a/webapp/components/post_view/post_view_controller.jsx +++ b/webapp/components/post_view/post_view_controller.jsx @@ -363,6 +363,7 @@ export default class PostViewController extends React.Component {
); diff --git a/webapp/components/suggestion/suggestion_list.jsx b/webapp/components/suggestion/suggestion_list.jsx index bc2245077..59f0d02f8 100644 --- a/webapp/components/suggestion/suggestion_list.jsx +++ b/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} /> ); } -- cgit v1.2.3-1-g7c22