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

11 files changed, 51 insertions, 90 deletions

diff --git a/webapp/actions/global_actions.jsx b/webapp/actions/global_actions.jsx
index beca75509..2d1638060 100644
--- a/webapp/actions/global_actions.jsx
+++ b/webapp/actions/global_actions.jsx
@@ -570,7 +570,7 @@ export function redirectUserToDefaultTeam() {
         }
 
         if (myTeams.length > 0) {
-            myTeams = myTeams.sort((a, b) => a.display_name.localeCompare(b.display_name));
+            myTeams = myTeams.sort(Utils.sortTeamsByDisplayName);
             teamId = myTeams[0].id;
         }
     }
diff --git a/webapp/components/admin_console/admin_navbar_dropdown.jsx b/webapp/components/admin_console/admin_navbar_dropdown.jsx
index d4e144c4f..a1ec2885b 100644
--- a/webapp/components/admin_console/admin_navbar_dropdown.jsx
+++ b/webapp/components/admin_console/admin_navbar_dropdown.jsx
@@ -6,6 +6,7 @@ import ReactDOM from 'react-dom';
 
 import TeamStore from 'stores/team_store.jsx';
 import Constants from 'utils/constants.jsx';
+import {sortTeamsByDisplayName} from 'utils/utils.jsx';
 import * as GlobalActions from 'actions/global_actions.jsx';
 
 import {FormattedMessage} from 'react-intl';
@@ -64,9 +65,7 @@ export default class AdminNavbarDropdown extends React.Component {
             }
 
             // Sort teams alphabetically with display_name
-            teamsArray.sort((teamA, teamB) =>
-                teamA.display_name.localeCompare(teamB.display_name)
-            );
+            teamsArray = teamsArray.sort(sortTeamsByDisplayName);
 
             for (const team of teamsArray) {
                 teams.push(
diff --git a/webapp/components/admin_console/admin_sidebar.jsx b/webapp/components/admin_console/admin_sidebar.jsx
index e8303ea0c..952fe9ff4 100644
--- a/webapp/components/admin_console/admin_sidebar.jsx
+++ b/webapp/components/admin_console/admin_sidebar.jsx
@@ -114,19 +114,6 @@ export default class AdminSidebar extends React.Component {
         document.title = Utils.localizeMessage('sidebar_right_menu.console', 'System Console') + ' - ' + currentSiteName;
     }
 
-    sortTeams(a, b) {
-        const teamA = a.display_name.toLowerCase();
-        const teamB = b.display_name.toLowerCase();
-
-        if (teamA < teamB) {
-            return -1;
-        }
-        if (teamA > teamB) {
-            return 1;
-        }
-        return 0;
-    }
-
     renderAddTeamButton() {
         const addTeamTooltip = (
             <Tooltip id='add-team-tooltip'>
@@ -159,7 +146,7 @@ export default class AdminSidebar extends React.Component {
 
     renderTeams() {
         const teams = [];
-        const teamsArray = [];
+        let teamsArray = [];
 
         Reflect.ownKeys(this.state.selectedTeams).forEach((key) => {
             if (this.state.teams[key]) {
@@ -167,7 +154,7 @@ export default class AdminSidebar extends React.Component {
             }
         });
 
-        teamsArray.sort(this.sortTeams);
+        teamsArray = teamsArray.sort(Utils.sortTeamsByDisplayName);
 
         for (let i = 0; i < teamsArray.length; i++) {
             const team = teamsArray[i];
diff --git a/webapp/components/admin_console/select_team_modal.jsx b/webapp/components/admin_console/select_team_modal.jsx
index 14448d753..68e20f852 100644
--- a/webapp/components/admin_console/select_team_modal.jsx
+++ b/webapp/components/admin_console/select_team_modal.jsx
@@ -3,18 +3,17 @@
 
 import ReactDOM from 'react-dom';
 import {FormattedMessage} from 'react-intl';
-
 import {Modal} from 'react-bootstrap';
-
 import React from 'react';
 
+import {sortTeamsByDisplayName} from 'utils/utils.jsx';
+
 export default class SelectTeamModal extends React.Component {
     constructor(props) {
         super(props);
 
         this.doSubmit = this.doSubmit.bind(this);
         this.doCancel = this.doCancel.bind(this);
-        this.compare = this.compare.bind(this);
     }
 
     doSubmit(e) {
@@ -25,24 +24,19 @@ export default class SelectTeamModal extends React.Component {
         this.props.onModalDismissed();
     }
 
-    compare(a, b) {
-        return a.display_name.localeCompare(b.display_name);
-    }
-
     render() {
         if (this.props.teams == null) {
             return <div/>;
         }
 
         const options = [];
-        const teamsArray = [];
+        let teamsArray = [];
 
         Reflect.ownKeys(this.props.teams).forEach((key) => {
             teamsArray.push(this.props.teams[key]);
         });
 
-        teamsArray.sort(this.compare);
-
+        teamsArray = teamsArray.sort(sortTeamsByDisplayName);
         for (let i = 0; i < teamsArray.length; i++) {
             const team = teamsArray[i];
             options.push(
diff --git a/webapp/components/channel_select.jsx b/webapp/components/channel_select.jsx
index 194de3874..ad0abd501 100644
--- a/webapp/components/channel_select.jsx
+++ b/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
diff --git a/webapp/components/suggestion/search_channel_provider.jsx b/webapp/components/suggestion/search_channel_provider.jsx
index 8965e7a76..c0ec06181 100644
--- a/webapp/components/suggestion/search_channel_provider.jsx
+++ b/webapp/components/suggestion/search_channel_provider.jsx
@@ -10,6 +10,7 @@ import ChannelStore from 'stores/channel_store.jsx';
 
 import AppDispatcher from 'dispatcher/app_dispatcher.jsx';
 import {Constants, ActionTypes} from 'utils/constants.jsx';
+import {sortChannelsByDisplayName} from 'utils/channel_utils.jsx';
 
 import React from 'react';
 
@@ -51,7 +52,7 @@ export default class SearchChannelProvider extends Provider {
                     const publicChannels = data;
 
                     const localChannels = ChannelStore.getAll();
-                    const privateChannels = [];
+                    let privateChannels = [];
 
                     for (const id of Object.keys(localChannels)) {
                         const channel = localChannels[id];
@@ -60,15 +61,15 @@ export default class SearchChannelProvider extends Provider {
                         }
                     }
 
-                    const filteredPublicChannels = [];
+                    let filteredPublicChannels = [];
                     publicChannels.forEach((item) => {
                         if (item.name.startsWith(channelPrefix)) {
                             filteredPublicChannels.push(item);
                         }
                     });
 
-                    privateChannels.sort((a, b) => a.name.localeCompare(b.name));
-                    filteredPublicChannels.sort((a, b) => a.name.localeCompare(b.name));
+                    privateChannels = privateChannels.sort(sortChannelsByDisplayName);
+                    filteredPublicChannels = filteredPublicChannels.sort(sortChannelsByDisplayName);
 
                     const channels = filteredPublicChannels.concat(privateChannels);
                     const channelNames = channels.map((channel) => channel.name);
diff --git a/webapp/components/suggestion/switch_channel_provider.jsx b/webapp/components/suggestion/switch_channel_provider.jsx
index 0bc30a79f..3b7bec319 100644
--- a/webapp/components/suggestion/switch_channel_provider.jsx
+++ b/webapp/components/suggestion/switch_channel_provider.jsx
@@ -12,6 +12,7 @@ import Client from 'client/web_client.jsx';
 import AppDispatcher from 'dispatcher/app_dispatcher.jsx';
 import {Constants, ActionTypes} from 'utils/constants.jsx';
 import * as Utils from 'utils/utils.jsx';
+import {sortChannelsByDisplayName} from 'utils/channel_utils.jsx';
 
 import React from 'react';
 
@@ -105,19 +106,9 @@ export default class SwitchChannelProvider extends Provider {
                         userMap[user.id] = user;
                     }
 
-                    channels.sort((a, b) => {
-                        if (a.display_name === b.display_name) {
-                            if (a.type !== Constants.DM_CHANNEL && b.type === Constants.DM_CHANNEL) {
-                                return -1;
-                            } else if (a.type === Constants.DM_CHANNEL && b.type !== Constants.DM_CHANNEL) {
-                                return 1;
-                            }
-                            return a.name.localeCompare(b.name);
-                        }
-                        return a.display_name.localeCompare(b.display_name);
-                    });
-
-                    const channelNames = channels.map((channel) => channel.name);
+                    const channelNames = channels.
+                        sort(sortChannelsByDisplayName).
+                        map((channel) => channel.name);
 
                     AppDispatcher.handleServerAction({
                         type: ActionTypes.SUGGESTION_RECEIVED_SUGGESTIONS,
diff --git a/webapp/components/team_sidebar/team_sidebar_controller.jsx b/webapp/components/team_sidebar/team_sidebar_controller.jsx
index ac3a9f894..49635455f 100644
--- a/webapp/components/team_sidebar/team_sidebar_controller.jsx
+++ b/webapp/components/team_sidebar/team_sidebar_controller.jsx
@@ -118,21 +118,21 @@ export default class TeamSidebar extends React.Component {
         }
 
         const teams = myTeams.
-        sort((a, b) => a.display_name.localeCompare(b.display_name)).
-        map((team) => {
-            return (
-                <TeamButton
-                    key={'switch_team_' + team.name}
-                    url={`/${team.name}`}
-                    tip={team.display_name}
-                    active={team.id === this.state.currentTeamId}
-                    isMobile={this.state.isMobile}
-                    displayName={team.display_name}
-                    unread={team.unread}
-                    mentions={team.mentions}
-                />
-            );
-        });
+            sort(Utils.sortTeamsByDisplayName).
+            map((team) => {
+                return (
+                    <TeamButton
+                        key={'switch_team_' + team.name}
+                        url={`/${team.name}`}
+                        tip={team.display_name}
+                        active={team.id === this.state.currentTeamId}
+                        isMobile={this.state.isMobile}
+                        displayName={team.display_name}
+                        unread={team.unread}
+                        mentions={team.mentions}
+                    />
+                );
+            });
 
         if (moreTeams) {
             teams.push(
diff --git a/webapp/stores/channel_store.jsx b/webapp/stores/channel_store.jsx
index 30f395cc3..575f68f4c 100644
--- a/webapp/stores/channel_store.jsx
+++ b/webapp/stores/channel_store.jsx
@@ -204,10 +204,10 @@ class ChannelStoreClass extends EventEmitter {
         }
 
         if (!Utils) {
-            Utils = require('utils/utils.jsx'); //eslint-disable-line global-require
+            Utils = require('utils/channel_utils.jsx'); //eslint-disable-line global-require
         }
 
-        channels.sort(Utils.sortByDisplayName);
+        channels = channels.sort(Utils.sortChannelsByDisplayName);
         this.storeChannels(channels);
     }
 
@@ -286,10 +286,10 @@ class ChannelStoreClass extends EventEmitter {
         const teamChannels = this.moreChannels[teamId] || {};
 
         if (!Utils) {
-            Utils = require('utils/utils.jsx'); //eslint-disable-line global-require
+            Utils = require('utils/channel_utils.jsx'); //eslint-disable-line global-require
         }
 
-        return Object.keys(teamChannels).map((cid) => teamChannels[cid]).sort(Utils.sortByDisplayName);
+        return Object.keys(teamChannels).map((cid) => teamChannels[cid]).sort(Utils.sortChannelsByDisplayName);
     }
 
     storeStats(stats) {
diff --git a/webapp/utils/channel_utils.jsx b/webapp/utils/channel_utils.jsx
index 2189cd789..67dcfac67 100644
--- a/webapp/utils/channel_utils.jsx
+++ b/webapp/utils/channel_utils.jsx
@@ -23,8 +23,11 @@ import LocalizationStore from 'stores/localization_store.jsx';
 export function buildDisplayableChannelList(persistentChannels) {
     const missingDMChannels = createMissingDirectChannels(persistentChannels);
 
-    const channels = persistentChannels.concat(missingDMChannels).map(completeDirectChannelInfo).filter(isNotDeletedChannel);
-    channels.sort(sortChannelsByDisplayName);
+    const channels = persistentChannels.
+        concat(missingDMChannels).
+        map(completeDirectChannelInfo).
+        filter(isNotDeletedChannel).
+        sort(sortChannelsByDisplayName);
 
     const favoriteChannels = channels.filter(isFavoriteChannel);
     const notFavoriteChannels = channels.filter(not(isFavoriteChannel));
diff --git a/webapp/utils/utils.jsx b/webapp/utils/utils.jsx
index 4e8a05075..90e2ad63e 100644
--- a/webapp/utils/utils.jsx
+++ b/webapp/utils/utils.jsx
@@ -1093,25 +1093,15 @@ export function windowHeight() {
     return $(window).height();
 }
 
-// Use when sorting multiple channels or teams by their `display_name` field
-export function sortByDisplayName(a, b) {
-    let aDisplayName = '';
-    let bDisplayName = '';
+// Use when sorting multiple teams by their `display_name` field
+export function sortTeamsByDisplayName(a, b) {
+    const locale = LocalizationStore.getLocale();
 
-    if (a && a.display_name) {
-        aDisplayName = a.display_name.toLowerCase();
-    }
-    if (b && b.display_name) {
-        bDisplayName = b.display_name.toLowerCase();
+    if (a.display_name !== b.display_name) {
+        return a.display_name.localeCompare(b.display_name, locale, {numeric: true});
     }
 
-    if (aDisplayName < bDisplayName) {
-        return -1;
-    }
-    if (aDisplayName > bDisplayName) {
-        return 1;
-    }
-    return 0;
+    return a.name.localeCompare(b.name, locale, {numeric: true});
 }
 
 export function getChannelTerm(channelType) {