From 89525d3e16f02d5c478ba975f3ee714a5e58ed13 Mon Sep 17 00:00:00 2001
From: Fedor Indutny <79877362+indutny-signal@users.noreply.github.com>
Date: Wed, 14 Feb 2024 10:15:26 -0800
Subject: [PATCH] Support Enter shortcut in findBy helpers

---
 ts/components/LeftPane.tsx                    |  4 ++
 .../LeftPaneFindByPhoneNumberHelper.tsx       | 70 ++++++++++++-------
 .../leftPane/LeftPaneFindByUsernameHelper.tsx | 68 +++++++++++-------
 ts/components/leftPane/LeftPaneHelper.tsx     |  4 +-
 4 files changed, 92 insertions(+), 54 deletions(-)

diff --git a/ts/components/LeftPane.tsx b/ts/components/LeftPane.tsx
index 74b304b1104a..47768b98d358 100644
--- a/ts/components/LeftPane.tsx
+++ b/ts/components/LeftPane.tsx
@@ -714,6 +714,10 @@ export function LeftPane({
               updateSearchTerm,
               onChangeComposeSelectedRegion: setComposeSelectedRegion,
               showConversation,
+              lookupConversationWithoutServiceId,
+              showUserNotFoundModal,
+              setIsFetchingUUID,
+              showInbox,
             })}
           </NavSidebarSearchHeader>
         )}
diff --git a/ts/components/leftPane/LeftPaneFindByPhoneNumberHelper.tsx b/ts/components/leftPane/LeftPaneFindByPhoneNumberHelper.tsx
index e963a4a3e4e7..d066a235bb4b 100644
--- a/ts/components/leftPane/LeftPaneFindByPhoneNumberHelper.tsx
+++ b/ts/components/leftPane/LeftPaneFindByPhoneNumberHelper.tsx
@@ -15,6 +15,7 @@ import { parseAndFormatPhoneNumber } from '../../util/libphonenumberInstance';
 import type { UUIDFetchStateType } from '../../util/uuidFetchState';
 import type { CountryDataType } from '../../util/getCountryData';
 import { isFetchingByE164 } from '../../util/uuidFetchState';
+import { drop } from '../../util/drop';
 import type { LookupConversationWithoutServiceIdActionsType } from '../../util/lookupConversationWithoutServiceId';
 import { Spinner } from '../Spinner';
 import { Button } from '../Button';
@@ -28,6 +29,12 @@ export type LeftPaneFindByPhoneNumberPropsType = {
   countries: ReadonlyArray<CountryDataType>;
 };
 
+type DoLookupActionsType = Readonly<{
+  showInbox: () => void;
+  showConversation: ShowConversationType;
+}> &
+  LookupConversationWithoutServiceIdActionsType;
+
 export class LeftPaneFindByPhoneNumberHelper extends LeftPaneHelper<LeftPaneFindByPhoneNumberPropsType> {
   private readonly searchTerm: string;
 
@@ -100,13 +107,15 @@ export class LeftPaneFindByPhoneNumberHelper extends LeftPaneHelper<LeftPaneFind
     i18n,
     onChangeComposeSearchTerm,
     onChangeComposeSelectedRegion,
+    ...lookupActions
   }: Readonly<{
     i18n: LocalizerType;
     onChangeComposeSearchTerm: (
       event: React.ChangeEvent<HTMLInputElement>
     ) => unknown;
     onChangeComposeSelectedRegion: (newRegion: string) => void;
-  }>): ReactChild {
+  }> &
+    DoLookupActionsType): ReactChild {
     const placeholder = i18n(
       'icu:LeftPaneFindByHelper__placeholder--findByPhoneNumber'
     );
@@ -129,6 +138,11 @@ export class LeftPaneFindByPhoneNumberHelper extends LeftPaneHelper<LeftPaneFind
           placeholder={placeholder}
           ref={focusRef}
           value={this.searchTerm}
+          onKeyDown={ev => {
+            if (ev.key === 'Enter') {
+              drop(this.doLookup(lookupActions));
+            }
+          }}
         />
       </div>
     );
@@ -136,38 +150,15 @@ export class LeftPaneFindByPhoneNumberHelper extends LeftPaneHelper<LeftPaneFind
 
   override getFooterContents({
     i18n,
-    lookupConversationWithoutServiceId,
-    showUserNotFoundModal,
-    setIsFetchingUUID,
-    showInbox,
-    showConversation,
+    ...lookupActions
   }: Readonly<{
     i18n: LocalizerType;
-    showInbox: () => void;
-    showConversation: ShowConversationType;
   }> &
-    LookupConversationWithoutServiceIdActionsType): ReactChild {
+    DoLookupActionsType): ReactChild {
     return (
       <Button
         disabled={this.isLookupDisabled()}
-        onClick={async () => {
-          if (!this.phoneNumber) {
-            return;
-          }
-
-          const conversationId = await lookupConversationWithoutServiceId({
-            showUserNotFoundModal,
-            setIsFetchingUUID,
-            type: 'e164',
-            e164: this.phoneNumber.e164,
-            phoneNumber: this.searchTerm,
-          });
-
-          if (conversationId != null) {
-            showConversation({ conversationId });
-            showInbox();
-          }
-        }}
+        onClick={() => drop(this.doLookup(lookupActions))}
       >
         {this.isFetching() ? (
           <span aria-label={i18n('icu:loading')} role="status">
@@ -207,6 +198,31 @@ export class LeftPaneFindByPhoneNumberHelper extends LeftPaneHelper<LeftPaneFind
     return false;
   }
 
+  private async doLookup({
+    lookupConversationWithoutServiceId,
+    showUserNotFoundModal,
+    setIsFetchingUUID,
+    showInbox,
+    showConversation,
+  }: DoLookupActionsType): Promise<void> {
+    if (!this.phoneNumber || this.isLookupDisabled()) {
+      return;
+    }
+
+    const conversationId = await lookupConversationWithoutServiceId({
+      showUserNotFoundModal,
+      setIsFetchingUUID,
+      type: 'e164',
+      e164: this.phoneNumber.e164,
+      phoneNumber: this.searchTerm,
+    });
+
+    if (conversationId != null) {
+      showConversation({ conversationId });
+      showInbox();
+    }
+  }
+
   private isFetching(): boolean {
     if (this.phoneNumber != null) {
       return isFetchingByE164(this.uuidFetchState, this.phoneNumber.e164);
diff --git a/ts/components/leftPane/LeftPaneFindByUsernameHelper.tsx b/ts/components/leftPane/LeftPaneFindByUsernameHelper.tsx
index 3b7f0582bdef..ecf517bd5379 100644
--- a/ts/components/leftPane/LeftPaneFindByUsernameHelper.tsx
+++ b/ts/components/leftPane/LeftPaneFindByUsernameHelper.tsx
@@ -13,6 +13,7 @@ import { getUsernameFromSearch } from '../../types/Username';
 import type { ShowConversationType } from '../../state/ducks/conversations';
 import type { UUIDFetchStateType } from '../../util/uuidFetchState';
 import { isFetchingByUsername } from '../../util/uuidFetchState';
+import { drop } from '../../util/drop';
 import type { LookupConversationWithoutServiceIdActionsType } from '../../util/lookupConversationWithoutServiceId';
 import { Spinner } from '../Spinner';
 import { Button } from '../Button';
@@ -22,6 +23,12 @@ export type LeftPaneFindByUsernamePropsType = {
   uuidFetchState: UUIDFetchStateType;
 };
 
+type DoLookupActionsType = Readonly<{
+  showInbox: () => void;
+  showConversation: ShowConversationType;
+}> &
+  LookupConversationWithoutServiceIdActionsType;
+
 export class LeftPaneFindByUsernameHelper extends LeftPaneHelper<LeftPaneFindByUsernamePropsType> {
   private readonly searchTerm: string;
 
@@ -78,12 +85,14 @@ export class LeftPaneFindByUsernameHelper extends LeftPaneHelper<LeftPaneFindByU
   override getSearchInput({
     i18n,
     onChangeComposeSearchTerm,
+    ...lookupActions
   }: Readonly<{
     i18n: LocalizerType;
     onChangeComposeSearchTerm: (
       event: React.ChangeEvent<HTMLInputElement>
     ) => unknown;
-  }>): ReactChild {
+  }> &
+    DoLookupActionsType): ReactChild {
     const placeholder = i18n(
       'icu:LeftPaneFindByHelper__placeholder--findByUsername'
     );
@@ -101,43 +110,26 @@ export class LeftPaneFindByUsernameHelper extends LeftPaneHelper<LeftPaneFindByU
         ref={focusRef}
         value={this.searchTerm}
         description={description}
+        onKeyDown={ev => {
+          if (ev.key === 'Enter') {
+            drop(this.doLookup(lookupActions));
+          }
+        }}
       />
     );
   }
 
   override getFooterContents({
     i18n,
-    lookupConversationWithoutServiceId,
-    showUserNotFoundModal,
-    setIsFetchingUUID,
-    showInbox,
-    showConversation,
+    ...lookupActions
   }: Readonly<{
     i18n: LocalizerType;
-    showInbox: () => void;
-    showConversation: ShowConversationType;
   }> &
-    LookupConversationWithoutServiceIdActionsType): ReactChild {
+    DoLookupActionsType): ReactChild {
     return (
       <Button
         disabled={this.isLookupDisabled()}
-        onClick={async () => {
-          if (!this.username) {
-            return;
-          }
-
-          const conversationId = await lookupConversationWithoutServiceId({
-            showUserNotFoundModal,
-            setIsFetchingUUID,
-            type: 'username',
-            username: this.username,
-          });
-
-          if (conversationId != null) {
-            showConversation({ conversationId });
-            showInbox();
-          }
-        }}
+        onClick={() => drop(this.doLookup(lookupActions))}
       >
         {this.isFetching() ? (
           <span aria-label={i18n('icu:loading')} role="status">
@@ -177,6 +169,30 @@ export class LeftPaneFindByUsernameHelper extends LeftPaneHelper<LeftPaneFindByU
     return false;
   }
 
+  private async doLookup({
+    lookupConversationWithoutServiceId,
+    showUserNotFoundModal,
+    setIsFetchingUUID,
+    showInbox,
+    showConversation,
+  }: DoLookupActionsType): Promise<void> {
+    if (!this.username || this.isLookupDisabled()) {
+      return;
+    }
+
+    const conversationId = await lookupConversationWithoutServiceId({
+      showUserNotFoundModal,
+      setIsFetchingUUID,
+      type: 'username',
+      username: this.username,
+    });
+
+    if (conversationId != null) {
+      showConversation({ conversationId });
+      showInbox();
+    }
+  }
+
   private isFetching(): boolean {
     if (this.username != null) {
       return isFetchingByUsername(this.uuidFetchState, this.username);
diff --git a/ts/components/leftPane/LeftPaneHelper.tsx b/ts/components/leftPane/LeftPaneHelper.tsx
index 201585a33314..596a53ef6c69 100644
--- a/ts/components/leftPane/LeftPaneHelper.tsx
+++ b/ts/components/leftPane/LeftPaneHelper.tsx
@@ -47,7 +47,9 @@ export abstract class LeftPaneHelper<T> {
       onChangeComposeSelectedRegion: (newRegion: string) => void;
       updateSearchTerm: (searchTerm: string) => unknown;
       showConversation: ShowConversationType;
-    }>
+      showInbox: () => void;
+    }> &
+      LookupConversationWithoutServiceIdActionsType
   ): null | ReactChild {
     return null;
   }