2017-05-03 00:04:16 +00:00
import React from 'react' ;
2016-11-05 14:20:05 +00:00
import { connect } from 'react-redux' ;
2017-04-21 18:05:35 +00:00
import PropTypes from 'prop-types' ;
2016-11-05 14:20:05 +00:00
import StatusListContainer from '../ui/containers/status_list_container' ;
2017-06-03 23:39:38 +00:00
import Column from '../../components/column' ;
import ColumnHeader from '../../components/column_header' ;
2018-11-05 17:53:25 +00:00
import ColumnSettingsContainer from './containers/column_settings_container' ;
import { expandHashtagTimeline , clearTimeline } from '../../actions/timelines' ;
2017-06-03 23:39:38 +00:00
import { addColumn , removeColumn , moveColumn } from '../../actions/columns' ;
2017-02-18 01:37:59 +00:00
import { FormattedMessage } from 'react-intl' ;
2017-08-21 13:04:34 +00:00
import { connectHashtagStream } from '../../actions/streaming' ;
2018-11-17 10:07:48 +00:00
import { isEqual } from 'lodash' ;
2017-02-03 23:34:31 +00:00
2017-08-20 15:12:06 +00:00
const mapStateToProps = ( state , props ) => ( {
hasUnread : state . getIn ( [ 'timelines' , ` hashtag: ${ props . params . id } ` , 'unread' ] ) > 0 ,
2017-02-03 23:34:31 +00:00
} ) ;
2016-11-05 14:20:05 +00:00
2018-09-14 15:59:48 +00:00
export default @ connect ( mapStateToProps )
class HashtagTimeline extends React . PureComponent {
2016-11-05 14:20:05 +00:00
2018-11-05 17:53:25 +00:00
disconnects = [ ] ;
2017-05-12 12:44:10 +00:00
static propTypes = {
params : PropTypes . object . isRequired ,
2017-06-03 23:39:38 +00:00
columnId : PropTypes . string ,
2017-05-12 12:44:10 +00:00
dispatch : PropTypes . func . isRequired ,
2018-07-29 14:52:06 +00:00
shouldUpdateScroll : PropTypes . func ,
2017-05-20 15:31:47 +00:00
hasUnread : PropTypes . bool ,
2017-06-03 23:39:38 +00:00
multiColumn : PropTypes . bool ,
2017-05-12 12:44:10 +00:00
} ;
2017-06-03 23:39:38 +00:00
handlePin = ( ) => {
const { columnId , dispatch } = this . props ;
if ( columnId ) {
dispatch ( removeColumn ( columnId ) ) ;
} else {
dispatch ( addColumn ( 'HASHTAG' , { id : this . props . params . id } ) ) ;
}
}
2018-11-05 17:53:25 +00:00
title = ( ) => {
let title = [ this . props . params . id ] ;
if ( this . additionalFor ( 'any' ) ) {
title . push ( < FormattedMessage id = 'hashtag.column_header.tag_mode.any' values = { { additional : this . additionalFor ( 'any' ) } } defaultMessage = ' or {additional}' / > ) ;
}
if ( this . additionalFor ( 'all' ) ) {
title . push ( < FormattedMessage id = 'hashtag.column_header.tag_mode.all' values = { { additional : this . additionalFor ( 'all' ) } } defaultMessage = ' and {additional}' / > ) ;
}
if ( this . additionalFor ( 'none' ) ) {
title . push ( < FormattedMessage id = 'hashtag.column_header.tag_mode.none' values = { { additional : this . additionalFor ( 'none' ) } } defaultMessage = ' without {additional}' / > ) ;
}
return title ;
}
additionalFor = ( mode ) => {
const { tags } = this . props . params ;
if ( tags && ( tags [ mode ] || [ ] ) . length > 0 ) {
return tags [ mode ] . map ( tag => tag . value ) . join ( '/' ) ;
} else {
return '' ;
}
}
2017-06-03 23:39:38 +00:00
handleMove = ( dir ) => {
const { columnId , dispatch } = this . props ;
dispatch ( moveColumn ( columnId , dir ) ) ;
}
handleHeaderClick = ( ) => {
this . column . scrollTop ( ) ;
}
2018-11-05 17:53:25 +00:00
_subscribe ( dispatch , id , tags = { } ) {
let any = ( tags . any || [ ] ) . map ( tag => tag . value ) ;
let all = ( tags . all || [ ] ) . map ( tag => tag . value ) ;
let none = ( tags . none || [ ] ) . map ( tag => tag . value ) ;
[ id , ... any ] . map ( ( tag ) => {
this . disconnects . push ( dispatch ( connectHashtagStream ( id , tag , ( status ) => {
let tags = status . tags . map ( tag => tag . name ) ;
return all . filter ( tag => tags . includes ( tag ) ) . length === all . length &&
none . filter ( tag => tags . includes ( tag ) ) . length === 0 ;
} ) ) ) ;
} ) ;
2017-04-21 18:05:35 +00:00
}
2016-11-05 14:20:05 +00:00
_unsubscribe ( ) {
2018-11-05 17:53:25 +00:00
this . disconnects . map ( disconnect => disconnect ( ) ) ;
this . disconnects = [ ] ;
2017-04-21 18:05:35 +00:00
}
2016-11-05 14:20:05 +00:00
2017-02-03 23:34:31 +00:00
componentDidMount ( ) {
2016-11-05 14:20:05 +00:00
const { dispatch } = this . props ;
2018-11-05 17:53:25 +00:00
const { id , tags } = this . props . params ;
2016-11-05 14:20:05 +00:00
2018-11-05 17:53:25 +00:00
dispatch ( expandHashtagTimeline ( id , { tags } ) ) ;
2017-04-21 18:05:35 +00:00
}
2016-11-05 14:20:05 +00:00
componentWillReceiveProps ( nextProps ) {
2018-11-05 17:53:25 +00:00
const { dispatch , params } = this . props ;
const { id , tags } = nextProps . params ;
2018-11-17 10:07:48 +00:00
if ( id !== params . id || ! isEqual ( tags , params . tags ) ) {
2016-11-05 14:20:05 +00:00
this . _unsubscribe ( ) ;
2018-11-05 17:53:25 +00:00
this . _subscribe ( dispatch , id , tags ) ;
this . props . dispatch ( clearTimeline ( ` hashtag: ${ id } ` ) ) ;
this . props . dispatch ( expandHashtagTimeline ( id , { tags } ) ) ;
2016-11-05 14:20:05 +00:00
}
2017-04-21 18:05:35 +00:00
}
2016-11-05 14:20:05 +00:00
componentWillUnmount ( ) {
this . _unsubscribe ( ) ;
2017-04-21 18:05:35 +00:00
}
2016-11-05 14:20:05 +00:00
2017-06-03 23:39:38 +00:00
setRef = c => {
this . column = c ;
}
2018-03-24 14:25:15 +00:00
handleLoadMore = maxId => {
2018-11-05 17:53:25 +00:00
const { id , tags } = this . props . params ;
this . props . dispatch ( expandHashtagTimeline ( id , { maxId , tags } ) ) ;
2017-06-11 15:07:35 +00:00
}
2016-11-05 14:20:05 +00:00
render ( ) {
2018-07-29 14:52:06 +00:00
const { shouldUpdateScroll , hasUnread , columnId , multiColumn } = this . props ;
2017-06-03 23:39:38 +00:00
const { id } = this . props . params ;
const pinned = ! ! columnId ;
2016-11-05 14:20:05 +00:00
return (
2018-08-23 15:26:21 +00:00
< Column ref = { this . setRef } label = { ` # ${ id } ` } >
2017-06-03 23:39:38 +00:00
< ColumnHeader
icon = 'hashtag'
active = { hasUnread }
2018-11-05 17:53:25 +00:00
title = { this . title ( ) }
2017-06-03 23:39:38 +00:00
onPin = { this . handlePin }
onMove = { this . handleMove }
onClick = { this . handleHeaderClick }
pinned = { pinned }
multiColumn = { multiColumn }
2017-06-06 11:20:07 +00:00
showBackButton
2018-11-05 17:53:25 +00:00
>
{ columnId && < ColumnSettingsContainer columnId = { columnId } / > }
< / C o l u m n H e a d e r >
2017-06-03 23:39:38 +00:00
< StatusListContainer
2017-06-05 13:20:46 +00:00
trackScroll = { ! pinned }
2017-06-03 23:39:38 +00:00
scrollKey = { ` hashtag_timeline- ${ columnId } ` }
2017-06-11 15:07:35 +00:00
timelineId = { ` hashtag: ${ id } ` }
2018-03-24 14:25:15 +00:00
onLoadMore = { this . handleLoadMore }
2017-06-03 23:39:38 +00:00
emptyMessage = { < FormattedMessage id = 'empty_column.hashtag' defaultMessage = 'There is nothing in this hashtag yet.' / > }
2018-07-29 14:52:06 +00:00
shouldUpdateScroll = { shouldUpdateScroll }
2017-06-03 23:39:38 +00:00
/ >
2016-11-05 14:20:05 +00:00
< / C o l u m n >
) ;
2017-04-21 18:05:35 +00:00
}
2016-11-05 14:20:05 +00:00
2017-04-21 18:05:35 +00:00
}