闭社主体 forked from https://github.com/tootsuite/mastodon
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

138 lines
4.5 KiB

  1. import React from 'react';
  2. import { connect } from 'react-redux';
  3. import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
  4. import PropTypes from 'prop-types';
  5. import StatusListContainer from '../ui/containers/status_list_container';
  6. import Column from '../../components/column';
  7. import ColumnHeader from '../../components/column_header';
  8. import { expandPublicTimeline } from '../../actions/timelines';
  9. import { addColumn, removeColumn, moveColumn } from '../../actions/columns';
  10. import ColumnSettingsContainer from './containers/column_settings_container';
  11. import { connectPublicStream } from '../../actions/streaming';
  12. const messages = defineMessages({
  13. title: { id: 'column.public', defaultMessage: 'Federated timeline' },
  14. });
  15. const mapStateToProps = (state, { columnId }) => {
  16. const uuid = columnId;
  17. const columns = state.getIn(['settings', 'columns']);
  18. const index = columns.findIndex(c => c.get('uuid') === uuid);
  19. const onlyMedia = (columnId && index >= 0) ? columns.get(index).getIn(['params', 'other', 'onlyMedia']) : state.getIn(['settings', 'public', 'other', 'onlyMedia']);
  20. const onlyRemote = (columnId && index >= 0) ? columns.get(index).getIn(['params', 'other', 'onlyRemote']) : state.getIn(['settings', 'public', 'other', 'onlyRemote']);
  21. const timelineState = state.getIn(['timelines', `public${onlyMedia ? ':media' : ''}`]);
  22. return {
  23. hasUnread: !!timelineState && timelineState.get('unread') > 0,
  24. onlyMedia,
  25. onlyRemote,
  26. };
  27. };
  28. export default @connect(mapStateToProps)
  29. @injectIntl
  30. class PublicTimeline extends React.PureComponent {
  31. static contextTypes = {
  32. router: PropTypes.object,
  33. };
  34. static defaultProps = {
  35. onlyMedia: false,
  36. };
  37. static propTypes = {
  38. dispatch: PropTypes.func.isRequired,
  39. intl: PropTypes.object.isRequired,
  40. columnId: PropTypes.string,
  41. multiColumn: PropTypes.bool,
  42. hasUnread: PropTypes.bool,
  43. onlyMedia: PropTypes.bool,
  44. onlyRemote: PropTypes.bool,
  45. };
  46. handlePin = () => {
  47. const { columnId, dispatch, onlyMedia, onlyRemote } = this.props;
  48. if (columnId) {
  49. dispatch(removeColumn(columnId));
  50. } else {
  51. dispatch(addColumn(onlyRemote ? 'REMOTE' : 'PUBLIC', { other: { onlyMedia, onlyRemote } }));
  52. }
  53. }
  54. handleMove = (dir) => {
  55. const { columnId, dispatch } = this.props;
  56. dispatch(moveColumn(columnId, dir));
  57. }
  58. handleHeaderClick = () => {
  59. this.column.scrollTop();
  60. }
  61. componentDidMount () {
  62. const { dispatch, onlyMedia, onlyRemote } = this.props;
  63. dispatch(expandPublicTimeline({ onlyMedia, onlyRemote }));
  64. this.disconnect = dispatch(connectPublicStream({ onlyMedia, onlyRemote }));
  65. }
  66. componentDidUpdate (prevProps) {
  67. if (prevProps.onlyMedia !== this.props.onlyMedia || prevProps.onlyRemote !== this.props.onlyRemote) {
  68. const { dispatch, onlyMedia, onlyRemote } = this.props;
  69. this.disconnect();
  70. dispatch(expandPublicTimeline({ onlyMedia, onlyRemote }));
  71. this.disconnect = dispatch(connectPublicStream({ onlyMedia, onlyRemote }));
  72. }
  73. }
  74. componentWillUnmount () {
  75. if (this.disconnect) {
  76. this.disconnect();
  77. this.disconnect = null;
  78. }
  79. }
  80. setRef = c => {
  81. this.column = c;
  82. }
  83. handleLoadMore = maxId => {
  84. const { dispatch, onlyMedia, onlyRemote } = this.props;
  85. dispatch(expandPublicTimeline({ maxId, onlyMedia, onlyRemote }));
  86. }
  87. render () {
  88. const { intl, columnId, hasUnread, multiColumn, onlyMedia, onlyRemote } = this.props;
  89. const pinned = !!columnId;
  90. return (
  91. <Column bindToDocument={!multiColumn} ref={this.setRef} label={intl.formatMessage(messages.title)}>
  92. <ColumnHeader
  93. icon='globe'
  94. active={hasUnread}
  95. title={intl.formatMessage(messages.title)}
  96. onPin={this.handlePin}
  97. onMove={this.handleMove}
  98. onClick={this.handleHeaderClick}
  99. pinned={pinned}
  100. multiColumn={multiColumn}
  101. >
  102. <ColumnSettingsContainer columnId={columnId} />
  103. </ColumnHeader>
  104. <StatusListContainer
  105. timelineId={`public${onlyRemote ? ':remote' : ''}${onlyMedia ? ':media' : ''}`}
  106. onLoadMore={this.handleLoadMore}
  107. trackScroll={!pinned}
  108. scrollKey={`public_timeline-${columnId}`}
  109. emptyMessage={<FormattedMessage id='empty_column.public' defaultMessage='There is nothing here! Write something publicly, or manually follow users from other servers to fill it up' />}
  110. bindToDocument={!multiColumn}
  111. />
  112. </Column>
  113. );
  114. }
  115. }