Make a getSortedUsers selector

frontend/src/metabase/admin/people/containers/PeopleListingApp.jsx

@@ -2,7 +2,6 @@
 import React, { Component } from "react";
 import PropTypes from "prop-types";
 import { Link } from "react-router";
-import _ from "underscore";
 import { connect } from "react-redux";
 
 import LoadingAndErrorWrapper from "metabase/components/LoadingAndErrorWrapper.jsx";
@@ -30,7 +29,7 @@ export const MODAL_RESET_PASSWORD_EMAIL = "MODAL_RESET_PASSWORD_EMAIL";
 export const MODAL_USER_ADDED_WITH_INVITE = "MODAL_USER_ADDED_WITH_INVITE";
 export const MODAL_USER_ADDED_WITH_PASSWORD = "MODAL_USER_ADDED_WITH_PASSWORD";
 
-import { getUsers, getModal, getGroups } from "../selectors";
+import { getSortedUsers, getModal, getGroups } from "../selectors";
 import {
   createUser,
   deleteUser,
@@ -48,7 +47,7 @@ import {
 
 const mapStateToProps = (state, props) => {
   return {
-    users: getUsers(state, props),
+    users: getSortedUsers(state, props),
     modal: getModal(state, props),
     user: state.currentUser,
     groups: getGroups(state, props),
@@ -402,16 +401,6 @@ export default class PeopleListingApp extends Component {
     let { modal, users, groups } = this.props;
     let { error } = this.state;
 
-    // sort the users list by last_name, ignore case or diacritical marks. If last names are the same then compare by
-    // first name
-    const compareNames = (a, b) =>
-      a.localeCompare(b, undefined, { sensitivty: "base" });
-    users = _.values(users).sort(
-      (a, b) =>
-        compareNames(a.last_name, b.last_name) ||
-        compareNames(a.first_name, b.first_name),
-    );
-
     return (
       <LoadingAndErrorWrapper loading={!users} error={error}>
         {() => (

frontend/src/metabase/admin/people/selectors.js

@@ -23,3 +23,19 @@ export const getUsers = createSelector(
           .value(),
     })),
 );
+
+// sort the users list by last_name, ignore case or diacritical marks. If last names are the same then compare by first
+// name
+const compareNames = (a, b) =>
+  a.localeCompare(b, undefined, { sensitivty: "base" });
+
+export const getSortedUsers = createSelector(
+  [getUsers],
+  users =>
+    users &&
+    _.values(users).sort(
+      (a, b) =>
+        compareNames(a.last_name, b.last_name) ||
+        compareNames(a.first_name, b.first_name),
+    ),
+);