diff --git a/app/controllers/api/v1/suggestions_controller.rb b/app/controllers/api/v1/suggestions_controller.rb
index 90bd0749..7f0eda60 100644
--- a/app/controllers/api/v1/suggestions_controller.rb
+++ b/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)
diff --git a/app/javascript/gabsocial/actions/suggestions.js b/app/javascript/gabsocial/actions/suggestions.js
index 5d045eec..77799ee5 100644
--- a/app/javascript/gabsocial/actions/suggestions.js
+++ b/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)))
diff --git a/app/javascript/gabsocial/features/suggestions.js b/app/javascript/gabsocial/features/suggestions.js
new file mode 100644
index 00000000..59157a6f
--- /dev/null
+++ b/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 (
+
+
+
+ {
+ suggestions && suggestions.map((id) => (
+
+ ))
+ }
+
+
+ )
+ }
+
+}
+
+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))
\ No newline at end of file
diff --git a/app/javascript/gabsocial/features/ui/ui.js b/app/javascript/gabsocial/features/ui/ui.js
index 3df22c59..19878037 100644
--- a/app/javascript/gabsocial/features/ui/ui.js
+++ b/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 {
+
diff --git a/app/javascript/gabsocial/features/ui/util/async_components.js b/app/javascript/gabsocial/features/ui/util/async_components.js
index 0c9be605..8bbe4544 100644
--- a/app/javascript/gabsocial/features/ui/util/async_components.js
+++ b/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') }