parent
aa808be682
commit
1a4401ce75
@ -0,0 +1,51 @@
|
||||
import classNames from 'classnames';
|
||||
import { OrderedSet as ImmutableOrderedSet } from 'immutable';
|
||||
import React from 'react';
|
||||
|
||||
import StatusContainer from 'soapbox/containers/status_container';
|
||||
import PlaceholderStatus from 'soapbox/features/placeholder/components/placeholder_status';
|
||||
import { useAppSelector } from 'soapbox/hooks';
|
||||
|
||||
interface IThreadStatus {
|
||||
id: string,
|
||||
focusedStatusId: string,
|
||||
}
|
||||
|
||||
const ThreadStatus: React.FC<IThreadStatus> = (props): JSX.Element => {
|
||||
const { id, focusedStatusId } = props;
|
||||
|
||||
const replyToId = useAppSelector(state => state.contexts.getIn(['inReplyTos', id]));
|
||||
const replyCount = useAppSelector(state => state.contexts.getIn(['replies', id], ImmutableOrderedSet()).size);
|
||||
const isLoaded = useAppSelector(state => Boolean(state.statuses.get(id)));
|
||||
|
||||
const renderConnector = (): JSX.Element | null => {
|
||||
const isConnectedTop = replyToId && replyToId !== focusedStatusId;
|
||||
const isConnectedBottom = replyCount > 0;
|
||||
const isConnected = isConnectedTop || isConnectedBottom;
|
||||
|
||||
if (!isConnected) return null;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={classNames('thread__connector', {
|
||||
'thread__connector--top': isConnectedTop,
|
||||
'thread__connector--bottom': isConnectedBottom,
|
||||
})}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className='thread__status'>
|
||||
{renderConnector()}
|
||||
{isLoaded ? (
|
||||
// @ts-ignore FIXME
|
||||
<StatusContainer {...props} />
|
||||
) : (
|
||||
<PlaceholderStatus thread />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ThreadStatus;
|
@ -1,64 +0,0 @@
|
||||
import classNames from 'classnames';
|
||||
import { OrderedSet as ImmutableOrderedSet } from 'immutable';
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
import StatusContainer from 'soapbox/containers/status_container';
|
||||
import PlaceholderStatus from 'soapbox/features/placeholder/components/placeholder_status';
|
||||
|
||||
const mapStateToProps = (state, { id }) => {
|
||||
return {
|
||||
replyToId: state.getIn(['contexts', 'inReplyTos', id]),
|
||||
replyCount: state.getIn(['contexts', 'replies', id], ImmutableOrderedSet()).size,
|
||||
isLoaded: Boolean(state.getIn(['statuses', id])),
|
||||
};
|
||||
};
|
||||
|
||||
export default @connect(mapStateToProps)
|
||||
class ThreadStatus extends React.Component {
|
||||
|
||||
static propTypes = {
|
||||
focusedStatusId: PropTypes.string,
|
||||
replyToId: PropTypes.string,
|
||||
replyCount: PropTypes.number,
|
||||
isLoaded: PropTypes.bool,
|
||||
}
|
||||
|
||||
renderConnector() {
|
||||
const { focusedStatusId, replyToId, replyCount } = this.props;
|
||||
|
||||
const isConnectedTop = replyToId && replyToId !== focusedStatusId;
|
||||
const isConnectedBottom = replyCount > 0;
|
||||
const isConnected = isConnectedTop || isConnectedBottom;
|
||||
|
||||
if (!isConnected) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className={classNames('thread__connector', {
|
||||
'thread__connector--top': isConnectedTop,
|
||||
'thread__connector--bottom': isConnectedBottom,
|
||||
})}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
const { isLoaded } = this.props;
|
||||
|
||||
return (
|
||||
<div className='thread__status'>
|
||||
{this.renderConnector()}
|
||||
{isLoaded ? (
|
||||
<StatusContainer {...this.props} />
|
||||
) : (
|
||||
<PlaceholderStatus thread />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
Loading…
Reference in new issue