+
+ );
+ }
+
+ nextPage(e) {
+ e.preventDefault();
+ this.setState({page: this.state.page + 1, nextDisabled: true});
+ this.nextTimeoutId = setTimeout(() => this.setState({nextDisabled: false}), NEXT_BUTTON_TIMEOUT_MILLISECONDS);
+ this.props.nextPage(this.state.page + 1);
+ }
+
+ previousPage(e) {
+ e.preventDefault();
+ this.setState({page: this.state.page - 1});
+ }
+
+ doSearch() {
+ const term = this.refs.filter.value;
+ this.props.search(term);
+ if (term === '') {
+ this.setState({page: 0});
+ }
+ }
+
+ render() {
+ const channels = this.props.channels;
+ let listContent;
+ let nextButton;
+ let previousButton;
+
+ if (channels == null) {
+ listContent =
+
+ {channel.display_name}
+{channel.purpose}
+
+ {joinButton}
+
+
+
+ );
+ } else {
+ const pageStart = this.state.page * this.props.channelsPerPage;
+ const pageEnd = pageStart + this.props.channelsPerPage;
+ const channelsToDisplay = this.props.channels.slice(pageStart, pageEnd);
+ listContent = channelsToDisplay.map(this.createChannelRow);
+
+ if (channelsToDisplay.length >= this.props.channelsPerPage) {
+ nextButton = (
+
+ );
+ }
+
+ if (this.state.page > 0) {
+ previousButton = (
+
+ );
+ }
+ }
+
+ return (
+
+
+
+ );
+ }
+}
+
+SearchableChannelList.defaultProps = {
+ channels: []
+};
+
+SearchableChannelList.propTypes = {
+ channels: React.PropTypes.arrayOf(React.PropTypes.object),
+ channelsPerPage: React.PropTypes.number,
+ nextPage: React.PropTypes.func.isRequired,
+ search: React.PropTypes.func.isRequired,
+ handleJoin: React.PropTypes.func.isRequired,
+ noResultsText: React.PropTypes.object
+};
diff --git a/webapp/components/suggestion/channel_mention_provider.jsx b/webapp/components/suggestion/channel_mention_provider.jsx
index d804332716..c644d1a9f5 100644
--- a/webapp/components/suggestion/channel_mention_provider.jsx
+++ b/webapp/components/suggestion/channel_mention_provider.jsx
@@ -1,15 +1,16 @@
// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
// See License.txt for license information.
-import React from 'react';
-
-import SuggestionStore from 'stores/suggestion_store.jsx';
-import ChannelStore from 'stores/channel_store.jsx';
-import Constants from 'utils/constants.jsx';
-
import Suggestion from './suggestion.jsx';
-const MaxChannelSuggestions = 40;
+import {autocompleteChannels} from 'actions/channel_actions.jsx';
+
+import ChannelStore from 'stores/channel_store.jsx';
+
+import AppDispatcher from 'dispatcher/app_dispatcher.jsx';
+import {Constants, ActionTypes} from 'utils/constants.jsx';
+
+import React from 'react';
class ChannelMentionSuggestion extends Suggestion {
render() {
@@ -48,84 +49,71 @@ class ChannelMentionSuggestion extends Suggestion {
}
}
-function filterChannelsByPrefix(channels, prefix, limit) {
- const filtered = [];
-
- for (const id of Object.keys(channels)) {
- if (filtered.length >= limit) {
- break;
- }
-
- const channel = channels[id];
-
- if (channel.delete_at > 0) {
- continue;
- }
-
- if (channel.display_name.toLowerCase().startsWith(prefix) || channel.name.startsWith(prefix)) {
- filtered.push(channel);
- }
+export default class ChannelMentionProvider {
+ constructor() {
+ this.timeoutId = '';
}
- return filtered;
-}
+ componentWillUnmount() {
+ clearTimeout(this.timeoutId);
+ }
-export default class ChannelMentionProvider {
handlePretextChanged(suggestionId, pretext) {
const captured = (/(^|\s)(~([^~]*))$/i).exec(pretext.toLowerCase());
if (captured) {
const prefix = captured[3];
- const channels = ChannelStore.getAll();
- const moreChannels = ChannelStore.getMoreAll();
+ function autocomplete() {
+ autocompleteChannels(
+ prefix,
+ (data) => {
+ const channels = data;
- // Remove private channels from the list.
- const publicChannels = channels.filter((channel) => {
- return channel.type === 'O';
- });
+ // Wrap channels in an outer object to avoid overwriting the 'type' property.
+ const wrappedChannels = [];
+ const wrappedMoreChannels = [];
+ const moreChannels = [];
+ channels.forEach((item) => {
+ if (ChannelStore.get(item.id)) {
+ wrappedChannels.push({
+ type: Constants.MENTION_CHANNELS,
+ channel: item
+ });
+ return;
+ }
- // Filter channels by prefix.
- const filteredChannels = filterChannelsByPrefix(
- publicChannels, prefix, MaxChannelSuggestions);
- const filteredMoreChannels = filterChannelsByPrefix(
- moreChannels, prefix, MaxChannelSuggestions - filteredChannels.length);
+ wrappedMoreChannels.push({
+ type: Constants.MENTION_MORE_CHANNELS,
+ channel: item
+ });
- // Sort channels by display name.
- [filteredChannels, filteredMoreChannels].forEach((items) => {
- items.sort((a, b) => {
- const aPrefix = a.display_name.startsWith(prefix);
- const bPrefix = b.display_name.startsWith(prefix);
+ moreChannels.push(item);
+ });
- if (aPrefix === bPrefix) {
- return a.display_name.localeCompare(b.display_name);
- } else if (aPrefix) {
- return -1;
+ const wrapped = wrappedChannels.concat(wrappedMoreChannels);
+ const mentions = wrapped.map((item) => '~' + item.channel.name);
+
+ AppDispatcher.handleServerAction({
+ type: ActionTypes.RECEIVED_MORE_CHANNELS,
+ channels: moreChannels
+ });
+
+ AppDispatcher.handleServerAction({
+ type: ActionTypes.SUGGESTION_RECEIVED_SUGGESTIONS,
+ id: suggestionId,
+ matchedPretext: captured[2],
+ terms: mentions,
+ items: wrapped,
+ component: ChannelMentionSuggestion
+ });
}
+ );
+ }
- return 1;
- });
- });
-
- // Wrap channels in an outer object to avoid overwriting the 'type' property.
- const wrappedChannels = filteredChannels.map((item) => {
- return {
- type: Constants.MENTION_CHANNELS,
- channel: item
- };
- });
- const wrappedMoreChannels = filteredMoreChannels.map((item) => {
- return {
- type: Constants.MENTION_MORE_CHANNELS,
- channel: item
- };
- });
-
- const wrapped = wrappedChannels.concat(wrappedMoreChannels);
-
- const mentions = wrapped.map((item) => '~' + item.channel.name);
-
- SuggestionStore.clearSuggestions(suggestionId);
- SuggestionStore.addSuggestions(suggestionId, mentions, wrapped, ChannelMentionSuggestion, captured[2]);
+ this.timeoutId = setTimeout(
+ autocomplete.bind(this),
+ Constants.AUTOCOMPLETE_TIMEOUT
+ );
}
}
}
diff --git a/webapp/components/suggestion/search_channel_provider.jsx b/webapp/components/suggestion/search_channel_provider.jsx
index 0f07b6e290..66011af9f0 100644
--- a/webapp/components/suggestion/search_channel_provider.jsx
+++ b/webapp/components/suggestion/search_channel_provider.jsx
@@ -1,13 +1,16 @@
// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
// See License.txt for license information.
-import React from 'react';
+import Suggestion from './suggestion.jsx';
+
+import {autocompleteChannels} from 'actions/channel_actions.jsx';
import ChannelStore from 'stores/channel_store.jsx';
-import Constants from 'utils/constants.jsx';
-import SuggestionStore from 'stores/suggestion_store.jsx';
-import Suggestion from './suggestion.jsx';
+import AppDispatcher from 'dispatcher/app_dispatcher.jsx';
+import {Constants, ActionTypes} from 'utils/constants.jsx';
+
+import React from 'react';
class SearchChannelSuggestion extends Suggestion {
render() {
@@ -30,37 +33,64 @@ class SearchChannelSuggestion extends Suggestion {
}
export default class SearchChannelProvider {
+ constructor() {
+ this.timeoutId = '';
+ }
+
+ componentWillUnmount() {
+ clearTimeout(this.timeoutId);
+ }
+
handlePretextChanged(suggestionId, pretext) {
const captured = (/\b(?:in|channel):\s*(\S*)$/i).exec(pretext.toLowerCase());
if (captured) {
const channelPrefix = captured[1];
- const channels = ChannelStore.getAll();
- const publicChannels = [];
- const privateChannels = [];
+ function autocomplete() {
+ autocompleteChannels(
+ channelPrefix,
+ (data) => {
+ const publicChannels = data;
- for (const id of Object.keys(channels)) {
- const channel = channels[id];
+ const localChannels = ChannelStore.getAll();
+ const privateChannels = [];
- // don't show direct channels
- if (channel.type !== Constants.DM_CHANNEL && channel.name.startsWith(channelPrefix)) {
- if (channel.type === Constants.OPEN_CHANNEL) {
- publicChannels.push(channel);
- } else {
- privateChannels.push(channel);
+ for (const id of Object.keys(localChannels)) {
+ const channel = localChannels[id];
+ if (channel.name.startsWith(channelPrefix) && channel.type === Constants.PRIVATE_CHANNEL) {
+ privateChannels.push(channel);
+ }
+ }
+
+ const filteredPublicChannels = [];
+ publicChannels.forEach((item) => {
+ if (item.name.startsWith(channelPrefix)) {
+ filteredPublicChannels.push(item);
+ }
+ });
+
+ privateChannels.sort((a, b) => a.name.localeCompare(b.name));
+ filteredPublicChannels.sort((a, b) => a.name.localeCompare(b.name));
+
+ const channels = filteredPublicChannels.concat(privateChannels);
+ const channelNames = channels.map((channel) => channel.name);
+
+ AppDispatcher.handleServerAction({
+ type: ActionTypes.SUGGESTION_RECEIVED_SUGGESTIONS,
+ id: suggestionId,
+ matchedPretext: channelPrefix,
+ terms: channelNames,
+ items: channels,
+ component: SearchChannelSuggestion
+ });
}
- }
+ );
}
- publicChannels.sort((a, b) => a.name.localeCompare(b.name));
- const publicChannelNames = publicChannels.map((channel) => channel.name);
-
- privateChannels.sort((a, b) => a.name.localeCompare(b.name));
- const privateChannelNames = privateChannels.map((channel) => channel.name);
-
- SuggestionStore.clearSuggestions(suggestionId);
- SuggestionStore.addSuggestions(suggestionId, publicChannelNames, publicChannels, SearchChannelSuggestion, channelPrefix);
- SuggestionStore.addSuggestions(suggestionId, privateChannelNames, privateChannels, SearchChannelSuggestion, channelPrefix);
+ this.timeoutId = setTimeout(
+ autocomplete.bind(this),
+ Constants.AUTOCOMPLETE_TIMEOUT
+ );
}
}
}
diff --git a/webapp/stores/channel_store.jsx b/webapp/stores/channel_store.jsx
index d578a5d294..0e2c43a605 100644
--- a/webapp/stores/channel_store.jsx
+++ b/webapp/stores/channel_store.jsx
@@ -234,11 +234,23 @@ class ChannelStoreClass extends EventEmitter {
}
storeMoreChannels(channels) {
- this.moreChannels = channels;
+ const newChannels = {};
+ for (let i = 0; i < channels.length; i++) {
+ newChannels[channels[i].id] = channels[i];
+ }
+ this.moreChannels = Object.assign({}, this.moreChannels, newChannels);
+ }
+
+ removeMoreChannel(channelId) {
+ Reflect.deleteProperty(this.moreChannels, channelId);
}
getMoreChannels() {
- return this.moreChannels;
+ return Object.assign({}, this.moreChannels);
+ }
+
+ getMoreChannelsList() {
+ return Object.keys(this.moreChannels).map((cid) => this.moreChannels[cid]);
}
storeStats(stats) {
diff --git a/webapp/tests/client_channel.test.jsx b/webapp/tests/client_channel.test.jsx
index b7fa57dc89..e8466021f0 100644
--- a/webapp/tests/client_channel.test.jsx
+++ b/webapp/tests/client_channel.test.jsx
@@ -271,6 +271,52 @@ describe('Client.Channels', function() {
});
});
+ it('getMoreChannelsPage', function(done) {
+ TestHelper.initBasic(() => {
+ TestHelper.basicClient().getMoreChannelsPage(
+ 0,
+ 100,
+ function(data) {
+ assert.equal(data.length, 0);
+ done();
+ },
+ function(err) {
+ done(new Error(err.message));
+ }
+ );
+ });
+ });
+
+ it('searchMoreChannels', function(done) {
+ TestHelper.initBasic(() => {
+ TestHelper.basicClient().searchMoreChannels(
+ 'blargh',
+ function(data) {
+ assert.equal(data.length, 0);
+ done();
+ },
+ function(err) {
+ done(new Error(err.message));
+ }
+ );
+ });
+ });
+
+ it('autocompleteChannels', function(done) {
+ TestHelper.initBasic(() => {
+ TestHelper.basicClient().autocompleteChannels(
+ TestHelper.basicChannel().name,
+ function(data) {
+ assert.equal(data != null, true);
+ done();
+ },
+ function(err) {
+ done(new Error(err.message));
+ }
+ );
+ });
+ });
+
it('getChannelCounts', function(done) {
TestHelper.initBasic(() => {
TestHelper.basicClient().getChannelCounts(
diff --git a/webapp/utils/async_client.jsx b/webapp/utils/async_client.jsx
index 71fbc8db0a..d41b2ddf7d 100644
--- a/webapp/utils/async_client.jsx
+++ b/webapp/utils/async_client.jsx
@@ -239,6 +239,30 @@ export function getMoreChannels(force) {
}
}
+export function getMoreChannelsPage(offset, limit) {
+ if (isCallInProgress('getMoreChannelsPage')) {
+ return;
+ }
+
+ callTracker.getMoreChannelsPage = utils.getTimestamp();
+ Client.getMoreChannelsPage(
+ offset,
+ limit,
+ (data) => {
+ callTracker.getMoreChannelsPage = 0;
+
+ AppDispatcher.handleServerAction({
+ type: ActionTypes.RECEIVED_MORE_CHANNELS,
+ channels: data
+ });
+ },
+ (err) => {
+ callTracker.getMoreChannelsPage = 0;
+ dispatchError(err, 'getMoreChannelsPage');
+ }
+ );
+}
+
export function getChannelStats(channelId = ChannelStore.getCurrentId(), doVersionCheck = false) {
if (isCallInProgress('getChannelStats' + channelId) || channelId == null) {
return;
+
+
+
+
+
+ {listContent}
+
+
+ {previousButton}
+ {nextButton}
+
+