[MM-13249] Fix jumping down of channel with mention in Unread section (#2133)

* fix jumping down of channel with mention in Unread section

* update per feedback

* getDerivedStateFromProps in setting state for orderedChannelIds

components/sidebar/sidebar.jsx

@@ -14,7 +14,7 @@ import {SpringSystem, MathUtil} from 'rebound';
 import {browserHistory} from 'utils/browser_history';
 import {trackEvent} from 'actions/diagnostics_actions.jsx';
 import * as ChannelUtils from 'utils/channel_utils.jsx';
-import {Constants, ModalIdentifiers} from 'utils/constants.jsx';
+import {Constants, ModalIdentifiers, SidebarChannelGroups} from 'utils/constants.jsx';
 import * as Utils from 'utils/utils.jsx';
 import {t} from 'utils/i18n';
 import favicon from 'images/favicon/favicon-16x16.png';
@@ -157,6 +157,7 @@ export default class Sidebar extends React.PureComponent {
 
         this.state = {
             newChannelModalType: '',
+            orderedChannelIds: props.orderedChannelIds,
             showDirectChannelsModal: false,
             showMoreChannelsModal: false,
             showMorePublicChannelsModal: false,
@@ -168,6 +169,22 @@ export default class Sidebar extends React.PureComponent {
         this.unreadScrollAnimate.addListener({onSpringUpdate: this.handleScrollAnimationUpdate});
     }
 
+    static getDerivedStateFromProps(nextProps, prevState) {
+        if (nextProps.orderedChannelIds[0].type === SidebarChannelGroups.UNREADS &&
+            prevState.orderedChannelIds[0].type === SidebarChannelGroups.UNREADS &&
+            prevState.orderedChannelIds[0].items.length === nextProps.orderedChannelIds[0].items.length &&
+            prevState.orderedChannelIds[0].items.includes(nextProps.currentChannel.id)
+        ) {
+            return null;
+        }
+
+        if (nextProps.orderedChannelIds !== prevState.orderedChannelIds) {
+            return {orderedChannelIds: nextProps.orderedChannelIds};
+        }
+
+        return null;
+    }
+
     componentDidMount() {
         this.updateUnreadIndicators();
         document.addEventListener('keydown', this.navigateChannelShortcut);
@@ -182,8 +199,8 @@ export default class Sidebar extends React.PureComponent {
         // if the active channel disappeared (which can happen when dm channels autoclose), go to town square
         if (this.props.currentTeam === prevProps.currentTeam &&
             this.props.currentChannel.id === prevProps.currentChannel.id &&
-            !this.channelIdIsDisplayedForProps(this.props, this.props.currentChannel.id) &&
-            this.channelIdIsDisplayedForProps(prevProps, this.props.currentChannel.id)
+            !this.channelIdIsDisplayedForProps(this.props.orderedChannelIds, this.props.currentChannel.id) &&
+            this.channelIdIsDisplayedForProps(prevProps.orderedChannelIds, this.props.currentChannel.id)
         ) {
             this.closedDirectChannel = true;
             browserHistory.push(`/${this.props.currentTeam.name}/channels/${Constants.DEFAULT_CHANNEL}`);
@@ -243,12 +260,10 @@ export default class Sidebar extends React.PureComponent {
     }
 
     setFirstAndLastUnreadChannels() {
-        const {
-            currentChannel,
-            unreadChannelIds,
-        } = this.props;
+        const {currentChannel, unreadChannelIds} = this.props;
+        const {orderedChannelIds} = this.state;
 
-        this.getDisplayedChannels().map((channelId) => {
+        this.getDisplayedChannels(orderedChannelIds).map((channelId) => {
             if (channelId !== currentChannel.id && unreadChannelIds.includes(channelId)) {
                 if (!this.firstUnreadChannel) {
                     this.firstUnreadChannel = channelId;
@@ -308,7 +323,7 @@ export default class Sidebar extends React.PureComponent {
 
     scrollToFirstUnreadChannel = () => {
         if (this.firstUnreadChannel) {
-            const displayedChannels = this.getDisplayedChannels();
+            const displayedChannels = this.getDisplayedChannels(this.state.orderedChannelIds);
             this.unreadScrollAnimate.setCurrentValue(this.refs.scrollbar.getScrollTop()).setAtRest();
             let position;
             if (displayedChannels.length > 0 && displayedChannels[0] === this.firstUnreadChannel) {
@@ -383,7 +398,7 @@ export default class Sidebar extends React.PureComponent {
             }
 
             this.isSwitchingChannel = true;
-            const allChannelIds = this.getDisplayedChannels();
+            const allChannelIds = this.getDisplayedChannels(this.state.orderedChannelIds);
             const curChannelId = this.props.currentChannel.id;
             let curIndex = -1;
             for (let i = 0; i < allChannelIds.length; i++) {
@@ -417,7 +432,7 @@ export default class Sidebar extends React.PureComponent {
 
             this.isSwitchingChannel = true;
 
-            const allChannelIds = this.getDisplayedChannels();
+            const allChannelIds = this.getDisplayedChannels(this.state.orderedChannelIds);
 
             let direction = 0;
             if (Utils.isKeyPressed(e, Constants.KeyCodes.UP)) {
@@ -443,18 +458,15 @@ export default class Sidebar extends React.PureComponent {
         }
     };
 
-    getDisplayedChannels = (props = this.props) => {
-        const displayedChannels = [];
-
-        props.orderedChannelIds.forEach((section) => {
-            displayedChannels.push(...section.items);
-        });
-
-        return displayedChannels;
+    getDisplayedChannels = (orderedChannelIds = []) => {
+        return orderedChannelIds.reduce((allChannelIds, section) => {
+            allChannelIds.push(...section.items);
+            return allChannelIds;
+        }, []);
     };
 
-    channelIdIsDisplayedForProps = (props, id) => {
-        const allChannels = this.getDisplayedChannels(props);
+    channelIdIsDisplayedForProps = (orderedChannelIds = [], id) => {
+        const allChannels = this.getDisplayedChannels(orderedChannelIds);
         for (let i = 0; i < allChannels.length; i++) {
             if (allChannels[i] === id) {
                 return true;
@@ -533,9 +545,9 @@ export default class Sidebar extends React.PureComponent {
     }
 
     renderOrderedChannels = () => {
-        const {orderedChannelIds} = this.props;
+        const {orderedChannelIds} = this.state;
 
-        const sectionsToHide = ['unreads', 'favorite'];
+        const sectionsToHide = [SidebarChannelGroups.UNREADS, SidebarChannelGroups.FAVORITE];
 
         return (
             <Scrollbars

components/sidebar/sidebar.test.jsx

@@ -471,8 +471,8 @@ describe('component/sidebar/sidebar_channel/SidebarChannel', () => {
             <Sidebar {...defaultProps}/>
         );
         const instance = wrapper.instance();
-        expect(instance.channelIdIsDisplayedForProps(instance.props, 'c1')).toBe(true);
-        expect(instance.channelIdIsDisplayedForProps(instance.props, 'c9')).toBe(false);
+        expect(instance.channelIdIsDisplayedForProps(instance.props.orderedChannelIds, 'c1')).toBe(true);
+        expect(instance.channelIdIsDisplayedForProps(instance.props.orderedChannelIds, 'c9')).toBe(false);
     });
 
     test('should handle correctly open more direct channels toggle', () => {

utils/constants.jsx

@@ -539,6 +539,11 @@ export const GroupUnreadChannels = {
     DEFAULT_OFF: 'default_off',
 };
 
+export const SidebarChannelGroups = {
+    UNREADS: 'unreads',
+    FAVORITE: 'favorite',
+};
+
 export const PermissionsScope = {
     [Permissions.INVITE_USER]: 'team_scope',
     [Permissions.ADD_USER_TO_TEAM]: 'team_scope',