New left pane search design

ts/components/LeftPaneMainSearchInput.tsx

@@ -0,0 +1,92 @@
+// Copyright 2022 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import React, { useEffect, useRef } from 'react';
+
+import type { LocalizerType } from '../types/Util';
+import type { ConversationType } from '../state/ducks/conversations';
+import { LeftPaneSearchInput } from './LeftPaneSearchInput';
+import { usePrevious } from '../hooks/usePrevious';
+
+export type PropsType = {
+  clearConversationSearch: () => void;
+  clearSearch: () => void;
+  disabled?: boolean;
+  i18n: LocalizerType;
+  searchConversation: undefined | ConversationType;
+  searchTerm: string;
+  startSearchCounter: number;
+  updateSearchTerm: (searchTerm: string) => void;
+};
+
+export const LeftPaneMainSearchInput = ({
+  clearConversationSearch,
+  clearSearch,
+  disabled,
+  i18n,
+  searchConversation,
+  searchTerm,
+  startSearchCounter,
+  updateSearchTerm,
+}: PropsType): JSX.Element => {
+  const inputRef = useRef<HTMLInputElement | null>(null);
+
+  const prevSearchConversationId = usePrevious(
+    undefined,
+    searchConversation?.id
+  );
+  const prevSearchCounter = usePrevious(startSearchCounter, startSearchCounter);
+
+  useEffect(() => {
+    // When user chooses to search in a given conversation we focus the field for them
+    if (
+      searchConversation &&
+      searchConversation.id !== prevSearchConversationId
+    ) {
+      inputRef.current?.focus();
+    }
+    // When user chooses to start a new search, we focus the field
+    if (startSearchCounter !== prevSearchCounter) {
+      inputRef.current?.select();
+    }
+  }, [
+    prevSearchConversationId,
+    prevSearchCounter,
+    searchConversation,
+    startSearchCounter,
+  ]);
+
+  return (
+    <LeftPaneSearchInput
+      disabled={disabled}
+      i18n={i18n}
+      onBlur={() => {
+        if (!searchConversation && !searchTerm) {
+          clearSearch();
+        }
+      }}
+      onChangeValue={nextSearchTerm => {
+        if (!nextSearchTerm) {
+          if (searchConversation) {
+            clearConversationSearch();
+          } else {
+            clearSearch();
+          }
+
+          return;
+        }
+
+        if (updateSearchTerm) {
+          updateSearchTerm(nextSearchTerm);
+        }
+      }}
+      onClear={() => {
+        clearSearch();
+        inputRef.current?.focus();
+      }}
+      ref={inputRef}
+      searchConversation={searchConversation}
+      value={searchTerm}
+    />
+  );
+};