diff --git a/app/soapbox/features/status/components/thread_status.js b/app/soapbox/features/status/components/thread_status.js new file mode 100644 index 000000000..3df38013a --- /dev/null +++ b/app/soapbox/features/status/components/thread_status.js @@ -0,0 +1,54 @@ +import React from 'react'; +import { connect } from 'react-redux'; +import PropTypes from 'prop-types'; +import StatusContainer from 'soapbox/containers/status_container'; +import { OrderedSet as ImmutableOrderedSet } from 'immutable'; +import classNames from 'classnames'; + +const mapStateToProps = (state, { id }) => { + return { + replyToId: state.getIn(['statuses', id, 'in_reply_to_id']), + replyCount: state.getIn(['contexts', 'replies', id], ImmutableOrderedSet()).size, + }; +}; + +export default @connect(mapStateToProps) +class ThreadStatus extends React.Component { + + static propTypes = { + focusedStatusId: PropTypes.string, + replyToId: PropTypes.string, + replyCount: PropTypes.number, + } + + 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 ( +
+ ); + } + + render() { + return ( +
+ {this.renderConnector()} + +
+ ); + } + +} diff --git a/app/soapbox/features/status/index.js b/app/soapbox/features/status/index.js index ae2901f30..7c8e2f999 100644 --- a/app/soapbox/features/status/index.js +++ b/app/soapbox/features/status/index.js @@ -37,7 +37,6 @@ import { initMuteModal } from '../../actions/mutes'; import { initReport } from '../../actions/reports'; import { makeGetStatus } from '../../selectors'; // import ColumnHeader from '../../components/column_header'; -import StatusContainer from '../../containers/status_container'; import { openModal } from '../../actions/modal'; import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; import ImmutablePureComponent from 'react-immutable-pure-component'; @@ -49,6 +48,7 @@ import { textForScreenReader, defaultMediaVisibility } from '../../components/st import { getSettings } from 'soapbox/actions/settings'; import { getSoapboxConfig } from 'soapbox/actions/soapbox'; import { deactivateUserModal, deleteUserModal, deleteStatusModal, toggleStatusSensitivityModal } from 'soapbox/actions/moderation'; +import ThreadStatus from './components/thread_status'; import SubNavigation from 'soapbox/components/sub_navigation'; const messages = defineMessages({ @@ -471,10 +471,13 @@ class Status extends ImmutablePureComponent { } renderStatus(id) { + const { status } = this.props; + return ( - {ancestors}
)} -
+