import React from 'react'; import { useEffect } from 'react'; import { defineMessages, useIntl } from 'react-intl'; import Avatar from 'soapbox/components/avatar'; import DisplayName from 'soapbox/components/display_name'; import Icon from 'soapbox/components/icon'; import Permalink from 'soapbox/components/permalink'; import { useAppSelector } from 'soapbox/hooks'; import { makeGetAccount } from 'soapbox/selectors'; const messages = defineMessages({ birthday: { id: 'account.birthday', defaultMessage: 'Born {date}' }, }); const getAccount = makeGetAccount(); interface IAccount { accountId: string, fetchAccount: (id: string) => void, } const Account: React.FC<IAccount> = ({ accountId, fetchAccount }) => { const intl = useIntl(); const account = useAppSelector((state) => getAccount(state, accountId)); useEffect(() => { if (accountId && !account) { fetchAccount(accountId); } }, [accountId]); if (!account) return null; const birthday = account.get('birthday'); if (!birthday) return null; const formattedBirthday = intl.formatDate(birthday, { day: 'numeric', month: 'short', year: 'numeric' }); return ( <div className='account'> <div className='account__wrapper'> <Permalink className='account__display-name' title={account.get('acct')} href={`/@${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> </Permalink> <div className='account__birthday' title={intl.formatMessage(messages.birthday, { date: formattedBirthday, })} > <Icon src={require('@tabler/icons/icons/ballon.svg')} /> {formattedBirthday} </div> </div> </div> ); }; export default Account;