Suggestions: display whole ActionButton instead of plus icon

app/soapbox/actions/suggestions.js

@@ -2,6 +2,7 @@ import api from '../api';
 import { importFetchedAccounts } from './importer';
 import { isLoggedIn } from 'soapbox/utils/auth';
 import { getFeatures } from 'soapbox/utils/features';
+import { fetchRelationships } from './accounts';
 
 export const SUGGESTIONS_FETCH_REQUEST = 'SUGGESTIONS_FETCH_REQUEST';
 export const SUGGESTIONS_FETCH_SUCCESS = 'SUGGESTIONS_FETCH_SUCCESS';
@@ -16,11 +17,13 @@ export const SUGGESTIONS_V2_FETCH_FAIL    = 'SUGGESTIONS_V2_FETCH_FAIL';
 export function fetchSuggestionsV1() {
   return (dispatch, getState) => {
     dispatch({ type: SUGGESTIONS_FETCH_REQUEST, skipLoading: true });
-    api(getState).get('/api/v1/suggestions').then(({ data: accounts }) => {
+    return api(getState).get('/api/v1/suggestions').then(({ data: accounts }) => {
       dispatch(importFetchedAccounts(accounts));
       dispatch({ type: SUGGESTIONS_FETCH_SUCCESS, accounts, skipLoading: true });
+      return accounts;
     }).catch(error => {
       dispatch({ type: SUGGESTIONS_FETCH_FAIL, error, skipLoading: true, skipAlert: true });
+      throw error;
     });
   };
 }
@@ -28,12 +31,14 @@ export function fetchSuggestionsV1() {
 export function fetchSuggestionsV2() {
   return (dispatch, getState) => {
     dispatch({ type: SUGGESTIONS_V2_FETCH_REQUEST, skipLoading: true });
-    api(getState).get('/api/v2/suggestions').then(({ data: suggestions }) => {
+    return api(getState).get('/api/v2/suggestions').then(({ data: suggestions }) => {
       const accounts = suggestions.map(({ account }) => account);
       dispatch(importFetchedAccounts(accounts));
       dispatch({ type: SUGGESTIONS_V2_FETCH_SUCCESS, suggestions, skipLoading: true });
+      return suggestions;
     }).catch(error => {
       dispatch({ type: SUGGESTIONS_V2_FETCH_FAIL, error, skipLoading: true, skipAlert: true });
+      throw error;
     });
   };
 }
@@ -45,9 +50,19 @@ export function fetchSuggestions() {
     const features = getFeatures(instance);
 
     if (features.suggestionsV2) {
-      dispatch(fetchSuggestionsV2());
+      dispatch(fetchSuggestionsV2())
+        .then(suggestions => {
+          const accountIds = suggestions.map(({ account }) => account.id);
+          dispatch(fetchRelationships(accountIds));
+        })
+        .catch(() => {});
     } else if (features.suggestions) {
-      dispatch(fetchSuggestionsV1());
+      dispatch(fetchSuggestionsV1())
+        .then(accounts => {
+          const accountIds = accounts.map(({ id }) => id);
+          dispatch(fetchRelationships(accountIds));
+        })
+        .catch(() => {});
     } else {
       // Do nothing
     }

app/soapbox/features/follow_recommendations/components/account.js

@@ -7,14 +7,7 @@ import { makeGetAccount } from 'soapbox/selectors';
 import Avatar from 'soapbox/components/avatar';
 import DisplayName from 'soapbox/components/display_name';
 import Permalink from 'soapbox/components/permalink';
-import IconButton from 'soapbox/components/icon_button';
+import ActionButton from 'soapbox/features/ui/components/action_button';
-import { injectIntl, defineMessages } from 'react-intl';
-import { followAccount, unfollowAccount } from 'soapbox/actions/accounts';
-
-const messages = defineMessages({
-  follow: { id: 'account.follow', defaultMessage: 'Follow' },
-  unfollow: { id: 'account.unfollow', defaultMessage: 'Unfollow' },
-});
 
 const makeMapStateToProps = () => {
   const getAccount = makeGetAccount();
@@ -33,7 +26,6 @@ const getFirstSentence = str => {
 };
 
 export default @connect(makeMapStateToProps)
-@injectIntl
 class Account extends ImmutablePureComponent {
 
   static propTypes = {
@@ -42,26 +34,8 @@ class Account extends ImmutablePureComponent {
     dispatch: PropTypes.func.isRequired,
   };
 
-  handleFollow = () => {
-    const { account, dispatch } = this.props;
-
-    if (account.getIn(['relationship', 'following']) || account.getIn(['relationship', 'requested'])) {
-      dispatch(unfollowAccount(account.get('id')));
-    } else {
-      dispatch(followAccount(account.get('id')));
-    }
-  }
-
   render() {
-    const { account, intl } = this.props;
+    const { account } = this.props;
-
-    let button;
-
-    if (account.getIn(['relationship', 'following'])) {
-      button = <IconButton icon='check' title={intl.formatMessage(messages.unfollow)} active onClick={this.handleFollow} />;
-    } else {
-      button = <IconButton icon='plus' title={intl.formatMessage(messages.follow)} onClick={this.handleFollow} />;
-    }
 
     return (
       <div className='account follow-recommendations-account'>
@@ -75,7 +49,7 @@ class Account extends ImmutablePureComponent {
           </Permalink>
 
           <div className='account__relationship'>
-            {button}
+            <ActionButton account={account} />
           </div>
         </div>
       </div>