signal-desktop/ts/components/conversation/conversation-details/AddGroupMembersModal.stories.tsx
2021-11-02 16:01:13 -07:00

95 lines
2.6 KiB
TypeScript

// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import type { ComponentProps } from 'react';
import React, { useState } from 'react';
import { times } from 'lodash';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { sleep } from '../../../util/sleep';
import { setupI18n } from '../../../util/setupI18n';
import enMessages from '../../../../_locales/en/messages.json';
import { getDefaultConversation } from '../../../test-both/helpers/getDefaultConversation';
import { AddGroupMembersModal } from './AddGroupMembersModal';
import { RequestState } from './util';
import { ThemeType } from '../../../types/Util';
const i18n = setupI18n('en', enMessages);
const story = storiesOf(
'Components/Conversation/ConversationDetails/AddGroupMembersModal',
module
);
const allCandidateContacts = times(50, () => getDefaultConversation());
type PropsType = ComponentProps<typeof AddGroupMembersModal>;
const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
candidateContacts: allCandidateContacts,
clearRequestError: action('clearRequestError'),
conversationIdsAlreadyInGroup: new Set(),
groupTitle: 'Tahoe Trip',
i18n,
onClose: action('onClose'),
makeRequest: async (conversationIds: ReadonlyArray<string>) => {
action('onMakeRequest')(conversationIds);
},
requestState: RequestState.Inactive,
theme: ThemeType.light,
...overrideProps,
});
story.add('Default', () => <AddGroupMembersModal {...createProps()} />);
story.add('Only 3 contacts', () => (
<AddGroupMembersModal
{...createProps({
candidateContacts: allCandidateContacts.slice(0, 3),
})}
/>
));
story.add('No candidate contacts', () => (
<AddGroupMembersModal
{...createProps({
candidateContacts: [],
})}
/>
));
story.add('Everyone already added', () => (
<AddGroupMembersModal
{...createProps({
conversationIdsAlreadyInGroup: new Set(
allCandidateContacts.map(contact => contact.id)
),
})}
/>
));
story.add('Request fails after 1 second', () => {
const Wrapper = () => {
const [requestState, setRequestState] = useState(RequestState.Inactive);
return (
<AddGroupMembersModal
{...createProps({
clearRequestError: () => {
setRequestState(RequestState.Inactive);
},
makeRequest: async () => {
setRequestState(RequestState.Active);
await sleep(1000);
setRequestState(RequestState.InactiveWithError);
},
requestState,
})}
/>
);
};
return <Wrapper />;
});