2019-08-07 06:02:36 +01:00
import { injectIntl , FormattedMessage } from 'react-intl' ;
import ImmutablePureComponent from 'react-immutable-pure-component' ;
import { HotKeys } from 'react-hotkeys' ;
2019-07-02 08:10:25 +01:00
import ImmutablePropTypes from 'react-immutable-proptypes' ;
2019-08-09 17:06:27 +01:00
import StatusContainer from '../../../../containers/status_container' ;
import AccountContainer from '../../../../containers/account_container' ;
import Permalink from '../../../../components/permalink' ;
import Icon from '../../../../components/icon' ;
import './notification.scss' ;
2019-07-02 08:10:25 +01:00
const notificationForScreenReader = ( intl , message , timestamp ) => {
const output = [ message ] ;
output . push ( intl . formatDate ( timestamp , { hour : '2-digit' , minute : '2-digit' , month : 'short' , day : 'numeric' } ) ) ;
return output . join ( ', ' ) ;
} ;
export default @ injectIntl
class Notification extends ImmutablePureComponent {
static contextTypes = {
router : PropTypes . object ,
} ;
static propTypes = {
notification : ImmutablePropTypes . map . isRequired ,
hidden : PropTypes . bool ,
onMoveUp : PropTypes . func . isRequired ,
onMoveDown : PropTypes . func . isRequired ,
onMention : PropTypes . func . isRequired ,
onFavourite : PropTypes . func . isRequired ,
onReblog : PropTypes . func . isRequired ,
onToggleHidden : PropTypes . func . isRequired ,
status : ImmutablePropTypes . map ,
intl : PropTypes . object . isRequired ,
getScrollPosition : PropTypes . func ,
updateScrollBottom : PropTypes . func ,
cacheMediaWidth : PropTypes . func ,
cachedMediaWidth : PropTypes . number ,
} ;
handleMoveUp = ( ) => {
const { notification , onMoveUp } = this . props ;
onMoveUp ( notification . get ( 'id' ) ) ;
}
handleMoveDown = ( ) => {
const { notification , onMoveDown } = this . props ;
onMoveDown ( notification . get ( 'id' ) ) ;
}
handleOpen = ( ) => {
const { notification } = this . props ;
if ( notification . get ( 'status' ) ) {
this . context . router . history . push ( ` / ${ notification . getIn ( [ 'account' , 'acct' ] ) } /posts/ ${ notification . get ( 'status' ) } ` ) ;
} else {
this . handleOpenProfile ( ) ;
}
}
handleOpenProfile = ( ) => {
const { notification } = this . props ;
this . context . router . history . push ( ` / ${ notification . getIn ( [ 'account' , 'acct' ] ) } ` ) ;
}
handleMention = e => {
e . preventDefault ( ) ;
const { notification , onMention } = this . props ;
onMention ( notification . get ( 'account' ) , this . context . router . history ) ;
}
handleHotkeyFavourite = ( ) => {
const { status } = this . props ;
if ( status ) this . props . onFavourite ( status ) ;
}
handleHotkeyBoost = e => {
const { status } = this . props ;
if ( status ) this . props . onReblog ( status , e ) ;
}
handleHotkeyToggleHidden = ( ) => {
const { status } = this . props ;
if ( status ) this . props . onToggleHidden ( status ) ;
}
getHandlers ( ) {
return {
reply : this . handleMention ,
favourite : this . handleHotkeyFavourite ,
boost : this . handleHotkeyBoost ,
mention : this . handleMention ,
open : this . handleOpen ,
openProfile : this . handleOpenProfile ,
moveUp : this . handleMoveUp ,
moveDown : this . handleMoveDown ,
toggleHidden : this . handleHotkeyToggleHidden ,
} ;
}
renderFollow ( notification , account , link ) {
const { intl } = this . props ;
return (
< HotKeys handlers = { this . getHandlers ( ) } >
2019-08-09 17:06:27 +01:00
< div className = 'notification notification--follow focusable' tabIndex = '0' aria - label = { notificationForScreenReader ( intl , intl . formatMessage ( { id : 'notification.follow' , defaultMessage : '{name} followed you' } , { name : account . get ( 'acct' ) } ) , notification . get ( 'created_at' ) ) } >
2019-07-02 08:10:25 +01:00
< div className = 'notification__message' >
< div className = 'notification__favourite-icon-wrapper' >
< Icon id = 'user-plus' fixedWidth / >
< / d i v >
< span title = { notification . get ( 'created_at' ) } >
< FormattedMessage id = 'notification.follow' defaultMessage = '{name} followed you' values = { { name : link } } / >
< / s p a n >
< / d i v >
< AccountContainer id = { account . get ( 'id' ) } withNote = { false } hidden = { this . props . hidden } / >
< / d i v >
< / H o t K e y s >
) ;
}
renderMention ( notification ) {
return (
< StatusContainer
id = { notification . get ( 'status' ) }
withDismiss
hidden = { this . props . hidden }
onMoveDown = { this . handleMoveDown }
onMoveUp = { this . handleMoveUp }
contextType = 'notifications'
getScrollPosition = { this . props . getScrollPosition }
updateScrollBottom = { this . props . updateScrollBottom }
cachedMediaWidth = { this . props . cachedMediaWidth }
cacheMediaWidth = { this . props . cacheMediaWidth }
/ >
) ;
}
renderFavourite ( notification , link ) {
const { intl } = this . props ;
return (
< HotKeys handlers = { this . getHandlers ( ) } >
2019-08-09 17:06:27 +01:00
< div className = 'notification notification--favourite focusable' tabIndex = '0' aria - label = { notificationForScreenReader ( intl , intl . formatMessage ( { id : 'notification.favourite' , defaultMessage : '{name} favorited your status' } , { name : notification . getIn ( [ 'account' , 'acct' ] ) } ) , notification . get ( 'created_at' ) ) } >
2019-07-02 08:10:25 +01:00
< div className = 'notification__message' >
< div className = 'notification__favourite-icon-wrapper' >
< Icon id = 'star' className = 'star-icon' fixedWidth / >
< / d i v >
< span title = { notification . get ( 'created_at' ) } >
< FormattedMessage id = 'notification.favourite' defaultMessage = '{name} favorited your status' values = { { name : link } } / >
< / s p a n >
< / d i v >
< StatusContainer
id = { notification . get ( 'status' ) }
account = { notification . get ( 'account' ) }
muted
withDismiss
hidden = { ! ! this . props . hidden }
getScrollPosition = { this . props . getScrollPosition }
updateScrollBottom = { this . props . updateScrollBottom }
cachedMediaWidth = { this . props . cachedMediaWidth }
cacheMediaWidth = { this . props . cacheMediaWidth }
/ >
< / d i v >
< / H o t K e y s >
) ;
}
renderReblog ( notification , link ) {
const { intl } = this . props ;
return (
< HotKeys handlers = { this . getHandlers ( ) } >
2019-08-09 17:06:27 +01:00
< div className = 'notification notification--reblog focusable' tabIndex = '0' aria - label = { notificationForScreenReader ( intl , intl . formatMessage ( { id : 'notification.reblog' , defaultMessage : '{name} reposted your status' } , { name : notification . getIn ( [ 'account' , 'acct' ] ) } ) , notification . get ( 'created_at' ) ) } >
2019-07-02 08:10:25 +01:00
< div className = 'notification__message' >
< div className = 'notification__favourite-icon-wrapper' >
< Icon id = 'retweet' fixedWidth / >
< / d i v >
< span title = { notification . get ( 'created_at' ) } >
< FormattedMessage id = 'notification.reblog' defaultMessage = '{name} reposted your status' values = { { name : link } } / >
< / s p a n >
< / d i v >
< StatusContainer
id = { notification . get ( 'status' ) }
account = { notification . get ( 'account' ) }
muted
withDismiss
hidden = { this . props . hidden }
getScrollPosition = { this . props . getScrollPosition }
updateScrollBottom = { this . props . updateScrollBottom }
cachedMediaWidth = { this . props . cachedMediaWidth }
cacheMediaWidth = { this . props . cacheMediaWidth }
/ >
< / d i v >
< / H o t K e y s >
) ;
}
renderPoll ( notification ) {
const { intl } = this . props ;
return (
< HotKeys handlers = { this . getHandlers ( ) } >
2019-08-09 17:06:27 +01:00
< div className = 'notification notification--poll focusable' tabIndex = '0' aria - label = { notificationForScreenReader ( intl , intl . formatMessage ( { id : 'notification.poll' , defaultMessage : 'A poll you have voted in has ended' } ) , notification . get ( 'created_at' ) ) } >
2019-07-02 08:10:25 +01:00
< div className = 'notification__message' >
< div className = 'notification__favourite-icon-wrapper' >
< Icon id = 'tasks' fixedWidth / >
< / d i v >
< span title = { notification . get ( 'created_at' ) } >
< FormattedMessage id = 'notification.poll' defaultMessage = 'A poll you have voted in has ended' / >
< / s p a n >
< / d i v >
< StatusContainer
id = { notification . get ( 'status' ) }
account = { notification . get ( 'account' ) }
muted
withDismiss
hidden = { this . props . hidden }
getScrollPosition = { this . props . getScrollPosition }
updateScrollBottom = { this . props . updateScrollBottom }
cachedMediaWidth = { this . props . cachedMediaWidth }
cacheMediaWidth = { this . props . cacheMediaWidth }
/ >
< / d i v >
< / H o t K e y s >
) ;
}
render ( ) {
const { notification } = this . props ;
const account = notification . get ( 'account' ) ;
const displayNameHtml = { _ _html : account . get ( 'display_name_html' ) } ;
const link = < bdi > < Permalink className = 'notification__display-name' href = { ` / ${ account . get ( 'acct' ) } ` } title = { account . get ( 'acct' ) } to = { ` / ${ account . get ( 'acct' ) } ` } dangerouslySetInnerHTML = { displayNameHtml } / > < / b d i > ;
switch ( notification . get ( 'type' ) ) {
case 'follow' :
return this . renderFollow ( notification , account , link ) ;
case 'mention' :
return this . renderMention ( notification ) ;
case 'favourite' :
return this . renderFavourite ( notification , link ) ;
case 'reblog' :
return this . renderReblog ( notification , link ) ;
case 'poll' :
return this . renderPoll ( notification ) ;
}
return null ;
}
}