update rename channel modal to not refresh page on channel name change

3 files changed, 39 insertions, 13 deletions

diff --git a/web/react/components/rename_channel_modal.jsx b/web/react/components/rename_channel_modal.jsx
index 57a684b33..93cb6ef21 100644
--- a/web/react/components/rename_channel_modal.jsx
+++ b/web/react/components/rename_channel_modal.jsx
@@ -63,12 +63,14 @@ module.exports = React.createClass({
 
         Client.updateChannel(channel,
             function(data, text, req) {
-                this.refs.display_name.getDOMNode().value = "";
-                this.refs.channel_name.getDOMNode().value = "";
+                $(this.refs.modal.getDOMNode()).modal('hide');
 
-                $('#' + this.props.modalId).modal('hide');
-                window.location.href = TeamStore.getCurrentTeamUrl() + '/channels/' + this.state.channel_name;
                 AsyncClient.getChannel(channel.id);
+                utils.updateTabTitle(channel.display_name);
+                utils.updateAddressBar(channel.name);
+
+                this.refs.display_name.getDOMNode().value = "";
+                this.refs.channel_name.getDOMNode().value = "";
             }.bind(this),
             function(err) {
                 state.server_error = err.message;
diff --git a/web/react/components/sidebar.jsx b/web/react/components/sidebar.jsx
index f6ac36f50..f4992d4e3 100644
--- a/web/react/components/sidebar.jsx
+++ b/web/react/components/sidebar.jsx
@@ -102,7 +102,20 @@ function getStateFromStores() {
         }
         readDirectChannels = readDirectChannels.slice(index);
 
-        showDirectChannels.sort(function(a, b) {
+        showDirectChannels.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;
+        });
+    }
+
+    var channels = ChannelStore.getAll();
+    if (channels) {
+        channels.sort(function chanSort(a, b) {
             if (a.display_name < b.display_name) {
                 return -1;
             }
@@ -114,8 +127,8 @@ function getStateFromStores() {
     }
 
     return {
-        active_id: currentId,
-        channels: ChannelStore.getAll(),
+        activeId: currentId,
+        channels: channels,
         members: members,
         showDirectChannels: showDirectChannels,
         hideDirectChannels: readDirectChannels
diff --git a/web/react/utils/utils.jsx b/web/react/utils/utils.jsx
index 2214b6239..7591c138f 100644
--- a/web/react/utils/utils.jsx
+++ b/web/react/utils/utils.jsx
@@ -732,20 +732,19 @@ module.exports.isValidUsername = function (name) {
     return error;
 }
 
-module.exports.switchChannel = function(channel, teammate_name) {
+function switchChannel(channel, teammateName) {
     AppDispatcher.handleViewAction({
       type: ActionTypes.CLICK_CHANNEL,
       name: channel.name,
       id: channel.id
     });
 
-    var teamURL = window.location.href.split('/channels')[0];
-    history.replaceState('data', '', teamURL + '/channels/' + channel.name);
+    updateAddressBar(channel.name);
 
-    if (channel.type === 'D' && teammate_name) {
-        document.title = teammate_name + " " + document.title.substring(document.title.lastIndexOf("-"));
+    if (channel.type === 'D' && teammateName) {
+        updateTabTitle(teammateName);
     } else {
-        document.title = channel.display_name + " " + document.title.substring(document.title.lastIndexOf("-"));
+        updateTabTitle(channel.display_name);
     }
 
     AsyncClient.getChannels(true, true, true);
@@ -759,6 +758,18 @@ module.exports.switchChannel = function(channel, teammate_name) {
 
     return false;
 }
+module.exports.switchChannel = switchChannel;
+
+function updateTabTitle(name) {
+    document.title = name + ' ' + document.title.substring(document.title.lastIndexOf('-'));
+}
+module.exports.updateTabTitle = updateTabTitle;
+
+function updateAddressBar(channelName) {
+    var teamURL = window.location.href.split('/channels')[0];
+    history.replaceState('data', '', teamURL + '/channels/' + channelName);
+}
+module.exports.updateAddressBar = updateAddressBar;
 
 module.exports.isMobile = function() {
   return screen.width <= 768;