From 4630a5cd04c95683c65be080839dbe794ecdd8e9 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 10 Sep 2020 20:18:04 -0500
Subject: [PATCH] Hovercard: mouseout clears the card

---
 app/soapbox/actions/profile_hover_card.js           |  7 +++++++
 app/soapbox/components/status.js                    | 13 +++++++------
 app/soapbox/containers/status_container.js          | 11 +++++++++--
 .../features/status/components/detailed_status.js   |  6 +++---
 app/soapbox/reducers/profile_hover_card.js          |  7 ++++++-
 app/styles/components/profile_hover_card.scss       |  1 -
 6 files changed, 32 insertions(+), 13 deletions(-)

diff --git a/app/soapbox/actions/profile_hover_card.js b/app/soapbox/actions/profile_hover_card.js
index 7014858ae..83b81d984 100644
--- a/app/soapbox/actions/profile_hover_card.js
+++ b/app/soapbox/actions/profile_hover_card.js
@@ -1,4 +1,5 @@
 export const PROFILE_HOVER_CARD_OPEN = 'PROFILE_HOVER_CARD_OPEN';
+export const PROFILE_HOVER_CARD_CLEAR = 'PROFILE_HOVER_CARD_CLEAR';
 
 export function openProfileHoverCard(ref, accountId) {
   return {
@@ -7,3 +8,9 @@ export function openProfileHoverCard(ref, accountId) {
     accountId,
   };
 }
+
+export function clearProfileHoverCard() {
+  return {
+    type: PROFILE_HOVER_CARD_CLEAR,
+  };
+}
diff --git a/app/soapbox/components/status.js b/app/soapbox/components/status.js
index d0d182b7d..e81ed9ccb 100644
--- a/app/soapbox/components/status.js
+++ b/app/soapbox/components/status.js
@@ -81,7 +81,7 @@ class Status extends ImmutablePureComponent {
     onEmbed: PropTypes.func,
     onHeightChange: PropTypes.func,
     onToggleHidden: PropTypes.func,
-    onShowProfileCard: PropTypes.func,
+    onShowHoverProfileCard: PropTypes.func,
     muted: PropTypes.bool,
     hidden: PropTypes.bool,
     unread: PropTypes.bool,
@@ -256,17 +256,18 @@ class Status extends ImmutablePureComponent {
     this.handleToggleMediaVisibility();
   }
 
-  showProfileCard = debounce(() => {
-    const { onShowProfileCard, status } = this.props;
-    onShowProfileCard(this.profileNode, status.getIn(['account', 'id']));
+  showProfileHoverCard = debounce(() => {
+    const { onShowProfileHoverCard, status } = this.props;
+    onShowProfileHoverCard(this.profileNode, status.getIn(['account', 'id']));
   }, 1200);
 
   handleProfileHover = e => {
-    if (!isMobile(window.innerWidth)) this.showProfileCard();
+    if (!isMobile(window.innerWidth)) this.showProfileHoverCard();
   }
 
   handleProfileLeave = e => {
-    this.showProfileCard.cancel();
+    this.showProfileHoverCard.cancel();
+    this.props.onClearProfileHoverCard();
     this.setState({ profileCardVisible: false });
   }
 
diff --git a/app/soapbox/containers/status_container.js b/app/soapbox/containers/status_container.js
index d2ae6f7e6..015256169 100644
--- a/app/soapbox/containers/status_container.js
+++ b/app/soapbox/containers/status_container.js
@@ -35,7 +35,10 @@ import {
   groupRemoveStatus,
 } from '../actions/groups';
 import { getSettings } from '../actions/settings';
-import { openProfileHoverCard } from 'soapbox/actions/profile_hover_card';
+import {
+  openProfileHoverCard,
+  clearProfileHoverCard,
+} from 'soapbox/actions/profile_hover_card';
 
 const messages = defineMessages({
   deleteConfirm: { id: 'confirmations.delete.confirm', defaultMessage: 'Delete' },
@@ -207,10 +210,14 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
     dispatch(groupRemoveStatus(groupId, statusId));
   },
 
-  onShowProfileCard(ref, accountId) {
+  onShowProfileHoverCard(ref, accountId) {
     dispatch(openProfileHoverCard(ref, accountId));
   },
 
+  onClearProfileHoverCard() {
+    dispatch(clearProfileHoverCard());
+  },
+
 });
 
 export default injectIntl(connect(makeMapStateToProps, mapDispatchToProps)(Status));
diff --git a/app/soapbox/features/status/components/detailed_status.js b/app/soapbox/features/status/components/detailed_status.js
index d58bd7e72..ca3a90b88 100644
--- a/app/soapbox/features/status/components/detailed_status.js
+++ b/app/soapbox/features/status/components/detailed_status.js
@@ -86,16 +86,16 @@ export default class DetailedStatus extends ImmutablePureComponent {
     window.open(href, 'soapbox-intent', 'width=445,height=600,resizable=no,menubar=no,status=no,scrollbars=yes');
   }
 
-  showProfileCard = debounce(() => {
+  showProfileHoverCard = debounce(() => {
     this.setState({ profileCardVisible: true });
   }, 1200);
 
   handleProfileHover = e => {
-    if (!isMobile(window.innerWidth)) this.showProfileCard();
+    if (!isMobile(window.innerWidth)) this.showProfileHoverCard();
   }
 
   handleProfileLeave = e => {
-    this.showProfileCard.cancel();
+    this.showProfileHoverCard.cancel();
     this.setState({ profileCardVisible: false });
   }
 
diff --git a/app/soapbox/reducers/profile_hover_card.js b/app/soapbox/reducers/profile_hover_card.js
index 907142656..09e3a92fc 100644
--- a/app/soapbox/reducers/profile_hover_card.js
+++ b/app/soapbox/reducers/profile_hover_card.js
@@ -1,4 +1,7 @@
-import { PROFILE_HOVER_CARD_OPEN } from 'soapbox/actions/profile_hover_card';
+import {
+  PROFILE_HOVER_CARD_OPEN,
+  PROFILE_HOVER_CARD_CLEAR,
+} from 'soapbox/actions/profile_hover_card';
 import { Map as ImmutableMap } from 'immutable';
 
 const initialState = ImmutableMap();
@@ -10,6 +13,8 @@ export default function profileHoverCard(state = initialState, action) {
       ref: action.ref,
       accountId: action.accountId,
     });
+  case PROFILE_HOVER_CARD_CLEAR:
+    return ImmutableMap();
   default:
     return state;
   }
diff --git a/app/styles/components/profile_hover_card.scss b/app/styles/components/profile_hover_card.scss
index 6d2ead6e1..ded79b5f5 100644
--- a/app/styles/components/profile_hover_card.scss
+++ b/app/styles/components/profile_hover_card.scss
@@ -17,7 +17,6 @@
   z-index: 200;
   top: 0;
   left: 0;
-  padding: 20px;
   margin-bottom: 10px;
 
   &--visible {