Performance improvments (#2869)

2016-05-04 10:10:19 -04:00
--- 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()
        };
    }
--- 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);
--- 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') {
--- 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() {
--- 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 {
                    </a>
                );
            } 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
 };
--- 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}
                />
            );
--- 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 (<div/>);
        }

+        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;
+        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);
        }
-        var head = document.getElementsByTagName('head')[0];
-        var oldLink = document.getElementById('favicon');
-        if (oldLink) {
-            head.removeChild(oldLink);
-        }
-        head.appendChild(link);

        var directMessageMore = (
            <li key='more'>
--- a/webapp/package.json
+++ b/webapp/package.json
@@ -67,8 +67,8 @@
  },
  "scripts": {
    "check": "eslint --ext \".jsx\" --ignore-pattern node_modules --quiet .",
-    "build": "webpack",
-    "run": "webpack --progress --watch",
+    "build": "NODE_ENV=production webpack",
+    "run": "NODE_ENV=production webpack --progress --watch",
    "run-fullmap": "webpack --progress --watch",
    "test": "mocha-webpack --webpack-config webpack.config-test.js \"**/*.test.jsx\""
  }
--- a/webapp/stores/error_store.jsx
+++ b/webapp/stores/error_store.jsx
@@ -70,7 +70,9 @@ class ErrorStoreClass extends EventEmitter {

        BrowserStore.removeGlobalItem('last_error');
        BrowserStore.removeGlobalItem('last_error_conn');
-        this.emitChange();
+        if (lastError) {
+            this.emitChange();
+        }
    }
 }

--- a/webapp/utils/async_client.jsx
+++ b/webapp/utils/async_client.jsx
@@ -131,7 +131,6 @@ export function updateLastViewedAt(id) {
        () => {
            callTracker.updateLastViewed = 0;
            ErrorStore.clearLastError();
-            ErrorStore.emitChange();
        },
        (err) => {
            callTracker.updateLastViewed = 0;
--- a/webapp/webpack.config.js
+++ b/webapp/webpack.config.js
@@ -84,6 +84,11 @@ var config = {
        new webpack.LoaderOptionsPlugin({
            minimize: !DEV,
            debug: false
+        }),
+        new webpack.DefinePlugin({
+            'process.env': {
+                NODE_ENV: JSON.stringify('production')
+            }
        })
    ],
    resolve: {