Restore ability to discard interactions-based follow suggestions

3 files changed, 24 insertions, 2 deletions

diff --git a/app/javascript/flavours/glitch/features/directory/components/account_card.js b/app/javascript/flavours/glitch/features/directory/components/account_card.js
index 6c554336c..218208c10 100644
--- a/app/javascript/flavours/glitch/features/directory/components/account_card.js
+++ b/app/javascript/flavours/glitch/features/directory/components/account_card.js
@@ -7,6 +7,7 @@ import { makeGetAccount } from 'flavours/glitch/selectors';
 import Avatar from 'flavours/glitch/components/avatar';
 import DisplayName from 'flavours/glitch/components/display_name';
 import Permalink from 'flavours/glitch/components/permalink';
+import IconButton from 'flavours/glitch/components/icon_button';
 import Button from 'flavours/glitch/components/button';
 import { FormattedMessage, injectIntl, defineMessages } from 'react-intl';
 import { autoPlayGif, me, unfollowModal } from 'flavours/glitch/util/initial_state';
@@ -29,6 +30,7 @@ const messages = defineMessages({
   unmute: { id: 'account.unmute_short', defaultMessage: 'Unmute' },
   unfollowConfirm: { id: 'confirmations.unfollow.confirm', defaultMessage: 'Unfollow' },
   edit_profile: { id: 'account.edit_profile', defaultMessage: 'Edit profile' },
+  dismissSuggestion: { id: 'suggestions.dismiss', defaultMessage: 'Dismiss suggestion' },
 });
 
 const makeMapStateToProps = () => {
@@ -94,6 +96,7 @@ class AccountCard extends ImmutablePureComponent {
     onFollow: PropTypes.func.isRequired,
     onBlock: PropTypes.func.isRequired,
     onMute: PropTypes.func.isRequired,
+    onDismiss: PropTypes.func,
   };
 
   handleMouseEnter = ({ currentTarget }) => {
@@ -138,6 +141,14 @@ class AccountCard extends ImmutablePureComponent {
     window.open('/settings/profile', '_blank');
   }
 
+  handleDismiss = (e) => {
+    const { account, onDismiss } = this.props;
+    onDismiss(account.get('id'));
+
+    e.preventDefault();
+    e.stopPropagation();
+  }
+
   render() {
     const { account, intl } = this.props;
 
@@ -163,6 +174,8 @@ class AccountCard extends ImmutablePureComponent {
       <div className='account-card'>
         <Permalink href={account.get('url')} to={`/@${account.get('acct')}`} className='account-card__permalink'>
           <div className='account-card__header'>
+            {this.props.onDismiss && <IconButton className='media-modal__close' title={intl.formatMessage(messages.dismissSuggestion)} icon='times' onClick={this.handleDismiss} size={20} />}
+
             <img
               src={
                 autoPlayGif ? account.get('header') : account.get('header_static')
diff --git a/app/javascript/flavours/glitch/features/explore/suggestions.js b/app/javascript/flavours/glitch/features/explore/suggestions.js
index 7e513fa96..ccd2c950a 100644
--- a/app/javascript/flavours/glitch/features/explore/suggestions.js
+++ b/app/javascript/flavours/glitch/features/explore/suggestions.js
@@ -4,7 +4,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import AccountCard from 'flavours/glitch/features/directory/components/account_card';
 import LoadingIndicator from 'flavours/glitch/components/loading_indicator';
 import { connect } from 'react-redux';
-import { fetchSuggestions } from 'flavours/glitch/actions/suggestions';
+import { fetchSuggestions, dismissSuggestion } from 'flavours/glitch/actions/suggestions';
 
 const mapStateToProps = state => ({
   suggestions: state.getIn(['suggestions', 'items']),
@@ -25,13 +25,18 @@ class Suggestions extends React.PureComponent {
     dispatch(fetchSuggestions(true));
   }
 
+  handleDismiss = (accountId) => {
+    const { dispatch } = this.props;
+    dispatch(dismissSuggestion(accountId));
+  }
+
   render () {
     const { isLoading, suggestions } = this.props;
 
     return (
       <div className='explore__suggestions'>
         {isLoading ? <LoadingIndicator /> : suggestions.map(suggestion => (
-          <AccountCard key={suggestion.get('account')} id={suggestion.get('account')} />
+          <AccountCard key={suggestion.get('account')} id={suggestion.get('account')} onDismiss={suggestion.get('source') === 'past_interactions' ? this.handleDismiss : null} />
         ))}
       </div>
     );
diff --git a/app/javascript/flavours/glitch/styles/components/explore.scss b/app/javascript/flavours/glitch/styles/components/explore.scss
index 587bc923c..05df34eff 100644
--- a/app/javascript/flavours/glitch/styles/components/explore.scss
+++ b/app/javascript/flavours/glitch/styles/components/explore.scss
@@ -1,3 +1,7 @@
+.account-card__header {
+  position: relative;
+}
+
 .explore__search-header {
   background: $ui-base-color;
   display: flex;