From eb01996c123e776d5cfd955819e98606d87afd47 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 17 Sep 2021 16:03:17 -0500
Subject: [PATCH] Suggestions: break out FollowRecommendationsList component

---
 .../components/account.js                     |  2 +-
 .../components/follow_recommendations_list.js | 60 +++++++++++++++++++
 .../features/follow_recommendations/index.js  | 54 +++--------------
 app/styles/components/columns.scss            |  4 ++
 4 files changed, 73 insertions(+), 47 deletions(-)
 create mode 100644 app/soapbox/features/follow_recommendations/components/follow_recommendations_list.js

diff --git a/app/soapbox/features/follow_recommendations/components/account.js b/app/soapbox/features/follow_recommendations/components/account.js
index 97b143cc0..e2fbce0bf 100644
--- a/app/soapbox/features/follow_recommendations/components/account.js
+++ b/app/soapbox/features/follow_recommendations/components/account.js
@@ -66,7 +66,7 @@ class Account extends ImmutablePureComponent {
     return (
       <div className='account follow-recommendations-account'>
         <div className='account__wrapper'>
-          <Permalink className='account__display-name account__display-name--with-note' title={account.get('acct')} href={account.get('url')} to={`/accounts/${account.get('id')}`}>
+          <Permalink className='account__display-name account__display-name--with-note' title={account.get('acct')} href={account.get('url')} to={`/@${account.get('acct')}`}>
             <div className='account__avatar-wrapper'><Avatar account={account} size={36} /></div>
 
             <DisplayName account={account} />
diff --git a/app/soapbox/features/follow_recommendations/components/follow_recommendations_list.js b/app/soapbox/features/follow_recommendations/components/follow_recommendations_list.js
new file mode 100644
index 000000000..7eab96bc7
--- /dev/null
+++ b/app/soapbox/features/follow_recommendations/components/follow_recommendations_list.js
@@ -0,0 +1,60 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import { FormattedMessage } from 'react-intl';
+import { fetchSuggestions } from 'soapbox/actions/suggestions';
+import Account from './account';
+import LoadingIndicator from 'soapbox/components/loading_indicator';
+
+const mapStateToProps = state => ({
+  suggestions: state.getIn(['suggestions', 'items']),
+  isLoading: state.getIn(['suggestions', 'isLoading']),
+});
+
+export default @connect(mapStateToProps)
+class FollowRecommendationsList extends ImmutablePureComponent {
+
+  static propTypes = {
+    dispatch: PropTypes.func.isRequired,
+    suggestions: ImmutablePropTypes.list,
+    isLoading: PropTypes.bool,
+  };
+
+  componentDidMount() {
+    const { dispatch, suggestions } = this.props;
+
+    // Don't re-fetch if we're e.g. navigating backwards to this page,
+    // since we don't want followed accounts to disappear from the list
+    if (suggestions.size === 0) {
+      dispatch(fetchSuggestions(true));
+    }
+  }
+
+  render() {
+    const { suggestions, isLoading } = this.props;
+
+    if (isLoading) {
+      return (
+        <div className='column-list'>
+          <LoadingIndicator />
+        </div>
+      );
+    }
+
+    return (
+      <div className='column-list'>
+        {suggestions.size > 0 ? suggestions.map(suggestion => (
+          <Account key={suggestion.get('account')} id={suggestion.get('account')} />
+        )) : (
+          <div className='column-list__empty-message'>
+            <FormattedMessage id='empty_column.follow_recommendations' defaultMessage='Looks like no suggestions could be generated for you. You can try using search to look for people you might know or explore trending hashtags.' />
+          </div>
+        )}
+      </div>
+    );
+
+  }
+
+}
diff --git a/app/soapbox/features/follow_recommendations/index.js b/app/soapbox/features/follow_recommendations/index.js
index 22e2a24f0..6e043c9f2 100644
--- a/app/soapbox/features/follow_recommendations/index.js
+++ b/app/soapbox/features/follow_recommendations/index.js
@@ -1,42 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import { connect } from 'react-redux';
 import { FormattedMessage } from 'react-intl';
-import { fetchSuggestions } from 'soapbox/actions/suggestions';
 import Column from 'soapbox/features/ui/components/column';
-import Account from './components/account';
 import Button from 'soapbox/components/button';
+import FollowRecommendationsList from './components/follow_recommendations_list';
 
-const mapStateToProps = state => ({
-  suggestions: state.getIn(['suggestions', 'items']),
-  isLoading: state.getIn(['suggestions', 'isLoading']),
-});
-
-export default @connect(mapStateToProps)
-class FollowRecommendations extends ImmutablePureComponent {
+export default class FollowRecommendations extends React.Component {
 
   static contextTypes = {
     router: PropTypes.object.isRequired,
   };
 
-  static propTypes = {
-    dispatch: PropTypes.func.isRequired,
-    suggestions: ImmutablePropTypes.list,
-    isLoading: PropTypes.bool,
-  };
-
-  componentDidMount() {
-    const { dispatch, suggestions } = this.props;
-
-    // Don't re-fetch if we're e.g. navigating backwards to this page,
-    // since we don't want followed accounts to disappear from the list
-    if (suggestions.size === 0) {
-      dispatch(fetchSuggestions(true));
-    }
-  }
-
   handleDone = () => {
     const { router } = this.context;
 
@@ -44,8 +18,6 @@ class FollowRecommendations extends ImmutablePureComponent {
   }
 
   render() {
-    const { suggestions, isLoading } = this.props;
-
     return (
       <Column>
         <div className='scrollable follow-recommendations-container'>
@@ -54,23 +26,13 @@ class FollowRecommendations extends ImmutablePureComponent {
             <p><FormattedMessage id='follow_recommendations.lead' defaultMessage="Posts from people you follow will show up in chronological order on your home feed. Don't be afraid to make mistakes, you can unfollow people just as easily any time!" /></p>
           </div>
 
-          {!isLoading && (
-            <>
-              <div className='column-list'>
-                {suggestions.size > 0 ? suggestions.map(suggestion => (
-                  <Account key={suggestion.get('account')} id={suggestion.get('account')} />
-                )) : (
-                  <div className='column-list__empty-message'>
-                    <FormattedMessage id='empty_column.follow_recommendations' defaultMessage='Looks like no suggestions could be generated for you. You can try using search to look for people you might know or explore trending hashtags.' />
-                  </div>
-                )}
-              </div>
+          <FollowRecommendationsList />
 
-              <div className='column-actions'>
-                <Button onClick={this.handleDone}><FormattedMessage id='follow_recommendations.done' defaultMessage='Done' /></Button>
-              </div>
-            </>
-          )}
+          <div className='column-actions'>
+            <Button onClick={this.handleDone}>
+              <FormattedMessage id='follow_recommendations.done' defaultMessage='Done' />
+            </Button>
+          </div>
         </div>
       </Column>
     );
diff --git a/app/styles/components/columns.scss b/app/styles/components/columns.scss
index ee909d686..2890c8283 100644
--- a/app/styles/components/columns.scss
+++ b/app/styles/components/columns.scss
@@ -810,3 +810,7 @@
     width: auto;
   }
 }
+
+.column-list {
+  position: relative;
+}