From 981ea33b8e10456bc279f36235c814305d01b243 Mon Sep 17 00:00:00 2001 From: Joram Wilander Date: Thu, 24 Nov 2016 09:35:09 -0500 Subject: PLT-4403 Add server-based channel autocomplete, search and paging (#4585) * Add more channel paging API * Add channel paging support to client * Add DB channel search functions * Add API for searching more channels * Add more channel search functionality to client * Add API for autocompleting channels * Add channel autocomplete functionality to the client * Move to be deprecated APIs to their own file * Final clean-up * Fixes related to feedback * Localization changes * Add unit as suffix to timeout constants --- webapp/components/filtered_channel_list.jsx | 180 ---------------------------- 1 file changed, 180 deletions(-) delete mode 100644 webapp/components/filtered_channel_list.jsx (limited to 'webapp/components/filtered_channel_list.jsx') diff --git a/webapp/components/filtered_channel_list.jsx b/webapp/components/filtered_channel_list.jsx deleted file mode 100644 index 64d033bc5..000000000 --- a/webapp/components/filtered_channel_list.jsx +++ /dev/null @@ -1,180 +0,0 @@ -// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved. -// See License.txt for license information. - -import $ from 'jquery'; -import ReactDOM from 'react-dom'; -import * as UserAgent from 'utils/user_agent.jsx'; - -import {localizeMessage} from 'utils/utils.jsx'; -import {FormattedMessage} from 'react-intl'; - -import React from 'react'; -import loadingGif from 'images/load.gif'; - -export default class FilteredChannelList extends React.Component { - constructor(props) { - super(props); - - this.handleFilterChange = this.handleFilterChange.bind(this); - this.createChannelRow = this.createChannelRow.bind(this); - this.filterChannels = this.filterChannels.bind(this); - - this.state = { - filter: '', - joiningChannel: '', - channels: this.filterChannels(props.channels) - }; - } - - componentWillReceiveProps(nextProps) { - // assume the channel list is immutable - if (this.props.channels !== nextProps.channels) { - this.setState({ - channels: this.filterChannels(nextProps.channels) - }); - } - } - - componentDidMount() { - // only focus the search box on desktop so that we don't cause the keyboard to open on mobile - if (!UserAgent.isMobile()) { - ReactDOM.findDOMNode(this.refs.filter).focus(); - } - } - - componentDidUpdate(prevProps, prevState) { - if (prevState.filter !== this.state.filter) { - $(ReactDOM.findDOMNode(this.refs.channelList)).scrollTop(0); - } - } - - handleJoin(channel) { - this.setState({joiningChannel: channel.id}); - this.props.handleJoin( - channel, - () => { - this.setState({joiningChannel: ''}); - }); - } - - createChannelRow(channel) { - let joinButton; - if (this.state.joiningChannel === channel.id) { - joinButton = ( - - ); - } else { - joinButton = ( - - ); - } - - return ( -
-
-

{channel.display_name}

-

{channel.purpose}

-
-
- {joinButton} -
-
- ); - } - - filterChannels(channels) { - if (!this.state || !this.state.filter) { - return channels; - } - - return channels.filter((chan) => { - const filter = this.state.filter.toLowerCase(); - return Boolean((chan.name.toLowerCase().indexOf(filter) !== -1 || chan.display_name.toLowerCase().indexOf(filter) !== -1) && chan.delete_at === 0); - }); - } - - handleFilterChange(e) { - this.setState({ - filter: e.target.value - }); - } - - render() { - let channels = this.state.channels; - - if (this.state.filter && this.state.filter.length > 0) { - channels = this.filterChannels(channels); - } - - let count; - if (channels.length === this.props.channels.length) { - count = ( - - ); - } else { - count = ( - - ); - } - - return ( -
-
-
- -
-
- {count} -
-
-
- {channels.map(this.createChannelRow)} -
-
- ); - } -} - -FilteredChannelList.defaultProps = { - channels: [] -}; - -FilteredChannelList.propTypes = { - channels: React.PropTypes.arrayOf(React.PropTypes.object), - handleJoin: React.PropTypes.func.isRequired -}; -- cgit v1.2.3-1-g7c22