Remove legacy avatar component, convert AccountContainer to TS/FC
Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
This commit is contained in:
parent
a990b859ef
commit
af2d0749a1
8 changed files with 41 additions and 114 deletions
|
@ -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
|
|
||||||
});
|
|
|
@ -46,7 +46,7 @@ interface IProfilePopper {
|
||||||
const ProfilePopper: React.FC<IProfilePopper> = ({ condition, wrapper, children }): any =>
|
const ProfilePopper: React.FC<IProfilePopper> = ({ condition, wrapper, children }): any =>
|
||||||
condition ? wrapper(children) : children;
|
condition ? wrapper(children) : children;
|
||||||
|
|
||||||
interface IAccount {
|
export interface IAccount {
|
||||||
account: AccountEntity,
|
account: AccountEntity,
|
||||||
action?: React.ReactElement,
|
action?: React.ReactElement,
|
||||||
actionAlignment?: 'center' | 'top',
|
actionAlignment?: 'center' | 'top',
|
||||||
|
|
|
@ -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;
|
|
Binary file not shown.
21
app/soapbox/containers/account-container.tsx
Normal file
21
app/soapbox/containers/account-container.tsx
Normal file
|
@ -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;
|
|
@ -4,9 +4,8 @@ import { Link } from 'react-router-dom';
|
||||||
|
|
||||||
import { closeReports } from 'soapbox/actions/admin';
|
import { closeReports } from 'soapbox/actions/admin';
|
||||||
import { deactivateUserModal, deleteUserModal } from 'soapbox/actions/moderation';
|
import { deactivateUserModal, deleteUserModal } from 'soapbox/actions/moderation';
|
||||||
import Avatar from 'soapbox/components/avatar';
|
|
||||||
import HoverRefWrapper from 'soapbox/components/hover-ref-wrapper';
|
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 DropdownMenu from 'soapbox/containers/dropdown-menu-container';
|
||||||
import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
|
import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
|
||||||
import { makeGetReport } from 'soapbox/selectors';
|
import { makeGetReport } from 'soapbox/selectors';
|
||||||
|
@ -86,7 +85,7 @@ const Report: React.FC<IReport> = ({ id }) => {
|
||||||
<HStack space={3} className='p-3' key={report.id}>
|
<HStack space={3} className='p-3' key={report.id}>
|
||||||
<HoverRefWrapper accountId={targetAccount.id} inline>
|
<HoverRefWrapper accountId={targetAccount.id} inline>
|
||||||
<Link to={`/@${acct}`} title={acct}>
|
<Link to={`/@${acct}`} title={acct}>
|
||||||
<Avatar account={targetAccount} size={32} />
|
<Avatar src={targetAccount.avatar} size={32} className='overflow-hidden' />
|
||||||
</Link>
|
</Link>
|
||||||
</HoverRefWrapper>
|
</HoverRefWrapper>
|
||||||
|
|
||||||
|
|
|
@ -1,10 +1,9 @@
|
||||||
import React, { useCallback } from 'react';
|
import React, { useCallback } from 'react';
|
||||||
import { defineMessages, useIntl } from 'react-intl';
|
import { defineMessages, useIntl } from 'react-intl';
|
||||||
import { Link } from 'react-router-dom';
|
|
||||||
|
|
||||||
import Avatar from 'soapbox/components/avatar';
|
import AccountComponent from 'soapbox/components/account';
|
||||||
import DisplayName from 'soapbox/components/display-name';
|
|
||||||
import Icon from 'soapbox/components/icon';
|
import Icon from 'soapbox/components/icon';
|
||||||
|
import { HStack } from 'soapbox/components/ui';
|
||||||
import { useAppSelector } from 'soapbox/hooks';
|
import { useAppSelector } from 'soapbox/hooks';
|
||||||
import { makeGetAccount } from 'soapbox/selectors';
|
import { makeGetAccount } from 'soapbox/selectors';
|
||||||
|
|
||||||
|
@ -22,12 +21,6 @@ const Account: React.FC<IAccount> = ({ accountId }) => {
|
||||||
|
|
||||||
const account = useAppSelector((state) => getAccount(state, accountId));
|
const account = useAppSelector((state) => getAccount(state, accountId));
|
||||||
|
|
||||||
// useEffect(() => {
|
|
||||||
// if (accountId && !account) {
|
|
||||||
// fetchAccount(accountId);
|
|
||||||
// }
|
|
||||||
// }, [accountId]);
|
|
||||||
|
|
||||||
if (!account) return null;
|
if (!account) return null;
|
||||||
|
|
||||||
const birthday = account.birthday;
|
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' });
|
const formattedBirthday = intl.formatDate(birthday, { day: 'numeric', month: 'short', year: 'numeric' });
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className='account'>
|
<HStack space={1} alignItems='center' justifyContent='between' className='p-2.5'>
|
||||||
<div className='account__wrapper'>
|
<div className='w-full'>
|
||||||
<Link className='account__display-name' title={account.get('acct')} to={`/@${account.get('acct')}`}>
|
<AccountComponent account={account} withRelationship={false} />
|
||||||
<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>
|
||||||
</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>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -2,9 +2,8 @@ import React from 'react';
|
||||||
import { FormattedMessage, useIntl } from 'react-intl';
|
import { FormattedMessage, useIntl } from 'react-intl';
|
||||||
import { Link } from 'react-router-dom';
|
import { Link } from 'react-router-dom';
|
||||||
|
|
||||||
import Avatar from 'soapbox/components/avatar';
|
|
||||||
import StillImage from 'soapbox/components/still-image';
|
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 VerificationBadge from 'soapbox/components/verification-badge';
|
||||||
import { useAppSelector } from 'soapbox/hooks';
|
import { useAppSelector } from 'soapbox/hooks';
|
||||||
import { makeGetAccount } from 'soapbox/selectors';
|
import { makeGetAccount } from 'soapbox/selectors';
|
||||||
|
@ -48,10 +47,7 @@ const UserPanel: React.FC<IUserPanel> = ({ accountId, action, badges, domain })
|
||||||
title={acct}
|
title={acct}
|
||||||
className='-mt-12 block'
|
className='-mt-12 block'
|
||||||
>
|
>
|
||||||
<Avatar
|
<Avatar src={account.avatar} className='h-20 w-20 bg-gray-50 ring-2 ring-white overflow-hidden' />
|
||||||
account={account}
|
|
||||||
className='h-20 w-20 bg-gray-50 ring-2 ring-white'
|
|
||||||
/>
|
|
||||||
</Link>
|
</Link>
|
||||||
|
|
||||||
{action && (
|
{action && (
|
||||||
|
|
Loading…
Reference in a new issue