bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Suggestions: break out FollowRecommendationsList component

Browse source
This commit is contained in:
Alex Gleason 2021-09-17 16:03:17 -05:00
parent 1bffa04a99
commit eb01996c12
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7
4 changed files with 73 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/soapbox/features/follow_recommendations/components/account.js
View file

@ -66,7 +66,7 @@ class Account extends ImmutablePureComponent {
return (
<div className='account follow-recommendations-account'>
<div className='account__wrapper'>
<Permalink className='account__display-name account__display-name--with-note' title={account.get('acct')} href={account.get('url')} to={`/accounts/${account.get('id')}`}>
<Permalink className='account__display-name account__display-name--with-note' title={account.get('acct')} href={account.get('url')} to={`/@${account.get('acct')}`}>
<div className='account__avatar-wrapper'><Avatar account={account} size={36} /></div>
<DisplayName account={account} />

60
app/soapbox/features/follow_recommendations/components/follow_recommendations_list.js Normal file
View file

@ -0,0 +1,60 @@
import React from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import ImmutablePureComponent from 'react-immutable-pure-component';
import ImmutablePropTypes from 'react-immutable-proptypes';
import { FormattedMessage } from 'react-intl';
import { fetchSuggestions } from 'soapbox/actions/suggestions';
import Account from './account';
import LoadingIndicator from 'soapbox/components/loading_indicator';
const mapStateToProps = state => ({
suggestions: state.getIn(['suggestions', 'items']),
isLoading: state.getIn(['suggestions', 'isLoading']),
});
export default @connect(mapStateToProps)
class FollowRecommendationsList extends ImmutablePureComponent {
static propTypes = {
dispatch: PropTypes.func.isRequired,
suggestions: ImmutablePropTypes.list,
isLoading: PropTypes.bool,
};
componentDidMount() {
const { dispatch, suggestions } = this.props;
// Don't re-fetch if we're e.g. navigating backwards to this page,
// since we don't want followed accounts to disappear from the list
if (suggestions.size === 0) {
dispatch(fetchSuggestions(true));
}
}
render() {
const { suggestions, isLoading } = this.props;
if (isLoading) {
return (
<div className='column-list'>
<LoadingIndicator />
</div>
);
}
return (
<div className='column-list'>
{suggestions.size > 0 ? suggestions.map(suggestion => (
<Account key={suggestion.get('account')} id={suggestion.get('account')} />
)) : (
<div className='column-list__empty-message'>
<FormattedMessage id='empty_column.follow_recommendations' defaultMessage='Looks like no suggestions could be generated for you. You can try using search to look for people you might know or explore trending hashtags.' />
</div>
)}
</div>
);
}
}

54
app/soapbox/features/follow_recommendations/index.js
View file

@ -1,42 +1,16 @@
import React from 'react';
import PropTypes from 'prop-types';
import ImmutablePureComponent from 'react-immutable-pure-component';
import ImmutablePropTypes from 'react-immutable-proptypes';
import { connect } from 'react-redux';
import { FormattedMessage } from 'react-intl';
import { fetchSuggestions } from 'soapbox/actions/suggestions';
import Column from 'soapbox/features/ui/components/column';
import Account from './components/account';
import Button from 'soapbox/components/button';
import FollowRecommendationsList from './components/follow_recommendations_list';
const mapStateToProps = state => ({
suggestions: state.getIn(['suggestions', 'items']),
isLoading: state.getIn(['suggestions', 'isLoading']),
});
export default @connect(mapStateToProps)
class FollowRecommendations extends ImmutablePureComponent {
export default class FollowRecommendations extends React.Component {
static contextTypes = {
router: PropTypes.object.isRequired,
};
static propTypes = {
dispatch: PropTypes.func.isRequired,
suggestions: ImmutablePropTypes.list,
isLoading: PropTypes.bool,
};
componentDidMount() {
const { dispatch, suggestions } = this.props;
// Don't re-fetch if we're e.g. navigating backwards to this page,
// since we don't want followed accounts to disappear from the list
if (suggestions.size === 0) {
dispatch(fetchSuggestions(true));
}
}
handleDone = () => {
const { router } = this.context;
@ -44,8 +18,6 @@ class FollowRecommendations extends ImmutablePureComponent {
}
render() {
const { suggestions, isLoading } = this.props;
return (
<Column>
<div className='scrollable follow-recommendations-container'>
@ -54,23 +26,13 @@ class FollowRecommendations extends ImmutablePureComponent {
<p><FormattedMessage id='follow_recommendations.lead' defaultMessage="Posts from people you follow will show up in chronological order on your home feed. Don't be afraid to make mistakes, you can unfollow people just as easily any time!" /></p>
</div>
{!isLoading && (
<>
<div className='column-list'>
{suggestions.size > 0 ? suggestions.map(suggestion => (
<Account key={suggestion.get('account')} id={suggestion.get('account')} />
)) : (
<div className='column-list__empty-message'>
<FormattedMessage id='empty_column.follow_recommendations' defaultMessage='Looks like no suggestions could be generated for you. You can try using search to look for people you might know or explore trending hashtags.' />
</div>
)}
</div>
<FollowRecommendationsList />
<div className='column-actions'>
<Button onClick={this.handleDone}><FormattedMessage id='follow_recommendations.done' defaultMessage='Done' /></Button>
</div>
</>
)}
<div className='column-actions'>
<Button onClick={this.handleDone}>
<FormattedMessage id='follow_recommendations.done' defaultMessage='Done' />
</Button>
</div>
</div>
</Column>
);

4
app/styles/components/columns.scss
View file

@ -810,3 +810,7 @@
width: auto;
}
}
.column-list {
position: relative;
}