From b8dd3ec359329507f7ad5e63ec907600bc961ddb Mon Sep 17 00:00:00 2001 From: enahum Date: Fri, 20 Jan 2017 15:41:48 -0300 Subject: [PATCH] Fix channel selection when switching teams (#167) * Fix channel selection when switching teams * Making the listview channels to already have if its current --- .../channel_drawer/channel_drawer.js | 6 ++++-- app/components/channel_drawer/channel_list.js | 7 ++++++- package.json | 1 + service/reducers/entities/teams.js | 20 +++++++++++-------- service/selectors/entities/channels.js | 11 ++++++++-- service/utils/channel_utils.js | 2 +- 6 files changed, 33 insertions(+), 14 deletions(-) diff --git a/app/components/channel_drawer/channel_drawer.js b/app/components/channel_drawer/channel_drawer.js index 9dbb584b9..3b5f1d1a8 100644 --- a/app/components/channel_drawer/channel_drawer.js +++ b/app/components/channel_drawer/channel_drawer.js @@ -3,7 +3,7 @@ import React from 'react'; import {Platform, BackAndroid} from 'react-native'; -import PureRenderMixin from 'react-addons-pure-render-mixin'; +import deepEqual from 'deep-equal'; import Drawer from 'react-native-drawer'; import ChannelList from './channel_list'; @@ -27,7 +27,6 @@ export default class ChannelDrawer extends React.Component { constructor(props) { super(props); - this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this); this.handleBackButton = this.handleBackButton.bind(this); } @@ -42,6 +41,9 @@ export default class ChannelDrawer extends React.Component { BackAndroid.removeEventListener('hardwareBackPress', this.handleBackButton); } } + shouldComponentUpdate(nextProps) { + return !deepEqual(this.props, nextProps, {strict: true}); + } componentWillReceiveProps(nextProps) { if (!this.props.isOpen && nextProps.isOpen) { diff --git a/app/components/channel_drawer/channel_list.js b/app/components/channel_drawer/channel_list.js index 78d2183ef..f13ee8c6c 100644 --- a/app/components/channel_drawer/channel_list.js +++ b/app/components/channel_drawer/channel_list.js @@ -9,6 +9,7 @@ import LineDivider from 'app/components/line_divider'; import ChannelItem from './channel_item'; import FormattedText from 'app/components/formatted_text'; import UnreadIndicator from './unread_indicator'; +import deepEqual from 'deep-equal'; const Styles = StyleSheet.create({ container: { @@ -72,6 +73,10 @@ export default class ChannelList extends React.Component { }; } + shouldComponentUpdate(nextProps, nextState) { + return !deepEqual(this.props, nextProps, {strict: true}) || !deepEqual(this.state, nextState, {strict: true}); + } + componentWillReceiveProps(nextProps) { this.setState({ dataSource: this.state.dataSource.cloneWithRows(this.buildData(nextProps)) @@ -181,7 +186,7 @@ export default class ChannelList extends React.Component { hasUnread={unread} mentions={mentions} onSelectChannel={this.onSelectChannel} - isActive={channel.id === this.props.currentChannel.id} + isActive={channel.isCurrent} theme={this.props.theme} /> ); diff --git a/package.json b/package.json index 1b31e5449..9e55663ad 100644 --- a/package.json +++ b/package.json @@ -3,6 +3,7 @@ "version": "0.0.1", "private": true, "dependencies": { + "deep-equal": "1.0.1", "intl": "1.2.5", "isomorphic-fetch": "2.2.1", "react": "15.4.1", diff --git a/service/reducers/entities/teams.js b/service/reducers/entities/teams.js index abfade978..c37a40695 100644 --- a/service/reducers/entities/teams.js +++ b/service/reducers/entities/teams.js @@ -75,16 +75,20 @@ function membersInTeam(state = {}, action) { } case TeamsTypes.RECEIVED_MEMBERS_IN_TEAM: { const data = action.data; - const teamId = data[0].team_id; - const members = new Set(state[teamId]); - for (const member of data) { - members.add(member.user_id); + if (data.length) { + const teamId = data[0].team_id; + const members = new Set(state[teamId]); + for (const member of data) { + members.add(member.user_id); + } + + return { + ...state, + [teamId]: members + }; } - return { - ...state, - [teamId]: members - }; + return state; } case TeamsTypes.REMOVE_MEMBER_FROM_TEAM: { const data = action.data; diff --git a/service/selectors/entities/channels.js b/service/selectors/entities/channels.js index 277e39706..e8f194b65 100644 --- a/service/selectors/entities/channels.js +++ b/service/selectors/entities/channels.js @@ -38,11 +38,18 @@ export const getChannelsOnCurrentTeam = createSelector( ); export const getChannelsByCategory = createSelector( + getCurrentChannelId, getChannelsOnCurrentTeam, (state) => state.entities.users, (state) => state.entities.preferences.myPreferences, (state) => state.entities.teams, - (channels, usersState, myPreferences, teamsState) => { - return buildDisplayableChannelList(usersState, teamsState, channels, myPreferences); + (currentChannelId, channels, usersState, myPreferences, teamsState) => { + const allChannels = channels.map((c) => { + const channel = {...c}; + channel.isCurrent = c.id === currentChannelId; + return channel; + }); + + return buildDisplayableChannelList(usersState, teamsState, allChannels, myPreferences); } ); diff --git a/service/utils/channel_utils.js b/service/utils/channel_utils.js index b9add4657..cc0e25d9b 100644 --- a/service/utils/channel_utils.js +++ b/service/utils/channel_utils.js @@ -147,7 +147,7 @@ function completeDirectChannelInfo(usersState, myPreferences, channel) { return channel; } - const dmChannelClone = JSON.parse(JSON.stringify(channel)); + const dmChannelClone = {...channel}; const teammateId = getUserIdFromChannelName(usersState.currentId, channel); return Object.assign(dmChannelClone, {