38a4f1ed7f
• Updated: - WhoToFollowPanel to be UserSuggestionsPanel and included related, verified - All pages, layouts to use new component • Removed: - VerifiedAccountsPanel
128 lines
3.5 KiB
JavaScript
128 lines
3.5 KiB
JavaScript
import React from 'react'
|
|
import PropTypes from 'prop-types'
|
|
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'
|
|
import Account from '../account'
|
|
import AccountPlaceholder from '../placeholder/account_placeholder'
|
|
import PanelLayout from './panel_layout'
|
|
|
|
class UserSuggestionsPanel 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.handleFetch()
|
|
}
|
|
}
|
|
|
|
componentDidMount() {
|
|
if (!this.props.isLazy) {
|
|
this.handleFetch()
|
|
}
|
|
}
|
|
|
|
handleFetch = () => {
|
|
if (this.props.suggestionType === 'verified') {
|
|
this.props.fetchPopularSuggestions()
|
|
} else {
|
|
this.props.fetchRelatedSuggestions()
|
|
}
|
|
}
|
|
|
|
render() {
|
|
const {
|
|
intl,
|
|
isLoading,
|
|
suggestions,
|
|
suggestionType,
|
|
} = this.props
|
|
|
|
if (suggestions.isEmpty()) return null
|
|
|
|
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={title}
|
|
footerButtonTitle={intl.formatMessage(messages.show_more)}
|
|
footerButtonTo='/suggestions'
|
|
>
|
|
<div className={_s.d}>
|
|
{
|
|
arr.map((accountId) => (
|
|
<Child
|
|
compact
|
|
key={accountId}
|
|
id={accountId}
|
|
isSmall={isLoading ? true : undefined}
|
|
/>
|
|
))
|
|
}
|
|
</div>
|
|
</PanelLayout>
|
|
)
|
|
}
|
|
}
|
|
|
|
const messages = defineMessages({
|
|
dismissSuggestion: { id: 'suggestions.dismiss', defaultMessage: 'Dismiss suggestion' },
|
|
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, { suggestionType = 'related' }) => ({
|
|
suggestions: state.getIn(['suggestions', suggestionType, 'items']),
|
|
isLoading: state.getIn(['suggestions', suggestionType, 'isLoading']),
|
|
})
|
|
|
|
const mapDispatchToProps = (dispatch) => ({
|
|
fetchRelatedSuggestions: () => dispatch(fetchRelatedSuggestions()),
|
|
fetchPopularSuggestions: () => dispatch(fetchPopularSuggestions()),
|
|
})
|
|
|
|
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,
|
|
}
|
|
|
|
UserSuggestionsPanel.defaultProps = {
|
|
suggestionType: 'related',
|
|
}
|
|
|
|
export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(UserSuggestionsPanel)) |