diff --git a/app/javascript/gabsocial/components/panel/who_to_follow_panel.js b/app/javascript/gabsocial/components/panel/user_suggestions_panel.js similarity index 65% rename from app/javascript/gabsocial/components/panel/who_to_follow_panel.js rename to app/javascript/gabsocial/components/panel/user_suggestions_panel.js index d658c606..dcabd0c1 100644 --- a/app/javascript/gabsocial/components/panel/who_to_follow_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 (
{ @@ -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)) \ No newline at end of file +UserSuggestionsPanel.defaultProps = { + suggestionType: 'related', +} + +export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(UserSuggestionsPanel)) \ No newline at end of file diff --git a/app/javascript/gabsocial/components/panel/verified_accounts_panel.js b/app/javascript/gabsocial/components/panel/verified_accounts_panel.js deleted file mode 100644 index ea2d2d84..00000000 --- a/app/javascript/gabsocial/components/panel/verified_accounts_panel.js +++ /dev/null @@ -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 ( - -
- { - suggestions.map(accountId => ( - - )) - } -
-
- ) - } -} - -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)) \ No newline at end of file diff --git a/app/javascript/gabsocial/features/ui/util/async_components.js b/app/javascript/gabsocial/features/ui/util/async_components.js index fcfbe650..689207bb 100644 --- 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') } \ No newline at end of file +export function UserSuggestionsPanel() { return import(/* webpackChunkName: "components/user_suggestions_panel" */'../../../components/panel/user_suggestions_panel') } \ No newline at end of file diff --git a/app/javascript/gabsocial/layouts/explore_layout.js b/app/javascript/gabsocial/layouts/explore_layout.js index b492f004..aa5e1a42 100644 --- 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 { , ] if (!!me) { - layout.push(VerifiedAccountsPanel) + layout.push() } layout.push() diff --git a/app/javascript/gabsocial/pages/basic_page.js b/app/javascript/gabsocial/pages/basic_page.js index 234fa35d..de051943 100644 --- 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, ]} > diff --git a/app/javascript/gabsocial/pages/community_page.js b/app/javascript/gabsocial/pages/community_page.js index 65c51393..896e4541 100644 --- 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, ]} diff --git a/app/javascript/gabsocial/pages/hashtag_page.js b/app/javascript/gabsocial/pages/hashtag_page.js index e8a479fd..4fb32ec7 100644 --- 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, ]} > diff --git a/app/javascript/gabsocial/pages/home_page.js b/app/javascript/gabsocial/pages/home_page.js index 164a0a0a..60ce57d0 100644 --- 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, , , - , + , , LinkFooter, ]} diff --git a/app/javascript/gabsocial/pages/list_page.js b/app/javascript/gabsocial/pages/list_page.js index 967bcf34..b3379b29 100644 --- 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={[ , TrendsPanel, - WhoToFollowPanel, + UserSuggestionsPanel, LinkFooter, ]} > diff --git a/app/javascript/gabsocial/pages/lists_page.js b/app/javascript/gabsocial/pages/lists_page.js index 88c39aa3..430a6647 100644 --- 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, ]} > diff --git a/app/javascript/gabsocial/pages/modal_page.js b/app/javascript/gabsocial/pages/modal_page.js index 08cb6171..33d8a70a 100644 --- 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, ]} > diff --git a/app/javascript/gabsocial/pages/news_page.js b/app/javascript/gabsocial/pages/news_page.js index a759c7b7..838a073f 100644 --- 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, + , ShopPanel, LinkFooter, ]} diff --git a/app/javascript/gabsocial/pages/notifications_page.js b/app/javascript/gabsocial/pages/notifications_page.js index 7eeecf3b..d8f5f94b 100644 --- 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} diff --git a/app/javascript/gabsocial/pages/pro_page.js b/app/javascript/gabsocial/pages/pro_page.js index a1d7b218..fb6c3041 100644 --- 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, + , LinkFooter, ]} > diff --git a/app/javascript/gabsocial/pages/shortcuts_page.js b/app/javascript/gabsocial/pages/shortcuts_page.js index 2e75e13e..aa708504 100644 --- 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, ]} >