Changed direct messages channels so users can show/hide them

2015-10-02 14:25:55 -04:00
--- 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='#'
--- 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'
--- 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;
--- 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();
+            }
+        }
+    );
+}
--- 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);
+        }
+    });
+}