app/javascript/flavours/glitch/features/community_timeline/index.js

   1 import React from 'react';
   2 import { connect } from 'react-redux';
   3 import PropTypes from 'prop-types';
   4 import StatusListContainer from 'flavours/glitch/features/ui/containers/status_list_container';
   5 import Column from 'flavours/glitch/components/column';
   6 import ColumnHeader from 'flavours/glitch/components/column_header';
   7 import { expandCommunityTimeline } from 'flavours/glitch/actions/timelines';
   8 import { addColumn, removeColumn, moveColumn } from 'flavours/glitch/actions/columns';
   9 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
  10 import ColumnSettingsContainer from './containers/column_settings_container';
  11 import { connectCommunityStream } from 'flavours/glitch/actions/streaming';
  12
  13 const messages = defineMessages({
  14   title: { id: 'column.community', defaultMessage: 'Local timeline' },
  15 });
  16
  17 const mapStateToProps = state => ({
  18   hasUnread: state.getIn(['timelines', 'community', 'unread']) > 0,
  19 });
  20
  21 @connect(mapStateToProps)
  22 @injectIntl
  23 export default class CommunityTimeline extends React.PureComponent {
  24
  25   static propTypes = {
  26     dispatch: PropTypes.func.isRequired,
  27     columnId: PropTypes.string,
  28     intl: PropTypes.object.isRequired,
  29     hasUnread: PropTypes.bool,
  30     multiColumn: PropTypes.bool,
  31   };
  32
  33   handlePin = () => {
  34     const { columnId, dispatch } = this.props;
  35
  36     if (columnId) {
  37       dispatch(removeColumn(columnId));
  38     } else {
  39       dispatch(addColumn('COMMUNITY', {}));
  40     }
  41   }
  42
  43   handleMove = (dir) => {
  44     const { columnId, dispatch } = this.props;
  45     dispatch(moveColumn(columnId, dir));
  46   }
  47
  48   handleHeaderClick = () => {
  49     this.column.scrollTop();
  50   }
  51
  52   componentDidMount () {
  53     const { dispatch } = this.props;
  54
  55     dispatch(expandCommunityTimeline());
  56     this.disconnect = dispatch(connectCommunityStream());
  57   }
  58
  59   componentWillUnmount () {
  60     if (this.disconnect) {
  61       this.disconnect();
  62       this.disconnect = null;
  63     }
  64   }
  65
  66   setRef = c => {
  67     this.column = c;
  68   }
  69
  70   handleLoadMore = maxId => {
  71     this.props.dispatch(expandCommunityTimeline({ maxId }));
  72   }
  73
  74   render () {
  75     const { intl, hasUnread, columnId, multiColumn } = this.props;
  76     const pinned = !!columnId;
  77
  78     return (
  79       <Column ref={this.setRef} name='local' label={intl.formatMessage(messages.title)}>
  80         <ColumnHeader
  81           icon='users'
  82           active={hasUnread}
  83           title={intl.formatMessage(messages.title)}
  84           onPin={this.handlePin}
  85           onMove={this.handleMove}
  86           onClick={this.handleHeaderClick}
  87           pinned={pinned}
  88           multiColumn={multiColumn}
  89         >
  90           <ColumnSettingsContainer />
  91         </ColumnHeader>
  92
  93         <StatusListContainer
  94           trackScroll={!pinned}
  95           scrollKey={`community_timeline-${columnId}`}
  96           timelineId='community'
  97           onLoadMore={this.handleLoadMore}
  98           emptyMessage={<FormattedMessage id='empty_column.community' defaultMessage='The local timeline is empty. Write something publicly to get the ball rolling!' />}
  99         />
 100       </Column>
 101     );
 102   }
 103
 104 }