From 673d07e17609114df75f344478408d400bd18a60 Mon Sep 17 00:00:00 2001
From: Scott Nonnenberg <scott@signal.org>
Date: Thu, 3 Dec 2020 08:03:21 -0800
Subject: [PATCH] GroupV1MigrationDialog: sort member list before display

---
 .../GroupV1MigrationDialog.stories.tsx        | 21 +++++++++++++------
 ts/components/GroupV1MigrationDialog.tsx      |  6 +++++-
 2 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/ts/components/GroupV1MigrationDialog.stories.tsx b/ts/components/GroupV1MigrationDialog.stories.tsx
index 0741c6147..4c7912e90 100644
--- a/ts/components/GroupV1MigrationDialog.stories.tsx
+++ b/ts/components/GroupV1MigrationDialog.stories.tsx
@@ -15,7 +15,7 @@ const i18n = setupI18n('en', enMessages);
 
 const contact1 = {
   title: 'Alice',
-  number: '+1 (300) 555-000',
+  number: '+1 (300) 555-0000',
   id: 'guid-1',
   markedUnread: false,
   type: 'direct' as const,
@@ -24,8 +24,17 @@ const contact1 = {
 
 const contact2 = {
   title: 'Bob',
-  number: '+1 (300) 555-000',
-  id: 'guid-1',
+  number: '+1 (300) 555-0001',
+  id: 'guid-2',
+  markedUnread: false,
+  type: 'direct' as const,
+  lastUpdated: Date.now(),
+};
+
+const contact3 = {
+  title: 'Chet',
+  number: '+1 (300) 555-0002',
+  id: 'guid-3',
   markedUnread: false,
   type: 'direct' as const,
   lastUpdated: Date.now(),
@@ -40,7 +49,7 @@ const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
     'areWeInvited',
     booleanOr(overrideProps.areWeInvited, false)
   ),
-  droppedMembers: overrideProps.droppedMembers || [contact1],
+  droppedMembers: overrideProps.droppedMembers || [contact3, contact1],
   hasMigrated: boolean(
     'hasMigrated',
     booleanOr(overrideProps.hasMigrated, false)
@@ -82,8 +91,8 @@ stories.add('Not yet migrated, multiple dropped and invited members', () => {
   return (
     <GroupV1MigrationDialog
       {...createProps({
-        droppedMembers: [contact1, contact2],
-        invitedMembers: [contact1, contact2],
+        droppedMembers: [contact3, contact1, contact2],
+        invitedMembers: [contact2, contact3, contact1],
       })}
     />
   );
diff --git a/ts/components/GroupV1MigrationDialog.tsx b/ts/components/GroupV1MigrationDialog.tsx
index c0bd4ea29..88306b89d 100644
--- a/ts/components/GroupV1MigrationDialog.tsx
+++ b/ts/components/GroupV1MigrationDialog.tsx
@@ -36,6 +36,10 @@ function focusRef(el: HTMLElement | null) {
   }
 }
 
+function sort(list: Array<ConversationType>): Array<ConversationType> {
+  return [...list].sort((a, b) => a.title.localeCompare(b.title));
+}
+
 export const GroupV1MigrationDialog = React.memo((props: PropsType) => {
   const {
     areWeInvited,
@@ -168,7 +172,7 @@ function renderMembers(
       <div className="module-group-v2-migration-dialog__item__bullet" />
       <div className="module-group-v2-migration-dialog__item__content">
         <div>{i18n(key)}</div>
-        {members.map(member => (
+        {sort(members).map(member => (
           <div
             key={member.id}
             className="module-group-v2-migration-dialog__member"