Updated WhoToFollowPanel to be UserSuggestionsPanel and included related, verified

• Updated:
- WhoToFollowPanel to be UserSuggestionsPanel and included related, verified
- All pages, layouts to use new component

• Removed:
- VerifiedAccountsPanel

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

@@ -4,6 +4,7 @@ import { connect } from 'react-redux'
 import { defineMessages, injectIntl } from 'react-intl'
 import {
   fetchRelatedSuggestions,
+  fetchPopularSuggestions,
 } from '../../actions/suggestions'
 import ImmutablePureComponent from 'react-immutable-pure-component'
 import ImmutablePropTypes from 'react-immutable-proptypes'
@@ -11,7 +12,7 @@ import Account from '../account'
 import AccountPlaceholder from '../placeholder/account_placeholder'
 import PanelLayout from './panel_layout'
 
-class WhoToFollowPanel extends ImmutablePureComponent {
+class UserSuggestionsPanel extends ImmutablePureComponent {
 
   state = {
     fetched: !this.props.isLazy,
@@ -33,12 +34,20 @@ class WhoToFollowPanel extends ImmutablePureComponent {
 
   componentDidUpdate(prevProps, prevState) {
     if (!prevState.fetched && this.state.fetched) {
-      this.props.fetchRelatedSuggestions()
+      this.handleFetch()
     }
   }
 
   componentDidMount() {
     if (!this.props.isLazy) {
+      this.handleFetch()
+    }
+  }
+
+  handleFetch = () => {
+    if (this.props.suggestionType === 'verified') {
+      this.props.fetchPopularSuggestions()
+    } else {
       this.props.fetchRelatedSuggestions()
     }
   }
@@ -48,6 +57,7 @@ class WhoToFollowPanel extends ImmutablePureComponent {
       intl,
       isLoading,
       suggestions,
+      suggestionType,
     } = this.props
 
     if (suggestions.isEmpty()) return null
@@ -55,12 +65,14 @@ class WhoToFollowPanel extends ImmutablePureComponent {
     const Child = isLoading ? AccountPlaceholder : Account
     const arr = isLoading ? Array.apply(null, { length: 6 }) : suggestions
 
+    const title = suggestionType === 'verified' ? intl.formatMessage(messages.verifiedTitle) : intl.formatMessage(messages.relatedTitle)
+
     return (
       <PanelLayout
         noPadding
-        title={intl.formatMessage(messages.title)}
+        title={title}
         footerButtonTitle={intl.formatMessage(messages.show_more)}
-        footerButtonTo='/explore'
+        footerButtonTo='/suggestions'
       >
         <div className={_s.d}>
           {
@@ -81,25 +93,36 @@ class WhoToFollowPanel extends ImmutablePureComponent {
 
 const messages = defineMessages({
   dismissSuggestion: { id: 'suggestions.dismiss', defaultMessage: 'Dismiss suggestion' },
-  title: { id: 'who_to_follow.title', defaultMessage: 'Who to Follow' },
+  relatedTitle: { id: 'who_to_follow.title', defaultMessage: 'Who to Follow' },
+  verifiedTitle: { id: 'who_to_follow.verified_title', defaultMessage: 'Verified Accounts to Follow' },
   show_more: { id: 'who_to_follow.more', defaultMessage: 'Show more' },
 })
 
-const mapStateToProps = (state) => ({
-  suggestions: state.getIn(['suggestions', 'related', 'items']),
-  isLoading: state.getIn(['suggestions', 'related', 'isLoading']),
+const mapStateToProps = (state, { suggestionType = 'related' }) => ({
+  suggestions: state.getIn(['suggestions', suggestionType, 'items']),
+  isLoading: state.getIn(['suggestions', suggestionType, 'isLoading']),
 })
 
 const mapDispatchToProps = (dispatch) => ({
   fetchRelatedSuggestions: () => dispatch(fetchRelatedSuggestions()),
+  fetchPopularSuggestions: () => dispatch(fetchPopularSuggestions()),
 })
 
-WhoToFollowPanel.propTypes = {
+UserSuggestionsPanel.propTypes = {
+  suggestionType: PropTypes.oneOf([
+    'related',
+    'verified'
+  ]),
   fetchRelatedSuggestions: PropTypes.func.isRequired,
+  fetchPopularSuggestions: PropTypes.func.isRequired,
   intl: PropTypes.object.isRequired,
   suggestions: ImmutablePropTypes.list.isRequired,
   isLoading: PropTypes.bool.isRequired,
   isLazy: PropTypes.bool,
 }
 
-export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(WhoToFollowPanel))
+UserSuggestionsPanel.defaultProps = {
+  suggestionType: 'related',
+}
+
+export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(UserSuggestionsPanel))

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

@@ -1,92 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { connect } from 'react-redux'
-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'
-
-class VerifiedAccountsPanel extends ImmutablePureComponent {
-
-  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.d}>
-          {
-            suggestions.map(accountId => (
-              <Account
-                compact
-                key={accountId}
-                id={accountId}
-              />
-            ))
-          }
-        </div>
-      </PanelLayout>
-    )
-  }
-}
-
-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()),
-})
-
-VerifiedAccountsPanel.propTypes = {
-  fetchPopularSuggestions: PropTypes.func.isRequired,
-  intl: PropTypes.object.isRequired,
-  suggestions: ImmutablePropTypes.list.isRequired,
-  isLazy: PropTypes.bool,
-}
-
-export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(VerifiedAccountsPanel))