闭社主体 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.

162 lines
5.4 KiB

7 years ago
7 years ago
7 years ago
  1. import React from 'react';
  2. import { connect } from 'react-redux';
  3. import { expandHomeTimeline } from '../../actions/timelines';
  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 { addColumn, removeColumn, moveColumn } from '../../actions/columns';
  9. import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
  10. import ColumnSettingsContainer from './containers/column_settings_container';
  11. import { Link } from 'react-router-dom';
  12. import { fetchAnnouncements, toggleShowAnnouncements } from 'mastodon/actions/announcements';
  13. import AnnouncementsContainer from 'mastodon/features/getting_started/containers/announcements_container';
  14. import classNames from 'classnames';
  15. import IconWithBadge from 'mastodon/components/icon_with_badge';
  16. const messages = defineMessages({
  17. title: { id: 'column.home', defaultMessage: 'Home' },
  18. show_announcements: { id: 'home.show_announcements', defaultMessage: 'Show announcements' },
  19. hide_announcements: { id: 'home.hide_announcements', defaultMessage: 'Hide announcements' },
  20. });
  21. const mapStateToProps = state => ({
  22. hasUnread: state.getIn(['timelines', 'home', 'unread']) > 0,
  23. isPartial: state.getIn(['timelines', 'home', 'isPartial']),
  24. hasAnnouncements: !state.getIn(['announcements', 'items']).isEmpty(),
  25. unreadAnnouncements: state.getIn(['announcements', 'items']).count(item => !item.get('read')),
  26. showAnnouncements: state.getIn(['announcements', 'show']),
  27. });
  28. export default @connect(mapStateToProps)
  29. @injectIntl
  30. class HomeTimeline extends React.PureComponent {
  31. static propTypes = {
  32. dispatch: PropTypes.func.isRequired,
  33. intl: PropTypes.object.isRequired,
  34. hasUnread: PropTypes.bool,
  35. isPartial: PropTypes.bool,
  36. columnId: PropTypes.string,
  37. multiColumn: PropTypes.bool,
  38. hasAnnouncements: PropTypes.bool,
  39. unreadAnnouncements: PropTypes.number,
  40. showAnnouncements: PropTypes.bool,
  41. };
  42. handlePin = () => {
  43. const { columnId, dispatch } = this.props;
  44. if (columnId) {
  45. dispatch(removeColumn(columnId));
  46. } else {
  47. dispatch(addColumn('HOME', {}));
  48. }
  49. }
  50. handleMove = (dir) => {
  51. const { columnId, dispatch } = this.props;
  52. dispatch(moveColumn(columnId, dir));
  53. }
  54. handleHeaderClick = () => {
  55. this.column.scrollTop();
  56. }
  57. setRef = c => {
  58. this.column = c;
  59. }
  60. handleLoadMore = maxId => {
  61. this.props.dispatch(expandHomeTimeline({ maxId }));
  62. }
  63. componentDidMount () {
  64. setTimeout(() => this.props.dispatch(fetchAnnouncements()), 700);
  65. this._checkIfReloadNeeded(false, this.props.isPartial);
  66. }
  67. componentDidUpdate (prevProps) {
  68. this._checkIfReloadNeeded(prevProps.isPartial, this.props.isPartial);
  69. }
  70. componentWillUnmount () {
  71. this._stopPolling();
  72. }
  73. _checkIfReloadNeeded (wasPartial, isPartial) {
  74. const { dispatch } = this.props;
  75. if (wasPartial === isPartial) {
  76. return;
  77. } else if (!wasPartial && isPartial) {
  78. this.polling = setInterval(() => {
  79. dispatch(expandHomeTimeline());
  80. }, 3000);
  81. } else if (wasPartial && !isPartial) {
  82. this._stopPolling();
  83. }
  84. }
  85. _stopPolling () {
  86. if (this.polling) {
  87. clearInterval(this.polling);
  88. this.polling = null;
  89. }
  90. }
  91. handleToggleAnnouncementsClick = (e) => {
  92. e.stopPropagation();
  93. this.props.dispatch(toggleShowAnnouncements());
  94. }
  95. render () {
  96. const { intl, hasUnread, columnId, multiColumn, hasAnnouncements, unreadAnnouncements, showAnnouncements } = this.props;
  97. const pinned = !!columnId;
  98. let announcementsButton = null;
  99. if (hasAnnouncements) {
  100. announcementsButton = (
  101. <button
  102. className={classNames('column-header__button', { 'active': showAnnouncements })}
  103. title={intl.formatMessage(showAnnouncements ? messages.hide_announcements : messages.show_announcements)}
  104. aria-label={intl.formatMessage(showAnnouncements ? messages.hide_announcements : messages.show_announcements)}
  105. aria-pressed={showAnnouncements ? 'true' : 'false'}
  106. onClick={this.handleToggleAnnouncementsClick}
  107. >
  108. <IconWithBadge id='bullhorn' count={unreadAnnouncements} />
  109. </button>
  110. );
  111. }
  112. return (
  113. <Column bindToDocument={!multiColumn} ref={this.setRef} label={intl.formatMessage(messages.title)}>
  114. <ColumnHeader
  115. icon='home'
  116. active={hasUnread}
  117. title={intl.formatMessage(messages.title)}
  118. onPin={this.handlePin}
  119. onMove={this.handleMove}
  120. onClick={this.handleHeaderClick}
  121. pinned={pinned}
  122. multiColumn={multiColumn}
  123. extraButton={announcementsButton}
  124. appendContent={hasAnnouncements && showAnnouncements && <AnnouncementsContainer />}
  125. >
  126. <ColumnSettingsContainer />
  127. </ColumnHeader>
  128. <StatusListContainer
  129. trackScroll={!pinned}
  130. scrollKey={`home_timeline-${columnId}`}
  131. onLoadMore={this.handleLoadMore}
  132. timelineId='home'
  133. emptyMessage={<FormattedMessage id='empty_column.home' defaultMessage='Your home timeline is empty! Follow more people to fill it up. {suggestions}' values={{ suggestions: <Link to='/start'><FormattedMessage id='empty_column.home.suggestions' defaultMessage='See some suggestions' /></Link> }} />}
  134. bindToDocument={!multiColumn}
  135. />
  136. </Column>
  137. );
  138. }
  139. }