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

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;
  }
  }

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(

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,15 +146,15 @@ 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]) {
  teamsArray.push(this.state.teams[key]);
  }
  });
 
- teamsArray.sort(this.sortTeams);
+ teamsArray = teamsArray.sort(Utils.sortTeamsByDisplayName);
 
  for (let i = 0; i < teamsArray.length; i++) {
  const team = teamsArray[i];

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(

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

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);

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,

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(

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) {

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));

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) {