diff --git a/app/javascript/gabsocial/features/community_timeline/components/column_settings.js b/app/javascript/gabsocial/features/community_timeline/components/column_settings.js index 7adeb674..66e9269f 100644 --- a/app/javascript/gabsocial/features/community_timeline/components/column_settings.js +++ b/app/javascript/gabsocial/features/community_timeline/components/column_settings.js @@ -20,6 +20,7 @@ class ColumnSettings extends React.PureComponent { <div> <div className='column-settings__row'> <SettingToggle settings={settings} settingPath={['other', 'onlyMedia']} onChange={onChange} label={<FormattedMessage id='community.column_settings.media_only' defaultMessage='Media Only' />} /> + <SettingToggle settings={settings} settingPath={['other', 'allFediverse']} onChange={onChange} label={<FormattedMessage id='community.column_settings.all_fediverse' defaultMessage='All Fediverse' />} /> </div> </div> ); diff --git a/app/javascript/gabsocial/features/community_timeline/index.js b/app/javascript/gabsocial/features/community_timeline/index.js index d987d55c..6b59339c 100644 --- a/app/javascript/gabsocial/features/community_timeline/index.js +++ b/app/javascript/gabsocial/features/community_timeline/index.js @@ -4,19 +4,34 @@ import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; import PropTypes from 'prop-types'; import StatusListContainer from '../ui/containers/status_list_container'; import Column from '../../components/column'; -import { expandCommunityTimeline } from '../../actions/timelines'; import ColumnSettingsContainer from './containers/column_settings_container'; -import { connectCommunityStream } from '../../actions/streaming'; import HomeColumnHeader from '../../components/home_column_header'; +import { + expandCommunityTimeline, + expandPublicTimeline, +} from '../../actions/timelines'; +import { + connectCommunityStream, + connectPublicStream, +} from '../../actions/streaming'; const messages = defineMessages({ - title: { id: 'column.community', defaultMessage: 'Local timeline' }, + title: { id: 'column.community', defaultMessage: 'Community timeline' }, }); -const mapStateToProps = (state, { onlyMedia }) => ({ - hasUnread: state.getIn(['timelines', `community${onlyMedia ? ':media' : ''}`, 'unread']) > 0, - onlyMedia: state.getIn(['settings', 'community', 'other', 'onlyMedia']), -}); +const mapStateToProps = state => { + const allFediverse = state.getIn(['settings', 'community', 'other', 'allFediverse']); + const onlyMedia = state.getIn(['settings', 'community', 'other', 'onlyMedia']); + + const timelineId = allFediverse ? 'public' : 'community'; + + return { + timelineId, + allFediverse, + onlyMedia, + hasUnread: state.getIn(['timelines', `${timelineId}${onlyMedia ? ':media' : ''}`, 'unread']) > 0, + }; +}; export default @connect(mapStateToProps) @injectIntl @@ -28,6 +43,7 @@ class CommunityTimeline extends React.PureComponent { static defaultProps = { onlyMedia: false, + allFediverse: false, }; static propTypes = { @@ -35,22 +51,37 @@ class CommunityTimeline extends React.PureComponent { intl: PropTypes.object.isRequired, hasUnread: PropTypes.bool, onlyMedia: PropTypes.bool, + allFediverse: PropTypes.bool, + timelineId: PropTypes.string, }; componentDidMount () { - const { dispatch, onlyMedia } = this.props; + const { dispatch, onlyMedia, allFediverse } = this.props; - dispatch(expandCommunityTimeline({ onlyMedia })); - this.disconnect = dispatch(connectCommunityStream({ onlyMedia })); + if (allFediverse) { + dispatch(expandPublicTimeline({ onlyMedia })); + this.disconnect = dispatch(connectPublicStream({ onlyMedia })); + } + else { + dispatch(expandCommunityTimeline({ onlyMedia })); + this.disconnect = dispatch(connectCommunityStream({ onlyMedia })); + } } componentDidUpdate (prevProps) { - if (prevProps.onlyMedia !== this.props.onlyMedia) { - const { dispatch, onlyMedia } = this.props; + if (prevProps.onlyMedia !== this.props.onlyMedia || prevProps.allFediverse !== this.props.allFediverse) { + const { dispatch, onlyMedia, allFediverse } = this.props; this.disconnect(); - dispatch(expandCommunityTimeline({ onlyMedia })); - this.disconnect = dispatch(connectCommunityStream({ onlyMedia })); + + if (allFediverse) { + dispatch(expandPublicTimeline({ onlyMedia })); + this.disconnect = dispatch(connectPublicStream({ onlyMedia })); + } + else { + dispatch(expandCommunityTimeline({ onlyMedia })); + this.disconnect = dispatch(connectCommunityStream({ onlyMedia })); + } } } @@ -62,27 +93,29 @@ class CommunityTimeline extends React.PureComponent { } handleLoadMore = maxId => { - const { dispatch, onlyMedia } = this.props; + const { dispatch, onlyMedia, allFediverse } = this.props; - dispatch(expandCommunityTimeline({ maxId, onlyMedia })); + if (allFediverse) { + dispatch(expandPublicTimeline({ maxId, onlyMedia })); + } + else { + dispatch(expandCommunityTimeline({ maxId, onlyMedia })); + } } render () { - const { intl, hasUnread, onlyMedia } = this.props; + const { intl, hasUnread, onlyMedia, timelineId, allFediverse } = this.props; return ( <Column label={intl.formatMessage(messages.title)}> - <HomeColumnHeader - activeItem='all' - active={hasUnread} - > + <HomeColumnHeader activeItem='all' active={hasUnread} > <ColumnSettingsContainer /> </HomeColumnHeader> <StatusListContainer - scrollKey='community_timeline' - timelineId={`community${onlyMedia ? ':media' : ''}`} + scrollKey={`${timelineId}_timeline`} + timelineId={`${timelineId}${onlyMedia ? ':media' : ''}`} onLoadMore={this.handleLoadMore} - emptyMessage={<FormattedMessage id='empty_column.community' defaultMessage='The local timeline is empty. Write something publicly to get the ball rolling!' />} + emptyMessage={<FormattedMessage id='empty_column.community' defaultMessage='The community timeline is empty. Write something publicly to get the ball rolling!' />} /> </Column> );