bigbuffet-rw/app/soapbox/features/birthdays/account.tsx

import React, { useCallback } from 'react';
import { defineMessages, useIntl } from 'react-intl';
import { Link } from 'react-router-dom';

import Avatar from 'soapbox/components/avatar';
import DisplayName from 'soapbox/components/display-name';
import Icon from 'soapbox/components/icon';
import { useAppSelector } from 'soapbox/hooks';
import { makeGetAccount } from 'soapbox/selectors';

const messages = defineMessages({
  birthday: { id: 'account.birthday', defaultMessage: 'Born {date}' },
});

interface IAccount {
  accountId: string,
}

const Account: React.FC<IAccount> = ({ accountId }) => {
  const intl = useIntl();
  const getAccount = useCallback(makeGetAccount(), []);

  const account = useAppSelector((state) => getAccount(state, accountId));

  // useEffect(() => {
  //   if (accountId && !account) {
  //     fetchAccount(accountId);
  //   }
  // }, [accountId]);

  if (!account) return null;

  const birthday = account.birthday;
  if (!birthday) return null;

  const formattedBirthday = intl.formatDate(birthday, { day: 'numeric', month: 'short', year: 'numeric' });

  return (
    <div className='account'>
      <div className='account__wrapper'>
        <Link className='account__display-name' title={account.get('acct')} to={`/@${account.get('acct')}`}>
          <div className='account__display-name'>
            <div className='account__avatar-wrapper'><Avatar account={account} size={36} /></div>
            <DisplayName account={account} />

          </div>
        </Link>
        <div
          className='flex items-center gap-0.5'
          title={intl.formatMessage(messages.birthday, {
            date: formattedBirthday,
          })}
        >
          <Icon src={require('@tabler/icons/ballon.svg')} />
          {formattedBirthday}
        </div>
      </div>
    </div>
  );
};

export default Account;