2017-05-02 17:04:16 -07:00
import React from 'react' ;
2017-02-22 17:14:35 -08:00
import { connect } from 'react-redux' ;
2018-05-27 10:10:37 -07:00
import { expandHomeTimeline } from 'flavours/glitch/actions/timelines' ;
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' ;
import { addColumn , removeColumn , moveColumn } from 'flavours/glitch/actions/columns' ;
2017-02-17 17:37:59 -08:00
import { defineMessages , injectIntl , FormattedMessage } from 'react-intl' ;
2017-01-10 08:25:10 -08:00
import ColumnSettingsContainer from './containers/column_settings_container' ;
2017-10-07 17:55:58 -07:00
import { Link } from 'react-router-dom' ;
2020-01-25 07:35:33 -08:00
import { fetchAnnouncements , toggleShowAnnouncements } from 'flavours/glitch/actions/announcements' ;
2020-01-23 13:00:13 -08:00
import AnnouncementsContainer from 'flavours/glitch/features/getting_started/containers/announcements_container' ;
2020-01-25 07:35:33 -08:00
import classNames from 'classnames' ;
import IconWithBadge from 'flavours/glitch/components/icon_with_badge' ;
2022-10-04 11:13:23 -07:00
import NotSignedInIndicator from 'flavours/glitch/components/not_signed_in_indicator' ;
import { Helmet } from 'react-helmet' ;
2016-11-18 06:36:16 -08:00
const messages = defineMessages ( {
2017-05-20 08:31:47 -07:00
title : { id : 'column.home' , defaultMessage : 'Home' } ,
2020-01-25 07:35:33 -08:00
show _announcements : { id : 'home.show_announcements' , defaultMessage : 'Show announcements' } ,
hide _announcements : { id : 'home.hide_announcements' , defaultMessage : 'Hide announcements' } ,
2022-10-20 05:35:29 -07:00
} ) ;
2016-10-12 04:17:17 -07:00
2017-02-22 17:14:35 -08:00
const mapStateToProps = state => ( {
2017-05-04 14:41:34 -07:00
hasUnread : state . getIn ( [ 'timelines' , 'home' , 'unread' ] ) > 0 ,
2019-03-01 02:11:35 -08:00
isPartial : state . getIn ( [ 'timelines' , 'home' , 'isPartial' ] ) ,
2020-01-25 07:35:33 -08:00
hasAnnouncements : ! state . getIn ( [ 'announcements' , 'items' ] ) . isEmpty ( ) ,
2020-02-02 16:53:09 -08:00
unreadAnnouncements : state . getIn ( [ 'announcements' , 'items' ] ) . count ( item => ! item . get ( 'read' ) ) ,
2020-01-25 07:35:33 -08:00
showAnnouncements : state . getIn ( [ 'announcements' , 'show' ] ) ,
2022-09-02 02:57:06 -07:00
regex : state . getIn ( [ 'settings' , 'home' , 'regex' , 'body' ] ) ,
2017-02-22 17:14:35 -08:00
} ) ;
2019-09-09 06:16:08 -07:00
class HomeTimeline extends React . PureComponent {
2016-10-12 04:17:17 -07:00
2022-10-04 11:13:23 -07:00
static contextTypes = {
identity : PropTypes . object ,
} ;
2017-05-12 05:44:10 -07:00
static propTypes = {
2017-06-03 16:39:38 -07:00
dispatch : PropTypes . func . isRequired ,
2017-05-12 05:44:10 -07:00
intl : PropTypes . object . isRequired ,
hasUnread : PropTypes . bool ,
2018-01-18 08:25:37 -08:00
isPartial : PropTypes . bool ,
2017-06-03 16:39:38 -07:00
columnId : PropTypes . string ,
multiColumn : PropTypes . bool ,
2020-01-25 07:35:33 -08:00
hasAnnouncements : PropTypes . bool ,
unreadAnnouncements : PropTypes . number ,
showAnnouncements : 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 = ( ) => {
const { columnId , dispatch } = this . props ;
if ( columnId ) {
dispatch ( removeColumn ( columnId ) ) ;
} else {
dispatch ( addColumn ( 'HOME' , { } ) ) ;
}
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
setRef = c => {
this . column = c ;
2023-02-03 11:52:07 -08:00
} ;
2017-06-03 16:39:38 -07:00
2018-05-27 10:10:37 -07:00
handleLoadMore = maxId => {
this . props . dispatch ( expandHomeTimeline ( { maxId } ) ) ;
2023-02-03 11:52:07 -08:00
} ;
2017-06-11 08:07:35 -07:00
2018-01-18 08:25:37 -08:00
componentDidMount ( ) {
2021-05-07 05:33:57 -07:00
setTimeout ( ( ) => this . props . dispatch ( fetchAnnouncements ( ) ) , 700 ) ;
2018-01-18 08:25:37 -08:00
this . _checkIfReloadNeeded ( false , this . props . isPartial ) ;
}
componentDidUpdate ( prevProps ) {
this . _checkIfReloadNeeded ( prevProps . isPartial , this . props . isPartial ) ;
}
componentWillUnmount ( ) {
this . _stopPolling ( ) ;
}
_checkIfReloadNeeded ( wasPartial , isPartial ) {
const { dispatch } = this . props ;
if ( wasPartial === isPartial ) {
return ;
} else if ( ! wasPartial && isPartial ) {
this . polling = setInterval ( ( ) => {
2018-05-27 10:10:37 -07:00
dispatch ( expandHomeTimeline ( ) ) ;
2018-01-18 08:25:37 -08:00
} , 3000 ) ;
} else if ( wasPartial && ! isPartial ) {
this . _stopPolling ( ) ;
}
}
_stopPolling ( ) {
if ( this . polling ) {
clearInterval ( this . polling ) ;
this . polling = null ;
}
}
2020-01-25 07:35:33 -08:00
handleToggleAnnouncementsClick = ( e ) => {
e . stopPropagation ( ) ;
this . props . dispatch ( toggleShowAnnouncements ( ) ) ;
2023-02-03 11:52:07 -08:00
} ;
2020-01-25 07:35:33 -08:00
2016-10-12 04:17:17 -07:00
render ( ) {
2020-01-25 07:35:33 -08:00
const { intl , hasUnread , columnId , multiColumn , hasAnnouncements , unreadAnnouncements , showAnnouncements } = this . props ;
2017-06-03 16:39:38 -07:00
const pinned = ! ! columnId ;
2022-10-04 11:13:23 -07:00
const { signedIn } = this . context . identity ;
2017-05-04 14:41:34 -07:00
2020-01-25 07:35:33 -08:00
let announcementsButton = null ;
if ( hasAnnouncements ) {
announcementsButton = (
< button
className = { classNames ( 'column-header__button' , { 'active' : showAnnouncements } ) }
title = { intl . formatMessage ( showAnnouncements ? messages . hide _announcements : messages . show _announcements ) }
aria - label = { intl . formatMessage ( showAnnouncements ? messages . hide _announcements : messages . show _announcements ) }
onClick = { this . handleToggleAnnouncementsClick }
>
< IconWithBadge id = 'bullhorn' count = { unreadAnnouncements } / >
< / button >
) ;
}
2016-10-12 04:17:17 -07:00
return (
2019-08-01 10:17:17 -07:00
< Column bindToDocument = { ! multiColumn } ref = { this . setRef } name = 'home' label = { intl . formatMessage ( messages . title ) } >
2017-06-03 16:39:38 -07:00
< ColumnHeader
icon = 'home'
active = { hasUnread }
title = { intl . formatMessage ( messages . title ) }
onPin = { this . handlePin }
onMove = { this . handleMove }
onClick = { this . handleHeaderClick }
pinned = { pinned }
multiColumn = { multiColumn }
2020-01-25 07:35:33 -08:00
extraButton = { announcementsButton }
2020-01-25 10:40:36 -08:00
appendContent = { hasAnnouncements && showAnnouncements && < AnnouncementsContainer / > }
2017-06-03 16:39:38 -07:00
>
< ColumnSettingsContainer / >
< / ColumnHeader >
2017-05-04 14:41:34 -07:00
2022-10-04 11:13:23 -07:00
{ signedIn ? (
< StatusListContainer
trackScroll = { ! pinned }
scrollKey = { ` home_timeline- ${ columnId } ` }
onLoadMore = { this . handleLoadMore }
timelineId = 'home'
emptyMessage = { < FormattedMessage id = 'empty_column.home' defaultMessage = 'Your home timeline is empty! Follow more people to fill it up. {suggestions}' values = { { suggestions : < Link to = '/start' > < FormattedMessage id = 'empty_column.home.suggestions' defaultMessage = 'See some suggestions' / > < / Link > } } / > }
bindToDocument = { ! multiColumn }
regex = { this . props . regex }
/ >
) : < NotSignedInIndicator / > }
< Helmet >
2022-10-08 21:08:37 -07:00
< title > { intl . formatMessage ( messages . title ) } < / title >
2022-10-20 05:35:29 -07:00
< meta name = 'robots' content = 'noindex' / >
2022-10-04 11:13:23 -07:00
< / Helmet >
2016-10-12 04:17:17 -07:00
< / Column >
) ;
2017-04-21 11:05:35 -07:00
}
2016-10-12 04:17:17 -07:00
2017-04-21 11:05:35 -07:00
}
2023-03-24 15:15:25 -07:00
export default connect ( mapStateToProps ) ( injectIntl ( HomeTimeline ) ) ;