Hovercard: refactor detailed status

app/soapbox/features/status/components/detailed_status.js

@@ -16,10 +16,8 @@ import classNames from 'classnames';
 import Icon from 'soapbox/components/icon';
 import PollContainer from 'soapbox/containers/poll_container';
 import { StatusInteractionBar } from './status_interaction_bar';
-import ProfileHoverCardContainer from 'soapbox/features/profile_hover_card/profile_hover_card_container';
-import { isMobile } from 'soapbox/is_mobile';
-import { debounce } from 'lodash';
 import { getDomain } from 'soapbox/utils/accounts';
+import HoverRefWrapper from 'soapbox/components/hover_ref_wrapper';
 
 export default class DetailedStatus extends ImmutablePureComponent {
 
@@ -42,7 +40,6 @@ export default class DetailedStatus extends ImmutablePureComponent {
 
   state = {
     height: null,
-    profileCardVisible: false,
   };
 
   handleOpenVideo = (media, startTime) => {
@@ -86,24 +83,10 @@ export default class DetailedStatus extends ImmutablePureComponent {
     window.open(href, 'soapbox-intent', 'width=445,height=600,resizable=no,menubar=no,status=no,scrollbars=yes');
   }
 
-  showProfileHoverCard = debounce(() => {
-    this.setState({ profileCardVisible: true });
-  }, 1200);
-
-  handleProfileHover = e => {
-    if (!isMobile(window.innerWidth)) this.showProfileHoverCard();
-  }
-
-  handleProfileLeave = e => {
-    this.showProfileHoverCard.cancel();
-    this.setState({ profileCardVisible: false });
-  }
-
   render() {
     const status = (this.props.status && this.props.status.get('reblog')) ? this.props.status.get('reblog') : this.props.status;
     const outerStyle = { boxSizing: 'border-box' };
     const { compact } = this.props;
-    const { profileCardVisible } = this.state;
     const favicon = status.getIn(['account', 'pleroma', 'favicon']);
     const domain = getDomain(status.get('account'));
 
@@ -181,21 +164,20 @@ export default class DetailedStatus extends ImmutablePureComponent {
     return (
       <div style={outerStyle}>
         <div ref={this.setRef} className={classNames('detailed-status', { compact })}>
-          <div className='detailed-status__profile' onMouseEnter={this.handleProfileHover} onMouseLeave={this.handleProfileLeave}>
-            <div className='detailed-status__display-name'>
-              <NavLink to={`/@${status.getIn(['account', 'acct'])}`}>
-                <div className='detailed-status__display-avatar'>
-                  <Avatar account={status.get('account')} size={48} />
-                </div>
-              </NavLink>
-              <DisplayName account={status.get('account')}>
-                <NavLink to={`/@${status.getIn(['account', 'acct'])}`} title={status.getIn(['account', 'acct'])} className='floating-link' />
-              </DisplayName>
+          <HoverRefWrapper accountId={status.getIn(['account', 'id'])}>
+            <div className='detailed-status__profile'>
+              <div className='detailed-status__display-name'>
+                <NavLink to={`/@${status.getIn(['account', 'acct'])}`}>
+                  <div className='detailed-status__display-avatar'>
+                    <Avatar account={status.get('account')} size={48} />
+                  </div>
+                </NavLink>
+                <DisplayName account={status.get('account')}>
+                  <NavLink to={`/@${status.getIn(['account', 'acct'])}`} title={status.getIn(['account', 'acct'])} className='floating-link' />
+                </DisplayName>
+              </div>
             </div>
-            { profileCardVisible &&
-              <ProfileHoverCardContainer accountId={status.getIn(['account', 'id'])} visible={!isMobile(window.innerWidth) && profileCardVisible} />
-            }
-          </div>
+          </HoverRefWrapper>
 
           {status.get('group') && (
             <div className='status__meta'>