2017-05-02 20:04:16 -04:00
import React from 'react' ;
2016-11-09 18:47:47 -05:00
import { connect } from 'react-redux' ;
2017-04-21 14:05:35 -04:00
import PropTypes from 'prop-types' ;
2016-10-12 07:17:17 -04:00
import StatusListContainer from '../ui/containers/status_list_container' ;
2017-06-03 19:39:38 -04:00
import Column from '../../components/column' ;
import ColumnHeader from '../../components/column_header' ;
2016-10-07 10:00:11 -04:00
import {
2017-06-11 11:07:35 -04:00
refreshPublicTimeline ,
expandPublicTimeline ,
2016-11-09 18:47:47 -05:00
updateTimeline ,
2017-04-02 15:44:06 -04:00
deleteFromTimelines ,
connectTimeline ,
2017-05-20 11:31:47 -04:00
disconnectTimeline ,
2016-11-09 18:47:47 -05:00
} from '../../actions/timelines' ;
2017-06-03 19:39:38 -04:00
import { addColumn , removeColumn , moveColumn } from '../../actions/columns' ;
2017-02-19 14:25:54 -05:00
import { defineMessages , injectIntl , FormattedMessage } from 'react-intl' ;
2017-06-06 10:56:10 -04:00
import ColumnSettingsContainer from './containers/column_settings_container' ;
2017-02-03 18:34:31 -05:00
import createStream from '../../stream' ;
2016-11-18 09:36:16 -05:00
const messages = defineMessages ( {
2017-05-20 11:31:47 -04:00
title : { id : 'column.public' , defaultMessage : 'Federated timeline' } ,
2016-11-18 09:36:16 -05:00
} ) ;
2016-10-07 10:00:11 -04:00
2017-02-03 18:34:31 -05:00
const mapStateToProps = state => ( {
2017-02-22 20:14:35 -05:00
hasUnread : state . getIn ( [ 'timelines' , 'public' , 'unread' ] ) > 0 ,
2017-04-14 20:32:42 -04:00
streamingAPIBaseURL : state . getIn ( [ 'meta' , 'streaming_api_base_url' ] ) ,
2017-05-20 11:31:47 -04:00
accessToken : state . getIn ( [ 'meta' , 'access_token' ] ) ,
2017-02-03 18:34:31 -05:00
} ) ;
2017-06-23 13:36:54 -04:00
@ connect ( mapStateToProps )
@ injectIntl
export default class PublicTimeline extends React . PureComponent {
2016-10-07 10:00:11 -04:00
2017-05-12 08:44:10 -04:00
static propTypes = {
dispatch : PropTypes . func . isRequired ,
intl : PropTypes . object . isRequired ,
2017-06-03 19:39:38 -04:00
columnId : PropTypes . string ,
multiColumn : PropTypes . bool ,
2017-05-12 08:44:10 -04:00
streamingAPIBaseURL : PropTypes . string . isRequired ,
accessToken : PropTypes . string . isRequired ,
2017-05-20 11:31:47 -04:00
hasUnread : PropTypes . bool ,
2017-05-12 08:44:10 -04:00
} ;
2017-06-03 19:39:38 -04:00
handlePin = ( ) => {
const { columnId , dispatch } = this . props ;
if ( columnId ) {
dispatch ( removeColumn ( columnId ) ) ;
} else {
dispatch ( addColumn ( 'PUBLIC' , { } ) ) ;
}
}
handleMove = ( dir ) => {
const { columnId , dispatch } = this . props ;
dispatch ( moveColumn ( columnId , dir ) ) ;
}
handleHeaderClick = ( ) => {
this . column . scrollTop ( ) ;
}
2017-02-03 18:34:31 -05:00
componentDidMount ( ) {
2017-04-14 20:32:42 -04:00
const { dispatch , streamingAPIBaseURL , accessToken } = this . props ;
2016-10-07 10:00:11 -04:00
2017-06-11 11:07:35 -04:00
dispatch ( refreshPublicTimeline ( ) ) ;
2016-10-07 10:00:11 -04:00
2017-06-03 19:39:38 -04:00
if ( typeof this . _subscription !== 'undefined' ) {
2017-02-28 19:43:29 -05:00
return ;
}
2017-06-03 19:39:38 -04:00
this . _subscription = createStream ( streamingAPIBaseURL , accessToken , 'public' , {
2016-10-07 10:00:11 -04:00
2017-04-02 15:44:06 -04:00
connected ( ) {
dispatch ( connectTimeline ( 'public' ) ) ;
} ,
reconnected ( ) {
dispatch ( connectTimeline ( 'public' ) ) ;
} ,
disconnected ( ) {
dispatch ( disconnectTimeline ( 'public' ) ) ;
} ,
2017-02-03 18:34:31 -05:00
received ( data ) {
switch ( data . event ) {
case 'update' :
dispatch ( updateTimeline ( 'public' , JSON . parse ( data . payload ) ) ) ;
break ;
case 'delete' :
dispatch ( deleteFromTimelines ( data . payload ) ) ;
break ;
2016-10-07 10:00:11 -04:00
}
2017-05-20 11:31:47 -04:00
} ,
2016-10-07 10:00:11 -04:00
2017-02-03 18:34:31 -05:00
} ) ;
2017-04-21 14:05:35 -04:00
}
2016-10-07 10:00:11 -04:00
componentWillUnmount ( ) {
2017-06-03 19:39:38 -04:00
if ( typeof this . _subscription !== 'undefined' ) {
this . _subscription . close ( ) ;
this . _subscription = null ;
}
}
setRef = c => {
this . column = c ;
2017-04-21 14:05:35 -04:00
}
2016-10-07 10:00:11 -04:00
2017-06-11 11:07:35 -04:00
handleLoadMore = ( ) => {
this . props . dispatch ( expandPublicTimeline ( ) ) ;
}
2016-10-07 10:00:11 -04:00
render ( ) {
2017-06-03 19:39:38 -04:00
const { intl , columnId , hasUnread , multiColumn } = this . props ;
const pinned = ! ! columnId ;
2016-11-16 11:20:52 -05:00
2016-10-07 10:00:11 -04:00
return (
2017-06-03 19:39:38 -04:00
< Column ref = { this . setRef } >
< ColumnHeader
icon = 'globe'
active = { hasUnread }
title = { intl . formatMessage ( messages . title ) }
onPin = { this . handlePin }
onMove = { this . handleMove }
onClick = { this . handleHeaderClick }
pinned = { pinned }
multiColumn = { multiColumn }
2017-06-06 10:56:10 -04:00
>
< ColumnSettingsContainer / >
< / C o l u m n H e a d e r >
2017-06-03 19:39:38 -04:00
< StatusListContainer
2017-06-11 11:07:35 -04:00
timelineId = 'public'
loadMore = { this . handleLoadMore }
2017-06-05 09:20:46 -04:00
trackScroll = { ! pinned }
2017-06-03 19:39:38 -04:00
scrollKey = { ` public_timeline- ${ columnId } ` }
emptyMessage = { < FormattedMessage id = 'empty_column.public' defaultMessage = 'There is nothing here! Write something publicly, or manually follow users from other instances to fill it up' / > }
/ >
2016-10-07 10:00:11 -04:00
< / C o l u m n >
) ;
2017-04-21 14:05:35 -04:00
}
2016-10-07 10:00:11 -04:00
2017-04-21 14:05:35 -04:00
}