Add "new conversation" composer for direct messages
This commit is contained in:
Evan Hahn
Josh Perez
parent
84dc166b63
commit
06fb4fd0bc
61 changed files with 5960 additions and 3887 deletions
|
|
@ -1,14 +1,14 @@
|
|||
// Copyright 2020 Signal Messenger, LLC
|
||||
// Copyright 2020-2021 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
import * as React from 'react';
|
||||
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { boolean, text } from '@storybook/addon-knobs';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
|
||||
import { LeftPane, PropsType } from './LeftPane';
|
||||
import { PropsData } from './ConversationListItem';
|
||||
import { LeftPane, LeftPaneMode, PropsType } from './LeftPane';
|
||||
import { PropsData as ConversationListItemPropsType } from './conversationList/ConversationListItem';
|
||||
import { MessageSearchResult } from './conversationList/MessageSearchResult';
|
||||
import { setup as setupI18n } from '../../js/modules/i18n';
|
||||
import enMessages from '../../_locales/en/messages.json';
|
||||
|
||||
|
|
@ -16,7 +16,7 @@ const i18n = setupI18n('en', enMessages);
|
|||
|
||||
const story = storiesOf('Components/LeftPane', module);
|
||||
|
||||
const defaultConversations: Array<PropsData> = [
|
||||
const defaultConversations: Array<ConversationListItemPropsType> = [
|
||||
{
|
||||
id: 'fred-convo',
|
||||
isSelected: false,
|
||||
|
|
@ -35,7 +35,7 @@ const defaultConversations: Array<PropsData> = [
|
|||
},
|
||||
];
|
||||
|
||||
const defaultArchivedConversations: Array<PropsData> = [
|
||||
const defaultArchivedConversations: Array<ConversationListItemPropsType> = [
|
||||
{
|
||||
id: 'michelle-archive-convo',
|
||||
isSelected: false,
|
||||
|
|
@ -46,7 +46,7 @@ const defaultArchivedConversations: Array<PropsData> = [
|
|||
},
|
||||
];
|
||||
|
||||
const pinnedConversations: Array<PropsData> = [
|
||||
const pinnedConversations: Array<ConversationListItemPropsType> = [
|
||||
{
|
||||
id: 'philly-convo',
|
||||
isPinned: true,
|
||||
|
|
@ -67,107 +67,311 @@ const pinnedConversations: Array<PropsData> = [
|
|||
},
|
||||
];
|
||||
|
||||
const defaultModeSpecificProps = {
|
||||
mode: LeftPaneMode.Inbox as const,
|
||||
pinnedConversations,
|
||||
conversations: defaultConversations,
|
||||
archivedConversations: defaultArchivedConversations,
|
||||
};
|
||||
|
||||
const emptySearchResultsGroup = { isLoading: false, results: [] };
|
||||
|
||||
const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
|
||||
archivedConversations:
|
||||
overrideProps.archivedConversations || defaultArchivedConversations,
|
||||
conversations: overrideProps.conversations || defaultConversations,
|
||||
i18n,
|
||||
modeSpecificProps: defaultModeSpecificProps,
|
||||
openConversationInternal: action('openConversationInternal'),
|
||||
pinnedConversations: overrideProps.pinnedConversations || [],
|
||||
regionCode: 'US',
|
||||
renderExpiredBuildDialog: () => <div />,
|
||||
renderMainHeader: () => <div />,
|
||||
renderMessageSearchResult: () => <div />,
|
||||
renderMessageSearchResult: (id: string, style: React.CSSProperties) => (
|
||||
<MessageSearchResult
|
||||
conversationId="marc-convo"
|
||||
from={defaultConversations[0]}
|
||||
i18n={i18n}
|
||||
id={id}
|
||||
openConversationInternal={action('openConversationInternal')}
|
||||
sentAt={1587358800000}
|
||||
snippet="Lorem <<left>>ipsum<<right>> wow"
|
||||
style={style}
|
||||
to={defaultConversations[1]}
|
||||
/>
|
||||
),
|
||||
renderNetworkStatus: () => <div />,
|
||||
renderRelinkDialog: () => <div />,
|
||||
renderUpdateDialog: () => <div />,
|
||||
searchResults: overrideProps.searchResults,
|
||||
selectedConversationId: text(
|
||||
'selectedConversationId',
|
||||
overrideProps.selectedConversationId || null
|
||||
),
|
||||
showArchived: boolean('showArchived', overrideProps.showArchived || false),
|
||||
selectedConversationId: undefined,
|
||||
selectedMessageId: undefined,
|
||||
setComposeSearchTerm: action('setComposeSearchTerm'),
|
||||
showArchivedConversations: action('showArchivedConversations'),
|
||||
showInbox: action('showInbox'),
|
||||
startNewConversation: action('startNewConversation'),
|
||||
startComposing: action('startComposing'),
|
||||
startNewConversationFromPhoneNumber: action(
|
||||
'startNewConversationFromPhoneNumber'
|
||||
),
|
||||
|
||||
...overrideProps,
|
||||
});
|
||||
|
||||
story.add('Conversation States (Active, Selected, Archived)', () => {
|
||||
const props = createProps();
|
||||
// Inbox stories
|
||||
|
||||
return <LeftPane {...props} />;
|
||||
});
|
||||
story.add('Inbox: no conversations', () => (
|
||||
<LeftPane
|
||||
{...createProps({
|
||||
modeSpecificProps: {
|
||||
mode: LeftPaneMode.Inbox,
|
||||
pinnedConversations: [],
|
||||
conversations: [],
|
||||
archivedConversations: [],
|
||||
},
|
||||
})}
|
||||
/>
|
||||
));
|
||||
|
||||
story.add('Pinned and Non-pinned Conversations', () => {
|
||||
const props = createProps({
|
||||
pinnedConversations,
|
||||
});
|
||||
story.add('Inbox: only pinned conversations', () => (
|
||||
<LeftPane
|
||||
{...createProps({
|
||||
modeSpecificProps: {
|
||||
mode: LeftPaneMode.Inbox,
|
||||
pinnedConversations,
|
||||
conversations: [],
|
||||
archivedConversations: [],
|
||||
},
|
||||
})}
|
||||
/>
|
||||
));
|
||||
|
||||
return <LeftPane {...props} />;
|
||||
});
|
||||
story.add('Inbox: only non-pinned conversations', () => (
|
||||
<LeftPane
|
||||
{...createProps({
|
||||
modeSpecificProps: {
|
||||
mode: LeftPaneMode.Inbox,
|
||||
pinnedConversations: [],
|
||||
conversations: defaultConversations,
|
||||
archivedConversations: [],
|
||||
},
|
||||
})}
|
||||
/>
|
||||
));
|
||||
|
||||
story.add('Only Pinned Conversations', () => {
|
||||
const props = createProps({
|
||||
archivedConversations: [],
|
||||
conversations: [],
|
||||
pinnedConversations,
|
||||
});
|
||||
story.add('Inbox: only archived conversations', () => (
|
||||
<LeftPane
|
||||
{...createProps({
|
||||
modeSpecificProps: {
|
||||
mode: LeftPaneMode.Inbox,
|
||||
pinnedConversations: [],
|
||||
conversations: [],
|
||||
archivedConversations: defaultArchivedConversations,
|
||||
},
|
||||
})}
|
||||
/>
|
||||
));
|
||||
|
||||
return <LeftPane {...props} />;
|
||||
});
|
||||
story.add('Inbox: pinned and archived conversations', () => (
|
||||
<LeftPane
|
||||
{...createProps({
|
||||
modeSpecificProps: {
|
||||
mode: LeftPaneMode.Inbox,
|
||||
pinnedConversations,
|
||||
conversations: [],
|
||||
archivedConversations: defaultArchivedConversations,
|
||||
},
|
||||
})}
|
||||
/>
|
||||
));
|
||||
|
||||
story.add('Archived Conversations Shown', () => {
|
||||
const props = createProps({
|
||||
showArchived: true,
|
||||
});
|
||||
return <LeftPane {...props} />;
|
||||
});
|
||||
story.add('Inbox: non-pinned and archived conversations', () => (
|
||||
<LeftPane
|
||||
{...createProps({
|
||||
modeSpecificProps: {
|
||||
mode: LeftPaneMode.Inbox,
|
||||
pinnedConversations: [],
|
||||
conversations: defaultConversations,
|
||||
archivedConversations: defaultArchivedConversations,
|
||||
},
|
||||
})}
|
||||
/>
|
||||
));
|
||||
|
||||
story.add('Search Results', () => {
|
||||
const props = createProps({
|
||||
searchResults: {
|
||||
discussionsLoading: false,
|
||||
items: [
|
||||
{
|
||||
type: 'conversations-header',
|
||||
data: undefined,
|
||||
story.add('Inbox: pinned and non-pinned conversations', () => (
|
||||
<LeftPane
|
||||
{...createProps({
|
||||
modeSpecificProps: {
|
||||
mode: LeftPaneMode.Inbox,
|
||||
pinnedConversations,
|
||||
conversations: defaultConversations,
|
||||
archivedConversations: [],
|
||||
},
|
||||
})}
|
||||
/>
|
||||
));
|
||||
|
||||
story.add('Inbox: pinned, non-pinned, and archived conversations', () => (
|
||||
<LeftPane {...createProps()} />
|
||||
));
|
||||
|
||||
// Search stories
|
||||
|
||||
story.add('Search: no results when searching everywhere', () => (
|
||||
<LeftPane
|
||||
{...createProps({
|
||||
modeSpecificProps: {
|
||||
mode: LeftPaneMode.Search,
|
||||
conversationResults: emptySearchResultsGroup,
|
||||
contactResults: emptySearchResultsGroup,
|
||||
messageResults: emptySearchResultsGroup,
|
||||
searchTerm: 'foo bar',
|
||||
},
|
||||
})}
|
||||
/>
|
||||
));
|
||||
|
||||
story.add('Search: no results when searching in a conversation', () => (
|
||||
<LeftPane
|
||||
{...createProps({
|
||||
modeSpecificProps: {
|
||||
mode: LeftPaneMode.Search,
|
||||
conversationResults: emptySearchResultsGroup,
|
||||
contactResults: emptySearchResultsGroup,
|
||||
messageResults: emptySearchResultsGroup,
|
||||
searchConversationName: 'Bing Bong',
|
||||
searchTerm: 'foo bar',
|
||||
},
|
||||
})}
|
||||
/>
|
||||
));
|
||||
|
||||
story.add('Search: all results loading', () => (
|
||||
<LeftPane
|
||||
{...createProps({
|
||||
modeSpecificProps: {
|
||||
mode: LeftPaneMode.Search,
|
||||
conversationResults: { isLoading: true },
|
||||
contactResults: { isLoading: true },
|
||||
messageResults: { isLoading: true },
|
||||
searchTerm: 'foo bar',
|
||||
},
|
||||
})}
|
||||
/>
|
||||
));
|
||||
|
||||
story.add('Search: some results loading', () => (
|
||||
<LeftPane
|
||||
{...createProps({
|
||||
modeSpecificProps: {
|
||||
mode: LeftPaneMode.Search,
|
||||
conversationResults: {
|
||||
isLoading: false,
|
||||
results: defaultConversations,
|
||||
},
|
||||
{
|
||||
type: 'conversation',
|
||||
data: {
|
||||
id: 'fred-convo',
|
||||
isSelected: false,
|
||||
lastUpdated: Date.now(),
|
||||
markedUnread: false,
|
||||
title: 'People Named Fred',
|
||||
type: 'group',
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'start-new-conversation',
|
||||
data: undefined,
|
||||
},
|
||||
{
|
||||
type: 'contacts-header',
|
||||
data: undefined,
|
||||
},
|
||||
{
|
||||
type: 'contact',
|
||||
data: {
|
||||
id: 'fred-contact',
|
||||
isSelected: false,
|
||||
lastUpdated: Date.now(),
|
||||
markedUnread: false,
|
||||
title: 'Fred Willard',
|
||||
type: 'direct',
|
||||
},
|
||||
},
|
||||
],
|
||||
messagesLoading: false,
|
||||
noResults: false,
|
||||
regionCode: 'en',
|
||||
searchTerm: 'Fred',
|
||||
},
|
||||
});
|
||||
contactResults: { isLoading: true },
|
||||
messageResults: { isLoading: true },
|
||||
searchTerm: 'foo bar',
|
||||
},
|
||||
})}
|
||||
/>
|
||||
));
|
||||
|
||||
return <LeftPane {...props} />;
|
||||
});
|
||||
story.add('Search: has conversations and contacts, but not messages', () => (
|
||||
<LeftPane
|
||||
{...createProps({
|
||||
modeSpecificProps: {
|
||||
mode: LeftPaneMode.Search,
|
||||
conversationResults: {
|
||||
isLoading: false,
|
||||
results: defaultConversations,
|
||||
},
|
||||
contactResults: { isLoading: false, results: defaultConversations },
|
||||
messageResults: { isLoading: false, results: [] },
|
||||
searchTerm: 'foo bar',
|
||||
},
|
||||
})}
|
||||
/>
|
||||
));
|
||||
|
||||
story.add('Search: all results', () => (
|
||||
<LeftPane
|
||||
{...createProps({
|
||||
modeSpecificProps: {
|
||||
mode: LeftPaneMode.Search,
|
||||
conversationResults: {
|
||||
isLoading: false,
|
||||
results: defaultConversations,
|
||||
},
|
||||
contactResults: { isLoading: false, results: defaultConversations },
|
||||
messageResults: {
|
||||
isLoading: false,
|
||||
results: [
|
||||
{ id: 'msg1', conversationId: 'foo' },
|
||||
{ id: 'msg2', conversationId: 'bar' },
|
||||
],
|
||||
},
|
||||
searchTerm: 'foo bar',
|
||||
},
|
||||
})}
|
||||
/>
|
||||
));
|
||||
|
||||
// Archived stories
|
||||
|
||||
story.add('Archive: no archived conversations', () => (
|
||||
<LeftPane
|
||||
{...createProps({
|
||||
modeSpecificProps: {
|
||||
mode: LeftPaneMode.Archive,
|
||||
archivedConversations: [],
|
||||
},
|
||||
})}
|
||||
/>
|
||||
));
|
||||
|
||||
story.add('Archive: archived conversations', () => (
|
||||
<LeftPane
|
||||
{...createProps({
|
||||
modeSpecificProps: {
|
||||
mode: LeftPaneMode.Archive,
|
||||
archivedConversations: defaultConversations,
|
||||
},
|
||||
})}
|
||||
/>
|
||||
));
|
||||
|
||||
// Compose stories
|
||||
|
||||
story.add('Compose: no contacts', () => (
|
||||
<LeftPane
|
||||
{...createProps({
|
||||
modeSpecificProps: {
|
||||
mode: LeftPaneMode.Compose,
|
||||
composeContacts: [],
|
||||
regionCode: 'US',
|
||||
searchTerm: '',
|
||||
},
|
||||
})}
|
||||
/>
|
||||
));
|
||||
|
||||
story.add('Compose: some contacts, no search term', () => (
|
||||
<LeftPane
|
||||
{...createProps({
|
||||
modeSpecificProps: {
|
||||
mode: LeftPaneMode.Compose,
|
||||
composeContacts: defaultConversations,
|
||||
regionCode: 'US',
|
||||
searchTerm: '',
|
||||
},
|
||||
})}
|
||||
/>
|
||||
));
|
||||
|
||||
story.add('Compose: some contacts with a search term', () => (
|
||||
<LeftPane
|
||||
{...createProps({
|
||||
modeSpecificProps: {
|
||||
mode: LeftPaneMode.Compose,
|
||||
composeContacts: defaultConversations,
|
||||
regionCode: 'US',
|
||||
searchTerm: 'foo bar',
|
||||
},
|
||||
})}
|
||||
/>
|
||||
));
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue