Skip to content

Commit

Permalink
Support Enter shortcut in findBy helpers
Browse files Browse the repository at this point in the history
  • Loading branch information
@indutny-signal
indutny-signal committed Feb 14, 2024
1 parent e158bd1 commit 89525d3
Show file tree
Hide file tree
Showing 4 changed files with 92 additions and 54 deletions.
4 changes: 4 additions & 0 deletions ts/components/LeftPane.tsx
View file
Expand Up @@ -714,6 +714,10 @@ export function LeftPane({
updateSearchTerm,
onChangeComposeSelectedRegion: setComposeSelectedRegion,
showConversation,
lookupConversationWithoutServiceId,
showUserNotFoundModal,
setIsFetchingUUID,
showInbox,
})}
</NavSidebarSearchHeader>
)}
Expand Down
70 changes: 43 additions & 27 deletions ts/components/leftPane/LeftPaneFindByPhoneNumberHelper.tsx
View file
Expand Up @@ -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';
Expand All @@ -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;

Expand Down Expand Up @@ -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'
);
Expand All @@ -129,45 +138,27 @@ export class LeftPaneFindByPhoneNumberHelper extends LeftPaneHelper<LeftPaneFind
placeholder={placeholder}
ref={focusRef}
value={this.searchTerm}
onKeyDown={ev => {
if (ev.key === 'Enter') {
drop(this.doLookup(lookupActions));
}
}}
/>
</div>
);
}

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">
Expand Down Expand Up @@ -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);
Expand Down
68 changes: 42 additions & 26 deletions ts/components/leftPane/LeftPaneFindByUsernameHelper.tsx
View file
Expand Up @@ -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';
Expand All @@ -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;

Expand Down Expand Up @@ -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'
);
Expand All @@ -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">
Expand Down Expand Up @@ -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);
Expand Down
4 changes: 3 additions & 1 deletion ts/components/leftPane/LeftPaneHelper.tsx
View file
Expand Up @@ -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;
}
Expand Down

0 comments on commit 89525d3

Please sign in to comment.