ProfileInfoPanel: convert to TSX
This commit is contained in:
Alex Gleason
parent
580960695c
commit
0127d282e2
2 changed files with 230 additions and 271 deletions
|
|
@ -1,271 +0,0 @@
|
|||
'use strict';
|
||||
|
||||
import { List as ImmutableList } from 'immutable';
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
import { initAccountNoteModal } from 'soapbox/actions/account_notes';
|
||||
import Badge from 'soapbox/components/badge';
|
||||
import { Icon, HStack, Stack, Text } from 'soapbox/components/ui';
|
||||
import VerificationBadge from 'soapbox/components/verification_badge';
|
||||
import { isLocal } from 'soapbox/utils/accounts';
|
||||
import { displayFqn } from 'soapbox/utils/state';
|
||||
|
||||
import ProfileStats from './profile_stats';
|
||||
|
||||
// Basically ensure the URL isn't `javascript:alert('hi')` or something like that
|
||||
const isSafeUrl = text => {
|
||||
try {
|
||||
const url = new URL(text);
|
||||
return ['http:', 'https:'].includes(url.protocol);
|
||||
} catch (e) {
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
const messages = defineMessages({
|
||||
linkVerifiedOn: { id: 'account.link_verified_on', defaultMessage: 'Ownership of this link was checked on {date}' },
|
||||
account_locked: { id: 'account.locked_info', defaultMessage: 'This account privacy status is set to locked. The owner manually reviews who can follow them.' },
|
||||
deactivated: { id: 'account.deactivated', defaultMessage: 'Deactivated' },
|
||||
bot: { id: 'account.badges.bot', defaultMessage: 'Bot' },
|
||||
});
|
||||
|
||||
class ProfileInfoPanel extends ImmutablePureComponent {
|
||||
|
||||
static propTypes = {
|
||||
account: ImmutablePropTypes.record,
|
||||
identity_proofs: ImmutablePropTypes.list,
|
||||
intl: PropTypes.object.isRequired,
|
||||
username: PropTypes.string,
|
||||
displayFqn: PropTypes.bool,
|
||||
onShowNote: PropTypes.func,
|
||||
};
|
||||
|
||||
getStaffBadge = () => {
|
||||
const { account } = this.props;
|
||||
|
||||
if (account?.admin) {
|
||||
return <Badge slug='admin' title='Admin' key='staff' />;
|
||||
} else if (account?.moderator) {
|
||||
return <Badge slug='moderator' title='Moderator' key='staff' />;
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
getBadges = () => {
|
||||
const { account } = this.props;
|
||||
const staffBadge = this.getStaffBadge();
|
||||
const isPatron = account.getIn(['patron', 'is_patron']);
|
||||
|
||||
const badges = [];
|
||||
|
||||
if (staffBadge) {
|
||||
badges.push(staffBadge);
|
||||
}
|
||||
|
||||
if (isPatron) {
|
||||
badges.push(<Badge slug='patron' title='Patron' key='patron' />);
|
||||
}
|
||||
|
||||
if (account.donor) {
|
||||
badges.push(<Badge slug='donor' title='Donor' key='donor' />);
|
||||
}
|
||||
|
||||
return badges;
|
||||
}
|
||||
|
||||
renderBirthday = () => {
|
||||
const { account, intl } = this.props;
|
||||
|
||||
const birthday = account.get('birthday');
|
||||
if (!birthday) return null;
|
||||
|
||||
const formattedBirthday = intl.formatDate(birthday, { timeZone: 'UTC', day: 'numeric', month: 'long', year: 'numeric' });
|
||||
|
||||
const date = new Date(birthday);
|
||||
const today = new Date();
|
||||
|
||||
const hasBirthday = date.getDate() === today.getDate() && date.getMonth() === today.getMonth();
|
||||
|
||||
return (
|
||||
<HStack alignItems='center' space={0.5}>
|
||||
<Icon
|
||||
src={require('@tabler/icons/icons/ballon.svg')}
|
||||
className='w-4 h-4 text-gray-800 dark:text-gray-200'
|
||||
/>
|
||||
|
||||
<Text size='sm'>
|
||||
{hasBirthday ? (
|
||||
<FormattedMessage id='account.birthday_today' defaultMessage='Birthday is today!' />
|
||||
) : (
|
||||
<FormattedMessage id='account.birthday' defaultMessage='Born {date}' values={{ date: formattedBirthday }} />
|
||||
)}
|
||||
</Text>
|
||||
</HStack>
|
||||
);
|
||||
}
|
||||
|
||||
handleShowNote = e => {
|
||||
const { account, onShowNote } = this.props;
|
||||
|
||||
e.preventDefault();
|
||||
onShowNote(account);
|
||||
}
|
||||
|
||||
render() {
|
||||
const { account, displayFqn, intl, username } = this.props;
|
||||
|
||||
if (!account) {
|
||||
return (
|
||||
<div className='mt-6 min-w-0 flex-1 sm:px-2'>
|
||||
<Stack space={2}>
|
||||
<Stack>
|
||||
<HStack space={1} alignItems='center'>
|
||||
<Text size='sm' theme='muted'>
|
||||
@{username}
|
||||
</Text>
|
||||
</HStack>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const content = { __html: account.get('note_emojified') };
|
||||
const deactivated = !account.getIn(['pleroma', 'is_active'], true);
|
||||
const displayNameHtml = deactivated ? { __html: intl.formatMessage(messages.deactivated) } : { __html: account.get('display_name_html') };
|
||||
const memberSinceDate = intl.formatDate(account.get('created_at'), { month: 'long', year: 'numeric' });
|
||||
const verified = account.get('verified');
|
||||
const badges = this.getBadges();
|
||||
|
||||
return (
|
||||
<div className='mt-6 min-w-0 flex-1 sm:px-2'>
|
||||
<Stack space={2}>
|
||||
{/* Not sure if this is actual used. */}
|
||||
{/* <div className='profile-info-panel-content__deactivated'>
|
||||
<FormattedMessage
|
||||
id='account.deactivated_description' defaultMessage='This account has been deactivated.'
|
||||
/>
|
||||
</div> */}
|
||||
|
||||
<Stack>
|
||||
<HStack space={1} alignItems='center'>
|
||||
<Text size='lg' weight='bold' dangerouslySetInnerHTML={displayNameHtml} />
|
||||
|
||||
{verified && <VerificationBadge />}
|
||||
|
||||
{account.bot && <Badge slug='bot' title={intl.formatMessage(messages.bot)} />}
|
||||
|
||||
{badges.length > 0 && (
|
||||
<HStack space={1} alignItems='center'>
|
||||
{badges}
|
||||
</HStack>
|
||||
)}
|
||||
</HStack>
|
||||
|
||||
<HStack alignItems='center' space={0.5}>
|
||||
<Text size='sm' theme='muted'>
|
||||
@{displayFqn ? account.fqn : account.acct}
|
||||
</Text>
|
||||
|
||||
{account.get('locked') && (
|
||||
<Icon
|
||||
src={require('@tabler/icons/icons/lock.svg')}
|
||||
title={intl.formatMessage(messages.account_locked)}
|
||||
className='w-4 h-4 text-gray-600'
|
||||
/>
|
||||
)}
|
||||
</HStack>
|
||||
</Stack>
|
||||
|
||||
<ProfileStats account={account} />
|
||||
|
||||
{
|
||||
(account.get('note').length > 0 && account.get('note') !== '<p></p>') &&
|
||||
<Text size='sm' dangerouslySetInnerHTML={content} />
|
||||
}
|
||||
|
||||
<div className='flex flex-col md:flex-row items-start md:flex-wrap md:items-center gap-2'>
|
||||
{isLocal(account) ? (
|
||||
<HStack alignItems='center' space={0.5}>
|
||||
<Icon
|
||||
src={require('@tabler/icons/icons/calendar.svg')}
|
||||
className='w-4 h-4 text-gray-800 dark:text-gray-200'
|
||||
/>
|
||||
|
||||
<Text size='sm'>
|
||||
<FormattedMessage
|
||||
id='account.member_since' defaultMessage='Joined {date}' values={{
|
||||
date: memberSinceDate,
|
||||
}}
|
||||
/>
|
||||
</Text>
|
||||
</HStack>
|
||||
) : null}
|
||||
|
||||
{account.get('location') ? (
|
||||
<HStack alignItems='center' space={0.5}>
|
||||
<Icon
|
||||
src={require('@tabler/icons/icons/map-pin.svg')}
|
||||
className='w-4 h-4 text-gray-800 dark:text-gray-200'
|
||||
/>
|
||||
|
||||
<Text size='sm'>
|
||||
{account.get('location')}
|
||||
</Text>
|
||||
</HStack>
|
||||
) : null}
|
||||
|
||||
{account.get('website') ? (
|
||||
<HStack alignItems='center' space={0.5}>
|
||||
<Icon
|
||||
src={require('@tabler/icons/icons/link.svg')}
|
||||
className='w-4 h-4 text-gray-800 dark:text-gray-200'
|
||||
/>
|
||||
|
||||
<div className='max-w-[300px]'>
|
||||
<Text size='sm' truncate>
|
||||
{isSafeUrl(account.get('website')) ? (
|
||||
<a className='text-primary-600 dark:text-primary-400 hover:underline' href={account.get('website')} target='_blank'>{account.get('website')}</a>
|
||||
) : (
|
||||
account.get('website')
|
||||
)}
|
||||
</Text>
|
||||
</div>
|
||||
</HStack>
|
||||
) : null}
|
||||
|
||||
{this.renderBirthday()}
|
||||
</div>
|
||||
</Stack>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
const mapStateToProps = (state, { account }) => {
|
||||
const identity_proofs = account ? state.getIn(['identity_proofs', account.get('id')], ImmutableList()) : ImmutableList();
|
||||
return {
|
||||
identity_proofs,
|
||||
domain: state.getIn(['meta', 'domain']),
|
||||
displayFqn: displayFqn(state),
|
||||
};
|
||||
};
|
||||
|
||||
const mapDispatchToProps = (dispatch) => ({
|
||||
onShowNote(account) {
|
||||
dispatch(initAccountNoteModal(account));
|
||||
},
|
||||
});
|
||||
|
||||
export default injectIntl(
|
||||
connect(mapStateToProps, mapDispatchToProps, null, {
|
||||
forwardRef: true,
|
||||
},
|
||||
)(ProfileInfoPanel));
|
||||
230
app/soapbox/features/ui/components/profile_info_panel.tsx
Normal file
230
app/soapbox/features/ui/components/profile_info_panel.tsx
Normal file
|
|
@ -0,0 +1,230 @@
|
|||
'use strict';
|
||||
|
||||
import React from 'react';
|
||||
import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
|
||||
|
||||
import Badge from 'soapbox/components/badge';
|
||||
import { Icon, HStack, Stack, Text } from 'soapbox/components/ui';
|
||||
import VerificationBadge from 'soapbox/components/verification_badge';
|
||||
import { useSoapboxConfig } from 'soapbox/hooks';
|
||||
import { isLocal } from 'soapbox/utils/accounts';
|
||||
|
||||
import ProfileStats from './profile_stats';
|
||||
|
||||
import type { Account } from 'soapbox/types/entities';
|
||||
|
||||
/** Basically ensure the URL isn't `javascript:alert('hi')` or something like that */
|
||||
const isSafeUrl = (text: string): boolean => {
|
||||
try {
|
||||
const url = new URL(text);
|
||||
return ['http:', 'https:'].includes(url.protocol);
|
||||
} catch (e) {
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
const messages = defineMessages({
|
||||
linkVerifiedOn: { id: 'account.link_verified_on', defaultMessage: 'Ownership of this link was checked on {date}' },
|
||||
account_locked: { id: 'account.locked_info', defaultMessage: 'This account privacy status is set to locked. The owner manually reviews who can follow them.' },
|
||||
deactivated: { id: 'account.deactivated', defaultMessage: 'Deactivated' },
|
||||
bot: { id: 'account.badges.bot', defaultMessage: 'Bot' },
|
||||
});
|
||||
|
||||
interface IProfileInfoPanel {
|
||||
account: Account,
|
||||
/** Username from URL params, in case the account isn't found. */
|
||||
username: string,
|
||||
}
|
||||
|
||||
/** User profile metadata, such as location, birthday, etc. */
|
||||
const ProfileInfoPanel: React.FC<IProfileInfoPanel> = ({ account, username }) => {
|
||||
const intl = useIntl();
|
||||
const { displayFqn } = useSoapboxConfig();
|
||||
|
||||
const getStaffBadge = (): React.ReactNode => {
|
||||
if (account?.admin) {
|
||||
return <Badge slug='admin' title='Admin' key='staff' />;
|
||||
} else if (account?.moderator) {
|
||||
return <Badge slug='moderator' title='Moderator' key='staff' />;
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
const getBadges = (): React.ReactNode[] => {
|
||||
const staffBadge = getStaffBadge();
|
||||
const isPatron = account.getIn(['patron', 'is_patron']) === true;
|
||||
|
||||
const badges = [];
|
||||
|
||||
if (staffBadge) {
|
||||
badges.push(staffBadge);
|
||||
}
|
||||
|
||||
if (isPatron) {
|
||||
badges.push(<Badge slug='patron' title='Patron' key='patron' />);
|
||||
}
|
||||
|
||||
if (account.donor) {
|
||||
badges.push(<Badge slug='donor' title='Donor' key='donor' />);
|
||||
}
|
||||
|
||||
return badges;
|
||||
};
|
||||
|
||||
const renderBirthday = (): React.ReactNode => {
|
||||
const birthday = account.birthday;
|
||||
if (!birthday) return null;
|
||||
|
||||
const formattedBirthday = intl.formatDate(birthday, { timeZone: 'UTC', day: 'numeric', month: 'long', year: 'numeric' });
|
||||
|
||||
const date = new Date(birthday);
|
||||
const today = new Date();
|
||||
|
||||
const hasBirthday = date.getDate() === today.getDate() && date.getMonth() === today.getMonth();
|
||||
|
||||
return (
|
||||
<HStack alignItems='center' space={0.5}>
|
||||
<Icon
|
||||
src={require('@tabler/icons/icons/ballon.svg')}
|
||||
className='w-4 h-4 text-gray-800 dark:text-gray-200'
|
||||
/>
|
||||
|
||||
<Text size='sm'>
|
||||
{hasBirthday ? (
|
||||
<FormattedMessage id='account.birthday_today' defaultMessage='Birthday is today!' />
|
||||
) : (
|
||||
<FormattedMessage id='account.birthday' defaultMessage='Born {date}' values={{ date: formattedBirthday }} />
|
||||
)}
|
||||
</Text>
|
||||
</HStack>
|
||||
);
|
||||
};
|
||||
|
||||
if (!account) {
|
||||
return (
|
||||
<div className='mt-6 min-w-0 flex-1 sm:px-2'>
|
||||
<Stack space={2}>
|
||||
<Stack>
|
||||
<HStack space={1} alignItems='center'>
|
||||
<Text size='sm' theme='muted'>
|
||||
@{username}
|
||||
</Text>
|
||||
</HStack>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const content = { __html: account.note_emojified };
|
||||
const deactivated = !account.pleroma.get('is_active', true) === true;
|
||||
const displayNameHtml = deactivated ? { __html: intl.formatMessage(messages.deactivated) } : { __html: account.display_name_html };
|
||||
const memberSinceDate = intl.formatDate(account.created_at, { month: 'long', year: 'numeric' });
|
||||
const verified = account.verified;
|
||||
const badges = getBadges();
|
||||
|
||||
return (
|
||||
<div className='mt-6 min-w-0 flex-1 sm:px-2'>
|
||||
<Stack space={2}>
|
||||
{/* Not sure if this is actual used. */}
|
||||
{/* <div className='profile-info-panel-content__deactivated'>
|
||||
<FormattedMessage
|
||||
id='account.deactivated_description' defaultMessage='This account has been deactivated.'
|
||||
/>
|
||||
</div> */}
|
||||
|
||||
<Stack>
|
||||
<HStack space={1} alignItems='center'>
|
||||
<Text size='lg' weight='bold' dangerouslySetInnerHTML={displayNameHtml} />
|
||||
|
||||
{verified && <VerificationBadge />}
|
||||
|
||||
{account.bot && <Badge slug='bot' title={intl.formatMessage(messages.bot)} />}
|
||||
|
||||
{badges.length > 0 && (
|
||||
<HStack space={1} alignItems='center'>
|
||||
{badges}
|
||||
</HStack>
|
||||
)}
|
||||
</HStack>
|
||||
|
||||
<HStack alignItems='center' space={0.5}>
|
||||
<Text size='sm' theme='muted'>
|
||||
@{displayFqn ? account.fqn : account.acct}
|
||||
</Text>
|
||||
|
||||
{account.locked && (
|
||||
<Icon
|
||||
src={require('@tabler/icons/icons/lock.svg')}
|
||||
alt={intl.formatMessage(messages.account_locked)}
|
||||
className='w-4 h-4 text-gray-600'
|
||||
/>
|
||||
)}
|
||||
</HStack>
|
||||
</Stack>
|
||||
|
||||
<ProfileStats account={account} />
|
||||
|
||||
{account.note.length > 0 && account.note !== '<p></p>' && (
|
||||
<Text size='sm' dangerouslySetInnerHTML={content} />
|
||||
)}
|
||||
|
||||
<div className='flex flex-col md:flex-row items-start md:flex-wrap md:items-center gap-2'>
|
||||
{isLocal(account as any) ? (
|
||||
<HStack alignItems='center' space={0.5}>
|
||||
<Icon
|
||||
src={require('@tabler/icons/icons/calendar.svg')}
|
||||
className='w-4 h-4 text-gray-800 dark:text-gray-200'
|
||||
/>
|
||||
|
||||
<Text size='sm'>
|
||||
<FormattedMessage
|
||||
id='account.member_since' defaultMessage='Joined {date}' values={{
|
||||
date: memberSinceDate,
|
||||
}}
|
||||
/>
|
||||
</Text>
|
||||
</HStack>
|
||||
) : null}
|
||||
|
||||
{account.location ? (
|
||||
<HStack alignItems='center' space={0.5}>
|
||||
<Icon
|
||||
src={require('@tabler/icons/icons/map-pin.svg')}
|
||||
className='w-4 h-4 text-gray-800 dark:text-gray-200'
|
||||
/>
|
||||
|
||||
<Text size='sm'>
|
||||
{account.location}
|
||||
</Text>
|
||||
</HStack>
|
||||
) : null}
|
||||
|
||||
{account.website ? (
|
||||
<HStack alignItems='center' space={0.5}>
|
||||
<Icon
|
||||
src={require('@tabler/icons/icons/link.svg')}
|
||||
className='w-4 h-4 text-gray-800 dark:text-gray-200'
|
||||
/>
|
||||
|
||||
<div className='max-w-[300px]'>
|
||||
<Text size='sm' truncate>
|
||||
{isSafeUrl(account.website) ? (
|
||||
<a className='text-primary-600 dark:text-primary-400 hover:underline' href={account.website} target='_blank'>{account.website}</a>
|
||||
) : (
|
||||
account.website
|
||||
)}
|
||||
</Text>
|
||||
</div>
|
||||
</HStack>
|
||||
) : null}
|
||||
|
||||
{renderBirthday()}
|
||||
</div>
|
||||
</Stack>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProfileInfoPanel;
|
||||
Loading…
Reference in a new issue