signal-desktop/ts/components/ContactListItem.tsx

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

import React from 'react';
import classNames from 'classnames';

import { About } from './conversation/About';
import { Avatar } from './Avatar';
import { Emojify } from './conversation/Emojify';
import { InContactsIcon } from './InContactsIcon';

import { LocalizerType } from '../types/Util';
import { ConversationType } from '../state/ducks/conversations';
import { isInSystemContacts } from '../util/isInSystemContacts';

type Props = {
  i18n: LocalizerType;
  isAdmin?: boolean;
  onClick?: () => void;
} & Pick<
  ConversationType,
  | 'about'
  | 'acceptedMessageRequest'
  | 'avatarPath'
  | 'color'
  | 'isMe'
  | 'name'
  | 'phoneNumber'
  | 'profileName'
  | 'sharedGroupNames'
  | 'title'
  | 'type'
  | 'unblurredAvatarPath'
>;

export class ContactListItem extends React.Component<Props> {
  public renderAvatar(): JSX.Element {
    const {
      acceptedMessageRequest,
      avatarPath,
      color,
      i18n,
      isMe,
      name,
      phoneNumber,
      profileName,
      sharedGroupNames,
      title,
      type,
      unblurredAvatarPath,
    } = this.props;

    return (
      <Avatar
        acceptedMessageRequest={acceptedMessageRequest}
        avatarPath={avatarPath}
        color={color}
        conversationType={type}
        i18n={i18n}
        isMe={isMe}
        name={name}
        phoneNumber={phoneNumber}
        profileName={profileName}
        title={title}
        sharedGroupNames={sharedGroupNames}
        size={52}
        unblurredAvatarPath={unblurredAvatarPath}
      />
    );
  }

  public render(): JSX.Element {
    const {
      about,
      i18n,
      isAdmin,
      isMe,
      name,
      onClick,
      title,
      type,
    } = this.props;

    const displayName = isMe ? i18n('you') : title;

    return (
      <button
        onClick={onClick}
        className={classNames(
          'module-contact-list-item',
          onClick ? 'module-contact-list-item--with-click-handler' : null
        )}
        type="button"
      >
        {this.renderAvatar()}
        <div className="module-contact-list-item__text">
          <div className="module-contact-list-item__left">
            <div className="module-contact-list-item__text__name">
              <Emojify text={displayName} />
              {isInSystemContacts({ name, type }) ? (
                <span>
                  {' '}
                  <InContactsIcon i18n={i18n} />
                </span>
              ) : null}
            </div>
            <div className="module-contact-list-item__text__additional-data">
              <About text={about} />
            </div>
          </div>
          {isAdmin ? (
            <div className="module-contact-list-item__admin">
              {i18n('GroupV2--admin')}
            </div>
          ) : null}
        </div>
      </button>
    );
  }
}