Added suggestions page Updated SuggestionsController with unlimited param

• Added:
- suggestions page in app

• Updated:
- SuggestionsController with unlimited param to show max 80 items

app/controllers/api/v1/suggestions_controller.rb

@@ -12,7 +12,8 @@ class Api::V1::SuggestionsController < Api::BaseController
     type = params[:type]
 
     if type == 'related'
-      @accounts = PotentialFriendshipTracker.get(current_account.id)
+      count = truthy_param?(:unlimited) ? 80 : 10
+      @accounts = PotentialFriendshipTracker.get(current_account.id, limit: count)
       render json: @accounts, each_serializer: REST::AccountSerializer
     elsif type == 'verified'
       @accounts = VerifiedSuggestions.get(current_account.id)

app/javascript/gabsocial/actions/suggestions.js

@@ -27,13 +27,13 @@ export function fetchPopularSuggestions() {
   }
 }
 
-export function fetchRelatedSuggestions() {
+export function fetchRelatedSuggestions(unlimited = false) {
   return (dispatch, getState) => {
     if (!me) return false
 
     dispatch(fetchSuggestionsRequest(SUGGESTION_TYPE_RELATED))
 
-    api(getState).get(`/api/v1/suggestions?type=${SUGGESTION_TYPE_RELATED}`).then(response => {
+    api(getState).get(`/api/v1/suggestions?type=${SUGGESTION_TYPE_RELATED}&unlimited=${!!unlimited}`).then(response => {
       dispatch(importFetchedAccounts(response.data))
       dispatch(fetchSuggestionsSuccess(response.data, SUGGESTION_TYPE_RELATED))
       dispatch(fetchRelationships(response.data.map(item => item.id)))

app/javascript/gabsocial/features/suggestions.js

@@ -0,0 +1,71 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { connect } from 'react-redux'
+import ImmutablePureComponent from 'react-immutable-pure-component'
+import ImmutablePropTypes from 'react-immutable-proptypes'
+import { defineMessages, injectIntl } from 'react-intl'
+import { fetchRelatedSuggestions } from '../actions/suggestions'
+import Account from '../components/account'
+import ScrollableList from '../components/scrollable_list'
+import Block from '../components/block'
+import BlockHeading from '../components/block_heading'
+import AccountPlaceholder from '../components/placeholder/account_placeholder'
+
+class Suggestions extends ImmutablePureComponent {
+
+  componentDidMount() {
+    this.props.fetchRelatedSuggestions()
+  }
+
+  render() {
+    const {
+      intl,
+      isLoading,
+      suggestions,
+    } = this.props
+
+    return (
+      <Block>
+        <BlockHeading title={intl.formatMessage(messages.title)} />
+        <ScrollableList
+          scrollKey='related_user_suggestions'
+          isLoading={isLoading}
+          showLoading={isLoading}
+          placeholderComponent={AccountPlaceholder}
+          placeholderCount={4}
+          emptyMessage={intl.formatMessage(messages.empty)}
+        >
+          {
+            suggestions && suggestions.map((id) => (
+              <Account key={`user_related_suggestion_${id}`} id={id} compact withBio />
+            ))
+          }
+        </ScrollableList>
+      </Block>
+    )
+  }
+
+}
+
+const mapStateToProps = (state) => ({
+  suggestions: state.getIn(['suggestions', 'related', 'items']),
+  isLoading: state.getIn(['suggestions', 'related', 'isLoading']),
+})
+
+const mapDispatchToProps = (dispatch) => ({
+  fetchRelatedSuggestions: () => dispatch(fetchRelatedSuggestions(true)),
+})
+
+const messages = defineMessages({
+  title: { id: 'who_to_follow.title', defaultMessage: 'Who to Follow' },
+  empty: { id: 'account.suggestions.empty', defaultMessage: 'No suggestions found.' },
+})
+
+Suggestions.propTypes = {
+  intl: PropTypes.object.isRequired,
+  fetchRelatedSuggestions: PropTypes.func.isRequired,
+  suggestions: ImmutablePropTypes.list.isRequired,
+  isLoading: PropTypes.bool,
+}
+
+export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(Suggestions))

app/javascript/gabsocial/features/ui/ui.js

@@ -85,6 +85,7 @@ import {
   StatusFeature,
   StatusLikes,
   StatusReposts,
+  Suggestions,
   TermsOfSale,
   TermsOfService,
 } from './util/async_components'
@@ -177,6 +178,7 @@ class SwitchingArea extends React.PureComponent {
 
         <WrappedRoute path='/explore' publicRoute page={ExplorePage} component={GroupCollectionTimeline} content={children} componentParams={{ title: 'Explore', collectionType: 'featured' }} />
         <WrappedRoute path='/news' publicRoute page={NewsPage} component={News} content={children} componentParams={{ title: 'News' }} />
+        <WrappedRoute path='/suggestions' exact page={BasicPage} component={Suggestions} content={children} componentParams={{ title: 'Suggestions' }} />
 
         <WrappedRoute path='/compose' exact page={BasicPage} component={Compose} content={children} componentParams={{ title: 'Compose', page: 'compose' }} />
 

app/javascript/gabsocial/features/ui/util/async_components.js

@@ -107,7 +107,7 @@ export function StatusLikesModal() { return import(/* webpackChunkName: "modals/
 export function StatusRepostsModal() { return import(/* webpackChunkName: "modals/status_reposts_modal" */'../../../components/modal/status_reposts_modal') }
 export function StatusRevisionsModal() { return import(/* webpackChunkName: "modals/status_revisions_modal" */'../../../components/modal/status_revisions_modal') }
 export function StatusVisibilityPopover() { return import(/* webpackChunkName: "components/status_visibility_popover" */'../../../components/popover/status_visibility_popover') }
-// export function Suggestions() { return import(/* webpackChunkName: "features/suggestions" */'../../suggestions') }
+export function Suggestions() { return import(/* webpackChunkName: "features/suggestions" */'../../suggestions') }
 export function TermsOfSale() { return import(/* webpackChunkName: "features/about/terms_of_sale" */'../../about/terms_of_sale') }
 export function TermsOfService() { return import(/* webpackChunkName: "features/about/terms_of_service" */'../../about/terms_of_service') }
 // export function TimelineInjectionOptionsPopover() { return import(/* webpackChunkName: "components/timeline_injection_options_popover" */'../../../components/popover/timeline_injection_options_popover') }