ContactNameV2.tsx

import { RawText } from '@tloncorp/ui';
import React, { useMemo } from 'react';

import { useCalm } from '../contexts';
import { useContact } from '../contexts/appDataContext';
import { formatUserId } from '../utils/user';

// This file is temporary -- it uses the new text, and I want to make sure it works across all callsites before swapping it in

type ContactNameOptions = {
  contactId: string;
  expandLongIds?: boolean;
  mode?: 'contactId' | 'nickname' | 'both' | 'auto';
};

export const useContactNameProps = ({
  contactId,
  expandLongIds = false,
  mode = 'auto',
}: ContactNameOptions) => {
  const calm = useCalm();
  const contact = useContact(contactId);
  const showNickname =
    contact?.nickname &&
    (calm.disableNicknames ? mode === 'nickname' : mode !== 'contactId');
  const showContactId =
    (mode === 'auto' && !showNickname) ||
    mode === 'both' ||
    mode === 'contactId';

  return useMemo(() => {
    const idMeta = showContactId
      ? formatUserId(contactId, expandLongIds)
      : null;
    return {
      children: [
        showContactId ? idMeta?.display : null,
        showNickname ? contact?.nickname : null,
      ]
        .filter((i) => !!i)
        .join(' '),
      ['aria-label']: idMeta?.ariaLabel,
    };
  }, [
    contact?.nickname,
    contactId,
    expandLongIds,
    showContactId,
    showNickname,
  ]);
};

export function useContactName(options: string | ContactNameOptions): string;
export function useContactName(
  options: string | ContactNameOptions | null
): string | null;
export function useContactName(
  options: string | ContactNameOptions | null
): string | null {
  const resolvedOptions = useMemo(() => {
    return typeof options === 'string' || options == null
      ? { contactId: options ?? '' }
      : options;
  }, [options]);
  return useContactNameProps(resolvedOptions).children;
}

const BaseContactName = RawText.styleable<{
  contactId: string;
  expandLongIds?: boolean;
  mode?: 'contactId' | 'nickname' | 'both' | 'auto';
}>(
  ({ contactId, mode = 'auto', expandLongIds, ...props }, ref) => {
    const calm = useCalm();
    const contact = useContact(contactId);
    const showNickname =
      contact?.nickname &&
      (calm.disableNicknames ? mode === 'nickname' : mode !== 'contactId');
    const showContactId =
      (mode === 'auto' && !showNickname) ||
      mode === 'both' ||
      mode === 'contactId';

    const formattedId = useMemo(() => {
      return showContactId ? formatUserId(contactId, expandLongIds) : null;
    }, [contactId, expandLongIds, showContactId]);

    if (showContactId && !formattedId) {
      console.error('unable to display invalid id', contactId);
      return null;
    }

    return (
      <RawText
        {...useContactNameProps({ contactId, expandLongIds, mode })}
        {...props}
      ></RawText>
    );
  },
  {
    staticConfig: {
      componentName: 'ContactName',
    },
  }
);

export const ContactName = React.memo(BaseContactName);