Merge branch 'directory-follows-you' into 'develop'

Show 'Follows you' in profile directory

See merge request soapbox-pub/soapbox-fe!936

app/soapbox/components/profile_hover_card.js

@@ -52,6 +52,7 @@ export const ProfileHoverCard = ({ visible }) => {
 
   const [popperElement, setPopperElement] = useState(null);
 
+  const me = useSelector(state => state.get('me'));
   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']));
@@ -65,7 +66,7 @@ export const ProfileHoverCard = ({ visible }) => {
 
   if (!account) return null;
   const accountBio = { __html: account.get('note_emojified') };
-  const followedBy  = account.getIn(['relationship', 'followed_by']);
+  const followedBy = me !== account.get('id') && 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)}>

app/soapbox/features/directory/components/account_card.js

@@ -2,6 +2,7 @@ import React from 'react';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import PropTypes from 'prop-types';
+import SoapboxPropTypes from 'soapbox/utils/soapbox_prop_types';
 import { connect } from 'react-redux';
 import classNames from 'classnames';
 import { makeGetAccount } from 'soapbox/selectors';
@@ -18,6 +19,7 @@ const makeMapStateToProps = () => {
   const getAccount = makeGetAccount();
 
   const mapStateToProps = (state, { id }) => ({
+    me: state.get('me'),
     account: getAccount(state, id),
     autoPlayGif: getSettings(state).get('autoPlayGif'),
   });
@@ -30,15 +32,24 @@ export default @injectIntl
 class AccountCard extends ImmutablePureComponent {
 
   static propTypes = {
+    me: SoapboxPropTypes.me,
     account: ImmutablePropTypes.map.isRequired,
     autoPlayGif: PropTypes.bool,
   };
 
   render() {
-    const { account, autoPlayGif } = this.props;
+    const { account, autoPlayGif, me } = this.props;
+
+    const followedBy = me !== account.get('id') && account.getIn(['relationship', 'followed_by']);
 
     return (
       <div className='directory__card'>
+        {followedBy &&
+          <div className='directory__card__info'>
+            <span className='relationship-tag'>
+              <FormattedMessage id='account.follows_you' defaultMessage='Follows you' />
+            </span>
+          </div>}
         <div className='directory__card__action-button'>
           <ActionButton account={account} small />
         </div>

app/styles/components/directory.scss

@@ -39,6 +39,13 @@
     overflow: hidden;
     position: relative;
 
+    &__info {
+      z-index: 1;
+      position: absolute;
+      top: 10px;
+      left: 10px;
+    }
+
     &__action-button {
       z-index: 1;
       position: absolute;