92 lines
3.4 KiB
JavaScript
92 lines
3.4 KiB
JavaScript
import React, { useEffect, useState } from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import { useSelector, useDispatch } from 'react-redux';
|
|
import { makeGetAccount } from 'soapbox/selectors';
|
|
import { injectIntl, FormattedMessage } from 'react-intl';
|
|
import ImmutablePropTypes from 'react-immutable-proptypes';
|
|
import UserPanel from 'soapbox/features/ui/components/user_panel';
|
|
import ActionButton from 'soapbox/features/ui/components/action_button';
|
|
import { isAdmin, isModerator } from 'soapbox/utils/accounts';
|
|
import Badge from 'soapbox/components/badge';
|
|
import classNames from 'classnames';
|
|
import { fetchRelationships } from 'soapbox/actions/accounts';
|
|
import { usePopper } from 'react-popper';
|
|
import {
|
|
closeProfileHoverCard,
|
|
updateProfileHoverCard,
|
|
} from 'soapbox/actions/profile_hover_card';
|
|
|
|
const getAccount = makeGetAccount();
|
|
|
|
const getBadges = (account) => {
|
|
let badges = [];
|
|
if (isAdmin(account)) badges.push(<Badge key='admin' slug='admin' title='Admin' />);
|
|
if (isModerator(account)) badges.push(<Badge key='moderator' slug='moderator' title='Moderator' />);
|
|
if (account.getIn(['patron', 'is_patron'])) badges.push(<Badge key='patron' slug='patron' title='Patron' />);
|
|
return badges;
|
|
};
|
|
|
|
const handleMouseEnter = (dispatch) => {
|
|
return e => {
|
|
dispatch(updateProfileHoverCard());
|
|
};
|
|
};
|
|
|
|
const handleMouseLeave = (dispatch) => {
|
|
return e => {
|
|
dispatch(closeProfileHoverCard(true));
|
|
};
|
|
};
|
|
|
|
export const ProfileHoverCard = ({ visible }) => {
|
|
const dispatch = useDispatch();
|
|
|
|
const [popperElement, setPopperElement] = useState(null);
|
|
|
|
const accountId = useSelector(state => state.getIn(['profile_hover_card', 'accountId']));
|
|
const account = useSelector(state => accountId && getAccount(state, accountId));
|
|
const targetRef = useSelector(state => state.getIn(['profile_hover_card', 'ref', 'current']));
|
|
const badges = account ? getBadges(account) : [];
|
|
|
|
useEffect(() => {
|
|
if (accountId) dispatch(fetchRelationships([accountId]));
|
|
}, [dispatch, accountId]);
|
|
|
|
const { styles, attributes } = usePopper(targetRef, popperElement);
|
|
|
|
if (!account) return null;
|
|
const accountBio = { __html: account.get('note_emojified') };
|
|
const followedBy = account.getIn(['relationship', 'followed_by']);
|
|
|
|
return (
|
|
<div className={classNames('profile-hover-card', { 'profile-hover-card--visible': visible })} ref={setPopperElement} style={styles.popper} {...attributes.popper} onMouseEnter={handleMouseEnter(dispatch)} onMouseLeave={handleMouseLeave(dispatch)}>
|
|
<div className='profile-hover-card__container'>
|
|
{followedBy &&
|
|
<span className='relationship-tag'>
|
|
<FormattedMessage id='account.follows_you' defaultMessage='Follows you' />
|
|
</span>}
|
|
<div className='profile-hover-card__action-button'><ActionButton account={account} small /></div>
|
|
<UserPanel className='profile-hover-card__user' accountId={account.get('id')} />
|
|
{badges.length > 0 &&
|
|
<div className='profile-hover-card__badges'>
|
|
{badges}
|
|
</div>}
|
|
{account.getIn(['source', 'note'], '').length > 0 &&
|
|
<div className='profile-hover-card__bio' dangerouslySetInnerHTML={accountBio} />}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
ProfileHoverCard.propTypes = {
|
|
visible: PropTypes.bool,
|
|
accountId: PropTypes.string,
|
|
account: ImmutablePropTypes.map,
|
|
intl: PropTypes.object.isRequired,
|
|
};
|
|
|
|
ProfileHoverCard.defaultProps = {
|
|
visible: true,
|
|
};
|
|
|
|
export default injectIntl(ProfileHoverCard);
|