421 lines
9.1 KiB
TypeScript
421 lines
9.1 KiB
TypeScript
import * as React from 'react';
|
|
import { SearchResults } from './SearchResults';
|
|
import {
|
|
MessageSearchResult,
|
|
PropsDataType as MessageSearchResultPropsType,
|
|
} from './MessageSearchResult';
|
|
|
|
// @ts-ignore
|
|
import { setup as setupI18n } from '../../js/modules/i18n';
|
|
// @ts-ignore
|
|
import enMessages from '../../_locales/en/messages.json';
|
|
|
|
import { storiesOf } from '@storybook/react';
|
|
//import { boolean, select } from '@storybook/addon-knobs';
|
|
import { action } from '@storybook/addon-actions';
|
|
|
|
import {
|
|
gifUrl,
|
|
landscapeGreenUrl,
|
|
landscapePurpleUrl,
|
|
pngUrl,
|
|
} from '../storybook/Fixtures';
|
|
|
|
const i18n = setupI18n('en', enMessages);
|
|
|
|
const messageLookup: Map<string, MessageSearchResultPropsType> = new Map();
|
|
|
|
const CONTACT = 'contact' as 'contact';
|
|
const CONTACTS_HEADER = 'contacts-header' as 'contacts-header';
|
|
const CONVERSATION = 'conversation' as 'conversation';
|
|
const CONVERSATIONS_HEADER = 'conversations-header' as 'conversations-header';
|
|
const DIRECT = 'direct' as 'direct';
|
|
const GROUP = 'group' as 'group';
|
|
const MESSAGE = 'message' as 'message';
|
|
const MESSAGES_HEADER = 'messages-header' as 'messages-header';
|
|
const SENT = 'sent' as 'sent';
|
|
const START_NEW_CONVERSATION = 'start-new-conversation' as 'start-new-conversation';
|
|
const SMS_MMS_NOT_SUPPORTED = 'sms-mms-not-supported-text' as 'sms-mms-not-supported-text';
|
|
|
|
messageLookup.set('1-guid-guid-guid-guid-guid', {
|
|
id: '1-guid-guid-guid-guid-guid',
|
|
conversationId: '(202) 555-0015',
|
|
sentAt: Date.now() - 5 * 60 * 1000,
|
|
snippet: '<<left>>Everyone<<right>>! Get in!',
|
|
|
|
from: {
|
|
phoneNumber: '(202) 555-0020',
|
|
title: '(202) 555-0020',
|
|
isMe: true,
|
|
color: 'blue',
|
|
avatarPath: gifUrl,
|
|
},
|
|
to: {
|
|
phoneNumber: '(202) 555-0015',
|
|
title: 'Mr. Fire 🔥',
|
|
name: 'Mr. Fire 🔥',
|
|
},
|
|
});
|
|
|
|
messageLookup.set('2-guid-guid-guid-guid-guid', {
|
|
id: '2-guid-guid-guid-guid-guid',
|
|
conversationId: '(202) 555-0016',
|
|
sentAt: Date.now() - 20 * 60 * 1000,
|
|
snippet: 'Why is <<left>>everyone<<right>> so frustrated?',
|
|
from: {
|
|
phoneNumber: '(202) 555-0016',
|
|
name: 'Jon ❄️',
|
|
title: 'Jon ❄️',
|
|
color: 'green',
|
|
},
|
|
to: {
|
|
phoneNumber: '(202) 555-0020',
|
|
title: '(202) 555-0020',
|
|
isMe: true,
|
|
},
|
|
});
|
|
|
|
messageLookup.set('3-guid-guid-guid-guid-guid', {
|
|
id: '3-guid-guid-guid-guid-guid',
|
|
conversationId: 'EveryoneGroupID',
|
|
sentAt: Date.now() - 24 * 60 * 1000,
|
|
snippet: 'Hello, <<left>>everyone<<right>>! Woohooo!',
|
|
from: {
|
|
phoneNumber: '(202) 555-0011',
|
|
name: 'Someone',
|
|
title: 'Someone',
|
|
color: 'green',
|
|
avatarPath: pngUrl,
|
|
},
|
|
to: {
|
|
phoneNumber: '(202) 555-0016',
|
|
name: "Y'all 🌆",
|
|
title: "Y'all 🌆",
|
|
},
|
|
});
|
|
|
|
messageLookup.set('4-guid-guid-guid-guid-guid', {
|
|
id: '4-guid-guid-guid-guid-guid',
|
|
conversationId: 'EveryoneGroupID',
|
|
sentAt: Date.now() - 24 * 60 * 1000,
|
|
snippet: 'Well, <<left>>everyone<<right>>, happy new year!',
|
|
from: {
|
|
phoneNumber: '(202) 555-0020',
|
|
title: '(202) 555-0020',
|
|
isMe: true,
|
|
color: 'light_green',
|
|
avatarPath: gifUrl,
|
|
},
|
|
to: {
|
|
phoneNumber: '(202) 555-0016',
|
|
name: "Y'all 🌆",
|
|
title: "Y'all 🌆",
|
|
},
|
|
});
|
|
|
|
const defaultProps = {
|
|
discussionsLoading: false,
|
|
height: 700,
|
|
items: [],
|
|
i18n,
|
|
messagesLoading: false,
|
|
noResults: false,
|
|
openConversationInternal: action('open-conversation-internal'),
|
|
regionCode: 'US',
|
|
renderMessageSearchResult(id: string): JSX.Element {
|
|
const messageProps = messageLookup.get(id) as MessageSearchResultPropsType;
|
|
|
|
return (
|
|
<MessageSearchResult
|
|
{...messageProps}
|
|
i18n={i18n}
|
|
openConversationInternal={action(
|
|
'MessageSearchResult-open-conversation-internal'
|
|
)}
|
|
/>
|
|
);
|
|
},
|
|
searchConversationName: undefined,
|
|
searchTerm: '1234567890',
|
|
selectedConversationId: undefined,
|
|
selectedMessageId: undefined,
|
|
startNewConversation: action('start-new-conversation'),
|
|
width: 320,
|
|
};
|
|
|
|
const conversations = [
|
|
{
|
|
type: CONVERSATION,
|
|
data: {
|
|
id: '+12025550011',
|
|
phoneNumber: '(202) 555-0011',
|
|
name: 'Everyone 🌆',
|
|
title: 'Everyone 🌆',
|
|
type: GROUP,
|
|
color: 'signal-blue' as 'signal-blue',
|
|
avatarPath: landscapeGreenUrl,
|
|
isMe: false,
|
|
lastUpdated: Date.now() - 5 * 60 * 1000,
|
|
unreadCount: 0,
|
|
isSelected: false,
|
|
lastMessage: {
|
|
text: 'The rabbit hopped silently in the night.',
|
|
status: SENT,
|
|
},
|
|
},
|
|
},
|
|
{
|
|
type: CONVERSATION,
|
|
data: {
|
|
id: '+12025550012',
|
|
phoneNumber: '(202) 555-0012',
|
|
name: 'Everyone Else 🔥',
|
|
title: 'Everyone Else 🔥',
|
|
color: 'pink' as 'pink',
|
|
type: DIRECT,
|
|
avatarPath: landscapePurpleUrl,
|
|
isMe: false,
|
|
lastUpdated: Date.now() - 5 * 60 * 1000,
|
|
unreadCount: 0,
|
|
isSelected: false,
|
|
lastMessage: {
|
|
text: "What's going on?",
|
|
status: SENT,
|
|
},
|
|
},
|
|
},
|
|
];
|
|
|
|
const contacts = [
|
|
{
|
|
type: CONTACT,
|
|
data: {
|
|
id: '+12025550013',
|
|
phoneNumber: '(202) 555-0013',
|
|
name: 'The one Everyone',
|
|
title: 'The one Everyone',
|
|
color: 'blue' as 'blue',
|
|
type: DIRECT,
|
|
avatarPath: gifUrl,
|
|
isMe: false,
|
|
lastUpdated: Date.now() - 10 * 60 * 1000,
|
|
unreadCount: 0,
|
|
isSelected: false,
|
|
},
|
|
},
|
|
{
|
|
type: CONTACT,
|
|
data: {
|
|
id: '+12025550014',
|
|
phoneNumber: '(202) 555-0014',
|
|
name: 'No likey everyone',
|
|
title: 'No likey everyone',
|
|
type: DIRECT,
|
|
color: 'red' as 'red',
|
|
isMe: false,
|
|
lastUpdated: Date.now() - 11 * 60 * 1000,
|
|
unreadCount: 0,
|
|
isSelected: false,
|
|
},
|
|
},
|
|
];
|
|
|
|
const messages = [
|
|
{
|
|
type: MESSAGE,
|
|
data: '1-guid-guid-guid-guid-guid',
|
|
},
|
|
{
|
|
type: MESSAGE,
|
|
data: '2-guid-guid-guid-guid-guid',
|
|
},
|
|
{
|
|
type: MESSAGE,
|
|
data: '3-guid-guid-guid-guid-guid',
|
|
},
|
|
{
|
|
type: MESSAGE,
|
|
data: '4-guid-guid-guid-guid-guid',
|
|
},
|
|
];
|
|
|
|
const messagesMany = Array.from(Array(100), (_, i) => messages[i % 4]);
|
|
|
|
const permutations = [
|
|
{
|
|
title: 'SMS/MMS Not Supported Text',
|
|
props: {
|
|
items: [
|
|
{
|
|
type: START_NEW_CONVERSATION,
|
|
data: undefined,
|
|
},
|
|
{
|
|
type: SMS_MMS_NOT_SUPPORTED,
|
|
data: undefined,
|
|
},
|
|
],
|
|
},
|
|
},
|
|
{
|
|
title: 'All Result Types',
|
|
props: {
|
|
items: [
|
|
{
|
|
type: CONVERSATIONS_HEADER,
|
|
data: undefined,
|
|
},
|
|
...conversations,
|
|
{
|
|
type: CONTACTS_HEADER,
|
|
data: undefined,
|
|
},
|
|
...contacts,
|
|
{
|
|
type: MESSAGES_HEADER,
|
|
data: undefined,
|
|
},
|
|
...messages,
|
|
],
|
|
},
|
|
},
|
|
{
|
|
title: 'Start new Conversation',
|
|
props: {
|
|
items: [
|
|
{
|
|
type: START_NEW_CONVERSATION,
|
|
data: undefined,
|
|
},
|
|
{
|
|
type: CONVERSATIONS_HEADER,
|
|
data: undefined,
|
|
},
|
|
...conversations,
|
|
{
|
|
type: CONTACTS_HEADER,
|
|
data: undefined,
|
|
},
|
|
...contacts,
|
|
{
|
|
type: MESSAGES_HEADER,
|
|
data: undefined,
|
|
},
|
|
...messages,
|
|
],
|
|
},
|
|
},
|
|
{
|
|
title: 'No Conversations',
|
|
props: {
|
|
items: [
|
|
{
|
|
type: CONTACTS_HEADER,
|
|
data: undefined,
|
|
},
|
|
...contacts,
|
|
{
|
|
type: MESSAGES_HEADER,
|
|
data: undefined,
|
|
},
|
|
...messages,
|
|
],
|
|
},
|
|
},
|
|
{
|
|
title: 'No Contacts',
|
|
props: {
|
|
items: [
|
|
{
|
|
type: CONVERSATIONS_HEADER,
|
|
data: undefined,
|
|
},
|
|
...conversations,
|
|
{
|
|
type: MESSAGES_HEADER,
|
|
data: undefined,
|
|
},
|
|
...messages,
|
|
],
|
|
},
|
|
},
|
|
{
|
|
title: 'No Messages',
|
|
props: {
|
|
items: [
|
|
{
|
|
type: CONVERSATIONS_HEADER,
|
|
data: undefined,
|
|
},
|
|
...conversations,
|
|
{
|
|
type: CONTACTS_HEADER,
|
|
data: undefined,
|
|
},
|
|
...contacts,
|
|
],
|
|
},
|
|
},
|
|
{
|
|
title: 'No Results',
|
|
props: {
|
|
noResults: true,
|
|
},
|
|
},
|
|
{
|
|
title: 'No Results, Searching in Conversation',
|
|
props: {
|
|
noResults: true,
|
|
searchInConversationName: 'Everyone 🔥',
|
|
searchTerm: 'something',
|
|
},
|
|
},
|
|
{
|
|
title: 'Searching in Conversation no search term',
|
|
props: {
|
|
noResults: true,
|
|
searchInConversationName: 'Everyone 🔥',
|
|
searchTerm: '',
|
|
},
|
|
},
|
|
{
|
|
title: 'Lots of results',
|
|
props: {
|
|
items: [
|
|
{
|
|
type: CONVERSATIONS_HEADER,
|
|
data: undefined,
|
|
},
|
|
...conversations,
|
|
{
|
|
type: CONTACTS_HEADER,
|
|
data: undefined,
|
|
},
|
|
...contacts,
|
|
{
|
|
type: MESSAGES_HEADER,
|
|
data: undefined,
|
|
},
|
|
...messagesMany,
|
|
],
|
|
},
|
|
},
|
|
{
|
|
title: 'Messages, no header',
|
|
props: {
|
|
items: messages,
|
|
},
|
|
},
|
|
];
|
|
|
|
storiesOf('Components/SearchResults', module).add('Iterations', () => {
|
|
return permutations.map(({ props, title }) => (
|
|
<>
|
|
<h3>{title}</h3>
|
|
<div className="module-left-pane">
|
|
<SearchResults {...defaultProps} {...props} />
|
|
</div>
|
|
<hr />
|
|
</>
|
|
));
|
|
});
|