Migrate LeftPane to Storybook
This commit is contained in:
Chris Svenningsen
Josh Perez
parent
b112666239
commit
702913b21a
2 changed files with 127 additions and 455 deletions
|
|
@ -1,455 +0,0 @@
|
||||||
#### With search results
|
|
||||||
|
|
||||||
```jsx
|
|
||||||
const items = [
|
|
||||||
{
|
|
||||||
type: 'conversations-header',
|
|
||||||
data: undefined,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: 'conversation',
|
|
||||||
data: {
|
|
||||||
name: 'Everyone 🌆',
|
|
||||||
conversationType: 'group',
|
|
||||||
phoneNumber: '(202) 555-0011',
|
|
||||||
avatarPath: util.landscapeGreenObjectUrl,
|
|
||||||
lastUpdated: Date.now() - 5 * 60 * 1000,
|
|
||||||
lastMessage: {
|
|
||||||
text: 'The rabbit hopped silently in the night.',
|
|
||||||
status: 'sent',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: 'conversation',
|
|
||||||
data: {
|
|
||||||
name: 'Everyone Else 🔥',
|
|
||||||
conversationType: 'direct',
|
|
||||||
phoneNumber: '(202) 555-0012',
|
|
||||||
avatarPath: util.landscapePurpleObjectUrl,
|
|
||||||
lastUpdated: Date.now() - 5 * 60 * 1000,
|
|
||||||
lastMessage: {
|
|
||||||
text: "What's going on?",
|
|
||||||
status: 'sent',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: 'contacts-header',
|
|
||||||
data: undefined,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: 'contact',
|
|
||||||
data: {
|
|
||||||
name: 'The one Everyone',
|
|
||||||
conversationType: 'direct',
|
|
||||||
phoneNumber: '(202) 555-0013',
|
|
||||||
avatarPath: util.gifObjectUrl,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: 'contact',
|
|
||||||
data: {
|
|
||||||
name: 'No likey everyone',
|
|
||||||
conversationType: 'direct',
|
|
||||||
phoneNumber: '(202) 555-0014',
|
|
||||||
color: 'red',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: 'messages-header',
|
|
||||||
data: undefined,
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
const messages = [
|
|
||||||
{
|
|
||||||
from: {
|
|
||||||
isMe: true,
|
|
||||||
avatarPath: util.gifObjectUrl,
|
|
||||||
},
|
|
||||||
to: {
|
|
||||||
name: 'Mr. Fire 🔥',
|
|
||||||
phoneNumber: '(202) 555-0015',
|
|
||||||
},
|
|
||||||
id: '1-guid-guid-guid-guid-guid',
|
|
||||||
conversationId: '(202) 555-0015',
|
|
||||||
receivedAt: Date.now() - 5 * 60 * 1000,
|
|
||||||
snippet: '<<left>>Everyone<<right>>! Get in!',
|
|
||||||
conversationOpenInternal: () => console.log('onClick'),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
from: {
|
|
||||||
name: 'Jon ❄️',
|
|
||||||
phoneNumber: '(202) 555-0016',
|
|
||||||
color: 'green',
|
|
||||||
},
|
|
||||||
to: {
|
|
||||||
isMe: true,
|
|
||||||
},
|
|
||||||
id: '2-guid-guid-guid-guid-guid',
|
|
||||||
conversationId: '(202) 555-0016',
|
|
||||||
snippet: 'Why is <<left>>everyone<<right>> so frustrated?',
|
|
||||||
receivedAt: Date.now() - 20 * 60 * 1000,
|
|
||||||
conversationOpenInternal: () => console.log('onClick'),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
from: {
|
|
||||||
name: 'Someone',
|
|
||||||
phoneNumber: '(202) 555-0011',
|
|
||||||
color: 'green',
|
|
||||||
avatarPath: util.pngObjectUrl,
|
|
||||||
},
|
|
||||||
to: {
|
|
||||||
name: "Y'all 🌆",
|
|
||||||
},
|
|
||||||
id: '3-guid-guid-guid-guid-guid',
|
|
||||||
conversationId: 'EveryoneGroupID',
|
|
||||||
snippet: 'Hello, <<left>>everyone<<right>>! Woohooo!',
|
|
||||||
receivedAt: Date.now() - 24 * 60 * 1000,
|
|
||||||
conversationOpenInternal: () => console.log('onClick'),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
from: {
|
|
||||||
isMe: true,
|
|
||||||
avatarPath: util.gifObjectUrl,
|
|
||||||
},
|
|
||||||
to: {
|
|
||||||
name: "Y'all 🌆",
|
|
||||||
},
|
|
||||||
id: '4-guid-guid-guid-guid-guid',
|
|
||||||
conversationId: 'EveryoneGroupID',
|
|
||||||
snippet: 'Well, <<left>>everyone<<right>>, happy new year!',
|
|
||||||
receivedAt: Date.now() - 24 * 60 * 1000,
|
|
||||||
conversationOpenInternal: () => console.log('onClick'),
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
const messageLookup = util._.fromPairs(
|
|
||||||
util._.map(messages, message => [message.id, message])
|
|
||||||
);
|
|
||||||
messages.forEach(message => {
|
|
||||||
items.push({
|
|
||||||
type: 'message',
|
|
||||||
data: message.id,
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
const searchResults = {
|
|
||||||
items,
|
|
||||||
openConversationInternal: (...args) =>
|
|
||||||
console.log('openConversationInternal', args),
|
|
||||||
startNewConversation: (...args) => console.log('startNewConversation', args),
|
|
||||||
onStartNewConversation: (...args) => {
|
|
||||||
console.log('onStartNewConversation', args);
|
|
||||||
},
|
|
||||||
renderMessageSearchResult: id => (
|
|
||||||
<MessageSearchResult
|
|
||||||
{...messageLookup[id]}
|
|
||||||
openConversationInternal={(...args) =>
|
|
||||||
console.log('openConversationInternal', args)
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
),
|
|
||||||
};
|
|
||||||
|
|
||||||
<util.LeftPaneContext theme={util.theme} style={{ height: '200px' }}>
|
|
||||||
<LeftPane
|
|
||||||
searchResults={searchResults}
|
|
||||||
startNewConversation={(query, options) =>
|
|
||||||
console.log('startNewConversation', query, options)
|
|
||||||
}
|
|
||||||
openConversationInternal={(id, messageId) =>
|
|
||||||
console.log('openConversation', id, messageId)
|
|
||||||
}
|
|
||||||
showArchivedConversations={() => console.log('showArchivedConversations')}
|
|
||||||
showInbox={() => console.log('showInbox')}
|
|
||||||
renderMainHeader={() => (
|
|
||||||
<MainHeader
|
|
||||||
searchTerm="Hi there!"
|
|
||||||
search={result => console.log('search', result)}
|
|
||||||
updateSearch={result => console.log('updateSearch', result)}
|
|
||||||
clearSearch={result => console.log('clearSearch', result)}
|
|
||||||
i18n={util.i18n}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
renderMessageSearchResult={id => (
|
|
||||||
<MessageSearchResult
|
|
||||||
{...messageLookup[id]}
|
|
||||||
i18n={util.i18n}
|
|
||||||
openConversationInternal={(...args) =>
|
|
||||||
console.log('openConversationInternal', args)
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
i18n={util.i18n}
|
|
||||||
/>
|
|
||||||
</util.LeftPaneContext>;
|
|
||||||
```
|
|
||||||
|
|
||||||
#### With just conversations
|
|
||||||
|
|
||||||
```jsx
|
|
||||||
const conversations = [
|
|
||||||
{
|
|
||||||
id: 'convo1',
|
|
||||||
name: 'Everyone 🌆',
|
|
||||||
conversationType: 'group',
|
|
||||||
phoneNumber: '(202) 555-0011',
|
|
||||||
avatarPath: util.landscapeGreenObjectUrl,
|
|
||||||
lastUpdated: Date.now() - 5 * 60 * 1000,
|
|
||||||
lastMessage: {
|
|
||||||
text: 'The rabbit hopped silently in the night.',
|
|
||||||
status: 'sent',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'convo2',
|
|
||||||
name: 'Everyone Else 🔥',
|
|
||||||
conversationType: 'direct',
|
|
||||||
phoneNumber: '(202) 555-0012',
|
|
||||||
avatarPath: util.landscapePurpleObjectUrl,
|
|
||||||
lastUpdated: Date.now() - 5 * 60 * 1000,
|
|
||||||
lastMessage: {
|
|
||||||
text: "What's going on?",
|
|
||||||
status: 'error',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'convo3',
|
|
||||||
name: 'John the Turtle',
|
|
||||||
conversationType: 'direct',
|
|
||||||
phoneNumber: '(202) 555-0021',
|
|
||||||
lastUpdated: Date.now() - 24 * 60 * 60 * 1000,
|
|
||||||
lastMessage: {
|
|
||||||
text: 'I dunno',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'convo4',
|
|
||||||
name: 'The Fly',
|
|
||||||
conversationType: 'direct',
|
|
||||||
phoneNumber: '(202) 555-0022',
|
|
||||||
avatarPath: util.pngObjectUrl,
|
|
||||||
lastUpdated: Date.now(),
|
|
||||||
lastMessage: {
|
|
||||||
text: 'Gimme!',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
<util.LeftPaneContext theme={util.theme} style={{ height: '200px' }}>
|
|
||||||
<LeftPane
|
|
||||||
conversations={conversations}
|
|
||||||
archivedConversations={[]}
|
|
||||||
startNewConversation={(query, options) =>
|
|
||||||
console.log('startNewConversation', query, options)
|
|
||||||
}
|
|
||||||
openConversationInternal={(id, messageId) =>
|
|
||||||
console.log('openConversation', id, messageId)
|
|
||||||
}
|
|
||||||
showArchivedConversations={() => console.log('showArchivedConversations')}
|
|
||||||
showInbox={() => console.log('showInbox')}
|
|
||||||
renderMainHeader={() => (
|
|
||||||
<MainHeader
|
|
||||||
searchTerm="Hi there!"
|
|
||||||
search={result => console.log('search', result)}
|
|
||||||
updateSearch={result => console.log('updateSearch', result)}
|
|
||||||
clearSearch={result => console.log('clearSearch', result)}
|
|
||||||
i18n={util.i18n}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
i18n={util.i18n}
|
|
||||||
/>
|
|
||||||
</util.LeftPaneContext>;
|
|
||||||
```
|
|
||||||
|
|
||||||
#### Showing inbox, with some archived
|
|
||||||
|
|
||||||
```jsx
|
|
||||||
const conversations = [
|
|
||||||
{
|
|
||||||
id: 'convo1',
|
|
||||||
name: 'Everyone 🌆',
|
|
||||||
conversationType: 'group',
|
|
||||||
phoneNumber: '(202) 555-0011',
|
|
||||||
avatarPath: util.landscapeGreenObjectUrl,
|
|
||||||
lastUpdated: Date.now() - 5 * 60 * 1000,
|
|
||||||
lastMessage: {
|
|
||||||
text: 'The rabbit hopped silently in the night.',
|
|
||||||
status: 'sent',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'convo2',
|
|
||||||
name: 'Everyone Else 🔥',
|
|
||||||
conversationType: 'direct',
|
|
||||||
phoneNumber: '(202) 555-0012',
|
|
||||||
avatarPath: util.landscapePurpleObjectUrl,
|
|
||||||
lastUpdated: Date.now() - 5 * 60 * 1000,
|
|
||||||
lastMessage: {
|
|
||||||
text: "What's going on?",
|
|
||||||
status: 'error',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'convo3',
|
|
||||||
name: 'John the Turtle',
|
|
||||||
conversationType: 'direct',
|
|
||||||
phoneNumber: '(202) 555-0021',
|
|
||||||
lastUpdated: Date.now() - 24 * 60 * 60 * 1000,
|
|
||||||
lastMessage: {
|
|
||||||
text: 'I dunno',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'convo4',
|
|
||||||
name: 'The Fly',
|
|
||||||
conversationType: 'direct',
|
|
||||||
phoneNumber: '(202) 555-0022',
|
|
||||||
avatarPath: util.pngObjectUrl,
|
|
||||||
lastUpdated: Date.now(),
|
|
||||||
lastMessage: {
|
|
||||||
text: 'Gimme!',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
<util.LeftPaneContext theme={util.theme} style={{ height: '200px' }}>
|
|
||||||
<LeftPane
|
|
||||||
conversations={conversations.slice(0, 2)}
|
|
||||||
archivedConversations={conversations.slice(2)}
|
|
||||||
startNewConversation={(query, options) =>
|
|
||||||
console.log('startNewConversation', query, options)
|
|
||||||
}
|
|
||||||
openConversationInternal={(id, messageId) =>
|
|
||||||
console.log('openConversation', id, messageId)
|
|
||||||
}
|
|
||||||
showArchivedConversations={() => console.log('showArchivedConversations')}
|
|
||||||
showInbox={() => console.log('showInbox')}
|
|
||||||
renderMainHeader={() => (
|
|
||||||
<MainHeader
|
|
||||||
searchTerm="Hi there!"
|
|
||||||
search={result => console.log('search', result)}
|
|
||||||
updateSearch={result => console.log('updateSearch', result)}
|
|
||||||
clearSearch={result => console.log('clearSearch', result)}
|
|
||||||
i18n={util.i18n}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
i18n={util.i18n}
|
|
||||||
/>
|
|
||||||
</util.LeftPaneContext>;
|
|
||||||
```
|
|
||||||
|
|
||||||
#### Showing archived conversations
|
|
||||||
|
|
||||||
```jsx
|
|
||||||
const conversations = [
|
|
||||||
{
|
|
||||||
id: 'convo1',
|
|
||||||
name: 'Everyone 🌆',
|
|
||||||
conversationType: 'group',
|
|
||||||
phoneNumber: '(202) 555-0011',
|
|
||||||
avatarPath: util.landscapeGreenObjectUrl,
|
|
||||||
lastUpdated: Date.now() - 5 * 60 * 1000,
|
|
||||||
lastMessage: {
|
|
||||||
text: 'The rabbit hopped silently in the night.',
|
|
||||||
status: 'sent',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'convo2',
|
|
||||||
name: 'Everyone Else 🔥',
|
|
||||||
conversationType: 'direct',
|
|
||||||
phoneNumber: '(202) 555-0012',
|
|
||||||
avatarPath: util.landscapePurpleObjectUrl,
|
|
||||||
lastUpdated: Date.now() - 5 * 60 * 1000,
|
|
||||||
lastMessage: {
|
|
||||||
text: "What's going on?",
|
|
||||||
status: 'error',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'convo3',
|
|
||||||
name: 'John the Turtle',
|
|
||||||
conversationType: 'direct',
|
|
||||||
phoneNumber: '(202) 555-0021',
|
|
||||||
lastUpdated: Date.now() - 24 * 60 * 60 * 1000,
|
|
||||||
lastMessage: {
|
|
||||||
text: 'I dunno',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'convo4',
|
|
||||||
name: 'The Fly',
|
|
||||||
conversationType: 'direct',
|
|
||||||
phoneNumber: '(202) 555-0022',
|
|
||||||
avatarPath: util.pngObjectUrl,
|
|
||||||
lastUpdated: Date.now(),
|
|
||||||
lastMessage: {
|
|
||||||
text: 'Gimme!',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
<util.LeftPaneContext theme={util.theme} style={{ height: '200px' }}>
|
|
||||||
<LeftPane
|
|
||||||
conversations={conversations.slice(0, 2)}
|
|
||||||
archivedConversations={conversations.slice(2)}
|
|
||||||
showArchived={true}
|
|
||||||
startNewConversation={(query, options) =>
|
|
||||||
console.log('startNewConversation', query, options)
|
|
||||||
}
|
|
||||||
openConversationInternal={(id, messageId) =>
|
|
||||||
console.log('openConversation', id, messageId)
|
|
||||||
}
|
|
||||||
showArchivedConversations={() => console.log('showArchivedConversations')}
|
|
||||||
showInbox={() => console.log('showInbox')}
|
|
||||||
renderMainHeader={() => (
|
|
||||||
<MainHeader
|
|
||||||
searchTerm="Hi there!"
|
|
||||||
search={result => console.log('search', result)}
|
|
||||||
updateSearch={result => console.log('updateSearch', result)}
|
|
||||||
clearSearch={result => console.log('clearSearch', result)}
|
|
||||||
i18n={util.i18n}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
i18n={util.i18n}
|
|
||||||
/>
|
|
||||||
</util.LeftPaneContext>;
|
|
||||||
```
|
|
||||||
|
|
||||||
#### Searching in conversation
|
|
||||||
|
|
||||||
```jsx
|
|
||||||
<util.LeftPaneContext theme={util.theme} style={{ height: '200px' }}>
|
|
||||||
<LeftPane
|
|
||||||
searchResults={{
|
|
||||||
searchConversationName: "Y'all 🌆",
|
|
||||||
}}
|
|
||||||
conversations={[]}
|
|
||||||
archivedConversations={[]}
|
|
||||||
showArchived={false}
|
|
||||||
startNewConversation={(query, options) =>
|
|
||||||
console.log('startNewConversation', query, options)
|
|
||||||
}
|
|
||||||
openConversationInternal={(id, messageId) =>
|
|
||||||
console.log('openConversation', id, messageId)
|
|
||||||
}
|
|
||||||
showArchivedConversations={() => console.log('showArchivedConversations')}
|
|
||||||
showInbox={() => console.log('showInbox')}
|
|
||||||
renderMainHeader={() => (
|
|
||||||
<MainHeader
|
|
||||||
searchTerm=""
|
|
||||||
search={result => console.log('search', result)}
|
|
||||||
searchConversationName="Y'all 🌆"
|
|
||||||
searchConversationId="group-id-1"
|
|
||||||
updateSearch={result => console.log('updateSearch', result)}
|
|
||||||
clearSearch={result => console.log('clearSearch', result)}
|
|
||||||
i18n={util.i18n}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
i18n={util.i18n}
|
|
||||||
/>
|
|
||||||
</util.LeftPaneContext>
|
|
||||||
```
|
|
||||||
127
ts/components/LeftPane.stories.tsx
Normal file
127
ts/components/LeftPane.stories.tsx
Normal file
|
|
@ -0,0 +1,127 @@
|
||||||
|
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';
|
||||||
|
|
||||||
|
// @ts-ignore
|
||||||
|
import { setup as setupI18n } from '../../js/modules/i18n';
|
||||||
|
// @ts-ignore
|
||||||
|
import enMessages from '../../_locales/en/messages.json';
|
||||||
|
const i18n = setupI18n('en', enMessages);
|
||||||
|
|
||||||
|
const story = storiesOf('Components/LeftPane', module);
|
||||||
|
|
||||||
|
const defaultConversations: Array<PropsData> = [
|
||||||
|
{
|
||||||
|
id: 'fred-convo',
|
||||||
|
isSelected: false,
|
||||||
|
lastUpdated: Date.now(),
|
||||||
|
title: 'Fred Willard',
|
||||||
|
type: 'direct',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'marc-convo',
|
||||||
|
isSelected: true,
|
||||||
|
lastUpdated: Date.now(),
|
||||||
|
title: 'Marc Barraca',
|
||||||
|
type: 'direct',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const defaultArchivedConversations: Array<PropsData> = [
|
||||||
|
{
|
||||||
|
id: 'michelle-archive-convo',
|
||||||
|
isSelected: false,
|
||||||
|
lastUpdated: Date.now(),
|
||||||
|
title: 'Michelle Mercure',
|
||||||
|
type: 'direct',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
|
||||||
|
archivedConversations:
|
||||||
|
overrideProps.archivedConversations || defaultArchivedConversations,
|
||||||
|
conversations: overrideProps.conversations || defaultConversations,
|
||||||
|
i18n,
|
||||||
|
openConversationInternal: action('openConversationInternal'),
|
||||||
|
renderExpiredBuildDialog: () => <div />,
|
||||||
|
renderMainHeader: () => <div />,
|
||||||
|
renderMessageSearchResult: () => <div />,
|
||||||
|
renderNetworkStatus: () => <div />,
|
||||||
|
renderRelinkDialog: () => <div />,
|
||||||
|
renderUpdateDialog: () => <div />,
|
||||||
|
searchResults: overrideProps.searchResults,
|
||||||
|
selectedConversationId: text(
|
||||||
|
'selectedConversationId',
|
||||||
|
overrideProps.selectedConversationId || null
|
||||||
|
),
|
||||||
|
showArchived: boolean('showArchived', overrideProps.showArchived || false),
|
||||||
|
showArchivedConversations: action('showArchivedConversations'),
|
||||||
|
showInbox: action('showInbox'),
|
||||||
|
startNewConversation: action('startNewConversation'),
|
||||||
|
});
|
||||||
|
|
||||||
|
story.add('Conversation States (Active, Selected, Archived)', () => {
|
||||||
|
const props = createProps();
|
||||||
|
|
||||||
|
return <LeftPane {...props} />;
|
||||||
|
});
|
||||||
|
|
||||||
|
story.add('Archived Conversations Shown', () => {
|
||||||
|
const props = createProps({
|
||||||
|
showArchived: true,
|
||||||
|
});
|
||||||
|
return <LeftPane {...props} />;
|
||||||
|
});
|
||||||
|
|
||||||
|
story.add('Search Results', () => {
|
||||||
|
const props = createProps({
|
||||||
|
searchResults: {
|
||||||
|
discussionsLoading: false,
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
type: 'conversations-header',
|
||||||
|
data: undefined,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'conversation',
|
||||||
|
data: {
|
||||||
|
id: 'fred-convo',
|
||||||
|
isSelected: false,
|
||||||
|
lastUpdated: Date.now(),
|
||||||
|
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(),
|
||||||
|
title: 'Fred Willard',
|
||||||
|
type: 'direct',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
messagesLoading: false,
|
||||||
|
noResults: false,
|
||||||
|
regionCode: 'en',
|
||||||
|
searchTerm: 'Fred',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
return <LeftPane {...props} />;
|
||||||
|
});
|
||||||
Loading…
Add table
Reference in a new issue