session-desktop/ts/components/SearchResults.md

With all result types

window.searchResults = {};
window.searchResults.conversations = [
  {
    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',
    },
  },
  {
    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',
    },
  },
];

window.searchResults.contacts = [
  {
    name: 'The one Everyone',
    conversationType: 'direct',
    phoneNumber: '(202) 555-0013',
    avatarPath: util.gifObjectUrl,
  },
  {
    name: 'No likey everyone',
    conversationType: 'direct',
    phoneNumber: '(202) 555-0014',
    color: 'red',
  },
];

window.searchResults.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!',
    onClick: () => 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,
    onClick: () => 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,
    onClick: () => 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,
    onClick: () => console.log('onClick'),
  },
];

<util.LeftPaneContext theme={util.theme}>
  <SearchResults
    conversations={window.searchResults.conversations}
    contacts={window.searchResults.contacts}
    messages={window.searchResults.messages}
    i18n={util.i18n}
    onClickMessage={id => console.log('onClickMessage', id)}
    onClickConversation={id => console.log('onClickConversation', id)}
    onStartNewConversation={(query, options) =>
      console.log('onStartNewConversation', query, options)
    }
  />
</util.LeftPaneContext>;

With 'start new conversation'

<util.LeftPaneContext theme={util.theme}>
  <SearchResults
    conversations={window.searchResults.conversations}
    contacts={window.searchResults.contacts}
    messages={window.searchResults.messages}
    showStartNewConversation={true}
    searchTerm="(555) 100-2000"
    i18n={util.i18n}
    onClickMessage={id => console.log('onClickMessage', id)}
    onClickConversation={id => console.log('onClickConversation', id)}
    onStartNewConversation={(query, options) =>
      console.log('onStartNewConversation', query, options)
    }
  />
</util.LeftPaneContext>

With no conversations

<util.LeftPaneContext theme={util.theme}>
  <SearchResults
    conversations={null}
    contacts={window.searchResults.contacts}
    messages={window.searchResults.messages}
    i18n={util.i18n}
    onClickMessage={id => console.log('onClickMessage', id)}
    onClickConversation={id => console.log('onClickConversation', id)}
    onStartNewConversation={(query, options) =>
      console.log('onStartNewConversation', query, options)
    }
  />
</util.LeftPaneContext>

With no contacts

<util.LeftPaneContext theme={util.theme}>
  <SearchResults
    conversations={window.searchResults.conversations}
    contacts={null}
    messages={window.searchResults.messages}
    i18n={util.i18n}
    onClickMessage={id => console.log('onClickMessage', id)}
    onClickConversation={id => console.log('onClickConversation', id)}
    onStartNewConversation={(query, options) =>
      console.log('onStartNewConversation', query, options)
    }
  />
</util.LeftPaneContext>

With no messages

<util.LeftPaneContext theme={util.theme}>
  <SearchResults
    conversations={window.searchResults.conversations}
    contacts={window.searchResults.contacts}
    messages={null}
    i18n={util.i18n}
  />
</util.LeftPaneContext>

With no results at all

<util.LeftPaneContext theme={util.theme}>
  <SearchResults
    conversations={null}
    contacts={null}
    messages={null}
    searchTerm="dinner plans"
    i18n={util.i18n}
  />
</util.LeftPaneContext>

With a lot of results

const messages = [];
for (let i = 0; i < 100; i += 1) {
  messages.push({
    from: {
      name: 'Mr. Fire 🔥',
      phoneNumber: '(202) 555-0015',
      avatarPath: util.landscapeGreenObjectUrl,
    },
    to: {
      isMe: true,
    },
    id: `${i}-guid-guid-guid-guid-guid`,
    conversationId: '(202) 555-0015',
    receivedAt: Date.now() - 5 * 60 * 1000,
    snippet: `${i} <<left>>Everyone<<right>>! Get in!`,
    onClick: data => console.log('onClick', data),
  });
}

<util.LeftPaneContext style={{ height: '500px' }} theme={util.theme}>
  <SearchResults
    conversations={null}
    contacts={null}
    messages={messages}
    i18n={util.i18n}
  />
</util.LeftPaneContext>;

With just messages and no header

const messages = [];
for (let i = 0; i < 10; i += 1) {
  messages.push({
    from: {
      name: 'Mr. Fire 🔥',
      phoneNumber: '(202) 555-0015',
      avatarPath: util.landscapeGreenObjectUrl,
    },
    to: {
      isMe: true,
    },
    id: `${i}-guid-guid-guid-guid-guid`,
    conversationId: '(202) 555-0015',
    receivedAt: Date.now() - 5 * 60 * 1000,
    snippet: `${i} <<left>>Everyone<<right>>! Get in!`,
    onClick: data => console.log('onClick', data),
  });
}

<util.LeftPaneContext style={{ height: '500px' }} theme={util.theme}>
  <SearchResults
    hideMessagesHeader={true}
    messages={messages}
    i18n={util.i18n}
  />
</util.LeftPaneContext>;