@ -11,8 +11,14 @@ import RelativeTimestamp from 'mastodon/components/relative_timestamp';
import IconButton from 'mastodon/components/icon_button' ;
import { FormattedMessage , injectIntl , defineMessages } from 'react-intl' ;
import { autoPlayGif , me , unfollowModal } from 'mastodon/initial_state' ;
import { shortNumberFormat } from 'mastodon/utils/numbers' ;
import { followAccount , unfollowAccount , blockAccount , unblockAccount , unmuteAccount } from 'mastodon/actions/accounts' ;
import ShortNumber from 'mastodon/components/short_number' ;
import {
followAccount ,
unfollowAccount ,
blockAccount ,
unblockAccount ,
unmuteAccount ,
} from 'mastodon/actions/accounts' ;
import { openModal } from 'mastodon/actions/modal' ;
import { initMuteModal } from 'mastodon/actions/mutes' ;
@ -22,7 +28,10 @@ const messages = defineMessages({
requested : { id : 'account.requested' , defaultMessage : 'Awaiting approval' } ,
unblock : { id : 'account.unblock' , defaultMessage : 'Unblock @{name}' } ,
unmute : { id : 'account.unmute' , defaultMessage : 'Unmute @{name}' } ,
unfollowConfirm : { id : 'confirmations.unfollow.confirm' , defaultMessage : 'Unfollow' } ,
unfollowConfirm : {
id : 'confirmations.unfollow.confirm' ,
defaultMessage : 'Unfollow' ,
} ,
} ) ;
const makeMapStateToProps = ( ) => {
@ -36,15 +45,25 @@ const makeMapStateToProps = () => {
} ;
const mapDispatchToProps = ( dispatch , { intl } ) => ( {
onFollow ( account ) {
if ( account . getIn ( [ 'relationship' , 'following' ] ) || account . getIn ( [ 'relationship' , 'requested' ] ) ) {
onFollow ( account ) {
if (
account . getIn ( [ 'relationship' , 'following' ] ) ||
account . getIn ( [ 'relationship' , 'requested' ] )
) {
if ( unfollowModal ) {
dispatch ( openModal ( 'CONFIRM' , {
message : < FormattedMessage id = 'confirmations.unfollow.message' defaultMessage = 'Are you sure you want to unfollow {name}?' values = { { name : < strong > @ { account . get ( 'acct' ) } < /strong> }} / > ,
confirm : intl . formatMessage ( messages . unfollowConfirm ) ,
onConfirm : ( ) => dispatch ( unfollowAccount ( account . get ( 'id' ) ) ) ,
} ) ) ;
dispatch (
openModal ( 'CONFIRM' , {
message : (
< FormattedMessage
id = 'confirmations.unfollow.message'
defaultMessage = 'Are you sure you want to unfollow {name}?'
values = { { name : < strong > @ { account . get ( 'acct' ) } < / s t r o n g > } }
/ >
) ,
confirm : intl . formatMessage ( messages . unfollowConfirm ) ,
onConfirm : ( ) => dispatch ( unfollowAccount ( account . get ( 'id' ) ) ) ,
} ) ,
) ;
} else {
dispatch ( unfollowAccount ( account . get ( 'id' ) ) ) ;
}
@ -53,7 +72,7 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
}
} ,
onBlock ( account ) {
onBlock ( account ) {
if ( account . getIn ( [ 'relationship' , 'blocking' ] ) ) {
dispatch ( unblockAccount ( account . get ( 'id' ) ) ) ;
} else {
@ -61,17 +80,17 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
}
} ,
onMute ( account ) {
onMute ( account ) {
if ( account . getIn ( [ 'relationship' , 'muting' ] ) ) {
dispatch ( unmuteAccount ( account . get ( 'id' ) ) ) ;
} else {
dispatch ( initMuteModal ( account ) ) ;
}
} ,
} ) ;
export default @ injectIntl
export default
@ injectIntl
@ connect ( makeMapStateToProps , mapDispatchToProps )
class AccountCard extends ImmutablePureComponent {
@ -83,7 +102,7 @@ class AccountCard extends ImmutablePureComponent {
onMute : PropTypes . func . isRequired ,
} ;
_updateEmojis ( ) {
_updateEmojis ( ) {
const node = this . node ;
if ( ! node || autoPlayGif ) {
@ -104,68 +123,113 @@ class AccountCard extends ImmutablePureComponent {
}
}
componentDidMount ( ) {
componentDidMount ( ) {
this . _updateEmojis ( ) ;
}
componentDidUpdate ( ) {
componentDidUpdate ( ) {
this . _updateEmojis ( ) ;
}
handleEmojiMouseEnter = ( { target } ) => {
target . src = target . getAttribute ( 'data-original' ) ;
}
} ;
handleEmojiMouseLeave = ( { target } ) => {
target . src = target . getAttribute ( 'data-static' ) ;
}
} ;
handleFollow = ( ) => {
this . props . onFollow ( this . props . account ) ;
}
} ;
handleBlock = ( ) => {
this . props . onBlock ( this . props . account ) ;
}
} ;
handleMute = ( ) => {
this . props . onMute ( this . props . account ) ;
}
} ;
setRef = ( c ) => {
this . node = c ;
}
} ;
render ( ) {
render ( ) {
const { account , intl } = this . props ;
let buttons ;
if ( account . get ( 'id' ) !== me && account . get ( 'relationship' , null ) !== null ) {
if (
account . get ( 'id' ) !== me &&
account . get ( 'relationship' , null ) !== null
) {
const following = account . getIn ( [ 'relationship' , 'following' ] ) ;
const requested = account . getIn ( [ 'relationship' , 'requested' ] ) ;
const blocking = account . getIn ( [ 'relationship' , 'blocking' ] ) ;
const muting = account . getIn ( [ 'relationship' , 'muting' ] ) ;
const blocking = account . getIn ( [ 'relationship' , 'blocking' ] ) ;
const muting = account . getIn ( [ 'relationship' , 'muting' ] ) ;
if ( requested ) {
buttons = < IconButton disabled icon = 'hourglass' title = { intl . formatMessage ( messages . requested ) } / > ;
buttons = (
< IconButton
disabled
icon = 'hourglass'
title = { intl . formatMessage ( messages . requested ) }
/ >
) ;
} else if ( blocking ) {
buttons = < IconButton active icon = 'unlock' title = { intl . formatMessage ( messages . unblock , { name : account . get ( 'username' ) } ) } onClick = { this . handleBlock } / > ;
buttons = (
< IconButton
active
icon = 'unlock'
title = { intl . formatMessage ( messages . unblock , {
name : account . get ( 'username' ) ,
} ) }
onClick = { this . handleBlock }
/ >
) ;
} else if ( muting ) {
buttons = < IconButton active icon = 'volume-up' title = { intl . formatMessage ( messages . unmute , { name : account . get ( 'username' ) } ) } onClick = { this . handleMute } / > ;
buttons = (
< IconButton
active
icon = 'volume-up'
title = { intl . formatMessage ( messages . unmute , {
name : account . get ( 'username' ) ,
} ) }
onClick = { this . handleMute }
/ >
) ;
} else if ( ! account . get ( 'moved' ) || following ) {
buttons = < IconButton icon = { following ? 'user-times' : 'user-plus' } title = { intl . formatMessage ( following ? messages . unfollow : messages . follow ) } onClick = { this . handleFollow } active = { following } / > ;
buttons = (
< IconButton
icon = { following ? 'user-times' : 'user-plus' }
title = { intl . formatMessage (
following ? messages . unfollow : messages . follow ,
) }
onClick = { this . handleFollow }
active = { following }
/ >
) ;
}
}
return (
< div className = 'directory__card' >
< div className = 'directory__card__img' >
< img src = { autoPlayGif ? account . get ( 'header' ) : account . get ( 'header_static' ) } alt = '' / >
< img
src = {
autoPlayGif ? account . get ( 'header' ) : account . get ( 'header_static' )
}
alt = ''
/ >
< / d i v >
< div className = 'directory__card__bar' >
< Permalink className = 'directory__card__bar__name' href = { account . get ( 'url' ) } to = { ` /accounts/ ${ account . get ( 'id' ) } ` } >
< Permalink
className = 'directory__card__bar__name'
href = { account . get ( 'url' ) }
to = { ` /accounts/ ${ account . get ( 'id' ) } ` }
>
< Avatar account = { account } size = { 48 } / >
< DisplayName account = { account } / >
< / P e r m a l i n k >
@ -176,13 +240,44 @@ class AccountCard extends ImmutablePureComponent {
< / d i v >
< div className = 'directory__card__extra' ref = { this . setRef } >
< div className = 'account__header__content' dangerouslySetInnerHTML = { { __html : account . get ( 'note_emojified' ) } } / >
< div
className = 'account__header__content'
dangerouslySetInnerHTML = { { __html : account . get ( 'note_emojified' ) } }
/ >
< / d i v >
< div className = 'directory__card__extra' >
< div className = 'accounts-table__count' > { shortNumberFormat ( account . get ( 'statuses_count' ) ) } < small > < FormattedMessage id = 'account.posts' defaultMessage = 'Toots' / > < / s m a l l > < / d i v >
< div className = 'accounts-table__count' > { shortNumberFormat ( account . get ( 'followers_count' ) ) } < small > < FormattedMessage id = 'account.followers' defaultMessage = 'Followers' / > < / s m a l l > < / d i v >
< div className = 'accounts-table__count' > { account . get ( 'last_status_at' ) === null ? < FormattedMessage id = 'account.never_active' defaultMessage = 'Never' / > : < RelativeTimestamp timestamp = { account . get ( 'last_status_at' ) } / > } < small > < FormattedMessage id = 'account.last_status' defaultMessage = 'Last active' / > < / s m a l l > < / d i v >
< div className = 'accounts-table__count' >
< ShortNumber value = { account . get ( 'statuses_count' ) } / >
< small >
< FormattedMessage id = 'account.posts' defaultMessage = 'Toots' / >
< / s m a l l >
< / d i v >
< div className = 'accounts-table__count' >
< ShortNumber value = { account . get ( 'followers_count' ) } / > { ' ' }
< small >
< FormattedMessage
id = 'account.followers'
defaultMessage = 'Followers'
/ >
< / s m a l l >
< / d i v >
< div className = 'accounts-table__count' >
{ account . get ( 'last_status_at' ) === null ? (
< FormattedMessage
id = 'account.never_active'
defaultMessage = 'Never'
/ >
) : (
< RelativeTimestamp timestamp = { account . get ( 'last_status_at' ) } / >
) } { ' ' }
< small >
< FormattedMessage
id = 'account.last_status'
defaultMessage = 'Last active'
/ >
< / s m a l l >
< / d i v >
< / d i v >
< / d i v >
) ;