Suggestions: display suggestions on Home timeline when there are no posts

app/soapbox/features/home_timeline/index.js

@@ -4,20 +4,35 @@ import { expandHomeTimeline } from '../../actions/timelines';
 import PropTypes from 'prop-types';
 import StatusListContainer from '../ui/containers/status_list_container';
 import Column from '../../components/column';
+import BundleContainer from 'soapbox/features/ui/containers/bundle_container';
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import ColumnSettingsContainer from './containers/column_settings_container';
 import HomeColumnHeader from '../../components/home_column_header';
 import { Link } from 'react-router-dom';
+import Button from 'soapbox/components/button';
+import { OrderedSet as ImmutableOrderedSet } from 'immutable';
+import { getFeatures } from 'soapbox/utils/features';
+
+function FollowRecommendationsList() {
+  return import(/* webpackChunkName: "features/follow_recommendations" */'soapbox/features/follow_recommendations/components/follow_recommendations_list');
+}
 
 const messages = defineMessages({
   title: { id: 'column.home', defaultMessage: 'Home' },
 });
 
-const mapStateToProps = state => ({
-  hasUnread: state.getIn(['timelines', 'home', 'unread']) > 0,
-  isPartial: state.getIn(['timelines', 'home', 'isPartial']),
-  siteTitle: state.getIn(['instance', 'title']),
-});
+const mapStateToProps = state => {
+  const instance = state.get('instance');
+  const features = getFeatures(instance);
+
+  return {
+    hasUnread: state.getIn(['timelines', 'home', 'unread']) > 0,
+    isPartial: state.getIn(['timelines', 'home', 'isPartial']),
+    siteTitle: state.getIn(['instance', 'title']),
+    isEmpty: state.getIn(['timelines', 'home', 'items'], ImmutableOrderedSet()).isEmpty(),
+    features,
+  };
+};
 
 export default @connect(mapStateToProps)
 @injectIntl
@@ -29,8 +44,14 @@ class HomeTimeline extends React.PureComponent {
     hasUnread: PropTypes.bool,
     isPartial: PropTypes.bool,
     siteTitle: PropTypes.string,
+    isEmpty: PropTypes.bool,
+    features: PropTypes.object.isRequired,
   };
 
+  state = {
+    done: false,
+  }
+
   handleLoadMore = maxId => {
     this.props.dispatch(expandHomeTimeline({ maxId }));
   }
@@ -68,20 +89,51 @@ class HomeTimeline extends React.PureComponent {
     }
   }
 
+  handleDone = e => {
+    this.props.dispatch(expandHomeTimeline());
+    this.setState({ done: true });
+  }
+
+  renderFollowRecommendations = () => {
+    return (
+      <div className='scrollable follow-recommendations-container'>
+        <div className='column-title'>
+          <h3><FormattedMessage id='follow_recommendations.heading' defaultMessage="Follow people you'd like to see posts from! Here are some suggestions." /></h3>
+          <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>
+
+        <BundleContainer fetchComponent={FollowRecommendationsList}>
+          {Component => <Component />}
+        </BundleContainer>
+
+        <div className='column-actions'>
+          <Button onClick={this.handleDone}>
+            <FormattedMessage id='follow_recommendations.done' defaultMessage='Done' />
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
   render() {
-    const { intl, hasUnread, siteTitle } = this.props;
+    const { intl, hasUnread, siteTitle, isEmpty, features } = this.props;
+    const { done } = this.state;
 
     return (
       <Column label={intl.formatMessage(messages.title)}>
         <HomeColumnHeader activeItem='home' active={hasUnread}>
           <ColumnSettingsContainer />
         </HomeColumnHeader>
-        <StatusListContainer
-          scrollKey='home_timeline'
-          onLoadMore={this.handleLoadMore}
-          timelineId='home'
-          emptyMessage={<FormattedMessage id='empty_column.home' defaultMessage='Your home timeline is empty! Visit {public} to get started and meet other users.' values={{ public: <Link to='/timeline/local'><FormattedMessage id='empty_column.home.local_tab' defaultMessage='the {site_title} tab' values={{ site_title: siteTitle }} /></Link> }} />}
-        />
+        {(features.suggestions && isEmpty && !done) ? (
+          this.renderFollowRecommendations()
+        ) : (
+          <StatusListContainer
+            scrollKey='home_timeline'
+            onLoadMore={this.handleLoadMore}
+            timelineId='home'
+            emptyMessage={<FormattedMessage id='empty_column.home' defaultMessage='Your home timeline is empty! Visit {public} to get started and meet other users.' values={{ public: <Link to='/timeline/local'><FormattedMessage id='empty_column.home.local_tab' defaultMessage='the {site_title} tab' values={{ site_title: siteTitle }} /></Link> }} />}
+          />
+        )}
       </Column>
     );
   }