Move left pane entirely to React

2019-01-14 13:49:58 -08:00 · 2019-01-14 13:49:58 -08:00 · b3ac1373fa
commit b3ac1373fa
parent bf904ddd12
142 changed files with 5016 additions and 3428 deletions
--- a/ts/components/SearchResults.tsx
+++ b/ts/components/SearchResults.tsx
@ -0,0 +1,118 @@
+import React from 'react';
+import {
+  ConversationListItem,
+  PropsData as ConversationListItemPropsType,
+} from './ConversationListItem';
+import {
+  MessageSearchResult,
+  PropsData as MessageSearchResultPropsType,
+} from './MessageSearchResult';
+import { StartNewConversation } from './StartNewConversation';
+
+import { LocalizerType } from '../types/Util';
+
+export type PropsData = {
+  contacts: Array<ConversationListItemPropsType>;
+  conversations: Array<ConversationListItemPropsType>;
+  hideMessagesHeader: boolean;
+  messages: Array<MessageSearchResultPropsType>;
+  searchTerm: string;
+  showStartNewConversation: boolean;
+};
+
+type PropsHousekeeping = {
+  i18n: LocalizerType;
+  openConversation: (id: string, messageId?: string) => void;
+  startNewConversation: (id: string) => void;
+};
+
+type Props = PropsData & PropsHousekeeping;
+
+export class SearchResults extends React.Component<Props> {
+  public render() {
+    const {
+      conversations,
+      contacts,
+      hideMessagesHeader,
+      i18n,
+      messages,
+      openConversation,
+      startNewConversation,
+      searchTerm,
+      showStartNewConversation,
+    } = this.props;
+
+    const haveConversations = conversations && conversations.length;
+    const haveContacts = contacts && contacts.length;
+    const haveMessages = messages && messages.length;
+    const noResults =
+      !showStartNewConversation &&
+      !haveConversations &&
+      !haveContacts &&
+      !haveMessages;
+
+    return (
+      <div className="module-search-results">
+        {noResults ? (
+          <div className="module-search-results__no-results">
+            {i18n('noSearchResults', [searchTerm])}
+          </div>
+        ) : null}
+        {showStartNewConversation ? (
+          <StartNewConversation
+            phoneNumber={searchTerm}
+            i18n={i18n}
+            onClick={startNewConversation}
+          />
+        ) : null}
+        {haveConversations ? (
+          <div className="module-search-results__conversations">
+            <div className="module-search-results__conversations-header">
+              {i18n('conversationsHeader')}
+            </div>
+            {conversations.map(conversation => (
+              <ConversationListItem
+                key={conversation.phoneNumber}
+                {...conversation}
+                onClick={openConversation}
+                i18n={i18n}
+              />
+            ))}
+          </div>
+        ) : null}
+        {haveContacts ? (
+          <div className="module-search-results__contacts">
+            <div className="module-search-results__contacts-header">
+              {i18n('contactsHeader')}
+            </div>
+            {contacts.map(contact => (
+              <ConversationListItem
+                key={contact.phoneNumber}
+                {...contact}
+                onClick={openConversation}
+                i18n={i18n}
+              />
+            ))}
+          </div>
+        ) : null}
+        {haveMessages ? (
+          <div className="module-search-results__messages">
+            {hideMessagesHeader ? null : (
+              <div className="module-search-results__messages-header">
+                {i18n('messagesHeader')}
+              </div>
+            )}
+            {messages.map(message => (
+              <MessageSearchResult
+                key={message.id}
+                {...message}
+                onClick={openConversation}
+                i18n={i18n}
+              />
+            ))}
+          </div>
+        ) : null}
+      </div>
+    );
+  }
+}