From 274a2a58f0cb420b1b24495dcaa7ae2d2ffd7bec Mon Sep 17 00:00:00 2001 From: Christopher Speller Date: Wed, 4 May 2016 10:10:19 -0400 Subject: Performance improvments (#2869) --- webapp/components/channel_header.jsx | 1 - webapp/components/create_comment.jsx | 8 ------ webapp/components/create_post.jsx | 14 ++-------- webapp/components/logged_in.jsx | 11 ++++---- webapp/components/posts_view.jsx | 8 ++++-- webapp/components/posts_view_container.jsx | 4 +-- webapp/components/sidebar.jsx | 43 ++++++++++++------------------ 7 files changed, 32 insertions(+), 57 deletions(-) (limited to 'webapp/components') diff --git a/webapp/components/channel_header.jsx b/webapp/components/channel_header.jsx index c82f59299..de6ee20c9 100644 --- a/webapp/components/channel_header.jsx +++ b/webapp/components/channel_header.jsx @@ -61,7 +61,6 @@ export default class ChannelHeader extends React.Component { memberChannel: ChannelStore.getMember(this.props.channelId), users: extraInfo.members, userCount: extraInfo.member_count, - searchVisible: SearchStore.getSearchResults() !== null, currentUser: UserStore.getCurrentUser() }; } diff --git a/webapp/components/create_comment.jsx b/webapp/components/create_comment.jsx index e8fa59165..30e89e500 100644 --- a/webapp/components/create_comment.jsx +++ b/webapp/components/create_comment.jsx @@ -62,7 +62,6 @@ class CreateComment extends React.Component { this.handleUploadError = this.handleUploadError.bind(this); this.removePreview = this.removePreview.bind(this); this.getFileCount = this.getFileCount.bind(this); - this.handleResize = this.handleResize.bind(this); this.onPreferenceChange = this.onPreferenceChange.bind(this); this.focusTextbox = this.focusTextbox.bind(this); this.showPostDeletedModal = this.showPostDeletedModal.bind(this); @@ -76,29 +75,22 @@ class CreateComment extends React.Component { uploadsInProgress: draft.uploadsInProgress, previews: draft.previews, submitting: false, - windowWidth: Utils.windowWidth(), ctrlSend: PreferenceStore.getBool(Constants.Preferences.CATEGORY_ADVANCED_SETTINGS, 'send_on_ctrl_enter'), showPostDeletedModal: false }; } componentDidMount() { PreferenceStore.addChangeListener(this.onPreferenceChange); - window.addEventListener('resize', this.handleResize); - this.focusTextbox(); } componentWillUnmount() { PreferenceStore.removeChangeListener(this.onPreferenceChange); - window.removeEventListener('resize', this.handleResize); } onPreferenceChange() { this.setState({ ctrlSend: PreferenceStore.getBool(Constants.Preferences.CATEGORY_ADVANCED_SETTINGS, 'send_on_ctrl_enter') }); } - handleResize() { - this.setState({windowWidth: Utils.windowWidth()}); - } componentDidUpdate(prevProps, prevState) { if (prevState.uploadsInProgress < this.state.uploadsInProgress) { $('.post-right__scroll').scrollTop($('.post-right__scroll')[0].scrollHeight); diff --git a/webapp/components/create_post.jsx b/webapp/components/create_post.jsx index 011e0c2b8..d173fe42b 100644 --- a/webapp/components/create_post.jsx +++ b/webapp/components/create_post.jsx @@ -12,7 +12,6 @@ import TutorialTip from './tutorial/tutorial_tip.jsx'; import AppDispatcher from '../dispatcher/app_dispatcher.jsx'; import * as GlobalActions from 'action_creators/global_actions.jsx'; import Client from 'utils/web_client.jsx'; -import * as AsyncClient from 'utils/async_client.jsx'; import * as Utils from 'utils/utils.jsx'; import ChannelStore from 'stores/channel_store.jsx'; @@ -167,21 +166,12 @@ class CreatePost extends React.Component { post.create_at = time; post.parent_id = this.state.parentId; - const channel = ChannelStore.get(this.state.channelId); - GlobalActions.emitUserPostedEvent(post); this.setState({messageText: '', submitting: false, postError: null, previews: [], serverError: null}); Client.createPost(post, - (data) => { - AsyncClient.getPosts(); - - const member = ChannelStore.getMember(channel.id); - member.msg_count = channel.total_msg_count; - member.last_viewed_at = Date.now(); - ChannelStore.setChannelMember(member); - - GlobalActions.emitPostRecievedEvent(data); + () => { + // DO nothing. Websockets will handle this. }, (err) => { if (err.id === 'api.post.create_post.root_id.app_error') { diff --git a/webapp/components/logged_in.jsx b/webapp/components/logged_in.jsx index 3941dd12c..9f1fac6bc 100644 --- a/webapp/components/logged_in.jsx +++ b/webapp/components/logged_in.jsx @@ -63,11 +63,12 @@ export default class LoggedIn extends React.Component { onUserChanged() { // Grab the current user const user = UserStore.getCurrentUser(); - this.setupUser(user); - - this.setState({ - user - }); + if (!Utils.areObjectsEqual(this.state.user, user)) { + this.setupUser(user); + this.setState({ + user + }); + } } componentWillMount() { diff --git a/webapp/components/posts_view.jsx b/webapp/components/posts_view.jsx index f41752469..3cc0c1a92 100644 --- a/webapp/components/posts_view.jsx +++ b/webapp/components/posts_view.jsx @@ -11,6 +11,8 @@ import * as GlobalActions from 'action_creators/global_actions.jsx'; import PreferenceStore from 'stores/preference_store.jsx'; import UserStore from 'stores/user_store.jsx'; +import {createChannelIntroMessage} from 'utils/channel_intro_messages.jsx'; + import * as Utils from 'utils/utils.jsx'; import DelayedAction from 'utils/delayed_action.jsx'; @@ -394,6 +396,8 @@ export default class PostsView extends React.Component { UserStore.addChangeListener(this.onUserChange); } + this.introText = createChannelIntroMessage(this.props.channel); + window.addEventListener('resize', this.handleResize); } componentWillUnmount() { @@ -481,7 +485,7 @@ export default class PostsView extends React.Component { ); } else { - moreMessagesTop = this.props.introText; + moreMessagesTop = this.introText; } // Give option to load more posts at bottom if nessisary @@ -559,7 +563,7 @@ PostsView.propTypes = { loadMorePostsBottomClicked: React.PropTypes.func.isRequired, showMoreMessagesTop: React.PropTypes.bool, showMoreMessagesBottom: React.PropTypes.bool, - introText: React.PropTypes.element, + channel: React.PropTypes.object, messageSeparatorTime: React.PropTypes.number, postsToHighlight: React.PropTypes.object }; diff --git a/webapp/components/posts_view_container.jsx b/webapp/components/posts_view_container.jsx index 32b0aa578..c0a74ca84 100644 --- a/webapp/components/posts_view_container.jsx +++ b/webapp/components/posts_view_container.jsx @@ -13,8 +13,6 @@ import * as GlobalActions from 'action_creators/global_actions.jsx'; import Constants from 'utils/constants.jsx'; -import {createChannelIntroMessage} from 'utils/channel_intro_messages.jsx'; - import React from 'react'; const MAXIMUM_CACHED_VIEWS = 3; @@ -188,7 +186,7 @@ export default class PostsViewContainer extends React.Component { }} showMoreMessagesTop={!this.state.atTop[this.state.currentChannelIndex]} showMoreMessagesBottom={false} - introText={channel ? createChannelIntroMessage(channel) : null} + channel={channel} messageSeparatorTime={this.state.currentLastViewed} /> ); diff --git a/webapp/components/sidebar.jsx b/webapp/components/sidebar.jsx index 4ce89d37c..71091f12b 100644 --- a/webapp/components/sidebar.jsx +++ b/webapp/components/sidebar.jsx @@ -47,7 +47,6 @@ export default class Sidebar extends React.Component { this.onScroll = this.onScroll.bind(this); this.updateUnreadIndicators = this.updateUnreadIndicators.bind(this); this.handleLeaveDirectChannel = this.handleLeaveDirectChannel.bind(this); - this.handleResize = this.handleResize.bind(this); this.showMoreChannelsModal = this.showMoreChannelsModal.bind(this); this.showNewChannelModal = this.showNewChannelModal.bind(this); @@ -64,7 +63,6 @@ export default class Sidebar extends React.Component { state.newChannelModalType = ''; state.showDirectChannelsModal = false; state.loadingDMChannel = -1; - state.windowWidth = Utils.windowWidth(); this.state = state; } getTotalUnreadCount() { @@ -150,8 +148,6 @@ export default class Sidebar extends React.Component { this.updateTitle(); this.updateUnreadIndicators(); - - window.addEventListener('resize', this.handleResize); } shouldComponentUpdate(nextProps, nextState) { if (!Utils.areObjectsEqual(nextState, this.state)) { @@ -173,20 +169,12 @@ export default class Sidebar extends React.Component { } } componentWillUnmount() { - window.removeEventListener('resize', this.handleResize); - ChannelStore.removeChangeListener(this.onChange); UserStore.removeChangeListener(this.onChange); UserStore.removeStatusesChangeListener(this.onChange); TeamStore.removeChangeListener(this.onChange); PreferenceStore.removeChangeListener(this.onChange); } - handleResize() { - this.setState({ - windowWidth: Utils.windowWidth(), - windowHeight: Utils.windowHeight() - }); - } onChange() { this.setState(this.getStateFromStores()); } @@ -492,6 +480,7 @@ export default class Sidebar extends React.Component { return (
); } + this.lastBadgesActive = this.badgesActive; this.badgesActive = false; // keep track of the first and last unread channels so we can use them to set the unread indicators @@ -508,21 +497,23 @@ export default class Sidebar extends React.Component { }); // update the favicon to show if there are any notifications - var link = document.createElement('link'); - link.type = 'image/x-icon'; - link.rel = 'shortcut icon'; - link.id = 'favicon'; - if (this.badgesActive) { - link.href = redFavicon; - } else { - link.href = favicon; - } - var head = document.getElementsByTagName('head')[0]; - var oldLink = document.getElementById('favicon'); - if (oldLink) { - head.removeChild(oldLink); + if (this.lastBadgesActive !== this.badgesActive) { + var link = document.createElement('link'); + link.type = 'image/x-icon'; + link.rel = 'shortcut icon'; + link.id = 'favicon'; + if (this.badgesActive) { + link.href = redFavicon; + } else { + link.href = favicon; + } + var head = document.getElementsByTagName('head')[0]; + var oldLink = document.getElementById('favicon'); + if (oldLink) { + head.removeChild(oldLink); + } + head.appendChild(link); } - head.appendChild(link); var directMessageMore = (
  • -- cgit v1.2.3-1-g7c22