From ed31538893ad2790de46ace7eeac5c1aa015a7f1 Mon Sep 17 00:00:00 2001 From: hmhealey Date: Fri, 2 Oct 2015 14:25:55 -0400 Subject: Changed direct messages channels so users can show/hide them --- web/react/components/more_direct_channels.jsx | 32 +++- web/react/components/sidebar.jsx | 229 +++++++++----------------- web/react/stores/preference_store.jsx | 9 +- web/react/utils/async_client.jsx | 24 +++ web/react/utils/client.jsx | 13 ++ 5 files changed, 143 insertions(+), 164 deletions(-) (limited to 'web') 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 = {channel.unread}; + 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 ( -
  • +
  • 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 = ( + + {'×'} + + ); + } + return (
    • ); @@ -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 = ( -
  • +
  • { + 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); + } + }); +} -- cgit v1.2.3-1-g7c22