GroupV1MigrationDialog: sort member list before display

This commit is contained in:
Scott Nonnenberg 2020-12-03 08:03:21 -08:00 committed by GitHub
parent 845532c9b7
commit 673d07e176
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 20 additions and 7 deletions

View file

@ -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],
})}
/>
);

View file

@ -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"