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