import React from 'react'; import { connect } from 'react-redux'; import PropTypes from 'prop-types'; import ImmutablePropTypes from 'react-immutable-proptypes'; import StatusListContainer from '../ui/containers/status_list_container'; import Column from '../../components/column'; import ColumnHeader from '../../components/column_header'; import { addColumn, removeColumn, moveColumn } from '../../actions/columns'; import { FormattedMessage, defineMessages, injectIntl } from 'react-intl'; import { connectListStream } from '../../actions/streaming'; import { expandListTimeline } from '../../actions/timelines'; import { fetchList, deleteList } from '../../actions/lists'; import { openModal } from '../../actions/modal'; import MissingIndicator from '../../components/missing_indicator'; import LoadingIndicator from '../../components/loading_indicator'; const messages = defineMessages({ deleteMessage: { id: 'confirmations.delete_list.message', defaultMessage: 'Are you sure you want to permanently delete this list?' }, deleteConfirm: { id: 'confirmations.delete_list.confirm', defaultMessage: 'Delete' }, }); const mapStateToProps = (state, props) => ({ list: state.getIn(['lists', props.params.id]), hasUnread: state.getIn(['timelines', `list:${props.params.id}`, 'unread']) > 0, }); @connect(mapStateToProps) @injectIntl export default class ListTimeline extends React.PureComponent { static contextTypes = { router: PropTypes.object, }; static propTypes = { params: PropTypes.object.isRequired, dispatch: PropTypes.func.isRequired, columnId: PropTypes.string, hasUnread: PropTypes.bool, multiColumn: PropTypes.bool, list: PropTypes.oneOfType([ImmutablePropTypes.map, PropTypes.bool]), intl: PropTypes.object.isRequired, }; handlePin = () => { const { columnId, dispatch } = this.props; if (columnId) { dispatch(removeColumn(columnId)); } else { dispatch(addColumn('LIST', { id: this.props.params.id })); this.context.router.history.push('/'); } } handleMove = (dir) => { const { columnId, dispatch } = this.props; dispatch(moveColumn(columnId, dir)); } handleHeaderClick = () => { this.column.scrollTop(); } componentDidMount () { const { dispatch } = this.props; const { id } = this.props.params; dispatch(fetchList(id)); dispatch(expandListTimeline(id)); this.disconnect = dispatch(connectListStream(id)); } componentWillUnmount () { if (this.disconnect) { this.disconnect(); this.disconnect = null; } } setRef = c => { this.column = c; } handleLoadMore = maxId => { const { id } = this.props.params; this.props.dispatch(expandListTimeline(id, { maxId })); } handleEditClick = () => { this.props.dispatch(openModal('LIST_EDITOR', { listId: this.props.params.id })); } handleDeleteClick = () => { const { dispatch, columnId, intl } = this.props; const { id } = this.props.params; dispatch(openModal('CONFIRM', { message: intl.formatMessage(messages.deleteMessage), confirm: intl.formatMessage(messages.deleteConfirm), onConfirm: () => { dispatch(deleteList(id)); if (!!columnId) { dispatch(removeColumn(columnId)); } else { this.context.router.history.push('/lists'); } }, })); } render () { const { hasUnread, columnId, multiColumn, list } = this.props; const { id } = this.props.params; const pinned = !!columnId; const title = list ? list.get('title') : id; if (typeof list === 'undefined') { return (
); } else if (list === false) { return (
); } return (

} />
); } }