diff options
Diffstat (limited to 'web/react')
-rw-r--r-- | web/react/components/more_direct_channels.jsx | 32 | ||||
-rw-r--r-- | web/react/components/sidebar.jsx | 229 | ||||
-rw-r--r-- | web/react/stores/preference_store.jsx | 9 | ||||
-rw-r--r-- | web/react/utils/async_client.jsx | 24 | ||||
-rw-r--r-- | web/react/utils/client.jsx | 13 |
5 files changed, 143 insertions, 164 deletions
diff --git a/web/react/components/more_direct_channels.jsx b/web/react/components/more_direct_channels.jsx index 31ecb4c5d..fc720e928 100644 --- a/web/react/components/more_direct_channels.jsx +++ b/web/react/components/more_direct_channels.jsx @@ -1,10 +1,10 @@ // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved. // See License.txt for license information. -var ChannelStore = require('../stores/channel_store.jsx'); var TeamStore = require('../stores/team_store.jsx'); var Client = require('../utils/client.jsx'); var AsyncClient = require('../utils/async_client.jsx'); +var PreferenceStore = require('../stores/preference_store.jsx'); var utils = require('../utils/utils.jsx'); export default class MoreDirectChannels extends React.Component { @@ -22,16 +22,32 @@ export default class MoreDirectChannels extends React.Component { }); } + handleJoinDirectChannel(channel) { + const preference = PreferenceStore.setPreferenceWithAltId('direct_channels', 'show_hide', channel.teammate_id, 'true'); + AsyncClient.setPreferences([preference]); + } + render() { var self = this; - var directMessageItems = this.state.channels.map(function mapActivityToChannel(channel, index) { + var directMessageItems = this.state.channels.map((channel, index) => { var badge = ''; var titleClass = ''; - var active = ''; var handleClick = null; - if (channel.fake) { + if (!channel.fake) { + if (channel.unread) { + badge = <span className='badge pull-right small'>{channel.unread}</span>; + titleClass = 'unread-title'; + } + + handleClick = (e) => { + e.preventDefault(); + this.handleJoinDirectChannel(channel); + utils.switchChannel(channel); + $(React.findDOMNode(self.refs.modal)).modal('hide'); + }; + } else { // It's a direct message channel that doesn't exist yet so let's create it now var otherUserId = utils.getUserIdFromChannelName(channel); @@ -45,9 +61,10 @@ export default class MoreDirectChannels extends React.Component { } if (self.state.loadingDMChannel === -1) { - handleClick = function clickHandler(e) { + handleClick = (e) => { e.preventDefault(); self.setState({loadingDMChannel: index}); + this.handleJoinDirectChannel(channel); Client.createDirectChannel(channel, otherUserId, function success(data) { @@ -81,10 +98,7 @@ export default class MoreDirectChannels extends React.Component { } return ( - <li - key={channel.name} - className={active} - > + <li key={channel.name}> <a className={'sidebar-channel ' + titleClass} href='#' diff --git a/web/react/components/sidebar.jsx b/web/react/components/sidebar.jsx index 115e9c9c6..449a3eaea 100644 --- a/web/react/components/sidebar.jsx +++ b/web/react/components/sidebar.jsx @@ -25,12 +25,12 @@ export default class Sidebar extends React.Component { this.lastUnreadChannel = null; this.getStateFromStores = this.getStateFromStores.bind(this); - //this.getDirectChannelsFromStores = this.getDirectChannelsFromStores.bind(this); this.onChange = this.onChange.bind(this); this.onScroll = this.onScroll.bind(this); this.onResize = this.onResize.bind(this); this.updateUnreadIndicators = this.updateUnreadIndicators.bind(this); + this.handleLeaveDirectChannel = this.handleLeaveDirectChannel.bind(this); this.createChannelElement = this.createChannelElement.bind(this); const state = this.getStateFromStores(); @@ -73,44 +73,19 @@ export default class Sidebar extends React.Component { let channel = ChannelStore.getByName(channelName); - if (channel == null) { - var tempChannel = {}; - tempChannel.fake = true; - tempChannel.name = channelName; - tempChannel.display_name = teammate.username; - tempChannel.teammate_username = teammate.username; - tempChannel.status = UserStore.getStatus(teammate.id); - tempChannel.last_post_at = 0; - tempChannel.total_msg_count = 0; - tempChannel.type = 'D'; - readDirectChannels.push(tempChannel); - } else { - channel.display_name = teammate.username; - channel.teammate_username = teammate.username; - - channel.status = UserStore.getStatus(teammate.id); - - /*var channelMember = members[channel.id]; - var msgCount = channel.total_msg_count - channelMember.msg_count; - if (msgCount > 0) { - visibleDirectChannels.push(channel); - } else if (currentId === channel.id) { - visibleDirectChannels.push(channel); - } else { - hiddenDirectChannels.push(channel); - }*/ - } else { + if (!channel) { channel = {}; channel.fake = true; channel.name = channelName; - channel.display_name = teammate.username; - channel.teammate_username = teammate.username; - channel.status = UserStore.getStatus(teammate.id); channel.last_post_at = 0; channel.total_msg_count = 0; channel.type = 'D'; } + channel.display_name = teammate.username; + channel.teammate_id = teammate.id; + channel.status = UserStore.getStatus(teammate.id); + if (preferences.some((preference) => (preference.alt_id === teammate.id && preference.value !== 'false'))) { visibleDirectChannels.push(channel); } else { @@ -118,51 +93,8 @@ export default class Sidebar extends React.Component { } } - function sortByDisplayName(a, b) { - return a.display_name.localeCompare(b.display_name); - } - - visibleDirectChannels.sort(sortByDisplayName); - hiddenDirectChannels.sort(sortByDisplayName); - - /*// If we don't have MAX_DMS unread channels, sort the read list by last_post_at - if (visibleDirectChannels.length < Constants.MAX_DMS) { - hiddenDirectChannels.sort(function sortByLastPost(a, b) { - // sort by last_post_at first - if (a.last_post_at > b.last_post_at) { - return -1; - } - if (a.last_post_at < b.last_post_at) { - return 1; - } - - // if last_post_at is equal, sort by name - if (a.display_name < b.display_name) { - return -1; - } - if (a.display_name > b.display_name) { - return 1; - } - return 0; - }); - - var index = 0; - while (visibleDirectChannels.length < Constants.MAX_DMS && index < hiddenDirectChannels.length) { - visibleDirectChannels.push(hiddenDirectChannels[index]); - index++; - } - hiddenDirectChannels = hiddenDirectChannels.slice(index); - - visibleDirectChannels.sort(function directSort(a, b) { - if (a.display_name < b.display_name) { - return -1; - } - if (a.display_name > b.display_name) { - return 1; - } - return 0; - }); - }*/ + visibleDirectChannels.sort(this.sortChannelsByDisplayName); + hiddenDirectChannels.sort(this.sortChannelsByDisplayName); return { activeId: currentId, @@ -173,63 +105,6 @@ export default class Sidebar extends React.Component { }; } - /*getDirectChannelsFromStores() { - const id = UserStore.getCurrentId(); - - const channels = []; - const preferences = PreferenceStore.getPreferences('direct_channels', 'show_hide'); - for (const preference of preferences) { - if (preference.value !== 'true') { - continue; - } - - const otherId = preference.alt_id; - - if (otherId === id) { - continue; - } - - const teammate = UserStore.getProfile(otherId); - - if (!teammate) { - continue; - } - - let channelName = ''; - if (otherId > id) { - channelName = `${id}__${otherId}`; - } else { - channelName = `${otherId}__${id}`; - } - - const channel = ChannelStore.getByName(channelName); - - if (channel != null) { - channel.display_name = teammate.username; - channel.teammate_username = teammate.username; - - channel.status = UserStore.getStatus(otherId); - - channels.push(channel); - } else { - const tempChannel = {}; - tempChannel.fake = true; - tempChannel.name = channelName; - tempChannel.display_name = teammate.username; - tempChannel.teammate_username = teammate.username; - tempChannel.status = UserStore.getStatus(teammate.id); - tempChannel.last_post_at = 0; - tempChannel.total_msg_count = 0; - tempChannel.type = 'D'; - channels.push(tempChannel); - } - } - - channels.sort((a, b) => a.display_name.localeCompare(b)); - - return channels; - }*/ - componentDidMount() { ChannelStore.addChangeListener(this.onChange); UserStore.addChangeListener(this.onChange); @@ -414,7 +289,35 @@ export default class Sidebar extends React.Component { showBottomUnread }); } - createChannelElement(channel, index) { + + handleLeaveDirectChannel(channel) { + if (!channel.leaving) { + channel.leaving = true; + + const preference = PreferenceStore.setPreferenceWithAltId('direct_channels', 'show_hide', channel.teammate_id, 'false'); + AsyncClient.setPreferences( + [preference], + () => { + channel.leaving = false; + }, + () => { + channel.leaving = false; + } + ); + + this.setState(this.getStateFromStores()); + } + + if (channel.id === this.state.activeId) { + Utils.switchChannel(ChannelStore.getByName(Constants.DEFAULT_CHANNEL)); + } + } + + sortChannelsByDisplayName(a, b) { + return a.display_name.localeCompare(b.display_name); + } + + createChannelElement(channel, index, arr, handleClose) { var members = this.state.members; var activeId = this.state.activeId; var channelMember = members[channel.id]; @@ -497,8 +400,13 @@ export default class Sidebar extends React.Component { if (!channel.fake) { handleClick = function clickHandler(e) { + if (!e.target.attributes.getNamedItem('data-close')) { + Utils.switchChannel(channel); + } else { + handleClose(channel); + } + e.preventDefault(); - Utils.switchChannel(channel); }; } else if (channel.fake && teamURL) { // It's a direct message channel that doesn't exist yet so let's create it now @@ -507,23 +415,40 @@ export default class Sidebar extends React.Component { if (this.state.loadingDMChannel === -1) { handleClick = function clickHandler(e) { e.preventDefault(); - this.setState({loadingDMChannel: index}); - - Client.createDirectChannel(channel, otherUserId, - function success(data) { - this.setState({loadingDMChannel: -1}); - AsyncClient.getChannel(data.id); - Utils.switchChannel(data); - }.bind(this), - function error() { - this.setState({loadingDMChannel: -1}); - window.location.href = TeamStore.getCurrentTeamUrl() + '/channels/' + channel.name; - }.bind(this) - ); + + if (!e.target.attributes.getNamedItem('data-close')) { + this.setState({loadingDMChannel: index}); + + Client.createDirectChannel(channel, otherUserId, + function success(data) { + this.setState({loadingDMChannel: -1}); + AsyncClient.getChannel(data.id); + Utils.switchChannel(data); + }.bind(this), + function error() { + this.setState({loadingDMChannel: -1}); + window.location.href = TeamStore.getCurrentTeamUrl() + '/channels/' + channel.name; + }.bind(this) + ); + } else { + handleClose(channel); + } }.bind(this); } } + let closeButton = null; + if (handleClose) { + closeButton = ( + <span + className='sidebar-channel__close' + data-close='true' + > + {'×'} + </span> + ); + } + return ( <li key={channel.name} @@ -538,6 +463,7 @@ export default class Sidebar extends React.Component { {status} {channel.display_name} {badge} + {closeButton} </a> </li> ); @@ -556,7 +482,9 @@ export default class Sidebar extends React.Component { const privateChannels = this.state.channels.filter((channel) => channel.type === 'P'); const privateChannelItems = privateChannels.map(this.createChannelElement); - const directMessageItems = this.state.visibleDirectChannels.map(this.createChannelElement); + const directMessageItems = this.state.visibleDirectChannels.map((channel, index, arr) => { + return this.createChannelElement(channel, index, arr, this.handleLeaveDirectChannel); + }); // update the favicon to show if there are any notifications var link = document.createElement('link'); @@ -578,8 +506,9 @@ export default class Sidebar extends React.Component { var directMessageMore = null; if (this.state.hiddenDirectChannels.length > 0) { directMessageMore = ( - <li> + <li key='more'> <a + key={`more${this.state.hiddenDirectChannels.length}`} href='#' data-toggle='modal' className='nav-more' diff --git a/web/react/stores/preference_store.jsx b/web/react/stores/preference_store.jsx index c13c61e1d..d731e7d27 100644 --- a/web/react/stores/preference_store.jsx +++ b/web/react/stores/preference_store.jsx @@ -75,13 +75,13 @@ class PreferenceStoreClass extends EventEmitter { } setPreference(category, name, value) { - this.setPreferenceWithAltId(category, name, '', value); + return this.setPreferenceWithAltId(category, name, '', value); } setPreferenceWithAltId(category, name, altId, value) { const preferences = this.getAllPreferences(); - const key = this.getKey(category, name); + const key = this.getKey(category, name, altId); let preference = preferences.get(key); if (!preference) { @@ -97,6 +97,8 @@ class PreferenceStoreClass extends EventEmitter { preferences.set(key, preference); this.setAllPreferences(preferences); + + return preference; } emitChange(preferences) { @@ -130,6 +132,3 @@ class PreferenceStoreClass extends EventEmitter { const PreferenceStore = new PreferenceStoreClass(); export default PreferenceStore; - -// TODO remove me -global.PreferenceStore = PreferenceStore; diff --git a/web/react/utils/async_client.jsx b/web/react/utils/async_client.jsx index 3f084578a..d665dfc94 100644 --- a/web/react/utils/async_client.jsx +++ b/web/react/utils/async_client.jsx @@ -666,3 +666,27 @@ export function getDirectChannels() { ); } +export function setPreferences(preferences, success, error) { + client.setPreferences( + preferences, + (data, textStatus, xhr) => { + if (xhr.status !== 304) { + AppDispatcher.handleServerAction({ + type: ActionTypes.RECIEVED_PREFERENCES, + preferences + }); + } + + if (success) { + success(data); + } + }, + (err) => { + dispatchError(err, 'setPreferences'); + + if (error) { + error(); + } + } + ); +} diff --git a/web/react/utils/client.jsx b/web/react/utils/client.jsx index f1827f296..2134dc0f5 100644 --- a/web/react/utils/client.jsx +++ b/web/react/utils/client.jsx @@ -1155,3 +1155,16 @@ export function getPreferencesByName(category, name, success, error) { }); } +export function setPreferences(preferences, success, error) { + $.ajax({ + url: '/api/v1/preferences/set', + dataType: 'json', + type: 'POST', + data: JSON.stringify(preferences), + success, + error: (xhr, status, err) => { + var e = handleError('setPreferences', xhr, status, err); + error(e); + } + }); +} |