content: import React from 'react';
  import { connect } from 'react-redux';
  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 ColumnHeader from '../../components/column_header';
  import { expandCommunityTimeline } from '../../actions/timelines';
  import { addColumn, removeColumn, moveColumn } from '../../actions/columns';
  import ColumnSettingsContainer from './containers/column_settings_container';
  import { connectCommunityStream } from '../../actions/streaming';
  
  const messages = defineMessages({
    title: { id: 'column.community', defaultMessage: 'Local timeline' },
  });
  
  const mapStateToProps = (state, { onlyMedia, columnId }) => {
    const uuid = columnId;
    const columns = state.getIn(['settings', 'columns']);
    const index = columns.findIndex(c => c.get('uuid') === uuid);
  
    return {
      hasUnread: state.getIn(['timelines', `community${onlyMedia ? ':media' : ''}`, 'unread']) > 0,
      onlyMedia: (columnId && index >= 0) ? columns.get(index).getIn(['params', 'other', 'onlyMedia']) : state.getIn(['settings', 'community', 'other', 'onlyMedia']),
    };
  };
  
  export default @connect(mapStateToProps)
  @injectIntl
  class CommunityTimeline extends React.PureComponent {
  
    static contextTypes = {
      router: PropTypes.object,
    };
  
    static defaultProps = {
      onlyMedia: false,
    };
  
    static propTypes = {
      dispatch: PropTypes.func.isRequired,
      shouldUpdateScroll: PropTypes.func,
      columnId: PropTypes.string,
      intl: PropTypes.object.isRequired,
      hasUnread: PropTypes.bool,
      multiColumn: PropTypes.bool,
      onlyMedia: PropTypes.bool,
    };
  
    handlePin = () => {
      const { columnId, dispatch, onlyMedia } = this.props;
  
      if (columnId) {
        dispatch(removeColumn(columnId));
      } else {
        dispatch(addColumn('COMMUNITY', { other: { onlyMedia } }));
      }
    }
  
    handleMove = (dir) => {
      const { columnId, dispatch } = this.props;
      dispatch(moveColumn(columnId, dir));
    }
  
    handleHeaderClick = () => {
      this.column.scrollTop();
    }
  
    componentDidMount () {
      const { dispatch, onlyMedia } = this.props;
  
      dispatch(expandCommunityTimeline({ onlyMedia }));
      this.disconnect = dispatch(connectCommunityStream({ onlyMedia }));
    }
  
    componentDidUpdate (prevProps) {
      if (prevProps.onlyMedia !== this.props.onlyMedia) {
        const { dispatch, onlyMedia } = this.props;
  
        this.disconnect();
        dispatch(expandCommunityTimeline({ onlyMedia }));
        this.disconnect = dispatch(connectCommunityStream({ onlyMedia }));
      }
    }
  
    componentWillUnmount () {
      if (this.disconnect) {
        this.disconnect();
        this.disconnect = null;
      }
    }
  
    setRef = c => {
      this.column = c;
    }
  
    handleLoadMore = maxId => {
      const { dispatch, onlyMedia } = this.props;
  
      dispatch(expandCommunityTimeline({ maxId, onlyMedia }));
    }
  
    render () {
      const { intl, shouldUpdateScroll, hasUnread, columnId, multiColumn, onlyMedia } = this.props;
      const pinned = !!columnId;
  
      return (
        <Column ref={this.setRef} label={intl.formatMessage(messages.title)}>
          <ColumnHeader
            icon='users'
            active={hasUnread}
            title={intl.formatMessage(messages.title)}
            onPin={this.handlePin}
            onMove={this.handleMove}
            onClick={this.handleHeaderClick}
            pinned={pinned}
            multiColumn={multiColumn}
          >
            <ColumnSettingsContainer columnId={columnId} />
          </ColumnHeader>
  
          <StatusListContainer
            trackScroll={!pinned}
            scrollKey={`community_timeline-${columnId}`}
            timelineId={`community${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!' />}
            shouldUpdateScroll={shouldUpdateScroll}
          />
        </Column>
      );
    }
  
  }
  