Move left pane entirely to React

ts/components/LeftPane.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+
+import {
+  ConversationListItem,
+  PropsData as ConversationListItemPropsType,
+} from './ConversationListItem';
+import {
+  PropsData as SearchResultsProps,
+  SearchResults,
+} from './SearchResults';
+import { LocalizerType } from '../types/Util';
+
+export interface Props {
+  conversations?: Array<ConversationListItemPropsType>;
+  searchResults?: SearchResultsProps;
+  i18n: LocalizerType;
+
+  // Action Creators
+  startNewConversation: () => void;
+  openConversationInternal: (id: string, messageId?: string) => void;
+
+  // Render Props
+  renderMainHeader: () => JSX.Element;
+}
+
+export class LeftPane extends React.Component<Props> {
+  public renderList() {
+    const {
+      conversations,
+      i18n,
+      openConversationInternal,
+      startNewConversation,
+      searchResults,
+    } = this.props;
+
+    if (searchResults) {
+      return (
+        <SearchResults
+          {...searchResults}
+          openConversation={openConversationInternal}
+          startNewConversation={startNewConversation}
+          i18n={i18n}
+        />
+      );
+    }
+
+    return (
+      <div className="module-left-pane__list">
+        {(conversations || []).map(conversation => (
+          <ConversationListItem
+            key={conversation.phoneNumber}
+            {...conversation}
+            onClick={openConversationInternal}
+            i18n={i18n}
+          />
+        ))}
+      </div>
+    );
+  }
+
+  public render() {
+    const { renderMainHeader } = this.props;
+
+    return (
+      <div className="module-left-pane">
+        <div className="module-left-pane__header">{renderMainHeader()}</div>
+        {this.renderList()}
+      </div>
+    );
+  }
+}