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
parent 6fe9b69d95
commit 38a4f1ed7f
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
@@ -0,0 +1,128 @@
+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))