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
2020-09-01 11:54:01 -05:00 · 2020-09-01 11:54:01 -05:00 · 38a4f1ed7f
commit 38a4f1ed7f
parent 6fe9b69d95
15 changed files with 61 additions and 128 deletions
--- a/app/javascript/gabsocial/components/panel/user_suggestions_panel.js
+++ b/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))
--- a/app/javascript/gabsocial/components/panel/verified_accounts_panel.js
+++ b/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))
--- a/app/javascript/gabsocial/features/ui/util/async_components.js
+++ b/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') }
--- a/app/javascript/gabsocial/layouts/explore_layout.js
+++ b/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 }} />)

--- a/app/javascript/gabsocial/pages/basic_page.js
+++ b/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,
        ]}
      >
--- a/app/javascript/gabsocial/pages/community_page.js
+++ b/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,
        ]}
--- a/app/javascript/gabsocial/pages/hashtag_page.js
+++ b/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,
        ]}
      >
--- a/app/javascript/gabsocial/pages/home_page.js
+++ b/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,
        ]}
--- a/app/javascript/gabsocial/pages/list_page.js
+++ b/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,
        ]}
      >
--- a/app/javascript/gabsocial/pages/lists_page.js
+++ b/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,
        ]}
      >
--- a/app/javascript/gabsocial/pages/modal_page.js
+++ b/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,
        ]}
      >
--- a/app/javascript/gabsocial/pages/news_page.js
+++ b/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,
        ]}
--- a/app/javascript/gabsocial/pages/notifications_page.js
+++ b/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}
--- a/app/javascript/gabsocial/pages/pro_page.js
+++ b/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,
        ]}
      >
--- a/app/javascript/gabsocial/pages/shortcuts_page.js
+++ b/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,
        ]}
      >