Commit f3caa23f authored by Saturnino Abril's avatar Saturnino Abril

[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
parent 7742a53a
......@@ -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
......
......@@ -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', () => {
......
......@@ -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',
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment