2017-12-09 08:26:22 -08:00
import React from 'react' ;
import ImmutablePropTypes from 'react-immutable-proptypes' ;
import PropTypes from 'prop-types' ;
import { defineMessages , injectIntl , FormattedMessage } from 'react-intl' ;
import Button from 'flavours/glitch/components/button' ;
import StatusContent from 'flavours/glitch/components/status_content' ;
import Avatar from 'flavours/glitch/components/avatar' ;
import RelativeTimestamp from 'flavours/glitch/components/relative_timestamp' ;
import DisplayName from 'flavours/glitch/components/display_name' ;
2020-11-12 14:25:26 -08:00
import AttachmentList from 'flavours/glitch/components/attachment_list' ;
2019-09-09 07:41:41 -07:00
import Icon from 'flavours/glitch/components/icon' ;
2017-12-09 08:26:22 -08:00
import ImmutablePureComponent from 'react-immutable-pure-component' ;
2020-11-12 14:25:26 -08:00
import classNames from 'classnames' ;
2022-05-03 02:04:09 -07:00
import VisibilityIcon from 'flavours/glitch/components/status_visibility_icon' ;
2017-12-09 08:26:22 -08:00
const messages = defineMessages ( {
2017-12-09 10:06:00 -08:00
favourite : { id : 'status.favourite' , defaultMessage : 'Favourite' } ,
2017-12-09 08:26:22 -08:00
} ) ;
2019-09-09 06:16:08 -07:00
class FavouriteModal extends ImmutablePureComponent {
2017-12-09 08:26:22 -08:00
static contextTypes = {
router : PropTypes . object ,
} ;
static propTypes = {
status : ImmutablePropTypes . map . isRequired ,
2017-12-09 10:06:00 -08:00
onFavourite : PropTypes . func . isRequired ,
2017-12-09 08:26:22 -08:00
onClose : PropTypes . func . isRequired ,
intl : PropTypes . object . isRequired ,
} ;
componentDidMount ( ) {
this . button . focus ( ) ;
}
handleFavourite = ( ) => {
this . props . onFavourite ( this . props . status ) ;
this . props . onClose ( ) ;
2023-02-03 11:52:07 -08:00
} ;
2017-12-09 08:26:22 -08:00
handleAccountClick = ( e ) => {
if ( e . button === 0 ) {
e . preventDefault ( ) ;
this . props . onClose ( ) ;
2023-02-03 11:52:07 -08:00
let state = { ... this . context . router . history . location . state } ;
2019-04-15 13:23:05 -07:00
state . mastodonBackSteps = ( state . mastodonBackSteps || 0 ) + 1 ;
2021-09-25 20:46:13 -07:00
this . context . router . history . push ( ` /@ ${ this . props . status . getIn ( [ 'account' , 'acct' ] ) } ` , state ) ;
2017-12-09 08:26:22 -08:00
}
2023-02-03 11:52:07 -08:00
} ;
2017-12-09 08:26:22 -08:00
setRef = ( c ) => {
this . button = c ;
2023-02-03 11:52:07 -08:00
} ;
2017-12-09 08:26:22 -08:00
render ( ) {
const { status , intl } = this . props ;
return (
2022-11-07 01:34:18 -08:00
< div className = 'modal-root__modal boost-modal' >
< div className = 'boost-modal__container' >
2020-11-12 14:25:26 -08:00
< div className = { classNames ( 'status' , ` status- ${ status . get ( 'visibility' ) } ` , 'light' ) } >
2022-11-07 01:34:18 -08:00
< div className = 'boost-modal__status-header' >
< div className = 'boost-modal__status-time' >
2020-11-12 14:25:26 -08:00
< a href = { status . get ( 'url' ) } className = 'status__relative-time' target = '_blank' rel = 'noopener noreferrer' >
2022-05-03 02:04:09 -07:00
< VisibilityIcon visibility = { status . get ( 'visibility' ) } / >
2020-11-12 14:25:26 -08:00
< RelativeTimestamp timestamp = { status . get ( 'created_at' ) } / >
< / a >
2017-12-09 08:26:22 -08:00
< / div >
< a onClick = { this . handleAccountClick } href = { status . getIn ( [ 'account' , 'url' ] ) } className = 'status__display-name' >
< div className = 'status__avatar' >
< Avatar account = { status . get ( 'account' ) } size = { 48 } / >
< / div >
< DisplayName account = { status . get ( 'account' ) } / >
2020-11-12 14:25:26 -08:00
2017-12-09 08:26:22 -08:00
< / a >
< / div >
< StatusContent status = { status } / >
2020-11-12 14:25:26 -08:00
{ status . get ( 'media_attachments' ) . size > 0 && (
< AttachmentList
c ompact
media = { status . get ( 'media_attachments' ) }
/ >
) }
2017-12-09 08:26:22 -08:00
< / div >
< / div >
2022-11-07 01:34:18 -08:00
< div className = 'boost-modal__action-bar' >
2019-09-09 07:41:41 -07:00
< div > < FormattedMessage id = 'favourite_modal.combo' defaultMessage = 'You can press {combo} to skip this next time' values = { { combo : < span > Shift + < Icon id = 'star' / > < / span > } } / > < / div >
2017-12-09 10:06:00 -08:00
< Button text = { intl . formatMessage ( messages . favourite ) } onClick = { this . handleFavourite } ref = { this . setRef } / >
2017-12-09 08:26:22 -08:00
< / div >
< / div >
) ;
}
}
2023-03-24 15:15:25 -07:00
export default injectIntl ( FavouriteModal ) ;