GroupV1MigrationDialog: sort member list before display
This commit is contained in:
parent
845532c9b7
commit
673d07e176
2 changed files with 20 additions and 7 deletions
|
@ -15,7 +15,7 @@ const i18n = setupI18n('en', enMessages);
|
||||||
|
|
||||||
const contact1 = {
|
const contact1 = {
|
||||||
title: 'Alice',
|
title: 'Alice',
|
||||||
number: '+1 (300) 555-000',
|
number: '+1 (300) 555-0000',
|
||||||
id: 'guid-1',
|
id: 'guid-1',
|
||||||
markedUnread: false,
|
markedUnread: false,
|
||||||
type: 'direct' as const,
|
type: 'direct' as const,
|
||||||
|
@ -24,8 +24,17 @@ const contact1 = {
|
||||||
|
|
||||||
const contact2 = {
|
const contact2 = {
|
||||||
title: 'Bob',
|
title: 'Bob',
|
||||||
number: '+1 (300) 555-000',
|
number: '+1 (300) 555-0001',
|
||||||
id: 'guid-1',
|
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,
|
markedUnread: false,
|
||||||
type: 'direct' as const,
|
type: 'direct' as const,
|
||||||
lastUpdated: Date.now(),
|
lastUpdated: Date.now(),
|
||||||
|
@ -40,7 +49,7 @@ const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
|
||||||
'areWeInvited',
|
'areWeInvited',
|
||||||
booleanOr(overrideProps.areWeInvited, false)
|
booleanOr(overrideProps.areWeInvited, false)
|
||||||
),
|
),
|
||||||
droppedMembers: overrideProps.droppedMembers || [contact1],
|
droppedMembers: overrideProps.droppedMembers || [contact3, contact1],
|
||||||
hasMigrated: boolean(
|
hasMigrated: boolean(
|
||||||
'hasMigrated',
|
'hasMigrated',
|
||||||
booleanOr(overrideProps.hasMigrated, false)
|
booleanOr(overrideProps.hasMigrated, false)
|
||||||
|
@ -82,8 +91,8 @@ stories.add('Not yet migrated, multiple dropped and invited members', () => {
|
||||||
return (
|
return (
|
||||||
<GroupV1MigrationDialog
|
<GroupV1MigrationDialog
|
||||||
{...createProps({
|
{...createProps({
|
||||||
droppedMembers: [contact1, contact2],
|
droppedMembers: [contact3, contact1, contact2],
|
||||||
invitedMembers: [contact1, contact2],
|
invitedMembers: [contact2, contact3, contact1],
|
||||||
})}
|
})}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
|
|
@ -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) => {
|
export const GroupV1MigrationDialog = React.memo((props: PropsType) => {
|
||||||
const {
|
const {
|
||||||
areWeInvited,
|
areWeInvited,
|
||||||
|
@ -168,7 +172,7 @@ function renderMembers(
|
||||||
<div className="module-group-v2-migration-dialog__item__bullet" />
|
<div className="module-group-v2-migration-dialog__item__bullet" />
|
||||||
<div className="module-group-v2-migration-dialog__item__content">
|
<div className="module-group-v2-migration-dialog__item__content">
|
||||||
<div>{i18n(key)}</div>
|
<div>{i18n(key)}</div>
|
||||||
{members.map(member => (
|
{sort(members).map(member => (
|
||||||
<div
|
<div
|
||||||
key={member.id}
|
key={member.id}
|
||||||
className="module-group-v2-migration-dialog__member"
|
className="module-group-v2-migration-dialog__member"
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue