2018-01-09 14:50:55 +00:00
import React , { Fragment } from 'react' ;
2016-10-27 19:59:56 +00:00
import ImmutablePropTypes from 'react-immutable-proptypes' ;
2017-04-21 18:05:35 +00:00
import PropTypes from 'prop-types' ;
2016-11-20 18:39:18 +00:00
import Avatar from './avatar' ;
import DisplayName from './display_name' ;
2016-12-02 14:05:50 +00:00
import Permalink from './permalink' ;
2016-11-20 18:39:18 +00:00
import IconButton from './icon_button' ;
2016-11-18 14:36:16 +00:00
import { defineMessages , injectIntl } from 'react-intl' ;
2017-05-03 00:04:16 +00:00
import ImmutablePureComponent from 'react-immutable-pure-component' ;
2017-12-04 07:26:40 +00:00
import { me } from 'flavours/glitch/util/initial_state' ;
2016-11-18 14:36:16 +00:00
const messages = defineMessages ( {
2016-12-11 22:13:05 +00:00
follow : { id : 'account.follow' , defaultMessage : 'Follow' } ,
2017-01-16 18:36:32 +00:00
unfollow : { id : 'account.unfollow' , defaultMessage : 'Unfollow' } ,
requested : { id : 'account.requested' , defaultMessage : 'Awaiting approval' } ,
2017-04-27 10:03:28 +00:00
unblock : { id : 'account.unblock' , defaultMessage : 'Unblock @{name}' } ,
2017-05-20 15:31:47 +00:00
unmute : { id : 'account.unmute' , defaultMessage : 'Unmute @{name}' } ,
2017-09-14 03:54:14 +00:00
mute _notifications : { id : 'account.mute_notifications' , defaultMessage : 'You are not currently muting notifications from @{name}. Click to mute notifications' } ,
unmute _notifications : { id : 'account.unmute_notifications' , defaultMessage : 'You are currently muting notifications from @{name}. Click to unmute notifications' } ,
2016-11-18 14:36:16 +00:00
} ) ;
2016-10-27 19:59:56 +00:00
2017-06-23 17:36:54 +00:00
@ injectIntl
export default class Account extends ImmutablePureComponent {
2016-10-27 19:59:56 +00:00
2017-05-12 12:44:10 +00:00
static propTypes = {
account : ImmutablePropTypes . map . isRequired ,
onFollow : PropTypes . func . isRequired ,
onBlock : PropTypes . func . isRequired ,
onMute : PropTypes . func . isRequired ,
2017-12-26 19:25:43 +00:00
onMuteNotifications : PropTypes . func . isRequired ,
2017-05-20 15:31:47 +00:00
intl : PropTypes . object . isRequired ,
2017-08-28 20:23:44 +00:00
hidden : PropTypes . bool ,
2017-12-24 06:16:45 +00:00
small : PropTypes . bool ,
2018-10-22 22:08:39 +00:00
actionIcon : PropTypes . string ,
actionTitle : PropTypes . string ,
onActionClick : PropTypes . func ,
2017-05-12 12:44:10 +00:00
} ;
2017-05-24 15:55:16 +00:00
handleFollow = ( ) => {
2016-10-28 18:05:44 +00:00
this . props . onFollow ( this . props . account ) ;
2017-04-21 18:05:35 +00:00
}
2016-10-28 18:05:44 +00:00
2017-05-24 15:55:16 +00:00
handleBlock = ( ) => {
2017-01-16 18:36:32 +00:00
this . props . onBlock ( this . props . account ) ;
2017-04-21 18:05:35 +00:00
}
2017-01-16 18:36:32 +00:00
2017-05-24 15:55:16 +00:00
handleMute = ( ) => {
2017-04-14 23:23:49 +00:00
this . props . onMute ( this . props . account ) ;
2017-04-21 18:05:35 +00:00
}
2017-04-14 23:23:49 +00:00
2017-11-15 02:56:41 +00:00
handleMuteNotifications = ( ) => {
this . props . onMuteNotifications ( this . props . account , true ) ;
}
handleUnmuteNotifications = ( ) => {
this . props . onMuteNotifications ( this . props . account , false ) ;
}
2018-10-22 22:08:39 +00:00
handleAction = ( ) => {
this . props . onActionClick ( this . props . account ) ;
}
2016-10-27 19:59:56 +00:00
render ( ) {
2017-12-24 06:16:45 +00:00
const {
account ,
hidden ,
intl ,
small ,
2018-10-22 22:08:39 +00:00
onActionClick ,
actionIcon ,
a ctionTitle ,
2017-12-24 06:16:45 +00:00
} = this . props ;
2016-10-27 19:59:56 +00:00
if ( ! account ) {
return < div / > ;
}
2017-08-28 20:23:44 +00:00
if ( hidden ) {
return (
2019-01-10 19:22:28 +00:00
< Fragment >
2017-08-28 20:23:44 +00:00
{ account . get ( 'display_name' ) }
{ account . get ( 'username' ) }
2019-01-10 19:22:28 +00:00
< / F r a g m e n t >
2017-08-28 20:23:44 +00:00
) ;
}
2017-02-09 00:20:09 +00:00
let buttons ;
2016-10-28 18:05:44 +00:00
2018-10-22 22:08:39 +00:00
if ( onActionClick && actionIcon ) {
buttons = < IconButton icon = { actionIcon } title = { actionTitle } onClick = { this . handleAction } / > ;
} else if ( account . get ( 'id' ) !== me && ! small && account . get ( 'relationship' , null ) !== null ) {
2016-11-01 17:03:51 +00:00
const following = account . getIn ( [ 'relationship' , 'following' ] ) ;
2017-01-16 18:36:32 +00:00
const requested = account . getIn ( [ 'relationship' , 'requested' ] ) ;
const blocking = account . getIn ( [ 'relationship' , 'blocking' ] ) ;
2017-04-14 23:23:49 +00:00
const muting = account . getIn ( [ 'relationship' , 'muting' ] ) ;
2017-01-16 18:36:32 +00:00
if ( requested ) {
2017-06-06 11:20:07 +00:00
buttons = < IconButton disabled icon = 'hourglass' title = { intl . formatMessage ( messages . requested ) } / > ;
2017-01-16 18:36:32 +00:00
} else if ( blocking ) {
2019-02-01 15:15:44 +00:00
buttons = < IconButton active icon = 'unlock' title = { intl . formatMessage ( messages . unblock , { name : account . get ( 'username' ) } ) } onClick = { this . handleBlock } / > ;
2017-04-14 23:23:49 +00:00
} else if ( muting ) {
2017-11-15 02:56:41 +00:00
let hidingNotificationsButton ;
2017-12-07 00:23:28 +00:00
if ( account . getIn ( [ 'relationship' , 'muting_notifications' ] ) ) {
2017-11-15 02:56:41 +00:00
hidingNotificationsButton = < IconButton active icon = 'bell' title = { intl . formatMessage ( messages . unmute _notifications , { name : account . get ( 'username' ) } ) } onClick = { this . handleUnmuteNotifications } / > ;
} else {
hidingNotificationsButton = < IconButton active icon = 'bell-slash' title = { intl . formatMessage ( messages . mute _notifications , { name : account . get ( 'username' ) } ) } onClick = { this . handleMuteNotifications } / > ;
}
buttons = (
2018-01-09 14:50:55 +00:00
< Fragment >
2017-11-15 02:56:41 +00:00
< IconButton active icon = 'volume-up' title = { intl . formatMessage ( messages . unmute , { name : account . get ( 'username' ) } ) } onClick = { this . handleMute } / >
{ hidingNotificationsButton }
2018-01-09 14:50:55 +00:00
< / F r a g m e n t >
2017-11-15 02:56:41 +00:00
) ;
2018-03-29 12:46:00 +00:00
} else if ( ! account . get ( 'moved' ) || following ) {
2017-12-07 00:23:28 +00:00
buttons = < IconButton icon = { following ? 'user-times' : 'user-plus' } title = { intl . formatMessage ( following ? messages . unfollow : messages . follow ) } onClick = { this . handleFollow } active = { following } / > ;
2017-01-16 18:36:32 +00:00
}
2016-10-27 19:59:56 +00:00
}
2017-12-24 06:16:45 +00:00
return small ? (
2018-01-06 04:04:13 +00:00
< Permalink
className = 'account small'
href = { account . get ( 'url' ) }
to = { ` /accounts/ ${ account . get ( 'id' ) } ` }
>
< div className = 'account__avatar-wrapper' >
< Avatar
account = { account }
size = { 24 }
/ >
< / d i v >
< DisplayName
account = { account }
inline
/ >
< / P e r m a l i n k >
2017-12-24 06:16:45 +00:00
) : (
2017-02-09 00:20:09 +00:00
< div className = 'account' >
2017-04-23 02:26:55 +00:00
< div className = 'account__wrapper' >
2017-02-09 00:20:09 +00:00
< Permalink key = { account . get ( 'id' ) } className = 'account__display-name' href = { account . get ( 'url' ) } to = { ` /accounts/ ${ account . get ( 'id' ) } ` } >
2017-08-07 17:44:55 +00:00
< div className = 'account__avatar-wrapper' > < Avatar account = { account } size = { 36 } / > < / d i v >
2016-10-28 18:05:44 +00:00
< DisplayName account = { account } / >
2016-12-02 14:05:50 +00:00
< / P e r m a l i n k >
2017-12-24 06:16:45 +00:00
{ buttons ?
< div className = 'account__relationship' >
{ buttons }
< / d i v >
2018-01-18 15:13:07 +00:00
: null }
2016-10-28 18:05:44 +00:00
< / d i v >
2016-10-27 19:59:56 +00:00
< / d i v >
) ;
}
2017-04-21 18:05:35 +00:00
}