Use consistent Display Name sorting code throughout the webapp #5159 (#5213)

* Use consistent Display Name sorting code throughout the webapp #5159

* fixed broken sorting of teams and channels

webapp/components/channel_select.jsx

@@ -6,6 +6,7 @@ import React from 'react';
 import Constants from 'utils/constants.jsx';
 import ChannelStore from 'stores/channel_store.jsx';
 import * as Utils from 'utils/utils.jsx';
+import {sortChannelsByDisplayName} from 'utils/channel_utils.jsx';
 import * as AsyncClient from 'utils/async_client.jsx';
 
 export default class ChannelSelect extends React.Component {
@@ -32,12 +33,11 @@ export default class ChannelSelect extends React.Component {
 
         this.handleChannelChange = this.handleChannelChange.bind(this);
         this.filterChannels = this.filterChannels.bind(this);
-        this.compareByDisplayName = this.compareByDisplayName.bind(this);
 
         AsyncClient.getMoreChannels(true);
 
         this.state = {
-            channels: ChannelStore.getAll().filter(this.filterChannels).sort(this.compareByDisplayName)
+            channels: ChannelStore.getAll().filter(this.filterChannels).sort(sortChannelsByDisplayName)
         };
     }
 
@@ -52,7 +52,7 @@ export default class ChannelSelect extends React.Component {
     handleChannelChange() {
         this.setState({
             channels: ChannelStore.getAll().concat(ChannelStore.getMoreAll()).
-                filter(this.filterChannels).sort(this.compareByDisplayName)
+                filter(this.filterChannels).sort(sortChannelsByDisplayName)
         });
     }
 
@@ -64,10 +64,6 @@ export default class ChannelSelect extends React.Component {
         return false;
     }
 
-    compareByDisplayName(channelA, channelB) {
-        return channelA.display_name.localeCompare(channelB.display_name);
-    }
-
     render() {
         const options = [
             <option