Remove legacy avatar component, convert AccountContainer to TS/FC

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

app/soapbox/components/__tests__/avatar.test.tsx

@@ -1,38 +0,0 @@
-import React from 'react';
-
-import { normalizeAccount } from 'soapbox/normalizers';
-
-import { render, screen } from '../../jest/test-helpers';
-import Avatar from '../avatar';
-
-import type { ReducerAccount } from 'soapbox/reducers/accounts';
-
-describe('<Avatar />', () => {
-  const account = normalizeAccount({
-    username: 'alice',
-    acct: 'alice',
-    display_name: 'Alice',
-    avatar: '/animated/alice.gif',
-    avatar_static: '/static/alice.jpg',
-  }) as ReducerAccount;
-
-  const size = 100;
-
-  // describe('Autoplay', () => {
-  //   it('renders an animated avatar', () => {
-  //     render(<Avatar account={account} animate size={size} />);
-
-  //     expect(screen.getByRole('img').getAttribute('src')).toBe(account.get('avatar'));
-  //   });
-  // });
-
-  describe('Still', () => {
-    it('renders a still avatar', () => {
-      render(<Avatar account={account} size={size} />);
-
-      expect(screen.getByRole('img').getAttribute('src')).toBe(account.get('avatar'));
-    });
-  });
-
-  // TODO add autoplay test if possible
-});

app/soapbox/components/account.tsx

@@ -46,7 +46,7 @@ interface IProfilePopper {
 const ProfilePopper: React.FC<IProfilePopper> = ({ condition, wrapper, children }): any =>
   condition ? wrapper(children) : children;
 
-interface IAccount {
+export interface IAccount {
   account: AccountEntity,
   action?: React.ReactElement,
   actionAlignment?: 'center' | 'top',

app/soapbox/components/avatar.tsx

@@ -1,38 +0,0 @@
-import classNames from 'clsx';
-import React from 'react';
-
-import StillImage from 'soapbox/components/still-image';
-
-import type { Account } from 'soapbox/types/entities';
-
-interface IAvatar {
-  account?: Account | null,
-  size?: number,
-  className?: string,
-}
-
-/**
- * Legacy avatar component.
- * @see soapbox/components/ui/avatar/avatar.tsx
- * @deprecated
- */
-const Avatar: React.FC<IAvatar> = ({ account, size, className }) => {
-  if (!account) return null;
-
-  // : TODO : remove inline and change all avatars to be sized using css
-  const style: React.CSSProperties = !size ? {} : {
-    width: `${size}px`,
-    height: `${size}px`,
-  };
-
-  return (
-    <StillImage
-      className={classNames('rounded-full overflow-hidden', className)}
-      style={style}
-      src={account.avatar}
-      alt=''
-    />
-  );
-};
-
-export default Avatar;

app/soapbox/containers/account-container.tsx

@@ -0,0 +1,21 @@
+import React, { useCallback } from 'react';
+
+import { useAppSelector } from 'soapbox/hooks';
+
+import Account, { IAccount } from '../components/account';
+import { makeGetAccount } from '../selectors';
+
+interface IAccountContainer extends Omit<IAccount, 'account'> {
+  id: string
+}
+
+const AccountContainer: React.FC<IAccountContainer> = ({ id, ...props }) => {
+  const getAccount = useCallback(makeGetAccount(), []);
+  const account = useAppSelector(state => getAccount(state, id));
+
+  return (
+    <Account account={account!} {...props} />
+  );
+};
+
+export default AccountContainer;

app/soapbox/features/admin/components/report.tsx

@@ -4,9 +4,8 @@ import { Link } from 'react-router-dom';
 
 import { closeReports } from 'soapbox/actions/admin';
 import { deactivateUserModal, deleteUserModal } from 'soapbox/actions/moderation';
-import Avatar from 'soapbox/components/avatar';
 import HoverRefWrapper from 'soapbox/components/hover-ref-wrapper';
-import { Accordion, Button, Stack, HStack, Text } from 'soapbox/components/ui';
+import { Accordion, Avatar, Button, Stack, HStack, Text } from 'soapbox/components/ui';
 import DropdownMenu from 'soapbox/containers/dropdown-menu-container';
 import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
 import { makeGetReport } from 'soapbox/selectors';
@@ -86,7 +85,7 @@ const Report: React.FC<IReport> = ({ id }) => {
     <HStack space={3} className='p-3' key={report.id}>
       <HoverRefWrapper accountId={targetAccount.id} inline>
         <Link to={`/@${acct}`} title={acct}>
-          <Avatar account={targetAccount} size={32} />
+          <Avatar src={targetAccount.avatar} size={32} className='overflow-hidden' />
         </Link>
       </HoverRefWrapper>
 

app/soapbox/features/birthdays/account.tsx

@@ -1,10 +1,9 @@
 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 AccountComponent from 'soapbox/components/account';
 import Icon from 'soapbox/components/icon';
+import { HStack } from 'soapbox/components/ui';
 import { useAppSelector } from 'soapbox/hooks';
 import { makeGetAccount } from 'soapbox/selectors';
 
@@ -22,12 +21,6 @@ const Account: React.FC<IAccount> = ({ accountId }) => {
 
   const account = useAppSelector((state) => getAccount(state, accountId));
 
-  // useEffect(() => {
-  //   if (accountId && !account) {
-  //     fetchAccount(accountId);
-  //   }
-  // }, [accountId]);
-
   if (!account) return null;
 
   const birthday = account.birthday;
@@ -36,26 +29,20 @@ const Account: React.FC<IAccount> = ({ accountId }) => {
   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>
+    <HStack space={1} alignItems='center' justifyContent='between' className='p-2.5'>
+      <div className='w-full'>
+        <AccountComponent account={account} withRelationship={false} />
       </div>
-    </div>
+      <div
+        className='flex items-center gap-0.5'
+        title={intl.formatMessage(messages.birthday, {
+          date: formattedBirthday,
+        })}
+      >
+        <Icon src={require('@tabler/icons/ballon.svg')} />
+        {formattedBirthday}
+      </div>
+    </HStack>
   );
 };
 

app/soapbox/features/ui/components/user-panel.tsx

@@ -2,9 +2,8 @@ import React from 'react';
 import { FormattedMessage, useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
 
-import Avatar from 'soapbox/components/avatar';
 import StillImage from 'soapbox/components/still-image';
-import { HStack, Stack, Text } from 'soapbox/components/ui';
+import { Avatar, HStack, Stack, Text } from 'soapbox/components/ui';
 import VerificationBadge from 'soapbox/components/verification-badge';
 import { useAppSelector } from 'soapbox/hooks';
 import { makeGetAccount } from 'soapbox/selectors';
@@ -48,10 +47,7 @@ const UserPanel: React.FC<IUserPanel> = ({ accountId, action, badges, domain })
               title={acct}
               className='-mt-12 block'
             >
-              <Avatar
-                account={account}
-                className='h-20 w-20 bg-gray-50 ring-2 ring-white'
-              />
+              <Avatar src={account.avatar} className='h-20 w-20 bg-gray-50 ring-2 ring-white overflow-hidden' />
             </Link>
 
             {action && (