Hovercard: basic Redux+Popper prototype

app/soapbox/components/profile_hover_card.js

@@ -0,0 +1,76 @@
+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';
+
+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;
+};
+
+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']));
+  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}>
+      <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);

app/soapbox/components/status.js

@@ -18,7 +18,6 @@ import classNames from 'classnames';
 import Icon from 'soapbox/components/icon';
 import PollContainer from 'soapbox/containers/poll_container';
 import { NavLink } from 'react-router-dom';
-import ProfileHoverCardContainer from '../features/profile_hover_card/profile_hover_card_container';
 import { isMobile } from '../../../app/soapbox/is_mobile';
 import { debounce } from 'lodash';
 import { getDomain } from 'soapbox/utils/accounts';
@@ -82,6 +81,7 @@ class Status extends ImmutablePureComponent {
     onEmbed: PropTypes.func,
     onHeightChange: PropTypes.func,
     onToggleHidden: PropTypes.func,
+    onShowProfileCard: PropTypes.func,
     muted: PropTypes.bool,
     hidden: PropTypes.bool,
     unread: PropTypes.bool,
@@ -257,7 +257,8 @@ class Status extends ImmutablePureComponent {
   }
 
   showProfileCard = debounce(() => {
-    this.setState({ profileCardVisible: true });
+    const { onShowProfileCard, status } = this.props;
+    onShowProfileCard(this.profileNode, status.getIn(['account', 'id']));
   }, 1200);
 
   handleProfileHover = e => {
@@ -283,6 +284,10 @@ class Status extends ImmutablePureComponent {
     this.node = c;
   }
 
+  setProfileRef = c => {
+    this.profileNode = c;
+  }
+
   render() {
     let media = null;
     let poll = null;
@@ -457,7 +462,6 @@ class Status extends ImmutablePureComponent {
     };
 
     const statusUrl = `/@${status.getIn(['account', 'acct'])}/posts/${status.get('id')}`;
-    const { profileCardVisible } = this.state;
     const favicon = status.getIn(['account', 'pleroma', 'favicon']);
     const domain = getDomain(status.get('account'));
 
@@ -478,7 +482,7 @@ class Status extends ImmutablePureComponent {
                   <img src={favicon} alt='' title={domain} />
                 </div>}
 
-              <div className='status__profile' onMouseEnter={this.handleProfileHover} onMouseLeave={this.handleProfileLeave}>
+              <div className='status__profile' ref={this.setProfileRef} onMouseEnter={this.handleProfileHover} onMouseLeave={this.handleProfileLeave}>
                 <div className='status__avatar'>
                   <NavLink to={`/@${status.getIn(['account', 'acct'])}`} title={status.getIn(['account', 'acct'])} className='floating-link' />
                   {statusAvatar}
@@ -486,9 +490,6 @@ class Status extends ImmutablePureComponent {
                 <NavLink to={`/@${status.getIn(['account', 'acct'])}`} title={status.getIn(['account', 'acct'])} className='status__display-name'>
                   <DisplayName account={status.get('account')} others={otherAccounts} />
                 </NavLink>
-                { profileCardVisible &&
-                  <ProfileHoverCardContainer accountId={status.getIn(['account', 'id'])} visible={!isMobile(window.innerWidth)} />
-                }
               </div>
             </div>