render header from static method in LeftPane.tsx to be reused on subsection

_locales/en/messages.json

@@ -2412,5 +2412,8 @@
   },
   "message": {
     "message": "Message"
+  },
+  "lists": {
+    "message": "Lists"
   }
 }

stylesheets/_session_theme_dark_left_pane.scss

@@ -103,11 +103,15 @@ $session-compose-margin: 20px;
     display: flex;
     flex-direction: row;
     margin: 28px 7px 28px 0px;
+
+    .session-button {
+      margin-left: auto;
+    }
   }
 
   &__title {
-    flex-grow: 1;
     cursor: pointer;
+    padding-right: 10px;
   }
 
   &__list {

ts/components/LeftPane.tsx

@@ -6,6 +6,8 @@ import { LeftPaneMessageSection } from './session/LeftPaneMessageSection';
 import { PropsData as ConversationListItemPropsType } from './ConversationListItem';
 import { PropsData as SearchResultsProps } from './SearchResults';
 import { SearchOptions } from '../types/Search';
+import { LeftPaneSectionHeader } from './session/LeftPaneSectionHeader';
+import { LeftPaneContactSection } from './session/LeftPaneContactSection';
 
 interface State {
   selectedSection: SectionType;
@@ -44,14 +46,22 @@ export class LeftPane extends React.Component<Props, State> {
           selectedSection={this.state.selectedSection}
           onSectionSelected={this.handleSectionSelected}
         />
-        <div className="module-left-pane">
+        <div className="module-left-pane">{this.renderSection()}</div>
-          {this.state.selectedSection === SectionType.Message &&
-            this.renderMessageSection()}
-        </div>
       </div>
     );
   }
 
+  private renderSection(): JSX.Element | undefined {
+    switch (this.state.selectedSection) {
+      case SectionType.Message:
+        return this.renderMessageSection();
+      case SectionType.Contact:
+        return this.renderContactSection();
+      default:
+        return undefined;
+    }
+  }
+
   private renderMessageSection() {
     const {
       openConversationInternal,
@@ -77,4 +87,47 @@ export class LeftPane extends React.Component<Props, State> {
       />
     );
   }
+
+  private renderContactSection() {
+    const {
+      openConversationInternal,
+      conversations,
+      searchResults,
+      searchTerm,
+      isSecondaryDevice,
+      updateSearchTerm,
+      search,
+      clearSearch,
+    } = this.props;
+
+    return (
+      <LeftPaneContactSection
+        openConversationInternal={openConversationInternal}
+        conversations={conversations}
+        searchResults={searchResults}
+        searchTerm={searchTerm}
+        isSecondaryDevice={isSecondaryDevice}
+        updateSearchTerm={updateSearchTerm}
+        search={search}
+        clearSearch={clearSearch}
+      />
+    );
+  }
+
+  static renderHeader(
+    labels: Array<string>,
+    onTabSelected?: any,
+    buttonLabel?: string,
+    buttonClicked?: any
+  ): JSX.Element {
+    return (
+      <LeftPaneSectionHeader
+        onTabSelected={onTabSelected}
+        selectedTab={0}
+        labels={labels}
+        buttonLabel={buttonLabel}
+        buttonClicked={buttonClicked}
+      />
+    );
+  }
 }

ts/components/session/ActionsPanel.tsx

@@ -5,7 +5,7 @@ import { Avatar } from '../Avatar';
 export enum SectionType {
   Profile,
   Message,
-  People,
+  Contact,
   Globe,
   Settings,
   Moon,
@@ -74,7 +74,7 @@ const Section = ({
     case SectionType.Message:
       iconType = SessionIconType.ChatBubble;
       break;
-    case SectionType.People:
+    case SectionType.Contact:
       iconType = SessionIconType.Users;
       break;
     case SectionType.Globe:
@@ -150,8 +150,8 @@ export class ActionsPanel extends React.Component<Props, State> {
           notificationCount={0}
         />
         <Section
-          type={SectionType.People}
+          type={SectionType.Contact}
-          isSelected={selectedSection === SectionType.People}
+          isSelected={selectedSection === SectionType.Contact}
           onSelect={this.handleSectionSelect}
         />
         <Section

ts/components/session/LeftPaneContactSection.tsx

@@ -0,0 +1,93 @@
+import React from 'react';
+
+import { PropsData as ConversationListItemPropsType } from '../ConversationListItem';
+import { PropsData as SearchResultsProps } from '../SearchResults';
+import { debounce } from 'lodash';
+import { cleanSearchTerm } from '../../util/cleanSearchTerm';
+import { SearchOptions } from '../../types/Search';
+import { LeftPane } from '../LeftPane';
+
+export interface Props {
+  searchTerm: string;
+  isSecondaryDevice: boolean;
+
+  conversations?: Array<ConversationListItemPropsType>;
+
+  searchResults?: SearchResultsProps;
+
+  updateSearchTerm: (searchTerm: string) => void;
+  search: (query: string, options: SearchOptions) => void;
+  openConversationInternal: (id: string, messageId?: string) => void;
+  clearSearch: () => void;
+}
+
+export class LeftPaneContactSection extends React.Component<Props, any> {
+  private readonly debouncedSearch: (searchTerm: string) => void;
+
+  public constructor(props: Props) {
+    super(props);
+
+    this.debouncedSearch = debounce(this.search.bind(this), 20);
+  }
+
+  public componentWillUnmount() {
+    this.updateSearch('');
+  }
+
+  public renderHeader(): JSX.Element {
+    const labels = [window.i18n('contactsHeader'), window.i18n('lists')];
+    return LeftPane.renderHeader(labels, null, undefined, null);
+  }
+
+  public render(): JSX.Element {
+    return <div>{this.renderHeader()}</div>;
+  }
+
+  public updateSearch(searchTerm: string) {
+    const { updateSearchTerm, clearSearch } = this.props;
+
+    if (!searchTerm) {
+      clearSearch();
+
+      return;
+    }
+    // reset our pubKeyPasted, we can either have a pasted sessionID or a sessionID got from a search
+    this.setState({ pubKeyPasted: '' }, () => {
+      window.Session.emptyContentEditableDivs();
+    });
+
+    if (updateSearchTerm) {
+      updateSearchTerm(searchTerm);
+    }
+
+    if (searchTerm.length < 2) {
+      return;
+    }
+
+    const cleanedTerm = cleanSearchTerm(searchTerm);
+    if (!cleanedTerm) {
+      return;
+    }
+
+    this.debouncedSearch(cleanedTerm);
+  }
+
+  public clearSearch() {
+    this.props.clearSearch();
+    //this.setFocus();
+  }
+
+  public search() {
+    const { search } = this.props;
+    const { searchTerm, isSecondaryDevice } = this.props;
+
+    if (search) {
+      search(searchTerm, {
+        noteToSelf: window.i18n('noteToSelf').toLowerCase(),
+        ourNumber: window.textsecure.storage.user.getNumber(),
+        regionCode: '',
+        isSecondaryDevice,
+      });
+    }
+  }
+}

ts/components/session/LeftPaneMessageSection.tsx

@@ -22,7 +22,7 @@ import { SessionIconButton, SessionIconSize, SessionIconType } from './icon';
 import { SessionIdEditable } from './SessionIdEditable';
 import { UserSearchDropdown } from './UserSearchDropdown';
 import { validateNumber } from '../../types/PhoneNumber';
-import { LeftPaneSectionHeader } from './LeftPaneSectionHeader';
+import { LeftPane } from '../LeftPane';
 
 export interface Props {
   searchTerm: string;
@@ -167,19 +167,12 @@ export class LeftPaneMessageSection extends React.Component<Props, any> {
   }
 
   public renderHeader(): JSX.Element {
-    const labels = [];
+    const labels = [window.i18n('messagesHeader')];
-    labels.push(window.i18n('messagesHeader'));
+    return LeftPane.renderHeader(
-
+      labels,
-    return (
+      null,
-      <LeftPaneSectionHeader
+      window.i18n('compose'),
-        onTabSelected={() => {
+      this.handleComposeClick
-          console.log('tabselected');
-        }}
-        selectedTab={0}
-        labels={labels}
-        buttonLabel={window.i18n('compose')}
-        buttonClicked={this.handleComposeClick}
-      />
     );
   }
 
@@ -282,9 +275,7 @@ export class LeftPaneMessageSection extends React.Component<Props, any> {
   }
 
   public clearSearch() {
-    const { clearSearch } = this.props;
+    this.props.clearSearch();
-
-    clearSearch();
     //this.setFocus();
   }