AccountTimeline: dirty TSX+FC conversion
This commit is contained in:
Alex Gleason
parent
7ab5ae6f1e
commit
6887852586
2 changed files with 108 additions and 174 deletions
|
|
@ -1,174 +0,0 @@
|
||||||
import { OrderedSet as ImmutableOrderedSet } from 'immutable';
|
|
||||||
import PropTypes from 'prop-types';
|
|
||||||
import React from 'react';
|
|
||||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
|
||||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
|
||||||
import { FormattedMessage } from 'react-intl';
|
|
||||||
import { connect } from 'react-redux';
|
|
||||||
import { withRouter } from 'react-router-dom';
|
|
||||||
|
|
||||||
import { fetchAccountByUsername } from 'soapbox/actions/accounts';
|
|
||||||
import { fetchPatronAccount } from 'soapbox/actions/patron';
|
|
||||||
import { getSettings } from 'soapbox/actions/settings';
|
|
||||||
import { getSoapboxConfig } from 'soapbox/actions/soapbox';
|
|
||||||
import { expandAccountFeaturedTimeline, expandAccountTimeline } from 'soapbox/actions/timelines';
|
|
||||||
import MissingIndicator from 'soapbox/components/missing_indicator';
|
|
||||||
import StatusList from 'soapbox/components/status_list';
|
|
||||||
import { Card, CardBody, Spinner, Text } from 'soapbox/components/ui';
|
|
||||||
import { makeGetStatusIds, findAccountByUsername } from 'soapbox/selectors';
|
|
||||||
import { getFeatures } from 'soapbox/utils/features';
|
|
||||||
|
|
||||||
const makeMapStateToProps = () => {
|
|
||||||
const getStatusIds = makeGetStatusIds();
|
|
||||||
|
|
||||||
const mapStateToProps = (state, { params, withReplies = false }) => {
|
|
||||||
const username = params.username || '';
|
|
||||||
const me = state.get('me');
|
|
||||||
const accountFetchError = ((state.getIn(['accounts', -1, 'username']) || '').toLowerCase() === username.toLowerCase());
|
|
||||||
const soapboxConfig = getSoapboxConfig(state);
|
|
||||||
const features = getFeatures(state.get('instance'));
|
|
||||||
|
|
||||||
let accountId = -1;
|
|
||||||
let account = null;
|
|
||||||
let accountUsername = username;
|
|
||||||
let accountApId = null;
|
|
||||||
if (accountFetchError) {
|
|
||||||
accountId = null;
|
|
||||||
} else {
|
|
||||||
account = findAccountByUsername(state, username);
|
|
||||||
accountId = account ? account.getIn(['id'], null) : -1;
|
|
||||||
accountUsername = account ? account.getIn(['acct'], '') : '';
|
|
||||||
accountApId = account ? account.get('url') : '';
|
|
||||||
}
|
|
||||||
|
|
||||||
const path = withReplies ? `${accountId}:with_replies` : accountId;
|
|
||||||
|
|
||||||
const isBlocked = state.getIn(['relationships', accountId, 'blocked_by'], false);
|
|
||||||
const unavailable = (me === accountId) ? false : (isBlocked && !features.blockersVisible);
|
|
||||||
const showPins = getSettings(state).getIn(['account_timeline', 'shows', 'pinned']) && !withReplies;
|
|
||||||
|
|
||||||
return {
|
|
||||||
accountId,
|
|
||||||
unavailable,
|
|
||||||
accountUsername,
|
|
||||||
accountApId,
|
|
||||||
isBlocked,
|
|
||||||
account,
|
|
||||||
isAccount: !!state.getIn(['accounts', accountId]),
|
|
||||||
statusIds: getStatusIds(state, { type: `account:${path}`, prefix: 'account_timeline' }),
|
|
||||||
featuredStatusIds: showPins ? getStatusIds(state, { type: `account:${accountId}:pinned`, prefix: 'account_timeline' }) : ImmutableOrderedSet(),
|
|
||||||
isLoading: state.getIn(['timelines', `account:${path}`, 'isLoading']),
|
|
||||||
hasMore: state.getIn(['timelines', `account:${path}`, 'hasMore']),
|
|
||||||
me,
|
|
||||||
patronEnabled: soapboxConfig.getIn(['extensions', 'patron', 'enabled']),
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
return mapStateToProps;
|
|
||||||
};
|
|
||||||
|
|
||||||
export default @connect(makeMapStateToProps)
|
|
||||||
@withRouter
|
|
||||||
class AccountTimeline extends ImmutablePureComponent {
|
|
||||||
|
|
||||||
static propTypes = {
|
|
||||||
params: PropTypes.object.isRequired,
|
|
||||||
dispatch: PropTypes.func.isRequired,
|
|
||||||
statusIds: ImmutablePropTypes.orderedSet,
|
|
||||||
featuredStatusIds: ImmutablePropTypes.orderedSet,
|
|
||||||
isLoading: PropTypes.bool,
|
|
||||||
hasMore: PropTypes.bool,
|
|
||||||
withReplies: PropTypes.bool,
|
|
||||||
isAccount: PropTypes.bool,
|
|
||||||
unavailable: PropTypes.bool,
|
|
||||||
};
|
|
||||||
|
|
||||||
componentDidMount() {
|
|
||||||
const { params: { username }, accountId, accountApId, withReplies, patronEnabled, history } = this.props;
|
|
||||||
|
|
||||||
this.props.dispatch(fetchAccountByUsername(username, history));
|
|
||||||
|
|
||||||
if (accountId && accountId !== -1) {
|
|
||||||
if (!withReplies) {
|
|
||||||
this.props.dispatch(expandAccountFeaturedTimeline(accountId));
|
|
||||||
}
|
|
||||||
|
|
||||||
if (patronEnabled && accountApId) {
|
|
||||||
this.props.dispatch(fetchPatronAccount(accountApId));
|
|
||||||
}
|
|
||||||
|
|
||||||
this.props.dispatch(expandAccountTimeline(accountId, { withReplies }));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
componentDidUpdate(prevProps) {
|
|
||||||
const { params: { username }, accountId, withReplies, accountApId, patronEnabled, history } = this.props;
|
|
||||||
|
|
||||||
if (username && (username !== prevProps.params.username)) {
|
|
||||||
this.props.dispatch(fetchAccountByUsername(username, history));
|
|
||||||
}
|
|
||||||
|
|
||||||
if (accountId && (accountId !== -1) && (accountId !== prevProps.accountId) || withReplies !== prevProps.withReplies) {
|
|
||||||
if (!withReplies) {
|
|
||||||
this.props.dispatch(expandAccountFeaturedTimeline(accountId));
|
|
||||||
}
|
|
||||||
|
|
||||||
if (patronEnabled && accountApId) {
|
|
||||||
this.props.dispatch(fetchPatronAccount(accountApId));
|
|
||||||
}
|
|
||||||
|
|
||||||
this.props.dispatch(expandAccountTimeline(accountId, { withReplies }));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
handleLoadMore = maxId => {
|
|
||||||
if (this.props.accountId && this.props.accountId !== -1) {
|
|
||||||
this.props.dispatch(expandAccountTimeline(this.props.accountId, { maxId, withReplies: this.props.withReplies }));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
const { statusIds, featuredStatusIds, isLoading, hasMore, isBlocked, isAccount, accountId, unavailable, accountUsername } = this.props;
|
|
||||||
|
|
||||||
if (!isAccount && accountId !== -1) {
|
|
||||||
return (
|
|
||||||
<MissingIndicator nested />
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (accountId === -1 || (!statusIds && isLoading)) {
|
|
||||||
return (
|
|
||||||
<Spinner />
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (unavailable) {
|
|
||||||
return (
|
|
||||||
<Card>
|
|
||||||
<CardBody>
|
|
||||||
<Text align='center'>
|
|
||||||
{isBlocked ? (
|
|
||||||
<FormattedMessage id='empty_column.account_blocked' defaultMessage='You are blocked by @{accountUsername}.' values={{ accountUsername: accountUsername }} />
|
|
||||||
) : (
|
|
||||||
<FormattedMessage id='empty_column.account_unavailable' defaultMessage='Profile unavailable' />
|
|
||||||
)}
|
|
||||||
</Text>
|
|
||||||
</CardBody>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<StatusList
|
|
||||||
scrollKey='account_timeline'
|
|
||||||
statusIds={statusIds}
|
|
||||||
featuredStatusIds={featuredStatusIds}
|
|
||||||
isLoading={isLoading}
|
|
||||||
hasMore={hasMore}
|
|
||||||
onLoadMore={this.handleLoadMore}
|
|
||||||
emptyMessage={<FormattedMessage id='empty_column.account_timeline' defaultMessage='No posts here!' />}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
108
app/soapbox/features/account_timeline/index.tsx
Normal file
108
app/soapbox/features/account_timeline/index.tsx
Normal file
|
|
@ -0,0 +1,108 @@
|
||||||
|
import React, { useEffect } from 'react';
|
||||||
|
import { FormattedMessage } from 'react-intl';
|
||||||
|
import { useHistory } from 'react-router-dom';
|
||||||
|
|
||||||
|
import { fetchAccountByUsername } from 'soapbox/actions/accounts';
|
||||||
|
import { fetchPatronAccount } from 'soapbox/actions/patron';
|
||||||
|
import { expandAccountFeaturedTimeline, expandAccountTimeline } from 'soapbox/actions/timelines';
|
||||||
|
import MissingIndicator from 'soapbox/components/missing_indicator';
|
||||||
|
import StatusList from 'soapbox/components/status_list';
|
||||||
|
import { Card, CardBody, Spinner, Text } from 'soapbox/components/ui';
|
||||||
|
import { useAppDispatch, useAppSelector, useFeatures, useSettings, useSoapboxConfig } from 'soapbox/hooks';
|
||||||
|
import { makeGetStatusIds, findAccountByUsername } from 'soapbox/selectors';
|
||||||
|
|
||||||
|
const getStatusIds = makeGetStatusIds();
|
||||||
|
|
||||||
|
interface IAccountTimeline {
|
||||||
|
params: {
|
||||||
|
username: string,
|
||||||
|
},
|
||||||
|
withReplies?: boolean,
|
||||||
|
}
|
||||||
|
|
||||||
|
const AccountTimeline: React.FC<IAccountTimeline> = ({ params, withReplies = false }) => {
|
||||||
|
const history = useHistory();
|
||||||
|
const dispatch = useAppDispatch();
|
||||||
|
const features = useFeatures();
|
||||||
|
const settings = useSettings();
|
||||||
|
const soapboxConfig = useSoapboxConfig();
|
||||||
|
|
||||||
|
const account = useAppSelector(state => findAccountByUsername(state, params.username));
|
||||||
|
|
||||||
|
const path = withReplies ? `${account?.id}:with_replies` : account?.id;
|
||||||
|
const showPins = settings.getIn(['account_timeline', 'shows', 'pinned']) === true && !withReplies;
|
||||||
|
const statusIds = useAppSelector(state => getStatusIds(state, { type: `account:${path}`, prefix: 'account_timeline' }));
|
||||||
|
const featuredStatusIds = useAppSelector(state => getStatusIds(state, { type: `account:${account?.id}:pinned`, prefix: 'account_timeline' }));
|
||||||
|
|
||||||
|
const isBlocked = useAppSelector(state => state.relationships.getIn([account?.id, 'blocked_by']) === true);
|
||||||
|
const unavailable = isBlocked && !features.blockersVisible;
|
||||||
|
const patronEnabled = soapboxConfig.getIn(['extensions', 'patron', 'enabled']) === true;
|
||||||
|
const isLoading = useAppSelector(state => state.getIn(['timelines', `account:${path}`, 'isLoading']) === true);
|
||||||
|
const hasMore = useAppSelector(state => state.getIn(['timelines', `account:${path}`, 'hasMore']) === true);
|
||||||
|
|
||||||
|
const accountUsername = account?.username || params.username;
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
dispatch(fetchAccountByUsername(params.username, history));
|
||||||
|
}, [params.username]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (account && !withReplies) {
|
||||||
|
dispatch(expandAccountFeaturedTimeline(account.id));
|
||||||
|
}
|
||||||
|
}, [account?.id, withReplies]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (account && patronEnabled) {
|
||||||
|
dispatch(fetchPatronAccount(account.url));
|
||||||
|
}
|
||||||
|
}, [account?.url, patronEnabled]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (account) {
|
||||||
|
dispatch(expandAccountTimeline(account.id, { withReplies }));
|
||||||
|
}
|
||||||
|
}, [account?.id]);
|
||||||
|
|
||||||
|
const handleLoadMore = (maxId: string) => {
|
||||||
|
if (account) {
|
||||||
|
dispatch(expandAccountTimeline(account.id, { maxId, withReplies }));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (!account && isLoading) {
|
||||||
|
return <Spinner />;
|
||||||
|
} else if (!account) {
|
||||||
|
return <MissingIndicator nested />;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (unavailable) {
|
||||||
|
return (
|
||||||
|
<Card>
|
||||||
|
<CardBody>
|
||||||
|
<Text align='center'>
|
||||||
|
{isBlocked ? (
|
||||||
|
<FormattedMessage id='empty_column.account_blocked' defaultMessage='You are blocked by @{accountUsername}.' values={{ accountUsername }} />
|
||||||
|
) : (
|
||||||
|
<FormattedMessage id='empty_column.account_unavailable' defaultMessage='Profile unavailable' />
|
||||||
|
)}
|
||||||
|
</Text>
|
||||||
|
</CardBody>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<StatusList
|
||||||
|
scrollKey='account_timeline'
|
||||||
|
statusIds={statusIds}
|
||||||
|
featuredStatusIds={showPins ? featuredStatusIds : undefined}
|
||||||
|
isLoading={isLoading}
|
||||||
|
hasMore={hasMore}
|
||||||
|
onLoadMore={handleLoadMore}
|
||||||
|
emptyMessage={<FormattedMessage id='empty_column.account_timeline' defaultMessage='No posts here!' />}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default AccountTimeline;
|
||||||
Loading…
Reference in a new issue