2017-11-24 18:35:37 -05:00
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' ;
2018-08-31 21:36:36 -04:00
import ColumnBackButton from '../../components/column_back_button' ;
2017-11-24 18:35:37 -05:00
import ColumnHeader from '../../components/column_header' ;
import { addColumn , removeColumn , moveColumn } from '../../actions/columns' ;
2017-12-05 17:02:27 -05:00
import { FormattedMessage , defineMessages , injectIntl } from 'react-intl' ;
2017-11-24 18:35:37 -05:00
import { connectListStream } from '../../actions/streaming' ;
2018-03-24 10:25:15 -04:00
import { expandListTimeline } from '../../actions/timelines' ;
2017-12-05 17:02:27 -05:00
import { fetchList , deleteList } from '../../actions/lists' ;
import { openModal } from '../../actions/modal' ;
import MissingIndicator from '../../components/missing_indicator' ;
import LoadingIndicator from '../../components/loading_indicator' ;
2019-01-31 18:14:05 -05:00
import Icon from 'mastodon/components/icon' ;
2017-12-05 17:02:27 -05:00
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' } ,
} ) ;
2017-11-24 18:35:37 -05:00
const mapStateToProps = ( state , props ) => ( {
list : state . getIn ( [ 'lists' , props . params . id ] ) ,
hasUnread : state . getIn ( [ 'timelines' , ` list: ${ props . params . id } ` , 'unread' ] ) > 0 ,
} ) ;
2018-09-14 11:59:48 -04:00
export default @ connect ( mapStateToProps )
2017-12-05 17:02:27 -05:00
@ injectIntl
2018-09-14 11:59:48 -04:00
class ListTimeline extends React . PureComponent {
2017-11-24 18:35:37 -05:00
2017-12-05 17:02:27 -05:00
static contextTypes = {
router : PropTypes . object ,
} ;
2017-11-24 18:35:37 -05:00
static propTypes = {
params : PropTypes . object . isRequired ,
dispatch : PropTypes . func . isRequired ,
2018-07-29 10:52:06 -04:00
shouldUpdateScroll : PropTypes . func ,
2017-11-24 18:35:37 -05:00
columnId : PropTypes . string ,
hasUnread : PropTypes . bool ,
multiColumn : PropTypes . bool ,
2017-12-05 17:02:27 -05:00
list : PropTypes . oneOfType ( [ ImmutablePropTypes . map , PropTypes . bool ] ) ,
intl : PropTypes . object . isRequired ,
2017-11-24 18:35:37 -05:00
} ;
handlePin = ( ) => {
const { columnId , dispatch } = this . props ;
if ( columnId ) {
dispatch ( removeColumn ( columnId ) ) ;
} else {
dispatch ( addColumn ( 'LIST' , { id : this . props . params . id } ) ) ;
2017-12-05 17:02:27 -05:00
this . context . router . history . push ( '/' ) ;
2017-11-24 18:35:37 -05:00
}
}
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 ) ) ;
2018-03-24 10:25:15 -04:00
dispatch ( expandListTimeline ( id ) ) ;
2017-11-24 18:35:37 -05:00
this . disconnect = dispatch ( connectListStream ( id ) ) ;
}
2019-06-06 07:04:49 -04:00
componentWillReceiveProps ( nextProps ) {
const { dispatch } = this . props ;
const { id } = nextProps . params ;
if ( id !== this . props . params . id ) {
if ( this . disconnect ) {
this . disconnect ( ) ;
this . disconnect = null ;
}
dispatch ( fetchList ( id ) ) ;
dispatch ( expandListTimeline ( id ) ) ;
this . disconnect = dispatch ( connectListStream ( id ) ) ;
}
}
2017-11-24 18:35:37 -05:00
componentWillUnmount ( ) {
if ( this . disconnect ) {
this . disconnect ( ) ;
this . disconnect = null ;
}
}
setRef = c => {
this . column = c ;
}
2018-03-24 10:25:15 -04:00
handleLoadMore = maxId => {
2017-11-24 18:35:37 -05:00
const { id } = this . props . params ;
2018-03-24 10:25:15 -04:00
this . props . dispatch ( expandListTimeline ( id , { maxId } ) ) ;
2017-11-24 18:35:37 -05:00
}
2017-12-05 17:02:27 -05:00
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' ) ;
}
} ,
} ) ) ;
}
2017-11-24 18:35:37 -05:00
render ( ) {
2018-07-29 10:52:06 -04:00
const { shouldUpdateScroll , hasUnread , columnId , multiColumn , list } = this . props ;
2017-11-24 18:35:37 -05:00
const { id } = this . props . params ;
const pinned = ! ! columnId ;
const title = list ? list . get ( 'title' ) : id ;
2017-12-05 17:02:27 -05:00
if ( typeof list === 'undefined' ) {
return (
< Column >
2018-01-17 17:56:03 -05:00
< div className = 'scrollable' >
< LoadingIndicator / >
< / d i v >
2017-12-05 17:02:27 -05:00
< / C o l u m n >
) ;
} else if ( list === false ) {
return (
< Column >
2018-08-31 21:36:36 -04:00
< ColumnBackButton / >
< MissingIndicator / >
2017-12-05 17:02:27 -05:00
< / C o l u m n >
) ;
}
2017-11-24 18:35:37 -05:00
return (
2018-08-23 11:26:21 -04:00
< Column ref = { this . setRef } label = { title } >
2017-11-24 18:35:37 -05:00
< ColumnHeader
2018-06-18 09:33:11 -04:00
icon = 'list-ul'
2017-11-24 18:35:37 -05:00
active = { hasUnread }
title = { title }
onPin = { this . handlePin }
onMove = { this . handleMove }
onClick = { this . handleHeaderClick }
pinned = { pinned }
multiColumn = { multiColumn }
2017-12-05 17:02:27 -05:00
>
< div className = 'column-header__links' >
< button className = 'text-btn column-header__setting-btn' tabIndex = '0' onClick = { this . handleEditClick } >
2019-01-31 18:14:05 -05:00
< Icon id = 'pencil' / > < FormattedMessage id = 'lists.edit' defaultMessage = 'Edit list' / >
2017-12-05 17:02:27 -05:00
< / b u t t o n >
< button className = 'text-btn column-header__setting-btn' tabIndex = '0' onClick = { this . handleDeleteClick } >
2019-01-31 18:14:05 -05:00
< Icon id = 'trash' / > < FormattedMessage id = 'lists.delete' defaultMessage = 'Delete list' / >
2017-12-05 17:02:27 -05:00
< / b u t t o n >
< / d i v >
< / C o l u m n H e a d e r >
2017-11-24 18:35:37 -05:00
< StatusListContainer
trackScroll = { ! pinned }
scrollKey = { ` list_timeline- ${ columnId } ` }
timelineId = { ` list: ${ id } ` }
2018-03-24 10:25:15 -04:00
onLoadMore = { this . handleLoadMore }
2017-12-12 20:40:32 -05:00
emptyMessage = { < FormattedMessage id = 'empty_column.list' defaultMessage = 'There is nothing in this list yet. When members of this list post new statuses, they will appear here.' / > }
2018-07-29 10:52:06 -04:00
shouldUpdateScroll = { shouldUpdateScroll }
2017-11-24 18:35:37 -05:00
/ >
< / C o l u m n >
) ;
}
}