signal-desktop/ts/components/conversationList/UsernameSearchResultListItem.tsx

// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only

import React, { useCallback } from 'react';

import { SPINNER_CLASS_NAME } from './BaseConversationListItem';
import { ListTile } from '../ListTile';
import { Avatar, AvatarSize } from '../Avatar';
import { Spinner } from '../Spinner';

import type { LocalizerType } from '../../types/Util';
import type { LookupConversationWithoutServiceIdActionsType } from '../../util/lookupConversationWithoutServiceId';
import type { ShowConversationType } from '../../state/ducks/conversations';

type PropsData = {
  username: string;
  isFetchingUsername: boolean;
};

type PropsHousekeeping = {
  i18n: LocalizerType;
  showConversation: ShowConversationType;
} & LookupConversationWithoutServiceIdActionsType;

export type Props = PropsData & PropsHousekeeping;

export function UsernameSearchResultListItem({
  i18n,
  isFetchingUsername,
  lookupConversationWithoutServiceId,
  username,
  showUserNotFoundModal,
  setIsFetchingUUID,
  showConversation,
}: Props): JSX.Element {
  const boundOnClick = useCallback(async () => {
    if (isFetchingUsername) {
      return;
    }
    const conversationId = await lookupConversationWithoutServiceId({
      showUserNotFoundModal,
      setIsFetchingUUID,

      type: 'username',
      username,
    });

    if (conversationId !== undefined) {
      showConversation({ conversationId });
    }
  }, [
    isFetchingUsername,
    lookupConversationWithoutServiceId,
    setIsFetchingUUID,
    showConversation,
    showUserNotFoundModal,
    username,
  ]);

  return (
    <ListTile
      leading={
        <Avatar
          acceptedMessageRequest={false}
          conversationType="direct"
          searchResult
          i18n={i18n}
          isMe={false}
          title={username}
          size={AvatarSize.THIRTY_TWO}
          badge={undefined}
          sharedGroupNames={[]}
        />
      }
      title={username}
      onClick={boundOnClick}
      trailing={
        isFetchingUsername ? (
          <Spinner
            size="20px"
            svgSize="small"
            moduleClassName={SPINNER_CLASS_NAME}
            direction="on-progress-dialog"
          />
        ) : undefined
      }
    />
  );
}