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

Suggestions: make DRY, fix isLoading state

Browse source
This commit is contained in:
Alex Gleason 2021-09-18 17:05:34 -05:00
parent cdfd31372f
commit 7f741a3ad0
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7
3 changed files with 48 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
app/soapbox/features/follow_recommendations/components/follow_recommendations_container.js Normal file
View file

@ -0,0 +1,36 @@
import React from 'react';
import PropTypes from 'prop-types';
import { FormattedMessage } from 'react-intl';
import Button from 'soapbox/components/button';
import FollowRecommendationsList from './follow_recommendations_list';
export default class FollowRecommendationsContainer extends React.Component {
static propTypes = {
onDone: PropTypes.func.isRequired,
}
handleDone = () => {
this.props.onDone();
}
render() {
return (
<div className='scrollable follow-recommendations-container'>
<div className='column-title'>
<h3><FormattedMessage id='follow_recommendations.heading' defaultMessage="Follow people you'd like to see posts from! Here are some suggestions." /></h3>
<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>
<FollowRecommendationsList />
<div className='column-actions'>
<Button onClick={this.handleDone}>
<FormattedMessage id='follow_recommendations.done' defaultMessage='Done' />
</Button>
</div>
</div>
);
}
}

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

@ -1,9 +1,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import { FormattedMessage } from 'react-intl';
import Column from 'soapbox/features/ui/components/column';
import Button from 'soapbox/components/button';
import FollowRecommendationsList from './components/follow_recommendations_list';
import FollowRecommendationsContainer from './components/follow_recommendations_container';
export default class FollowRecommendations extends React.Component {
@ -11,7 +9,7 @@ export default class FollowRecommendations extends React.Component {
router: PropTypes.object.isRequired,
};
handleDone = () => {
onDone = () => {
const { router } = this.context;
router.history.push('/');
@ -20,20 +18,7 @@ export default class FollowRecommendations extends React.Component {
render() {
return (
<Column>
<div className='scrollable follow-recommendations-container'>
<div className='column-title'>
<h3><FormattedMessage id='follow_recommendations.heading' defaultMessage="Follow people you'd like to see posts from! Here are some suggestions." /></h3>
<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>
<FollowRecommendationsList />
<div className='column-actions'>
<Button onClick={this.handleDone}>
<FormattedMessage id='follow_recommendations.done' defaultMessage='Done' />
</Button>
</div>
</div>
<FollowRecommendationsContainer onDone={this.onDone} />
</Column>
);
}

36
app/soapbox/features/home_timeline/index.js
View file

@ -9,12 +9,11 @@ import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import ColumnSettingsContainer from './containers/column_settings_container';
import HomeColumnHeader from '../../components/home_column_header';
import { Link } from 'react-router-dom';
import Button from 'soapbox/components/button';
import { OrderedSet as ImmutableOrderedSet } from 'immutable';
import { getFeatures } from 'soapbox/utils/features';
function FollowRecommendationsList() {
return import(/* webpackChunkName: "features/follow_recommendations" */'soapbox/features/follow_recommendations/components/follow_recommendations_list');
function FollowRecommendationsContainer() {
return import(/* webpackChunkName: "features/follow_recommendations" */'soapbox/features/follow_recommendations/components/follow_recommendations_container');
}
const messages = defineMessages({
@ -29,6 +28,7 @@ const mapStateToProps = state => {
hasUnread: state.getIn(['timelines', 'home', 'unread']) > 0,
isPartial: state.getIn(['timelines', 'home', 'isPartial']),
siteTitle: state.getIn(['instance', 'title']),
isLoading: state.getIn(['timelines', 'home', 'isLoading'], true),
isEmpty: state.getIn(['timelines', 'home', 'items'], ImmutableOrderedSet()).isEmpty(),
features,
};
@ -44,6 +44,7 @@ class HomeTimeline extends React.PureComponent {
hasUnread: PropTypes.bool,
isPartial: PropTypes.bool,
siteTitle: PropTypes.string,
isLoading: PropTypes.bool,
isEmpty: PropTypes.bool,
features: PropTypes.object.isRequired,
};
@ -94,29 +95,8 @@ class HomeTimeline extends React.PureComponent {
this.setState({ done: true });
}
renderFollowRecommendations = () => {
return (
<div className='scrollable follow-recommendations-container'>
<div className='column-title'>
<h3><FormattedMessage id='follow_recommendations.heading' defaultMessage="Follow people you'd like to see posts from! Here are some suggestions." /></h3>
<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>
<BundleContainer fetchComponent={FollowRecommendationsList}>
{Component => <Component />}
</BundleContainer>
<div className='column-actions'>
<Button onClick={this.handleDone}>
<FormattedMessage id='follow_recommendations.done' defaultMessage='Done' />
</Button>
</div>
</div>
);
}
render() {
const { intl, hasUnread, siteTitle, isEmpty, features } = this.props;
const { intl, hasUnread, siteTitle, isLoading, isEmpty, features } = this.props;
const { done } = this.state;
return (
@ -124,8 +104,10 @@ class HomeTimeline extends React.PureComponent {
<HomeColumnHeader activeItem='home' active={hasUnread}>
<ColumnSettingsContainer />
</HomeColumnHeader>
{(features.suggestions && isEmpty && !done) ? (
this.renderFollowRecommendations()
{(features.suggestions && isEmpty && !isLoading && !done) ? (
<BundleContainer fetchComponent={FollowRecommendationsContainer}>
{Component => <Component onDone={this.handleDone} />}
</BundleContainer>
) : (
<StatusListContainer
scrollKey='home_timeline'