Merge pull request #386 from mattermost/revert-372-MM-1640

Revert "Mm 1640 Fixed odd scrolling issues on channel refresh"

4 files changed, 223 insertions, 254 deletions

diff --git a/web/react/components/create_post.jsx b/web/react/components/create_post.jsx
index 523112447..9ca1d5388 100644
--- a/web/react/components/create_post.jsx
+++ b/web/react/components/create_post.jsx
@@ -88,6 +88,7 @@ module.exports = React.createClass({
             );
         }
 
+        $('.post-list-holder-by-time').perfectScrollbar('update');
     },
     componentDidUpdate: function() {
         this.resizePostHolder();
diff --git a/web/react/components/post_list.jsx b/web/react/components/post_list.jsx
index edccab644..83f806b79 100644
--- a/web/react/components/post_list.jsx
+++ b/web/react/components/post_list.jsx
@@ -21,65 +21,81 @@ function getStateFromStores() {
     if (channel == null) channel = {};
 
     return {
-        postList: PostStore.getCurrentPosts(),
+        post_list: PostStore.getCurrentPosts(),
         channel: channel
     };
 }
 
 module.exports = React.createClass({
-    displayName: 'PostList',
-    holdPosition: true,            // The default state is to hold your scroll position
-                                    // This behavior should NOT be taken advantage of, always set this to the desired state
-
-    scrollHeightFromBottom: 0,      // This represents the distance from the container's scrollHeight
-                                    // and current scrollTop
-                                    // Based on equation scrollTop + scrollHeightFromBottom = scrollHeight
+    displayName: "PostList",
+    scrollPosition: 0,
+    preventScrollTrigger: false,
+    gotMorePosts: false,
+    oldScrollHeight: 0,
+    oldZoom: 0,
+    scrolledToNew: false,
     componentDidMount: function() {
-
-        // Add CSS required to have the theme colors
         var user = UserStore.getCurrentUser();
         if (user.props && user.props.theme) {
-            utils.changeCss('div.theme', 'background-color:' + user.props.theme + ';');
-            utils.changeCss('.btn.btn-primary', 'background: ' + user.props.theme + ';');
-            utils.changeCss('.modal .modal-header', 'background: ' + user.props.theme + ';');
-            utils.changeCss('.mention', 'background: ' + user.props.theme + ';');
-            utils.changeCss('.mention-link', 'color: ' + user.props.theme + ';');
-            utils.changeCss('@media(max-width: 768px){.search-bar__container', 'background: ' + user.props.theme + ';}');
+            utils.changeCss('div.theme', 'background-color:'+user.props.theme+';');
+            utils.changeCss('.btn.btn-primary', 'background: ' + user.props.theme+';');
+            utils.changeCss('.modal .modal-header', 'background: ' + user.props.theme+';');
+            utils.changeCss('.mention', 'background: ' + user.props.theme+';');
+            utils.changeCss('.mention-link', 'color: ' + user.props.theme+';');
+            utils.changeCss('@media(max-width: 768px){.search-bar__container', 'background: ' + user.props.theme+';}');
         }
-        if (user.props.theme !== '#000000' && user.props.theme !== '#585858') {
-            utils.changeCss('.btn.btn-primary:hover, .btn.btn-primary:active, .btn.btn-primary:focus', 'background: ' + utils.changeColor(user.props.theme, -10) + ';');
-            utils.changeCss('a.theme', 'color:' + user.props.theme + '; fill:' + user.props.theme + '!important;');
-        } else if (user.props.theme === '#000000') {
-            utils.changeCss('.btn.btn-primary:hover, .btn.btn-primary:active, .btn.btn-primary:focus', 'background: ' + utils.changeColor(user.props.theme, 50) + ';');
+        if (user.props.theme != '#000000' && user.props.theme != '#585858') {
+            utils.changeCss('.btn.btn-primary:hover, .btn.btn-primary:active, .btn.btn-primary:focus', 'background: ' + utils.changeColor(user.props.theme, -10)  +';');
+            utils.changeCss('a.theme', 'color:'+user.props.theme+'; fill:'+user.props.theme+'!important;');
+        } else if (user.props.theme == '#000000') {
+            utils.changeCss('.btn.btn-primary:hover, .btn.btn-primary:active, .btn.btn-primary:focus', 'background: ' + utils.changeColor(user.props.theme, +50)  +';');
             $('.team__header').addClass('theme--black');
-        } else if (user.props.theme === '#585858') {
-            utils.changeCss('.btn.btn-primary:hover, .btn.btn-primary:active, .btn.btn-primary:focus', 'background: ' + utils.changeColor(user.props.theme, 10) + ';');
+        } else if (user.props.theme == '#585858') {
+            utils.changeCss('.btn.btn-primary:hover, .btn.btn-primary:active, .btn.btn-primary:focus', 'background: ' + utils.changeColor(user.props.theme, +10)  +';');
             $('.team__header').addClass('theme--gray');
         }
 
-        // Start our Store listeners
-        PostStore.addChangeListener(this.onListenerChange);
-        ChannelStore.addChangeListener(this.onListenerChange);
-        UserStore.addStatusesChangeListener(this.onTimeChange);
-        SocketStore.addChangeListener(this.onSocketChange);
+        PostStore.addChangeListener(this._onChange);
+        ChannelStore.addChangeListener(this._onChange);
+        UserStore.addStatusesChangeListener(this._onTimeChange);
+        SocketStore.addChangeListener(this._onSocketChange);
+
+        $(".post-list-holder-by-time").perfectScrollbar();
+
+        this.resize();
+
+        var post_holder = $(".post-list-holder-by-time")[0];
+        this.scrollPosition = $(post_holder).scrollTop() + $(post_holder).innerHeight();
+        this.oldScrollHeight = post_holder.scrollHeight;
+        this.oldZoom = (window.outerWidth - 8) / window.innerWidth;
 
-        // Timeout exists for the DOM to fully render before making changes
         var self = this;
-        function initialScroll() {
-            self.holdPosition = false;
-            self.scrollWindow();
-            $(document).off('DOMContentLoaded', initialScroll);
-        }
+        $(window).resize(function(){
+            $(post_holder).perfectScrollbar('update');
+
+            // this only kind of works, detecting zoom in browsers is a nightmare
+            var newZoom = (window.outerWidth - 8) / window.innerWidth;
 
-        $(document).on('DOMContentLoaded', initialScroll);
+            if (self.scrollPosition >= post_holder.scrollHeight || (self.oldScrollHeight != post_holder.scrollHeight && self.scrollPosition >= self.oldScrollHeight) || self.oldZoom != newZoom) self.resize();
 
-        // Handle browser resizing
-        $(window).resize(this.onResize);
+            self.oldZoom = newZoom;
+
+            if ($('#create_post').length > 0) {
+                var height = $(window).height() - $('#create_post').height() - $('#error_bar').outerHeight() - 50;
+                $(".post-list-holder-by-time").css("height", height + "px");
+            }
+        });
+
+        $(post_holder).scroll(function(e){
+            if (!self.preventScrollTrigger) {
+                self.scrollPosition = $(post_holder).scrollTop() + $(post_holder).innerHeight();
+            }
+            self.preventScrollTrigger = false;
+        });
 
-        // Highlight stylingx
         $('body').on('click.userpopover', function(e){
-            if ($(e.target).attr('data-toggle') !== 'popover' &&
-                $(e.target).parents('.popover.in').length === 0) {
+            if ($(e.target).attr('data-toggle') !== 'popover'
+                && $(e.target).parents('.popover.in').length === 0) {
                 $('.user-popover').popover('hide');
             }
         });
@@ -88,208 +104,180 @@ module.exports = React.createClass({
         $('.post-list__content div:last-child .post').addClass('post--last');
 
         $('body').on('mouseenter mouseleave', '.post', function(ev){
-            if (ev.type === 'mouseenter') {
+            if(ev.type === 'mouseenter'){
                 $(this).parent('div').prev('.date-separator, .new-separator').addClass('hovered--after');
                 $(this).parent('div').next('.date-separator, .new-separator').addClass('hovered--before');
-            } else {
+            }
+            else {
                 $(this).parent('div').prev('.date-separator, .new-separator').removeClass('hovered--after');
                 $(this).parent('div').next('.date-separator, .new-separator').removeClass('hovered--before');
             }
         });
 
         $('body').on('mouseenter mouseleave', '.post.post--comment.same--root', function(ev){
-            if (ev.type === 'mouseenter') {
+            if(ev.type === 'mouseenter'){
                 $(this).parent('div').prev('.date-separator, .new-separator').addClass('hovered--comment');
                 $(this).parent('div').next('.date-separator, .new-separator').addClass('hovered--comment');
-            } else {
+            }
+            else {
                 $(this).parent('div').prev('.date-separator, .new-separator').removeClass('hovered--comment');
                 $(this).parent('div').next('.date-separator, .new-separator').removeClass('hovered--comment');
             }
         });
-    },
-    componentWillUpdate: function() {
-        this.prepareScrollWindow();
+
     },
     componentDidUpdate: function() {
-        this.scrollWindow();
+        this.resize();
+        var post_holder = $(".post-list-holder-by-time")[0];
+        this.scrollPosition = $(post_holder).scrollTop() + $(post_holder).innerHeight();
+        this.oldScrollHeight = post_holder.scrollHeight;
         $('.post-list__content div .post').removeClass('post--last');
         $('.post-list__content div:last-child .post').addClass('post--last');
     },
     componentWillUnmount: function() {
-        PostStore.removeChangeListener(this.onListenerChange);
-        ChannelStore.removeChangeListener(this.onListenerChange);
-        UserStore.removeStatusesChangeListener(this.onTimeChange);
-        SocketStore.removeChangeListener(this.onSocketChange);
+        PostStore.removeChangeListener(this._onChange);
+        ChannelStore.removeChangeListener(this._onChange);
+        UserStore.removeStatusesChangeListener(this._onTimeChange);
+        SocketStore.removeChangeListener(this._onSocketChange);
         $('body').off('click.userpopover');
     },
-    prepareScrollWindow: function() {
-        var container = $('.post-list-holder-by-time');
-        if (this.holdPosition) {
-            this.scrollHeightFromBottom = container[0].scrollHeight - container.scrollTop();
-        }
-    },
-    scrollWindow: function() {
-        var container = $('.post-list-holder-by-time');
-
-        // If there's a new message, jump the window to it
-        // If there's no new message, we check if there is a scroll position to retrieve from the previous state
-        // If we don't, then we just jump to the bottom
-        if ($('#new_message').length) {
-            container.scrollTop(container.scrollTop() + $('#new_message').offset().top - container.offset().top - $('.new-separator').height());
-        } else if (this.holdPosition) {
-            container.scrollTop(container[0].scrollHeight - this.scrollHeightFromBottom);
+    resize: function() {
+        var post_holder = $(".post-list-holder-by-time")[0];
+        this.preventScrollTrigger = true;
+        if (this.gotMorePosts) {
+            this.gotMorePosts = false;
+            $(post_holder).scrollTop($(post_holder).scrollTop() + (post_holder.scrollHeight-this.oldScrollHeight) );
         } else {
-            container.scrollTop(container[0].scrollHeight - container.innerHeight());
-        }
-        this.holdPosition = true;
-    },
-    onResize: function() {
-        this.holdPosition = true;
-        if ($('#create_post').length > 0) {
-            var height = $(window).height() - $('#create_post').height() - $('#error_bar').outerHeight() - 50;
-            $('.post-list-holder-by-time').css('height', height + 'px');
+            if ($("#new_message")[0] && !this.scrolledToNew) {
+                $(post_holder).scrollTop($(post_holder).scrollTop() + $("#new_message").offset().top - 63);
+                this.scrolledToNew = true;
+            } else {
+                $(post_holder).scrollTop(post_holder.scrollHeight);
+            }
         }
-        this.forceUpdate();
+        $(post_holder).perfectScrollbar('update');
     },
-    onListenerChange: function() {
+    _onChange: function() {
         var newState = getStateFromStores();
 
         if (!utils.areStatesEqual(newState, this.state)) {
-            this.holdPosition = (newState.channel.id === this.state.channel.id); // If we're on a new channel, go to the bottom, otherwise hold your position
+            if (this.state.post_list && this.state.post_list.order) {
+                if (this.state.channel.id === newState.channel.id && this.state.post_list.order.length != newState.post_list.order.length && newState.post_list.order.length > Constants.POST_CHUNK_SIZE) {
+                    this.gotMorePosts = true;
+                }
+            }
+            if (this.state.channel.id !== newState.channel.id) {
+                this.scrolledToNew = false;
+            }
             this.setState(newState);
         }
     },
-    onSocketChange: function(msg) {
-        var postList;
-        var post;
-        if (msg.action === 'posted') {
-            post = JSON.parse(msg.props.post);
-
-            postList = PostStore.getPosts(msg.channel_id);
-            if (!postList) {
-                return;
-            }
+    _onSocketChange: function(msg) {
+        if (msg.action == "posted") {
+            var post = JSON.parse(msg.props.post);
 
-            postList.posts[post.id] = post;
-            if (postList.order.indexOf(post.id) === -1) {
-                postList.order.unshift(post.id);
-            }
+            var post_list = PostStore.getPosts(msg.channel_id);
+            if (!post_list) return;
 
-            if (this.state.channel.id === msg.channel_id) {
-                this.holdPosition = false;
-                this.setState({postList: postList});
-            } else {
-                this.holdPosition = true;
+            post_list.posts[post.id] = post;
+            if (post_list.order.indexOf(post.id) === -1) {
+                post_list.order.unshift(post.id);
             }
 
-            PostStore.storePosts(post.channel_id, postList);
-        } else if (msg.action === 'post_edited') {
             if (this.state.channel.id === msg.channel_id) {
-                postList = this.state.postList;
-                if (!(msg.props.post_id in postList.posts)) {
-                    return;
-                }
+                this.setState({ post_list: post_list });
+            };
 
-                post = postList.posts[msg.props.post_id];
-                post.message = msg.props.message;
+            PostStore.storePosts(post.channel_id, post_list);
+        } else if (msg.action == "post_edited") {
+            if (this.state.channel.id == msg.channel_id) {
+                var post_list = this.state.post_list;
+                if (!(msg.props.post_id in post_list.posts)) return;
 
-                postList.posts[post.id] = post;
-                this.setState({postList: postList});
+                var post = post_list.posts[msg.props.post_id];
+                post.message = msg.props.message;
 
-                this.holdPosition = true;
+                post_list.posts[post.id] = post;
+                this.setState({ post_list: post_list });
 
-                PostStore.storePosts(msg.channel_id, postList);
+                PostStore.storePosts(msg.channel_id, post_list);
             } else {
                 AsyncClient.getPosts(true, msg.channel_id);
             }
-        } else if (msg.action === 'post_deleted') {
+        } else if (msg.action == "post_deleted") {
             var activeRoot = $(document.activeElement).closest('.comment-create-body')[0];
-            var activeRootPostId = '';
-            if (activeRoot && activeRoot.id.length > 0) {
-                activeRootPostId = activeRoot.id;
-            }
+            var activeRootPostId = activeRoot && activeRoot.id.length > 0 ? activeRoot.id : "";
 
-            if (this.state.channel.id === msg.channel_id) {
-                postList = this.state.postList;
-                if (!(msg.props.post_id in this.state.postList.posts)) {
-                    return;
-                }
+            if (this.state.channel.id == msg.channel_id) {
+                var post_list = this.state.post_list;
+                if (!(msg.props.post_id in this.state.post_list.posts)) return;
 
-                delete postList.posts[msg.props.post_id];
-                var index = postList.order.indexOf(msg.props.post_id);
-                if (index > -1) {
-                    postList.order.splice(index, 1);
-                }
+                delete post_list.posts[msg.props.post_id];
+                var index = post_list.order.indexOf(msg.props.post_id);
+                if (index > -1) post_list.order.splice(index, 1);
 
-                this.holdPosition = true;
+                this.setState({ post_list: post_list });
 
-                this.setState({postList: postList});
-
-                PostStore.storePosts(msg.channel_id, postList);
+                PostStore.storePosts(msg.channel_id, post_list);
             } else {
                 AsyncClient.getPosts(true, msg.channel_id);
             }
 
-            if (activeRootPostId === msg.props.post_id && UserStore.getCurrentId() !== msg.user_id) {
+            if (activeRootPostId === msg.props.post_id && UserStore.getCurrentId() != msg.user_id) {
                 $('#post_deleted').modal('show');
             }
-        } else if (msg.action === 'new_user') {
+        } else if (msg.action == "new_user") {
             AsyncClient.getProfiles();
         }
     },
-    onTimeChange: function() {
-        if (!this.state.postList) {
-            return;
-        }
-        for (var id in this.state.postList.posts) {
-            if (!this.refs[id]) {
-                continue;
-            }
+    _onTimeChange: function() {
+        if (!this.state.post_list) return;
+        for (var id in this.state.post_list.posts) {
+            if (!this.refs[id]) continue;
             this.refs[id].forceUpdateInfo();
         }
     },
     getMorePosts: function(e) {
         e.preventDefault();
 
-        if (!this.state.postList) {
-            return;
-        }
+        if (!this.state.post_list) return;
 
-        var posts = this.state.postList.posts;
-        var order = this.state.postList.order;
-        var channelId = this.state.channel.id;
+        var posts = this.state.post_list.posts;
+        var order = this.state.post_list.order;
+        var channel_id = this.state.channel.id;
 
-        $(this.refs.loadmore.getDOMNode()).text('Retrieving more messages...');
+        $(this.refs.loadmore.getDOMNode()).text("Retrieving more messages...");
 
         var self = this;
-        this.holdPosition = true;
+        var currentPos = $(".post-list").scrollTop;
 
         Client.getPosts(
-                channelId,
+                channel_id,
                 order.length,
                 Constants.POST_CHUNK_SIZE,
                 function(data) {
-                    $(self.refs.loadmore.getDOMNode()).text('Load more messages');
+                    $(self.refs.loadmore.getDOMNode()).text("Load more messages");
 
                     if (!data) return;
 
                     if (data.order.length === 0) return;
 
-                    var postList = {}
-                    postList.posts = $.extend(posts, data.posts);
-                    postList.order = order.concat(data.order);
+                    var post_list = {}
+                    post_list.posts = $.extend(posts, data.posts);
+                    post_list.order = order.concat(data.order);
 
                     AppDispatcher.handleServerAction({
                         type: ActionTypes.RECIEVED_POSTS,
-                        id: channelId,
-                        postList: postList
+                        id: channel_id,
+                        post_list: post_list
                     });
 
                     Client.getProfiles();
+                    $(".post-list").scrollTop(currentPos);
                 },
                 function(err) {
-                    $(self.refs.loadmore.getDOMNode()).text('Load more messages');
-                    AsyncClient.dispatchError(err, 'getPosts');
+                    $(self.refs.loadmore.getDOMNode()).text("Load more messages");
+                    AsyncClient.dispatchError(err, "getPosts");
                 }
             );
     },
@@ -300,20 +288,19 @@ module.exports = React.createClass({
         var order = [];
         var posts;
 
-        var lastViewed = Number.MAX_VALUE;
+        var last_viewed = Number.MAX_VALUE;
 
-        if (ChannelStore.getCurrentMember() != null) {
-            lastViewed = ChannelStore.getCurrentMember().last_viewed_at;
-        }
+        if (ChannelStore.getCurrentMember() != null)
+            last_viewed = ChannelStore.getCurrentMember().last_viewed_at;
 
-        if (this.state.postList != null) {
-            posts = this.state.postList.posts;
-            order = this.state.postList.order;
+        if (this.state.post_list != null) {
+            posts = this.state.post_list.posts;
+            order = this.state.post_list.order;
         }
 
-        var renderedLastViewed = false;
+        var rendered_last_viewed = false;
 
-        var user_id = '';
+        var user_id = "";
         if (UserStore.getCurrentId()) {
             user_id = UserStore.getCurrentId();
         } else {
@@ -322,65 +309,60 @@ module.exports = React.createClass({
 
         var channel = this.state.channel;
 
-        var moreMessages = <p className='beginning-messages-text'>Beginning of Channel</p>;
+        var more_messages = <p className="beginning-messages-text">Beginning of Channel</p>;
 
-        var userStyle = {color: UserStore.getCurrentUser().props.theme};
+        var userStyle = { color: UserStore.getCurrentUser().props.theme }
 
         if (channel != null) {
             if (order.length > 0 && order.length % Constants.POST_CHUNK_SIZE === 0) {
-                moreMessages = <a ref='loadmore' className='more-messages-text theme' href='#' onClick={this.getMorePosts}>Load more messages</a>;
+                more_messages = <a ref="loadmore" className="more-messages-text theme" href="#" onClick={this.getMorePosts}>Load more messages</a>;
             } else if (channel.type === 'D') {
-                var teammate = utils.getDirectTeammate(channel.id);
+                var teammate = utils.getDirectTeammate(channel.id)
 
                 if (teammate) {
-                    var teammateName;
-                    if (teammate.nickname.length > 0) {
-                        teammateName = teammate.nickname;
-                    } else {
-                        teammateName = teammate.username;
-                    }
-                    moreMessages = (
-                        <div className='channel-intro'>
-                            <div className='post-profile-img__container channel-intro-img'>
-                                <img className='post-profile-img' src={'/api/v1/users/' + teammate.id + '/image?time=' + teammate.update_at} height='50' width='50' />
+                    var teammate_name = teammate.nickname.length > 0 ? teammate.nickname : teammate.username;
+                    more_messages = (
+                        <div className="channel-intro">
+                            <div className="post-profile-img__container channel-intro-img">
+                                <img className="post-profile-img" src={"/api/v1/users/" + teammate.id + "/image?time=" + teammate.update_at} height="50" width="50" />
                             </div>
-                            <div className='channel-intro-profile'>
+                            <div className="channel-intro-profile">
                                 <strong><UserProfile userId={teammate.id} /></strong>
                             </div>
-                            <p className='channel-intro-text'>
-                                {'This is the start of your private message history with ' + teammateName + '.'}<br/>
-                                {'Private messages and files shared here are not shown to people outside this area.'}
+                            <p className="channel-intro-text">
+                                {"This is the start of your private message history with " + teammate_name + "." }<br/>
+                                {"Private messages and files shared here are not shown to people outside this area."}
                             </p>
-                            <a className='intro-links' href='#' style={userStyle} data-toggle='modal' data-target='#edit_channel' data-desc={channel.description} data-title={channel.display_name} data-channelid={channel.id}><i className='fa fa-pencil'></i>Set a description</a>
+                            <a className="intro-links" href="#" style={userStyle} data-toggle="modal" data-target="#edit_channel" data-desc={channel.description} data-title={channel.display_name} data-channelid={channel.id}><i className="fa fa-pencil"></i>Set a description</a>
                         </div>
                     );
                 } else {
-                    moreMessages = (
-                        <div className='channel-intro'>
-                            <p className='channel-intro-text'>{'This is the start of your private message history with this ' + strings.Team + 'mate. Private messages and files shared here are not shown to people outside this area.'}</p>
+                    more_messages = (
+                        <div className="channel-intro">
+                            <p className="channel-intro-text">{"This is the start of your private message history with this " + strings.Team + "mate. Private messages and files shared here are not shown to people outside this area."}</p>
                         </div>
                     );
                 }
             } else if (channel.type === 'P' || channel.type === 'O') {
-                var uiName = channel.display_name;
+                var ui_name = channel.display_name
                 var members = ChannelStore.getCurrentExtraInfo().members;
-                var createorName = '';
+                var creator_name = "";
 
                 for (var i = 0; i < members.length; i++) {
                     if (members[i].roles.indexOf('admin') > -1) {
-                        createorName = members[i].username;
+                        creator_name = members[i].username;
                         break;
                     }
                 }
 
                 if (ChannelStore.isDefault(channel)) {
-                    moreMessages = (
-                        <div className='channel-intro'>
-                            <h4 className='channel-intro__title'>Beginning of {uiName}</h4>
-                            <p className='channel-intro__content'>
-                                Welcome to {uiName}!
+                    more_messages = (
+                        <div className="channel-intro">
+                            <h4 className="channel-intro__title">Beginning of {ui_name}</h4>
+                            <p className="channel-intro__content">
+                                Welcome to {ui_name}!
                                 <br/><br/>
-                                {'This is the first channel ' + strings.Team + 'mates see when they'}
+                                {"This is the first channel " + strings.Team + "mates see when they"}
                                 <br/>
                                 sign up - use it for posting updates everyone needs to know.
                                 <br/><br/>
@@ -392,43 +374,29 @@ module.exports = React.createClass({
                         </div>
                     );
                 } else if (channel.name === Constants.OFFTOPIC_CHANNEL) {
-                    moreMessages = (
-                        <div className='channel-intro'>
-                            <h4 className='channel-intro__title'>Beginning of {uiName}</h4>
-                            <p className='channel-intro__content'>
-                                {'This is the start of ' + uiName + ', a channel for non-work-related conversations.'}
+                    more_messages = (
+                        <div className="channel-intro">
+                            <h4 className="channel-intro__title">Beginning of {ui_name}</h4>
+                            <p className="channel-intro__content">
+                                {"This is the start of " + ui_name + ", a channel for non-work-related conversations."}
                                 <br/>
                             </p>
-                            <a className='intro-links' href='#' style={userStyle} data-toggle='modal' data-target='#edit_channel' data-desc={channel.description} data-title={uiName} data-channelid={channel.id}><i className='fa fa-pencil'></i>Set a description</a>
+                            <a className="intro-links" href="#" style={userStyle} data-toggle="modal" data-target="#edit_channel" data-desc={channel.description} data-title={ui_name} data-channelid={channel.id}><i className="fa fa-pencil"></i>Set a description</a>
                         </div>
                     );
                 } else {
-                    var uiType;
-                    var permissions;
-                    if (channel.type === 'P') {
-                        uiType = 'private group';
-                        permissions = ' Only invited members can see this private group.';
-                    } else {
-                        uiType = 'channel';
-                        permissions = ' Any member can join and read this channel.';
-                    }
-
-                    var createorText;
-                    if (createorName !== '') {
-                        createorText = 'This is the start of the ' + uiName + ' ' + uiType + ', created by ' + createorName + ' on ' + utils.displayDate(channel.create_at) + '.';
-                    } else {
-                        createorText = 'This is the start of the ' + uiName + ' ' + uiType + ', created on '+ utils.displayDate(channel.create_at) + '.';
-                    }
-                    moreMessages = (
-                        <div className='channel-intro'>
-                            <h4 className='channel-intro__title'>Beginning of {uiName}</h4>
-                            <p className='channel-intro__content'>
-                                {createorText}
-                                {permissions}
+                    var ui_type = channel.type === 'P' ? "private group" : "channel";
+                    more_messages = (
+                        <div className="channel-intro">
+                            <h4 className="channel-intro__title">Beginning of {ui_name}</h4>
+                            <p className="channel-intro__content">
+                                { creator_name != "" ? "This is the start of the " + ui_name + " " + ui_type + ", created by " + creator_name + " on " + utils.displayDate(channel.create_at) + "."
+                                : "This is the start of the " + ui_name + " " + ui_type + ", created on "+ utils.displayDate(channel.create_at) + "." }
+                                { channel.type === 'P' ? " Only invited members can see this private group." : " Any member can join and read this channel." }
                                 <br/>
                             </p>
-                            <a className='intro-links' href='#' style={userStyle} data-toggle='modal' data-target='#edit_channel' data-desc={channel.description} data-title={channel.display_name} data-channelid={channel.id}><i className='fa fa-pencil'></i>Set a description</a>
-                            <a className='intro-links' href='#' style={userStyle} data-toggle='modal' data-target='#channel_invite'><i className='fa fa-user-plus'></i>Invite others to this {uiType}</a>
+                            <a className="intro-links" href="#" style={userStyle} data-toggle="modal" data-target="#edit_channel" data-desc={channel.description} data-title={channel.display_name} data-channelid={channel.id}><i className="fa fa-pencil"></i>Set a description</a>
+                            <a className="intro-links" href="#" style={userStyle} data-toggle="modal" data-target="#channel_invite"><i className="fa fa-user-plus"></i>Invite others to this {ui_type}</a>
                         </div>
                     );
                 }
@@ -443,23 +411,15 @@ module.exports = React.createClass({
 
             for (var i = order.length-1; i >= 0; i--) {
                 var post = posts[order[i]];
-                var parentPost = null;
-                if (post.parent_id) {
-                    parentPost = posts[post.parent_id];
-                }
+                var parentPost = post.parent_id ? posts[post.parent_id] : null;
 
                 var sameUser = '';
                 var sameRoot = false;
                 var hideProfilePic = false;
-                var prevPost = null;
-                if (i < order.length - 1) {
-                    prevPost = posts[order[i + 1]];
-                }
+                var prevPost = (i < order.length - 1) ? posts[order[i + 1]] : null;
 
                 if (prevPost) {
-                    if ((prevPost.user_id === post.user_id) && (post.create_at - prevPost.create_at <= 1000 * 60 * 5)) {
-                        sameUser = 'same--user';
-                    }
+                    sameUser = (prevPost.user_id === post.user_id) && (post.create_at - prevPost.create_at <= 1000*60*5) ? "same--user" : "";
                     sameRoot = utils.isComment(post) && (prevPost.id === post.root_id || prevPost.root_id === post.root_id);
 
                     // we only hide the profile pic if the previous post is not a comment, the current post is not a comment, and the previous post was made by the same user as the current post
@@ -468,7 +428,7 @@ module.exports = React.createClass({
 
                 // check if it's the last comment in a consecutive string of comments on the same post
                 // it is the last comment if it is last post in the channel or the next post has a different root post
-                var isLastComment = utils.isComment(post) && (i === 0 || posts[order[i - 1]].root_id !== post.root_id);
+                var isLastComment = utils.isComment(post) && (i === 0 || posts[order[i-1]].root_id != post.root_id);
 
                 var postCtl = (
                     <Post ref={post.id} sameUser={sameUser} sameRoot={sameRoot} post={post} parentPost={parentPost} key={post.id}
@@ -477,21 +437,21 @@ module.exports = React.createClass({
                 );
 
                 currentPostDay = utils.getDateForUnixTicks(post.create_at);
-                if (currentPostDay.toDateString() !== previousPostDay.toDateString()) {
+                if (currentPostDay.toDateString() != previousPostDay.toDateString()) {
                     postCtls.push(
-                        <div key={currentPostDay.toDateString()} className='date-separator'>
-                            <hr className='separator__hr' />
-                            <div className='separator__text'>{currentPostDay.toDateString()}</div>
+                        <div key={currentPostDay.toDateString()} className="date-separator">
+                            <hr className="separator__hr" />
+                            <div className="separator__text">{currentPostDay.toDateString()}</div>
                         </div>
                     );
                 }
 
-                if (post.create_at > lastViewed && !renderedLastViewed) {
-                    renderedLastViewed = true;
+                if (post.create_at > last_viewed && !rendered_last_viewed) {
+                    rendered_last_viewed = true;
                     postCtls.push(
-                        <div key='unviewed' className='new-separator'>
-                            <hr id='new_message' className='separator__hr' />
-                            <div className='separator__text'>New Messages</div>
+                        <div key="unviewed" className="new-separator">
+                            <hr id="new_message" className="separator__hr" />
+                            <div className="separator__text">New Messages</div>
                         </div>
                     );
                 }
@@ -499,15 +459,15 @@ module.exports = React.createClass({
                 previousPostDay = currentPostDay;
             }
         } else {
-            postCtls.push(<LoadingScreen position='absolute' />);
+            postCtls.push(<LoadingScreen position="absolute" />);
         }
 
         return (
-            <div ref='postlist' className='post-list-holder-by-time'>
-                <div className='post-list__table'>
-                    <div className='post-list__content'>
-                        {moreMessages}
-                        {postCtls}
+            <div ref="postlist" className="post-list-holder-by-time">
+                <div className="post-list__table">
+                    <div className="post-list__content">
+                        { more_messages }
+                        { postCtls }
                     </div>
                 </div>
             </div>
diff --git a/web/react/components/sidebar_right.jsx b/web/react/components/sidebar_right.jsx
index 7ceccb45c..8334b345b 100644
--- a/web/react/components/sidebar_right.jsx
+++ b/web/react/components/sidebar_right.jsx
@@ -38,6 +38,10 @@ module.exports = React.createClass({
             }
         }
     },
+    resize: function() {
+        $(".post-list-holder-by-time").scrollTop(100000);
+        $(".post-list-holder-by-time").perfectScrollbar('update');
+    },
     getInitialState: function() {
         return getStateFromStores();
     },
@@ -45,6 +49,7 @@ module.exports = React.createClass({
         if (! (this.state.search_visible || this.state.post_right_visible)) {
             $('.inner__wrap').removeClass('move--left').removeClass('move--right');
             $('.sidebar--right').removeClass('move--left');
+            this.resize();
             return (
                 <div></div>
             );
@@ -54,6 +59,7 @@ module.exports = React.createClass({
         $('.sidebar--left').removeClass('move--right');
         $('.sidebar--right').addClass('move--left');
         $('.sidebar--right').prepend('<div class="sidebar__overlay"></div>');
+        this.resize();
         setTimeout(function(){
             $('.sidebar__overlay').fadeOut("200", function(){
                 $(this).remove();
diff --git a/web/react/utils/utils.jsx b/web/react/utils/utils.jsx
index d29930aaf..7591c138f 100644
--- a/web/react/utils/utils.jsx
+++ b/web/react/utils/utils.jsx
@@ -313,6 +313,8 @@ var getYoutubeEmbed = function(link) {
         var metadata = data.items[0].snippet;
         $('.video-uploader.'+youtubeId).html(metadata.channelTitle);
         $('.video-title.'+youtubeId).find('a').html(metadata.title);
+        $(".post-list-holder-by-time").scrollTop($(".post-list-holder-by-time")[0].scrollHeight);
+        $(".post-list-holder-by-time").perfectScrollbar('update');
     };
 
     if(config.GoogleDeveloperKey) {