Cleaned up logic for the unread indicators

web/react/components/sidebar.jsx

@@ -11,19 +11,22 @@ var BrowserStore = require('../stores/browser_store.jsx');
 var Utils = require('../utils/utils.jsx');
 var SidebarHeader = require('./sidebar_header.jsx');
 var SearchBox = require('./search_bar.jsx');
-var UnreadChannelIndicators = require('./unread_channel_indicators.jsx');
 var Constants = require('../utils/constants.jsx');
 var NewChannelFlow = require('./new_channel_flow.jsx');
+var UnreadChannelIndicator = require('./unread_channel_indicator.jsx');
 
 export default class Sidebar extends React.Component {
     constructor(props) {
         super(props);
 
         this.badgesActive = false;
+        this.firstUnreadChannel = null;
+        this.lastUnreadChannel = null;
 
         this.onChange = this.onChange.bind(this);
         this.onScroll = this.onScroll.bind(this);
         this.onResize = this.onResize.bind(this);
+        this.updateUnreadIndicators = this.updateUnreadIndicators.bind(this);
         this.createChannelElement = this.createChannelElement.bind(this);
 
         this.state = this.getStateFromStores();
@@ -147,13 +150,23 @@ export default class Sidebar extends React.Component {
         $('.nav-pills__container').perfectScrollbar();
 
         this.updateTitle();
-        this.refs.unreadIndicators.onParentUpdate(this.refs);
+        this.updateUnreadIndicators();
 
         $(window).on('resize', this.onResize);
     }
+    shouldComponentUpdate(nextProps, nextState) {
+        if (!Utils.areStatesEqual(nextProps, this.props)) {
+            return true;
+        }
+
+        if (!Utils.areStatesEqual(nextState, this.state)) {
+            return true;
+        }
+        return false;
+    }
     componentDidUpdate() {
         this.updateTitle();
-        this.refs.unreadIndicators.onParentUpdate(this.refs);
+        this.updateUnreadIndicators();
     }
     componentWillUnmount() {
         $(window).off('resize', this.onResize);
@@ -266,12 +279,39 @@ export default class Sidebar extends React.Component {
         }
     }
     onScroll() {
-        this.refs.unreadIndicators.onParentUpdate(this.refs);
+        this.updateUnreadIndicators();
     }
     onResize() {
-        this.refs.unreadIndicators.onParentUpdate(this.refs);
+        this.updateUnreadIndicators();
     }
-    createChannelElement(unreadChannels, channel, index) {
+    updateUnreadIndicators() {
+        const container = $(React.findDOMNode(this.refs.container));
+
+        var showTopUnread = false;
+        var showBottomUnread = false;
+
+        if (this.firstUnreadChannel) {
+            var firstUnreadElement = $(React.findDOMNode(this.refs[this.firstUnreadChannel]));
+
+            if (firstUnreadElement.position().top + firstUnreadElement.height() < 0) {
+                showTopUnread = true;
+            }
+        }
+
+        if (this.lastUnreadChannel) {
+            var lastUnreadElement = $(React.findDOMNode(this.refs[this.lastUnreadChannel]));
+
+            if (lastUnreadElement.position().top > container.height()) {
+                showBottomUnread = true;
+            }
+        }
+
+        this.setState({
+            showTopUnread,
+            showBottomUnread
+        });
+    }
+    createChannelElement(channel, index) {
         var members = this.state.members;
         var activeId = this.state.activeId;
         var channelMember = members[channel.id];
@@ -293,7 +333,10 @@ export default class Sidebar extends React.Component {
             titleClass = 'unread-title';
 
             if (channel.id !== activeId) {
-                unreadChannels.push(channel);
+                if (!this.firstUnreadChannel) {
+                    this.firstUnreadChannel = channel.name;
+                }
+                this.lastUnreadChannel = channel.name;
             }
         }
 
@@ -399,17 +442,18 @@ export default class Sidebar extends React.Component {
     render() {
         this.badgesActive = false;
 
-        // keep track of unread channels so we can use them to set the unread indicators
-        const unreadChannels = [];
+        // keep track of the first and last unread channels so we can use them to set the unread indicators
+        this.firstUnreadChannel = null;
+        this.lastUnreadChannel = null;
 
         // create elements for all 3 types of channels
         const publicChannels = this.state.channels.filter((channel) => channel.type === 'O');
-        const publicChannelItems = publicChannels.map(this.createChannelElement.bind(this, unreadChannels));
+        const publicChannelItems = publicChannels.map(this.createChannelElement);
 
         const privateChannels = this.state.channels.filter((channel) => channel.type === 'P');
-        const privateChannelItems = privateChannels.map(this.createChannelElement.bind(this, unreadChannels));
+        const privateChannelItems = privateChannels.map(this.createChannelElement);
 
-        const directMessageItems = this.state.showDirectChannels.map(this.createChannelElement.bind(this, unreadChannels));
+        const directMessageItems = this.state.showDirectChannels.map(this.createChannelElement);
 
         // update the favicon to show if there are any notifications
         var link = document.createElement('link');
@@ -463,9 +507,15 @@ export default class Sidebar extends React.Component {
                 />
                 <SearchBox />
 
-                <UnreadChannelIndicators
-                    ref='unreadIndicators'
-                    unreadChannels={unreadChannels}
+                <UnreadChannelIndicator
+                    show={this.state.showTopUnread}
+                    extraClass='nav-pills__unread-indicator-top'
+                    text={'Unread post(s) above'}
+                />
+                <UnreadChannelIndicator
+                    show={this.state.showBottomUnread}
+                    extraClass='nav-pills__unread-indicator-bottom'
+                    text={'Unread post(s) below'}
                 />
 
                 <div