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) => ({
+const mapStateToProps = (state, { suggestionType = 'related' }) => ({
-  suggestions: state.getIn(['suggestions', 'related', 'items']),
+  suggestions: state.getIn(['suggestions', suggestionType, 'items']),
-  isLoading: state.getIn(['suggestions', 'related', 'isLoading']),
+  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))

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

@@ -106,8 +106,7 @@ export function UnauthorizedModal() { return import(/* webpackChunkName: "compon
 export function UnfollowModal() { return import(/* webpackChunkName: "components/unfollow_modal" */'../../../components/modal/unfollow_modal') }
 export function UserInfoPopover() { return import(/* webpackChunkName: "components/user_info_popover" */'../../../components/popover/user_info_popover') }
 export function UserPanel() { return import(/* webpackChunkName: "components/user_panel" */'../../../components/panel/user_panel') }
-export function VerifiedAccountsPanel() { return import(/* webpackChunkName: "components/verified_accounts_panel" */'../../../components/panel/verified_accounts_panel') }
 export function Video() { return import(/* webpackChunkName: "components/video" */'../../../components/video') }
 export function VideoModal() { return import(/* webpackChunkName: "components/video_modal" */'../../../components/modal/video_modal') }
 export function VideoStatsPopover() { return import(/* webpackChunkName: "components/video_stats_popover" */'../../../components/popover/video_stats_popover') }
-export function WhoToFollowPanel() { return import(/* webpackChunkName: "components/who_to_follow_panel" */'../../../components/panel/who_to_follow_panel') }
+export function UserSuggestionsPanel() { return import(/* webpackChunkName: "components/user_suggestions_panel" */'../../../components/panel/user_suggestions_panel') }

app/javascript/gabsocial/layouts/explore_layout.js

@@ -14,7 +14,7 @@ import Heading from '../components/heading'
 import {
   GroupsPanel,
   SignUpLogInPanel,
-  VerifiedAccountsPanel,
+  UserSuggestionsPanel,
   TrendsPanel,
 } from '../features/ui/util/async_components'
 
@@ -67,7 +67,7 @@ class ExploreLayout extends ImmutablePureComponent {
       <WrappedBundle component={GroupsPanel} componentParams={{ groupType: 'featured' }} />,
     ]
     if (!!me) {
-      layout.push(VerifiedAccountsPanel)  
+      layout.push(<WrappedBundle component={UserSuggestionsPanel} componentParams={{ suggestionType: 'verified' }} />)
     }
     layout.push(<WrappedBundle component={TrendsPanel} componentParams={{ isLazy: true, shouldLoad: lazyLoaded }} />)
 

app/javascript/gabsocial/pages/basic_page.js

@@ -5,7 +5,7 @@ import DefaultLayout from '../layouts/default_layout'
 import {
   LinkFooter,
   TrendsPanel,
-  WhoToFollowPanel,
+  UserSuggestionsPanel,
 } from '../features/ui/util/async_components'
 
 class BasicPage extends React.PureComponent {
@@ -25,7 +25,7 @@ class BasicPage extends React.PureComponent {
         page={page}
         layout={[
           TrendsPanel,
-          WhoToFollowPanel,
+          UserSuggestionsPanel,
           LinkFooter,
         ]}
       >

app/javascript/gabsocial/pages/community_page.js

@@ -11,7 +11,7 @@ import {
   GroupsPanel,
   ProgressPanel,
   TrendsPanel,
-  WhoToFollowPanel,
+  UserSuggestionsPanel,
 } from '../features/ui/util/async_components'
 
 class CommunityPage extends React.PureComponent {
@@ -38,7 +38,7 @@ class CommunityPage extends React.PureComponent {
         layout={[
           ProgressPanel,
           TrendsPanel,
-          WhoToFollowPanel,
+          UserSuggestionsPanel,
           GroupsPanel,
           LinkFooter,
         ]}

app/javascript/gabsocial/pages/hashtag_page.js

@@ -11,7 +11,7 @@ import {
   LinkFooter,
   ProgressPanel,
   TrendsPanel,
-  WhoToFollowPanel,
+  UserSuggestionsPanel,
 } from '../features/ui/util/async_components'
 
 class HashtagPage extends React.PureComponent {
@@ -49,7 +49,7 @@ class HashtagPage extends React.PureComponent {
         layout={[
           ProgressPanel,
           TrendsPanel,
-          WhoToFollowPanel,
+          UserSuggestionsPanel,
           LinkFooter,
         ]}
       >

app/javascript/gabsocial/pages/home_page.js

@@ -18,7 +18,7 @@ import {
   LinkFooter,
   ListsPanel,
   TrendsPanel,
-  WhoToFollowPanel,
+  UserSuggestionsPanel,
   ProPanel,
   ShopPanel,
   ProgressPanel,
@@ -90,7 +90,7 @@ class HomePage extends React.PureComponent {
           TrendsPanel,
           <WrappedBundle component={ShopPanel} componentParams={{ isLazy: true, shouldLoad: lazyLoaded }}  />,
           <WrappedBundle component={ListsPanel} componentParams={{ isLazy: true, shouldLoad: lazyLoaded }}  />,
-          <WrappedBundle component={WhoToFollowPanel} componentParams={{ isLazy: true, shouldLoad: lazyLoaded }}  />,
+          <WrappedBundle component={UserSuggestionsPanel} componentParams={{ isLazy: true, shouldLoad: lazyLoaded }}  />,
           <WrappedBundle component={GroupsPanel} componentParams={{ isLazy: true, shouldLoad: lazyLoaded, groupType: 'member' }}  />,
           LinkFooter,
         ]}

app/javascript/gabsocial/pages/list_page.js

@@ -15,7 +15,7 @@ import {
   ListDetailsPanel,
   LinkFooter,
   TrendsPanel,
-  WhoToFollowPanel,
+  UserSuggestionsPanel,
 } from '../features/ui/util/async_components'
 
 class ListPage extends ImmutablePureComponent {
@@ -54,7 +54,7 @@ class ListPage extends ImmutablePureComponent {
         layout={[
           <WrappedBundle component={ListDetailsPanel} componentParams={{ list: list, onEdit: this.handleOnOpenListEditModal }} />,
           TrendsPanel,
-          WhoToFollowPanel,
+          UserSuggestionsPanel,
           LinkFooter,
         ]}
       >

app/javascript/gabsocial/pages/lists_page.js

@@ -9,7 +9,7 @@ import { MODAL_LIST_CREATE } from '../constants'
 import {
   LinkFooter,
   TrendsPanel,
-  WhoToFollowPanel,
+  UserSuggestionsPanel,
 } from '../features/ui/util/async_components'
 
 class ListsPage extends React.PureComponent {
@@ -36,7 +36,7 @@ class ListsPage extends React.PureComponent {
         ]}
         layout={[
           TrendsPanel,
-          WhoToFollowPanel,
+          UserSuggestionsPanel,
           LinkFooter,
         ]}
       >

app/javascript/gabsocial/pages/modal_page.js

@@ -5,7 +5,7 @@ import Block from '../components/block'
 import DefaultLayout from '../layouts/default_layout'
 import {
   LinkFooter,
-  WhoToFollowPanel,
+  UserSuggestionsPanel,
 } from '../features/ui/util/async_components'
 
 class ModalPage extends React.PureComponent {
@@ -23,7 +23,7 @@ class ModalPage extends React.PureComponent {
         page={page}
         showBackBtn
         layout={[
-          WhoToFollowPanel,
+          UserSuggestionsPanel,
           LinkFooter,
         ]}
       >

app/javascript/gabsocial/pages/news_page.js

@@ -2,12 +2,13 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import PageTitle from '../features/ui/util/page_title'
 import DefaultLayout from '../layouts/default_layout'
+import WrappedBundle from '../features/ui/util/wrapped_bundle'
 import {
   LinkFooter,
   ProgressPanel,
   ShopPanel,
   SignUpPanel,
-  VerifiedAccountsPanel,
+  UserSuggestionsPanel,
 } from '../features/ui/util/async_components'
 
 class NewsPage extends React.PureComponent {
@@ -21,10 +22,11 @@ class NewsPage extends React.PureComponent {
         title={title}
         noComposeButton
         showBackBtn
+        noRightSidebar
         layout={[
           SignUpPanel,
           ProgressPanel,
-          VerifiedAccountsPanel,
+          <WrappedBundle component={UserSuggestionsPanel} componentParams={{ suggestionType: 'verified' }} />,
           ShopPanel,
           LinkFooter,
         ]}

app/javascript/gabsocial/pages/notifications_page.js

@@ -11,7 +11,7 @@ import {
   LinkFooter,
   NotificationFilterPanel,
   TrendsPanel,
-  WhoToFollowPanel,
+  UserSuggestionsPanel,
 } from '../features/ui/util/async_components'
 
 class NotificationsPage extends React.PureComponent {
@@ -57,7 +57,7 @@ class NotificationsPage extends React.PureComponent {
         layout={[
           NotificationFilterPanel,
           TrendsPanel,
-          WhoToFollowPanel,
+          UserSuggestionsPanel,
           LinkFooter,
         ]}
         tabs={tabs}

app/javascript/gabsocial/pages/pro_page.js

@@ -3,9 +3,10 @@ import PropTypes from 'prop-types'
 import { defineMessages, injectIntl } from 'react-intl'
 import PageTitle from '../features/ui/util/page_title'
 import DefaultLayout from '../layouts/default_layout'
+import WrappedBundle from '../features/ui/util/wrapped_bundle'
 import {
   LinkFooter,
-  VerifiedAccountsPanel,
+  UserSuggestionsPanel,
   ProgressPanel,
 } from '../features/ui/util/async_components'
 
@@ -22,7 +23,7 @@ class ProPage extends React.PureComponent {
         page='pro'
         layout={[
           ProgressPanel,
-          VerifiedAccountsPanel,
+          <WrappedBundle component={UserSuggestionsPanel} componentParams={{ suggestionType: 'verified' }} />,
           LinkFooter,
         ]}
       >

app/javascript/gabsocial/pages/shortcuts_page.js

@@ -9,7 +9,7 @@ import DefaultLayout from '../layouts/default_layout'
 import {
   LinkFooter,
   TrendsPanel,
-  WhoToFollowPanel,
+  UserSuggestionsPanel,
 } from '../features/ui/util/async_components'
 
 class ShortcutsPage extends React.PureComponent {
@@ -35,7 +35,7 @@ class ShortcutsPage extends React.PureComponent {
         ]}
         layout={[
           TrendsPanel,
-          WhoToFollowPanel,
+          UserSuggestionsPanel,
           LinkFooter,
         ]}
       >