@ -9,15 +9,23 @@ import { addColumn, removeColumn, moveColumn } from '../../actions/columns';
import { defineMessages , injectIntl , FormattedMessage } from 'react-intl' ;
import { defineMessages , injectIntl , FormattedMessage } from 'react-intl' ;
import ColumnSettingsContainer from './containers/column_settings_container' ;
import ColumnSettingsContainer from './containers/column_settings_container' ;
import { Link } from 'react-router-dom' ;
import { Link } from 'react-router-dom' ;
import { fetchAnnouncements , toggleShowAnnouncements } from 'mastodon/actions/announcements' ;
import AnnouncementsContainer from 'mastodon/features/getting_started/containers/announcements_container' ;
import AnnouncementsContainer from 'mastodon/features/getting_started/containers/announcements_container' ;
import classNames from 'classnames' ;
import IconWithBadge from 'mastodon/components/icon_with_badge' ;
const messages = defineMessages ( {
const messages = defineMessages ( {
title : { id : 'column.home' , defaultMessage : 'Home' } ,
title : { id : 'column.home' , defaultMessage : 'Home' } ,
show_announcements : { id : 'home.show_announcements' , defaultMessage : 'Show announcements' } ,
hide_announcements : { id : 'home.hide_announcements' , defaultMessage : 'Hide announcements' } ,
} ) ;
} ) ;
const mapStateToProps = state => ( {
const mapStateToProps = state => ( {
hasUnread : state . getIn ( [ 'timelines' , 'home' , 'unread' ] ) > 0 ,
hasUnread : state . getIn ( [ 'timelines' , 'home' , 'unread' ] ) > 0 ,
isPartial : state . getIn ( [ 'timelines' , 'home' , 'isPartial' ] ) ,
isPartial : state . getIn ( [ 'timelines' , 'home' , 'isPartial' ] ) ,
hasAnnouncements : ! state . getIn ( [ 'announcements' , 'items' ] ) . isEmpty ( ) ,
unreadAnnouncements : state . getIn ( [ 'announcements' , 'unread' ] ) . size ,
showAnnouncements : state . getIn ( [ 'announcements' , 'show' ] ) ,
} ) ;
} ) ;
export default @ connect ( mapStateToProps )
export default @ connect ( mapStateToProps )
@ -32,6 +40,9 @@ class HomeTimeline extends React.PureComponent {
isPartial : PropTypes . bool ,
isPartial : PropTypes . bool ,
columnId : PropTypes . string ,
columnId : PropTypes . string ,
multiColumn : PropTypes . bool ,
multiColumn : PropTypes . bool ,
hasAnnouncements : PropTypes . bool ,
unreadAnnouncements : PropTypes . number ,
showAnnouncements : PropTypes . bool ,
} ;
} ;
handlePin = ( ) => {
handlePin = ( ) => {
@ -62,6 +73,7 @@ class HomeTimeline extends React.PureComponent {
}
}
componentDidMount ( ) {
componentDidMount ( ) {
this . props . dispatch ( fetchAnnouncements ( ) ) ;
this . _checkIfReloadNeeded ( false , this . props . isPartial ) ;
this . _checkIfReloadNeeded ( false , this . props . isPartial ) ;
}
}
@ -94,10 +106,31 @@ class HomeTimeline extends React.PureComponent {
}
}
}
}
handleToggleAnnouncementsClick = ( e ) => {
e . stopPropagation ( ) ;
this . props . dispatch ( toggleShowAnnouncements ( ) ) ;
}
render ( ) {
render ( ) {
const { intl , shouldUpdateScroll , hasUnread , columnId , multiColumn } = this . props ;
const { intl , shouldUpdateScroll , hasUnread , columnId , multiColumn , hasAnnouncements , unreadAnnouncements , showAnnouncements } = this . props ;
const pinned = ! ! columnId ;
const pinned = ! ! columnId ;
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 ) }
aria - pressed = { showAnnouncements ? 'true' : 'false' }
onClick = { this . handleToggleAnnouncementsClick }
>
< IconWithBadge id = 'bullhorn' count = { unreadAnnouncements } / >
< / b u t t o n >
) ;
}
return (
return (
< Column bindToDocument = { ! multiColumn } ref = { this . setRef } label = { intl . formatMessage ( messages . title ) } >
< Column bindToDocument = { ! multiColumn } ref = { this . setRef } label = { intl . formatMessage ( messages . title ) } >
< ColumnHeader
< ColumnHeader
@ -109,13 +142,14 @@ class HomeTimeline extends React.PureComponent {
onClick = { this . handleHeaderClick }
onClick = { this . handleHeaderClick }
pinned = { pinned }
pinned = { pinned }
multiColumn = { multiColumn }
multiColumn = { multiColumn }
extraButton = { announcementsButton }
>
>
< ColumnSettingsContainer / >
< ColumnSettingsContainer / >
< / C o l u m n H e a d e r >
< / C o l u m n H e a d e r >
{ hasAnnouncements && showAnnouncements && < AnnouncementsContainer / > }
< StatusListContainer
< StatusListContainer
prepend = { < AnnouncementsContainer / > }
alwaysPrepend
trackScroll = { ! pinned }
trackScroll = { ! pinned }
scrollKey = { ` home_timeline- ${ columnId } ` }
scrollKey = { ` home_timeline- ${ columnId } ` }
onLoadMore = { this . handleLoadMore }
onLoadMore = { this . handleLoadMore }