HomeTimeline: convert to TSX

dnd
Alex Gleason 2022-06-04 15:51:59 -05:00
rodzic 4c87573972
commit 131fcef7d6
Nie znaleziono w bazie danych klucza dla tego podpisu
ID klucza GPG: 7211D1F99744FBB7
2 zmienionych plików z 71 dodań i 112 usunięć

Wyświetl plik

@ -1,112 +0,0 @@
import { OrderedSet as ImmutableOrderedSet } from 'immutable';
import PropTypes from 'prop-types';
import React from 'react';
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import { getFeatures } from 'soapbox/utils/features';
import { expandHomeTimeline } from '../../actions/timelines';
import { Column } from '../../components/ui';
import Timeline from '../ui/components/timeline';
const messages = defineMessages({
title: { id: 'column.home', defaultMessage: 'Home' },
});
const mapStateToProps = state => {
const instance = state.get('instance');
const features = getFeatures(instance);
return {
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),
loadingFailed: state.getIn(['timelines', 'home', 'loadingFailed'], false),
isEmpty: state.getIn(['timelines', 'home', 'items'], ImmutableOrderedSet()).isEmpty(),
features,
};
};
export default @connect(mapStateToProps)
@injectIntl
class HomeTimeline extends React.PureComponent {
static propTypes = {
dispatch: PropTypes.func.isRequired,
intl: PropTypes.object.isRequired,
hasUnread: PropTypes.bool,
isPartial: PropTypes.bool,
siteTitle: PropTypes.string,
isLoading: PropTypes.bool,
loadingFailed: PropTypes.bool,
isEmpty: PropTypes.bool,
features: PropTypes.object.isRequired,
};
state = {
done: false,
}
handleLoadMore = maxId => {
this.props.dispatch(expandHomeTimeline({ maxId }));
}
componentDidMount() {
this._checkIfReloadNeeded(false, this.props.isPartial);
}
componentDidUpdate(prevProps) {
this._checkIfReloadNeeded(prevProps.isPartial, this.props.isPartial);
}
componentWillUnmount() {
this._stopPolling();
}
_checkIfReloadNeeded(wasPartial, isPartial) {
const { dispatch } = this.props;
if (wasPartial === isPartial) {
return;
} else if (!wasPartial && isPartial) {
this.polling = setInterval(() => {
dispatch(expandHomeTimeline());
}, 3000);
} else if (wasPartial && !isPartial) {
this._stopPolling();
}
}
_stopPolling() {
if (this.polling) {
clearInterval(this.polling);
this.polling = null;
}
}
handleRefresh = () => {
const { dispatch } = this.props;
return dispatch(expandHomeTimeline());
}
render() {
const { intl, siteTitle } = this.props;
return (
<Column label={intl.formatMessage(messages.title)}>
<Timeline
scrollKey='home_timeline'
onLoadMore={this.handleLoadMore}
onRefresh={this.handleRefresh}
timelineId='home'
divideType='space'
emptyMessage={<FormattedMessage id='empty_column.home' defaultMessage='Your home timeline is empty! Visit {public} to get started and meet other users.' values={{ public: <Link to='/timeline/local'><FormattedMessage id='empty_column.home.local_tab' defaultMessage='the {site_title} tab' values={{ site_title: siteTitle }} /></Link> }} />}
/>
</Column>
);
}
}

Wyświetl plik

@ -0,0 +1,71 @@
import React, { useEffect, useRef } from 'react';
import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
import { Link } from 'react-router-dom';
import { expandHomeTimeline } from 'soapbox/actions/timelines';
import { Column } from 'soapbox/components/ui';
import Timeline from 'soapbox/features/ui/components/timeline';
import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
const messages = defineMessages({
title: { id: 'column.home', defaultMessage: 'Home' },
});
const HomeTimeline: React.FC = () => {
const intl = useIntl();
const dispatch = useAppDispatch();
const polling = useRef<NodeJS.Timer | null>(null);
const isPartial = useAppSelector(state => state.timelines.getIn(['home', 'isPartial']) === true);
const siteTitle = useAppSelector(state => state.instance.title);
const handleLoadMore = (maxId: string) => {
dispatch(expandHomeTimeline({ maxId }));
};
useEffect(() => {
checkIfReloadNeeded();
return () => {
stopPolling();
};
}, [isPartial]);
// Mastodon generates the feed in Redis, and can return a partial timeline
// (HTTP 206) for new users. Poll until we get a full page of results.
const checkIfReloadNeeded = () => {
if (isPartial) {
polling.current = setInterval(() => {
dispatch(expandHomeTimeline());
}, 3000);
} else {
stopPolling();
}
};
const stopPolling = () => {
if (polling.current) {
clearInterval(polling.current);
polling.current = null;
}
};
const handleRefresh = () => {
return dispatch(expandHomeTimeline());
};
return (
<Column label={intl.formatMessage(messages.title)} transparent>
<Timeline
scrollKey='home_timeline'
onLoadMore={handleLoadMore}
onRefresh={handleRefresh}
timelineId='home'
divideType='space'
emptyMessage={<FormattedMessage id='empty_column.home' defaultMessage='Your home timeline is empty! Visit {public} to get started and meet other users.' values={{ public: <Link to='/timeline/local'><FormattedMessage id='empty_column.home.local_tab' defaultMessage='the {site_title} tab' values={{ site_title: siteTitle }} /></Link> }} />}
/>
</Column>
);
};
export default HomeTimeline;