Added verified accounts/suggestions panel, updated suggestions route

• Added:
- verified accounts/suggestions panel

• Updated:
- suggestions route

app/javascript/gabsocial/components/panel/verified_accounts_panel.js

@@ -0,0 +1,90 @@
+import { defineMessages, injectIntl } from 'react-intl'
+import { fetchPopularSuggestions } from '../../actions/suggestions'
+import ImmutablePureComponent from 'react-immutable-pure-component'
+import ImmutablePropTypes from 'react-immutable-proptypes'
+import Account from '../account'
+import PanelLayout from './panel_layout'
+
+const messages = defineMessages({
+  dismissSuggestion: { id: 'suggestions.dismiss', defaultMessage: 'Dismiss suggestion' },
+  title: { id: 'who_to_follow.title', defaultMessage: 'Verified Accounts to Follow' },
+  show_more: { id: 'who_to_follow.more', defaultMessage: 'Show more' },
+})
+
+const mapStateToProps = (state) => ({
+  suggestions: state.getIn(['suggestions', 'verified', 'items']),
+})
+
+const mapDispatchToProps = (dispatch) => ({
+  fetchPopularSuggestions: () => dispatch(fetchPopularSuggestions()),
+})
+
+export default
+@connect(mapStateToProps, mapDispatchToProps)
+@injectIntl
+class VerifiedAccountsPanel extends ImmutablePureComponent {
+
+  static propTypes = {
+    fetchPopularSuggestions: PropTypes.func.isRequired,
+    intl: PropTypes.object.isRequired,
+    suggestions: ImmutablePropTypes.list.isRequired,
+    isLazy: PropTypes.bool,
+  }
+
+  state = {
+    fetched: !this.props.isLazy,
+  }
+
+  updateOnProps = [
+    'suggestions',
+    'isLazy',
+    'shouldLoad',
+  ]
+
+  static getDerivedStateFromProps(nextProps, prevState) {
+    if (nextProps.shouldLoad && !prevState.fetched) {
+      return { fetched: true }
+    }
+
+    return null
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    if (!prevState.fetched && this.state.fetched) {
+      this.props.fetchPopularSuggestions()
+    }
+  }
+
+  componentDidMount() {
+    if (!this.props.isLazy) {
+      this.props.fetchPopularSuggestions()
+    }
+  }
+
+  render() {
+    const { intl, suggestions } = this.props
+
+    if (suggestions.isEmpty()) return null
+
+    return (
+      <PanelLayout
+        noPadding
+        title={intl.formatMessage(messages.title)}
+        // footerButtonTitle={intl.formatMessage(messages.show_more)}
+        // footerButtonTo='/explore'
+      >
+        <div className={_s.default}>
+          {
+            suggestions.map(accountId => (
+              <Account
+                compact
+                key={accountId}
+                id={accountId}
+              />
+            ))
+          }
+        </div>
+      </PanelLayout>
+    )
+  }
+}

app/javascript/gabsocial/components/panel/who_to_follow_panel.js

@@ -1,5 +1,8 @@
 import { defineMessages, injectIntl } from 'react-intl'
-import { fetchSuggestions, dismissSuggestion } from '../../actions/suggestions'
+import {
+  fetchRelatedSuggestions,
+  dismissRelatedSuggestion,
+} from '../../actions/suggestions'
 import ImmutablePureComponent from 'react-immutable-pure-component'
 import ImmutablePropTypes from 'react-immutable-proptypes'
 import Account from '../../components/account'
@@ -12,12 +15,12 @@ const messages = defineMessages({
 })
 
 const mapStateToProps = (state) => ({
-  suggestions: state.getIn(['suggestions', 'items']),
+  suggestions: state.getIn(['suggestions', 'related', 'items']),
 })
 
 const mapDispatchToProps = (dispatch) => ({
-  fetchSuggestions: () => dispatch(fetchSuggestions()),
-  dismissSuggestion: (account) => dispatch(dismissSuggestion(account.get('id'))),
+  fetchRelatedSuggestions: () => dispatch(fetchRelatedSuggestions()),
+  dismissRelatedSuggestion: (account) => dispatch(dismissRelatedSuggestion(account.get('id'))),
 })
 
 export default
@@ -26,8 +29,8 @@ export default
 class WhoToFollowPanel extends ImmutablePureComponent {
 
   static propTypes = {
-    dismissSuggestion: PropTypes.func.isRequired,
-    fetchSuggestions: PropTypes.func.isRequired,
+    dismissRelatedSuggestion: PropTypes.func.isRequired,
+    fetchRelatedSuggestions: PropTypes.func.isRequired,
     intl: PropTypes.object.isRequired,
     suggestions: ImmutablePropTypes.list.isRequired,
     isLazy: PropTypes.bool,
@@ -53,18 +56,22 @@ class WhoToFollowPanel extends ImmutablePureComponent {
 
   componentDidUpdate(prevProps, prevState) {
     if (!prevState.fetched && this.state.fetched) {
-      this.props.fetchSuggestions()
+      this.props.fetchRelatedSuggestions()
     }
   }
 
   componentDidMount() {
     if (!this.props.isLazy) {
-      this.props.fetchSuggestions()
+      this.props.fetchRelatedSuggestions()
     }
   }
 
   render() {
-    const { intl, suggestions, dismissSuggestion } = this.props
+    const {
+      intl,
+      suggestions,
+      dismissRelatedSuggestion,
+    } = this.props
 
     if (suggestions.isEmpty()) return null
 
@@ -72,8 +79,8 @@ class WhoToFollowPanel extends ImmutablePureComponent {
       <PanelLayout
         noPadding
         title={intl.formatMessage(messages.title)}
-        // footerButtonTitle={intl.formatMessage(messages.show_more)}
-        // footerButtonTo='/explore'
+        footerButtonTitle={intl.formatMessage(messages.show_more)}
+        footerButtonTo='/explore'
       >
         <div className={_s.default}>
           {
@@ -83,7 +90,7 @@ class WhoToFollowPanel extends ImmutablePureComponent {
                 showDismiss
                 key={accountId}
                 id={accountId}
-                dismissAction={dismissSuggestion}
+                dismissAction={dismissRelatedSuggestion}
               />
             ))
           }