From 7f48a7fc9d2238134414668e0b520115706b8b2d Mon Sep 17 00:00:00 2001 From: Joram Wilander Date: Thu, 15 Dec 2016 11:40:46 -0500 Subject: PLT-4815 Refactor 'More Channels' modal into the new modal pattern (#4742) * Refactor 'More Channels' modal into the new modal pattern * Fix unit test * Readded CSS changes --- webapp/components/admin_console/team_users.jsx | 25 +++-- webapp/components/channel_invite_modal.jsx | 23 +++-- webapp/components/channel_members_modal.jsx | 23 +++-- webapp/components/member_list_team.jsx | 25 +++-- webapp/components/more_channels.jsx | 127 ++++++++++--------------- webapp/components/more_direct_channels.jsx | 33 ++++--- webapp/components/needs_team.jsx | 2 - webapp/components/searchable_channel_list.jsx | 2 +- webapp/components/searchable_user_list.jsx | 38 +------- webapp/components/sidebar.jsx | 32 +++++-- webapp/i18n/en.json | 2 +- webapp/sass/components/_modal.scss | 1 + webapp/sass/responsive/_mobile.scss | 40 ++++---- webapp/stores/channel_store.jsx | 19 ++-- webapp/utils/constants.jsx | 3 +- 15 files changed, 197 insertions(+), 198 deletions(-) (limited to 'webapp') diff --git a/webapp/components/admin_console/team_users.jsx b/webapp/components/admin_console/team_users.jsx index 49550d8af..1cbb0e85f 100644 --- a/webapp/components/admin_console/team_users.jsx +++ b/webapp/components/admin_console/team_users.jsx @@ -43,6 +43,8 @@ export default class UserList extends React.Component { this.search = this.search.bind(this); this.loadComplete = this.loadComplete.bind(this); + this.searchTimeoutId = 0; + const stats = TeamStore.getStats(this.props.params.team); this.state = { @@ -148,14 +150,21 @@ export default class UserList extends React.Component { const options = {}; options[UserSearchOptions.ALLOW_INACTIVE] = true; - searchUsers( - term, - this.props.params.team, - options, - (users) => { - this.setState({loading: true, search: true, users}); - loadTeamMembersForProfilesList(users, this.props.params.team, this.loadComplete); - } + clearTimeout(this.searchTimeoutId); + + this.searchTimeoutId = setTimeout( + () => { + searchUsers( + term, + this.props.params.team, + options, + (users) => { + this.setState({loading: true, search: true, users}); + loadTeamMembersForProfilesList(users, this.props.params.team, this.loadComplete); + } + ); + }, + Constants.SEARCH_TIMEOUT_MILLISECONDS ); } diff --git a/webapp/components/channel_invite_modal.jsx b/webapp/components/channel_invite_modal.jsx index 4b72cfc40..355d23d53 100644 --- a/webapp/components/channel_invite_modal.jsx +++ b/webapp/components/channel_invite_modal.jsx @@ -13,6 +13,7 @@ import {searchUsers} from 'actions/user_actions.jsx'; import * as AsyncClient from 'utils/async_client.jsx'; import * as UserAgent from 'utils/user_agent.jsx'; +import Constants from 'utils/constants.jsx'; import React from 'react'; import {Modal} from 'react-bootstrap'; @@ -32,6 +33,7 @@ export default class ChannelInviteModal extends React.Component { this.search = this.search.bind(this); this.term = ''; + this.searchTimeoutId = 0; const channelStats = ChannelStore.getStats(props.channel.id); const teamStats = TeamStore.getCurrentStats(); @@ -113,13 +115,20 @@ export default class ChannelInviteModal extends React.Component { return; } - searchUsers( - term, - TeamStore.getCurrentId(), - {not_in_channel_id: this.props.channel.id}, - (users) => { - this.setState({search: true, users}); - } + clearTimeout(this.searchTimeoutId); + + this.searchTimeoutId = setTimeout( + () => { + searchUsers( + term, + TeamStore.getCurrentId(), + {not_in_channel_id: this.props.channel.id}, + (users) => { + this.setState({search: true, users}); + } + ); + }, + Constants.SEARCH_TIMEOUT_MILLISECONDS ); } diff --git a/webapp/components/channel_members_modal.jsx b/webapp/components/channel_members_modal.jsx index 3722195b9..9f6a2a2eb 100644 --- a/webapp/components/channel_members_modal.jsx +++ b/webapp/components/channel_members_modal.jsx @@ -13,6 +13,7 @@ import {removeUserFromChannel} from 'actions/channel_actions.jsx'; import * as AsyncClient from 'utils/async_client.jsx'; import * as UserAgent from 'utils/user_agent.jsx'; +import Constants from 'utils/constants.jsx'; import React from 'react'; import {Modal} from 'react-bootstrap'; @@ -33,6 +34,7 @@ export default class ChannelMembersModal extends React.Component { this.nextPage = this.nextPage.bind(this); this.term = ''; + this.searchTimeoutId = 0; const stats = ChannelStore.getStats(props.channel.id); @@ -128,13 +130,20 @@ export default class ChannelMembersModal extends React.Component { return; } - searchUsers( - term, - TeamStore.getCurrentId(), - {in_channel_id: this.props.channel.id}, - (users) => { - this.setState({search: true, users}); - } + clearTimeout(this.searchTimeoutId); + + this.searchTimeoutId = setTimeout( + () => { + searchUsers( + term, + TeamStore.getCurrentId(), + {in_channel_id: this.props.channel.id}, + (users) => { + this.setState({search: true, users}); + } + ); + }, + Constants.SEARCH_TIMEOUT_MILLISECONDS ); } diff --git a/webapp/components/member_list_team.jsx b/webapp/components/member_list_team.jsx index 768129f1c..a9db0e734 100644 --- a/webapp/components/member_list_team.jsx +++ b/webapp/components/member_list_team.jsx @@ -27,6 +27,8 @@ export default class MemberListTeam extends React.Component { this.search = this.search.bind(this); this.loadComplete = this.loadComplete.bind(this); + this.searchTimeoutId = 0; + const stats = TeamStore.getCurrentStats(); this.state = { @@ -86,14 +88,21 @@ export default class MemberListTeam extends React.Component { return; } - searchUsers( - term, - TeamStore.getCurrentId(), - {}, - (users) => { - this.setState({loading: true, search: true, users, term, teamMembers: Object.assign([], TeamStore.getMembersInTeam())}); - loadTeamMembersForProfilesList(users, TeamStore.getCurrentId(), this.loadComplete); - } + clearTimeout(this.searchTimeoutId); + + this.searchTimeoutId = setTimeout( + () => { + searchUsers( + term, + TeamStore.getCurrentId(), + {}, + (users) => { + this.setState({loading: true, search: true, users, term, teamMembers: Object.assign([], TeamStore.getMembersInTeam())}); + loadTeamMembersForProfilesList(users, TeamStore.getCurrentId(), this.loadComplete); + } + ); + }, + Constants.SEARCH_TIMEOUT_MILLISECONDS ); } diff --git a/webapp/components/more_channels.jsx b/webapp/components/more_channels.jsx index d8ba95bdf..b9b841ad8 100644 --- a/webapp/components/more_channels.jsx +++ b/webapp/components/more_channels.jsx @@ -1,8 +1,6 @@ // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved. // See License.txt for license information. -import $ from 'jquery'; -import NewChannelFlow from './new_channel_flow.jsx'; import SearchableChannelList from './searchable_channel_list.jsx'; import ChannelStore from 'stores/channel_store.jsx'; @@ -13,11 +11,11 @@ import Constants from 'utils/constants.jsx'; import * as AsyncClient from 'utils/async_client.jsx'; import {joinChannel, searchMoreChannels} from 'actions/channel_actions.jsx'; -import {FormattedMessage} from 'react-intl'; -import {browserHistory} from 'react-router/es6'; - import React from 'react'; import PureRenderMixin from 'react-addons-pure-render-mixin'; +import {Modal} from 'react-bootstrap'; +import {FormattedMessage} from 'react-intl'; +import {browserHistory} from 'react-router/es6'; const CHANNELS_CHUNK_SIZE = 50; const CHANNELS_PER_PAGE = 50; @@ -29,7 +27,8 @@ export default class MoreChannels extends React.Component { this.onChange = this.onChange.bind(this); this.handleJoin = this.handleJoin.bind(this); - this.handleNewChannel = this.handleNewChannel.bind(this); + this.handleHide = this.handleHide.bind(this); + this.handleExit = this.handleExit.bind(this); this.nextPage = this.nextPage.bind(this); this.search = this.search.bind(this); @@ -38,8 +37,7 @@ export default class MoreChannels extends React.Component { this.searchTimeoutId = 0; this.state = { - channelType: '', - showNewChannelModal: false, + show: true, search: false, channels: null, serverError: null @@ -47,23 +45,24 @@ export default class MoreChannels extends React.Component { } componentDidMount() { - const self = this; ChannelStore.addChangeListener(this.onChange); - - $(this.refs.modal).on('shown.bs.modal', () => { - AsyncClient.getMoreChannelsPage(0, CHANNELS_CHUNK_SIZE * 2); - }); - - $(this.refs.modal).on('show.bs.modal', (e) => { - const button = e.relatedTarget; - self.setState({channelType: $(button).attr('data-channeltype')}); - }); + AsyncClient.getMoreChannelsPage(0, CHANNELS_CHUNK_SIZE * 2); } componentWillUnmount() { ChannelStore.removeChangeListener(this.onChange); } + handleHide() { + this.setState({show: false}); + } + + handleExit() { + if (this.props.onModalDismissed) { + this.props.onModalDismissed(); + } + } + onChange(force) { if (this.state.search && !force) { return; @@ -83,11 +82,12 @@ export default class MoreChannels extends React.Component { joinChannel( channel, () => { - $(this.refs.modal).modal('hide'); browserHistory.push(TeamStore.getCurrentTeamRelativeUrl() + '/channels/' + channel.name); if (done) { done(); } + + this.handleHide(); }, (err) => { this.setState({serverError: err.message}); @@ -98,11 +98,6 @@ export default class MoreChannels extends React.Component { ); } - handleNewChannel() { - $(this.refs.modal).modal('hide'); - this.setState({showNewChannelModal: true}); - } - search(term) { if (term === '') { this.onChange(true); @@ -135,7 +130,7 @@ export default class MoreChannels extends React.Component { -

- -

- {createNewChannelButton} - this.setState({showNewChannelModal: false})} - /> - -
- - {serverError} -
- - - - + + + + + {createNewChannelButton} + + + + {serverError} + + ); } } + +MoreChannels.propTypes = { + onModalDismissed: React.PropTypes.func, + handleNewChannel: React.PropTypes.func +}; diff --git a/webapp/components/more_direct_channels.jsx b/webapp/components/more_direct_channels.jsx index 2d4780359..1b287b3b2 100644 --- a/webapp/components/more_direct_channels.jsx +++ b/webapp/components/more_direct_channels.jsx @@ -35,6 +35,8 @@ export default class MoreDirectChannels extends React.Component { this.nextPage = this.nextPage.bind(this); this.search = this.search.bind(this); + this.searchTimeoutId = 0; + this.state = { users: null, loadingDMChannel: -1, @@ -168,19 +170,26 @@ export default class MoreDirectChannels extends React.Component { teamId = TeamStore.getCurrentId(); } - searchUsers( - term, - teamId, - {}, - (users) => { - for (let i = 0; i < users.length; i++) { - if (users[i].id === UserStore.getCurrentId()) { - users.splice(i, 1); - break; + clearTimeout(this.searchTimeoutId); + + this.searchTimeoutId = setTimeout( + () => { + searchUsers( + term, + teamId, + {}, + (users) => { + for (let i = 0; i < users.length; i++) { + if (users[i].id === UserStore.getCurrentId()) { + users.splice(i, 1); + break; + } + } + this.setState({search: true, users}); } - } - this.setState({search: true, users}); - } + ); + }, + Constants.SEARCH_TIMEOUT_MILLISECONDS ); } diff --git a/webapp/components/needs_team.jsx b/webapp/components/needs_team.jsx index 014d6c93e..f8a774389 100644 --- a/webapp/components/needs_team.jsx +++ b/webapp/components/needs_team.jsx @@ -32,7 +32,6 @@ import GetPublicLinkModal from 'components/get_public_link_modal.jsx'; import GetTeamInviteLinkModal from 'components/get_team_invite_link_modal.jsx'; import EditPostModal from 'components/edit_post_modal.jsx'; import DeletePostModal from 'components/delete_post_modal.jsx'; -import MoreChannelsModal from 'components/more_channels.jsx'; import TeamSettingsModal from 'components/team_settings_modal.jsx'; import RemovedFromChannelModal from 'components/removed_from_channel_modal.jsx'; import ImportThemeModal from 'components/user_settings/import_theme_modal.jsx'; @@ -181,7 +180,6 @@ export default class NeedsTeam extends React.Component { - diff --git a/webapp/components/searchable_channel_list.jsx b/webapp/components/searchable_channel_list.jsx index 4a7f90455..afd113975 100644 --- a/webapp/components/searchable_channel_list.jsx +++ b/webapp/components/searchable_channel_list.jsx @@ -167,7 +167,7 @@ export default class SearchableChannelList extends React.Component { return (
-
+
-
+
-
- -
{count}
diff --git a/webapp/components/sidebar.jsx b/webapp/components/sidebar.jsx index 1145c8ab3..fcfa9496c 100644 --- a/webapp/components/sidebar.jsx +++ b/webapp/components/sidebar.jsx @@ -5,6 +5,7 @@ import $ from 'jquery'; import ReactDOM from 'react-dom'; import NewChannelFlow from './new_channel_flow.jsx'; import MoreDirectChannels from './more_direct_channels.jsx'; +import MoreChannels from 'components/more_channels.jsx'; import SidebarHeader from './sidebar_header.jsx'; import UnreadChannelIndicator from './unread_channel_indicator.jsx'; import TutorialTip from './tutorial/tutorial_tip.jsx'; @@ -19,7 +20,6 @@ import * as AsyncClient from 'utils/async_client.jsx'; import * as Utils from 'utils/utils.jsx'; import * as ChannelUtils from 'utils/channel_utils.jsx'; import * as ChannelActions from 'actions/channel_actions.jsx'; -import * as UserAgent from 'utils/user_agent.jsx'; import Constants from 'utils/constants.jsx'; @@ -53,6 +53,7 @@ export default class Sidebar extends React.Component { this.handleLeaveDirectChannel = this.handleLeaveDirectChannel.bind(this); this.showMoreChannelsModal = this.showMoreChannelsModal.bind(this); + this.hideMoreChannelsModal = this.hideMoreChannelsModal.bind(this); this.showNewChannelModal = this.showNewChannelModal.bind(this); this.hideNewChannelModal = this.hideNewChannelModal.bind(this); this.showMoreDirectChannelsModal = this.showMoreDirectChannelsModal.bind(this); @@ -72,6 +73,7 @@ export default class Sidebar extends React.Component { const state = this.getStateFromStores(); state.newChannelModalType = ''; state.showDirectChannelsModal = false; + state.showMoreChannelsModal = false; state.loadingDMChannel = -1; this.state = state; } @@ -340,13 +342,11 @@ export default class Sidebar extends React.Component { } showMoreChannelsModal() { - // manually show the modal because using data-toggle messes with keyboard focus when the modal is dismissed - $('#more_channels').modal({'data-channeltype': 'O'}).modal('show'); - $('#more_channels').on('shown.bs.modal', () => { - if (!UserAgent.isMobile()) { - $('#more_channels input').focus(); - } - }); + this.setState({showMoreChannelsModal: true}); + } + + hideMoreChannelsModal() { + this.setState({showMoreChannelsModal: false}); } showNewChannelModal(type) { @@ -552,6 +552,7 @@ export default class Sidebar extends React.Component { ); } + render() { // Check if we have all info needed to render if (this.state.currentTeam == null || this.state.currentUser == null) { @@ -721,12 +722,24 @@ export default class Sidebar extends React.Component { if (this.state.showDirectChannelsModal) { moreDirectChannelsModal = ( ); } + let moreChannelsModal; + if (this.state.showMoreChannelsModal) { + moreChannelsModal = ( + { + this.hideMoreChannelsModal(); + this.showNewChannelModal(Constants.OPEN_CHANNEL); + }} + /> + ); + } + return (
{moreDirectChannelsModal} + {moreChannelsModal} .dropdown-menu__content { @@ -1329,10 +1336,13 @@ @media screen and (max-width: 550px) { .app__body { .more-modal { + .filter-row { + width: 100%; + } + &.more-direct-channels { .filter-row { padding-bottom: 50px; - width: 100%; } .member-show { @@ -1391,22 +1401,6 @@ } .app__body { - .more-modal { - .modal-body { - padding-bottom: 5px; - } - - .more-modal__list { - max-height: calc(100vh - 260px); - } - - &.more-direct-channels { - .more-modal__list { - max-height: calc(100vh - 295px); - } - } - } - .modal { &.more-channel__modal { .more-modal__list { diff --git a/webapp/stores/channel_store.jsx b/webapp/stores/channel_store.jsx index 0e2c43a60..af7238267 100644 --- a/webapp/stores/channel_store.jsx +++ b/webapp/stores/channel_store.jsx @@ -4,6 +4,8 @@ import AppDispatcher from '../dispatcher/app_dispatcher.jsx'; import EventEmitter from 'events'; +import TeamStore from 'stores/team_store.jsx'; + var Utils; import {ActionTypes, Constants} from 'utils/constants.jsx'; const NotificationPrefs = Constants.NotificationPrefs; @@ -233,24 +235,25 @@ class ChannelStoreClass extends EventEmitter { return this.myChannelMembers; } - storeMoreChannels(channels) { + storeMoreChannels(channels, teamId = TeamStore.getCurrentId()) { const newChannels = {}; for (let i = 0; i < channels.length; i++) { newChannels[channels[i].id] = channels[i]; } - this.moreChannels = Object.assign({}, this.moreChannels, newChannels); + this.moreChannels[teamId] = Object.assign({}, this.moreChannels[teamId], newChannels); } - removeMoreChannel(channelId) { - Reflect.deleteProperty(this.moreChannels, channelId); + removeMoreChannel(channelId, teamId = TeamStore.getCurrentId()) { + Reflect.deleteProperty(this.moreChannels[teamId], channelId); } - getMoreChannels() { - return Object.assign({}, this.moreChannels); + getMoreChannels(teamId = TeamStore.getCurrentId()) { + return Object.assign({}, this.moreChannels[teamId]); } - getMoreChannelsList() { - return Object.keys(this.moreChannels).map((cid) => this.moreChannels[cid]); + getMoreChannelsList(teamId = TeamStore.getCurrentId()) { + const teamChannels = this.moreChannels[teamId] || {}; + return Object.keys(teamChannels).map((cid) => teamChannels[cid]); } storeStats(stats) { diff --git a/webapp/utils/constants.jsx b/webapp/utils/constants.jsx index 94fa19ea9..40d3482d6 100644 --- a/webapp/utils/constants.jsx +++ b/webapp/utils/constants.jsx @@ -863,7 +863,8 @@ export const Constants = { MENTION_SPECIAL: 'mention.special', DEFAULT_NOTIFICATION_DURATION: 5000, STATUS_INTERVAL: 60000, - AUTOCOMPLETE_TIMEOUT: 100 + AUTOCOMPLETE_TIMEOUT: 100, + SEARCH_TIMEOUT_MILLISECONDS: 100 }; export default Constants; -- cgit v1.2.3-1-g7c22