2017-05-02 17:04:16 -07:00
import React from 'react' ;
2017-02-19 11:25:54 -08:00
import { connect } from 'react-redux' ;
2018-05-27 11:55:11 -07:00
import { defineMessages , injectIntl , FormattedMessage } from 'react-intl' ;
2017-04-21 11:05:35 -07:00
import PropTypes from 'prop-types' ;
2017-12-03 23:26:40 -08:00
import StatusListContainer from 'flavours/glitch/features/ui/containers/status_list_container' ;
import Column from 'flavours/glitch/components/column' ;
import ColumnHeader from 'flavours/glitch/components/column_header' ;
2018-05-27 10:10:37 -07:00
import { expandCommunityTimeline } from 'flavours/glitch/actions/timelines' ;
2018-12-18 09:52:37 -08:00
import { addColumn , removeColumn , moveColumn } from 'flavours/glitch/actions/columns' ;
2017-06-06 07:56:10 -07:00
import ColumnSettingsContainer from './containers/column_settings_container' ;
2017-12-03 23:26:40 -08:00
import { connectCommunityStream } from 'flavours/glitch/actions/streaming' ;
2022-09-28 19:39:33 -07:00
import { Helmet } from 'react-helmet' ;
2022-10-08 21:08:37 -07:00
import { domain } from 'flavours/glitch/initial_state' ;
import DismissableBanner from 'flavours/glitch/components/dismissable_banner' ;
2017-02-19 11:25:54 -08:00
const messages = defineMessages ( {
2017-05-20 08:31:47 -07:00
title : { id : 'column.community' , defaultMessage : 'Local timeline' } ,
2017-02-19 11:25:54 -08:00
} ) ;
2019-11-10 14:05:02 -08:00
const mapStateToProps = ( state , { columnId } ) => {
2018-12-18 09:52:37 -08:00
const uuid = columnId ;
const columns = state . getIn ( [ 'settings' , 'columns' ] ) ;
const index = columns . findIndex ( c => c . get ( 'uuid' ) === uuid ) ;
2019-11-10 14:05:02 -08:00
const onlyMedia = ( columnId && index >= 0 ) ? columns . get ( index ) . getIn ( [ 'params' , 'other' , 'onlyMedia' ] ) : state . getIn ( [ 'settings' , 'community' , 'other' , 'onlyMedia' ] ) ;
2022-09-02 02:57:06 -07:00
const regex = ( columnId && index >= 0 ) ? columns . get ( index ) . getIn ( [ 'params' , 'regex' , 'body' ] ) : state . getIn ( [ 'settings' , 'community' , 'regex' , 'body' ] ) ;
2019-09-17 19:02:21 -07:00
const timelineState = state . getIn ( [ 'timelines' , ` community ${ onlyMedia ? ':media' : '' } ` ] ) ;
2018-12-18 09:52:37 -08:00
return {
2019-11-10 14:05:02 -08:00
hasUnread : ! ! timelineState && timelineState . get ( 'unread' ) > 0 ,
onlyMedia ,
2022-09-02 02:57:06 -07:00
regex ,
2018-12-18 09:52:37 -08:00
} ;
} ;
2017-02-19 11:25:54 -08:00
2019-09-09 06:16:08 -07:00
export default @ connect ( mapStateToProps )
2017-06-23 10:36:54 -07:00
@ injectIntl
2019-09-09 06:16:08 -07:00
class CommunityTimeline extends React . PureComponent {
2017-02-19 11:25:54 -08:00
2018-05-27 11:55:11 -07:00
static defaultProps = {
onlyMedia : false ,
} ;
2018-12-18 09:52:37 -08:00
static contextTypes = {
router : PropTypes . object ,
2022-10-07 22:15:50 -07:00
identity : PropTypes . object ,
2018-12-18 09:52:37 -08:00
} ;
2017-05-12 05:44:10 -07:00
static propTypes = {
dispatch : PropTypes . func . isRequired ,
2017-06-03 16:39:38 -07:00
columnId : PropTypes . string ,
2017-05-12 05:44:10 -07:00
intl : PropTypes . object . isRequired ,
2017-05-20 08:31:47 -07:00
hasUnread : PropTypes . bool ,
2017-06-03 16:39:38 -07:00
multiColumn : PropTypes . bool ,
2018-05-27 11:55:11 -07:00
onlyMedia : PropTypes . bool ,
2022-09-02 02:57:06 -07:00
regex : PropTypes . string ,
2017-05-12 05:44:10 -07:00
} ;
2017-06-03 16:39:38 -07:00
handlePin = ( ) => {
2018-05-27 12:23:56 -07:00
const { columnId , dispatch , onlyMedia } = this . props ;
2017-06-03 16:39:38 -07:00
if ( columnId ) {
dispatch ( removeColumn ( columnId ) ) ;
} else {
2018-05-27 12:23:56 -07:00
dispatch ( addColumn ( 'COMMUNITY' , { other : { onlyMedia } } ) ) ;
2017-06-03 16:39:38 -07:00
}
2023-02-03 11:52:07 -08:00
} ;
2017-06-03 16:39:38 -07:00
handleMove = ( dir ) => {
const { columnId , dispatch } = this . props ;
dispatch ( moveColumn ( columnId , dir ) ) ;
2023-02-03 11:52:07 -08:00
} ;
2017-06-03 16:39:38 -07:00
handleHeaderClick = ( ) => {
this . column . scrollTop ( ) ;
2023-02-03 11:52:07 -08:00
} ;
2017-06-03 16:39:38 -07:00
2017-02-19 11:25:54 -08:00
componentDidMount ( ) {
2018-05-27 11:55:11 -07:00
const { dispatch , onlyMedia } = this . props ;
2022-10-07 22:15:50 -07:00
const { signedIn } = this . context . identity ;
2017-02-19 11:25:54 -08:00
2018-05-27 11:55:11 -07:00
dispatch ( expandCommunityTimeline ( { onlyMedia } ) ) ;
2022-10-07 22:15:50 -07:00
if ( signedIn ) {
this . disconnect = dispatch ( connectCommunityStream ( { onlyMedia } ) ) ;
}
2017-04-21 11:05:35 -07:00
}
2017-02-19 11:25:54 -08:00
2018-05-27 12:26:33 -07:00
componentDidUpdate ( prevProps ) {
2022-10-07 22:15:50 -07:00
const { signedIn } = this . context . identity ;
2018-05-27 12:26:33 -07:00
if ( prevProps . onlyMedia !== this . props . onlyMedia ) {
const { dispatch , onlyMedia } = this . props ;
2022-10-07 22:15:50 -07:00
if ( this . disconnect ) {
this . disconnect ( ) ;
}
2018-05-27 12:26:33 -07:00
dispatch ( expandCommunityTimeline ( { onlyMedia } ) ) ;
2022-10-07 22:15:50 -07:00
if ( signedIn ) {
this . disconnect = dispatch ( connectCommunityStream ( { onlyMedia } ) ) ;
}
2018-05-27 12:26:33 -07:00
}
}
2017-02-19 11:25:54 -08:00
componentWillUnmount ( ) {
2017-08-21 06:04:34 -07:00
if ( this . disconnect ) {
this . disconnect ( ) ;
this . disconnect = null ;
2017-06-03 16:39:38 -07:00
}
}
setRef = c => {
this . column = c ;
2023-02-03 11:52:07 -08:00
} ;
2017-02-19 11:25:54 -08:00
2018-05-27 10:10:37 -07:00
handleLoadMore = maxId => {
2018-05-27 11:55:11 -07:00
const { dispatch , onlyMedia } = this . props ;
dispatch ( expandCommunityTimeline ( { maxId , onlyMedia } ) ) ;
2023-02-03 11:52:07 -08:00
} ;
2017-06-11 08:07:35 -07:00
2017-02-19 11:25:54 -08:00
render ( ) {
2018-05-27 11:55:11 -07:00
const { intl , hasUnread , columnId , multiColumn , onlyMedia } = this . props ;
2017-06-03 16:39:38 -07:00
const pinned = ! ! columnId ;
2017-02-19 11:25:54 -08:00
return (
2019-08-01 10:17:17 -07:00
< Column ref = { this . setRef } name = 'local' bindToDocument = { ! multiColumn } label = { intl . formatMessage ( messages . title ) } >
2017-06-03 16:39:38 -07:00
< ColumnHeader
icon = 'users'
active = { hasUnread }
title = { intl . formatMessage ( messages . title ) }
onPin = { this . handlePin }
onMove = { this . handleMove }
onClick = { this . handleHeaderClick }
pinned = { pinned }
multiColumn = { multiColumn }
2017-06-06 07:56:10 -07:00
>
2018-12-18 09:52:37 -08:00
< ColumnSettingsContainer columnId = { columnId } / >
2017-06-06 07:56:10 -07:00
< / C o l u m n H e a d e r >
2017-06-03 16:39:38 -07:00
2022-10-08 21:08:37 -07:00
< DismissableBanner id = 'community_timeline' >
< FormattedMessage id = 'dismissable_banner.community_timeline' defaultMessage = 'These are the most recent public posts from people whose accounts are hosted by {domain}.' values = { { domain } } / >
< / D i s m i s s a b l e B a n n e r >
2017-06-03 16:39:38 -07:00
< StatusListContainer
2017-06-05 06:20:46 -07:00
trackScroll = { ! pinned }
2017-06-03 16:39:38 -07:00
scrollKey = { ` community_timeline- ${ columnId } ` }
2018-05-27 11:55:11 -07:00
timelineId = { ` community ${ onlyMedia ? ':media' : '' } ` }
2018-05-27 10:10:37 -07:00
onLoadMore = { this . handleLoadMore }
2017-06-03 16:39:38 -07:00
emptyMessage = { < FormattedMessage id = 'empty_column.community' defaultMessage = 'The local timeline is empty. Write something publicly to get the ball rolling!' / > }
2019-07-19 00:25:22 -07:00
bindToDocument = { ! multiColumn }
2022-09-02 02:57:06 -07:00
regex = { this . props . regex }
2017-06-03 16:39:38 -07:00
/ >
2022-09-28 19:39:33 -07:00
< Helmet >
2022-10-08 21:08:37 -07:00
< title > { intl . formatMessage ( messages . title ) } < / t i t l e >
2022-10-20 05:35:29 -07:00
< meta name = 'robots' content = 'noindex' / >
2022-09-28 19:39:33 -07:00
< / H e l m e t >
2017-02-19 11:25:54 -08:00
< / C o l u m n >
) ;
2017-04-21 11:05:35 -07:00
}
2017-02-19 11:25:54 -08:00
2017-04-21 11:05:35 -07:00
}