2019-08-29 18:14:36 -04:00
import ImmutablePureComponent from 'react-immutable-pure-component' ;
import ImmutablePropTypes from 'react-immutable-proptypes' ;
import PropTypes from 'prop-types' ;
import { connect } from 'react-redux' ;
import { makeGetAccount } from 'flavours/glitch/selectors' ;
2023-05-08 21:11:56 -04:00
import { Avatar } from 'flavours/glitch/components/avatar' ;
2023-05-09 17:08:54 -04:00
import { DisplayName } from 'flavours/glitch/components/display_name' ;
2019-08-29 18:14:36 -04:00
import Permalink from 'flavours/glitch/components/permalink' ;
2023-05-08 21:11:56 -04:00
import { IconButton } from 'flavours/glitch/components/icon_button' ;
2022-03-07 05:38:52 -05:00
import Button from 'flavours/glitch/components/button' ;
2019-08-29 18:14:36 -04:00
import { FormattedMessage , injectIntl , defineMessages } from 'react-intl' ;
2022-10-11 04:17:04 -04:00
import { autoPlayGif , me , unfollowModal } from 'flavours/glitch/initial_state' ;
2020-07-06 08:27:32 -04:00
import ShortNumber from 'flavours/glitch/components/short_number' ;
import {
followAccount ,
unfollowAccount ,
unblockAccount ,
unmuteAccount ,
} from 'flavours/glitch/actions/accounts' ;
2019-08-29 18:14:36 -04:00
import { openModal } from 'flavours/glitch/actions/modal' ;
2022-03-07 05:38:52 -05:00
import classNames from 'classnames' ;
2019-08-29 18:14:36 -04:00
const messages = defineMessages ( {
unfollow : { id : 'account.unfollow' , defaultMessage : 'Unfollow' } ,
2022-03-07 05:38:52 -05:00
follow : { id : 'account.follow' , defaultMessage : 'Follow' } ,
2022-10-18 18:12:55 -04:00
cancel _follow _request : { id : 'account.cancel_follow_request' , defaultMessage : 'Withdraw follow request' } ,
2022-11-03 11:05:39 -04:00
cancelFollowRequestConfirm : { id : 'confirmations.cancel_follow_request.confirm' , defaultMessage : 'Withdraw request' } ,
2022-03-07 05:38:52 -05:00
requested : { id : 'account.requested' , defaultMessage : 'Awaiting approval. Click to cancel follow request' } ,
unblock : { id : 'account.unblock_short' , defaultMessage : 'Unblock' } ,
unmute : { id : 'account.unmute_short' , defaultMessage : 'Unmute' } ,
unfollowConfirm : { id : 'confirmations.unfollow.confirm' , defaultMessage : 'Unfollow' } ,
edit _profile : { id : 'account.edit_profile' , defaultMessage : 'Edit profile' } ,
2022-10-09 05:23:06 -04:00
dismissSuggestion : { id : 'suggestions.dismiss' , defaultMessage : 'Dismiss suggestion' } ,
2019-08-29 18:14:36 -04:00
} ) ;
const makeMapStateToProps = ( ) => {
const getAccount = makeGetAccount ( ) ;
const mapStateToProps = ( state , { id } ) => ( {
account : getAccount ( state , id ) ,
} ) ;
return mapStateToProps ;
} ;
const mapDispatchToProps = ( dispatch , { intl } ) => ( {
2020-07-06 08:27:32 -04:00
onFollow ( account ) {
2022-11-03 11:05:39 -04:00
if ( account . getIn ( [ 'relationship' , 'following' ] ) ) {
2019-08-29 18:14:36 -04:00
if ( unfollowModal ) {
2020-07-06 08:27:32 -04:00
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' ) ) ) ,
} ) ,
) ;
2019-08-29 18:14:36 -04:00
} else {
dispatch ( unfollowAccount ( account . get ( 'id' ) ) ) ;
}
2022-11-03 11:05:39 -04:00
} else if ( account . getIn ( [ 'relationship' , 'requested' ] ) ) {
if ( unfollowModal ) {
dispatch ( openModal ( 'CONFIRM' , {
message : < FormattedMessage id = 'confirmations.cancel_follow_request.message' defaultMessage = 'Are you sure you want to withdraw your request to follow {name}?' values = { { name : < strong > @ { account . get ( 'acct' ) } < / strong > } } / > ,
confirm : intl . formatMessage ( messages . cancelFollowRequestConfirm ) ,
onConfirm : ( ) => dispatch ( unfollowAccount ( account . get ( 'id' ) ) ) ,
} ) ) ;
} else {
dispatch ( unfollowAccount ( account . get ( 'id' ) ) ) ;
}
2019-08-29 18:14:36 -04:00
} else {
dispatch ( followAccount ( account . get ( 'id' ) ) ) ;
}
} ,
2020-07-06 08:27:32 -04:00
onBlock ( account ) {
2019-08-29 18:14:36 -04:00
if ( account . getIn ( [ 'relationship' , 'blocking' ] ) ) {
dispatch ( unblockAccount ( account . get ( 'id' ) ) ) ;
}
} ,
2020-07-06 08:27:32 -04:00
onMute ( account ) {
2019-08-29 18:14:36 -04:00
if ( account . getIn ( [ 'relationship' , 'muting' ] ) ) {
dispatch ( unmuteAccount ( account . get ( 'id' ) ) ) ;
}
} ,
2022-03-07 05:38:52 -05:00
2019-08-29 18:14:36 -04:00
} ) ;
class AccountCard extends ImmutablePureComponent {
static propTypes = {
account : ImmutablePropTypes . map . isRequired ,
intl : PropTypes . object . isRequired ,
onFollow : PropTypes . func . isRequired ,
onBlock : PropTypes . func . isRequired ,
onMute : PropTypes . func . isRequired ,
2022-10-09 05:23:06 -04:00
onDismiss : PropTypes . func ,
2019-08-29 18:14:36 -04:00
} ;
2021-01-31 15:25:31 -05:00
handleMouseEnter = ( { currentTarget } ) => {
if ( autoPlayGif ) {
2019-09-01 14:04:35 -04:00
return ;
}
2021-01-31 15:25:31 -05:00
const emojis = currentTarget . querySelectorAll ( '.custom-emoji' ) ;
2019-09-01 14:04:35 -04:00
for ( var i = 0 ; i < emojis . length ; i ++ ) {
let emoji = emojis [ i ] ;
2021-01-31 15:25:31 -05:00
emoji . src = emoji . getAttribute ( 'data-original' ) ;
2019-09-01 14:04:35 -04:00
}
2023-02-03 14:52:07 -05:00
} ;
2019-09-01 14:04:35 -04:00
2021-01-31 15:25:31 -05:00
handleMouseLeave = ( { currentTarget } ) => {
if ( autoPlayGif ) {
return ;
}
2019-09-01 14:04:35 -04:00
2021-01-31 15:25:31 -05:00
const emojis = currentTarget . querySelectorAll ( '.custom-emoji' ) ;
2019-09-01 14:04:35 -04:00
2021-01-31 15:25:31 -05:00
for ( var i = 0 ; i < emojis . length ; i ++ ) {
let emoji = emojis [ i ] ;
emoji . src = emoji . getAttribute ( 'data-static' ) ;
}
2023-02-03 14:52:07 -05:00
} ;
2019-09-01 14:04:35 -04:00
2019-08-29 18:14:36 -04:00
handleFollow = ( ) => {
this . props . onFollow ( this . props . account ) ;
2020-07-06 08:27:32 -04:00
} ;
2019-08-29 18:14:36 -04:00
handleBlock = ( ) => {
this . props . onBlock ( this . props . account ) ;
2020-07-06 08:27:32 -04:00
} ;
2019-08-29 18:14:36 -04:00
handleMute = ( ) => {
this . props . onMute ( this . props . account ) ;
2023-02-03 14:52:07 -05:00
} ;
2022-03-07 05:38:52 -05:00
handleEditProfile = ( ) => {
window . open ( '/settings/profile' , '_blank' ) ;
2023-02-03 14:52:07 -05:00
} ;
2019-08-29 18:14:36 -04:00
2022-10-09 05:23:06 -04:00
handleDismiss = ( e ) => {
const { account , onDismiss } = this . props ;
onDismiss ( account . get ( 'id' ) ) ;
e . preventDefault ( ) ;
e . stopPropagation ( ) ;
2023-02-03 14:52:07 -05:00
} ;
2022-10-09 05:23:06 -04:00
2020-07-06 08:27:32 -04:00
render ( ) {
2019-08-29 18:14:36 -04:00
const { account , intl } = this . props ;
2022-03-07 05:38:52 -05:00
let actionBtn ;
if ( me !== account . get ( 'id' ) ) {
if ( ! account . get ( 'relationship' ) ) { // Wait until the relationship is loaded
actionBtn = '' ;
} else if ( account . getIn ( [ 'relationship' , 'requested' ] ) ) {
actionBtn = < Button className = { classNames ( 'logo-button' ) } text = { intl . formatMessage ( messages . cancel _follow _request ) } title = { intl . formatMessage ( messages . requested ) } onClick = { this . handleFollow } / > ;
} else if ( account . getIn ( [ 'relationship' , 'muting' ] ) ) {
actionBtn = < Button className = 'logo-button' text = { intl . formatMessage ( messages . unmute ) } onClick = { this . handleMute } / > ;
} else if ( ! account . getIn ( [ 'relationship' , 'blocking' ] ) ) {
actionBtn = < Button disabled = { account . getIn ( [ 'relationship' , 'blocked_by' ] ) } className = { classNames ( 'logo-button' , { 'button--destructive' : account . getIn ( [ 'relationship' , 'following' ] ) } ) } text = { intl . formatMessage ( account . getIn ( [ 'relationship' , 'following' ] ) ? messages . unfollow : messages . follow ) } onClick = { this . handleFollow } / > ;
} else if ( account . getIn ( [ 'relationship' , 'blocking' ] ) ) {
actionBtn = < Button className = 'logo-button' text = { intl . formatMessage ( messages . unblock ) } onClick = { this . handleBlock } / > ;
2019-08-29 18:14:36 -04:00
}
2022-03-07 05:38:52 -05:00
} else {
actionBtn = < Button className = 'logo-button' text = { intl . formatMessage ( messages . edit _profile ) } onClick = { this . handleEditProfile } / > ;
2019-08-29 18:14:36 -04:00
}
return (
2022-03-07 05:38:52 -05:00
< div className = 'account-card' >
< Permalink href = { account . get ( 'url' ) } to = { ` /@ ${ account . get ( 'acct' ) } ` } className = 'account-card__permalink' >
< div className = 'account-card__header' >
2022-10-09 05:23:06 -04:00
{ this . props . onDismiss && < IconButton className = 'media-modal__close' title = { intl . formatMessage ( messages . dismissSuggestion ) } icon = 'times' onClick = { this . handleDismiss } size = { 20 } / > }
2022-03-07 05:38:52 -05:00
< img
src = {
autoPlayGif ? account . get ( 'header' ) : account . get ( 'header_static' )
}
alt = ''
/ >
< / div >
2019-08-29 18:14:36 -04:00
2022-03-07 05:38:52 -05:00
< div className = 'account-card__title' >
< div className = 'account-card__title__avatar' > < Avatar account = { account } size = { 56 } / > < / div >
2019-08-29 18:14:36 -04:00
< DisplayName account = { account } / >
< / div >
2022-03-07 05:38:52 -05:00
< / Permalink >
2019-08-29 18:14:36 -04:00
2022-03-07 05:38:52 -05:00
{ account . get ( 'note' ) . length > 0 && (
2020-07-06 08:27:32 -04:00
< div
2022-03-07 05:38:52 -05:00
className = 'account-card__bio translate'
onMouseEnter = { this . handleMouseEnter }
onMouseLeave = { this . handleMouseLeave }
2020-07-06 08:27:32 -04:00
dangerouslySetInnerHTML = { { _ _html : account . get ( 'note_emojified' ) } }
/ >
2022-03-07 05:38:52 -05:00
) }
< div className = 'account-card__actions' >
< div className = 'account-card__counters' >
< div className = 'account-card__counters__item' >
< ShortNumber value = { account . get ( 'statuses_count' ) } / >
< small >
2022-05-03 04:59:23 -04:00
< FormattedMessage id = 'account.posts' defaultMessage = 'Posts' / >
2022-03-07 05:38:52 -05:00
< / small >
< / div >
< div className = 'account-card__counters__item' >
{ account . get ( 'followers_count' ) < 0 ? '-' : < ShortNumber value = { account . get ( 'followers_count' ) } / > } { ' ' }
< small >
< FormattedMessage
id = 'account.followers'
defaultMessage = 'Followers'
/ >
< / small >
< / div >
< div className = 'account-card__counters__item' >
< ShortNumber value = { account . get ( 'following_count' ) } / > { ' ' }
< small >
< FormattedMessage
id = 'account.following'
defaultMessage = 'Following'
/ >
< / small >
< / div >
2020-07-06 08:27:32 -04:00
< / div >
2022-03-07 05:38:52 -05:00
< div className = 'account-card__actions__button' >
{ actionBtn }
2020-07-06 08:27:32 -04:00
< / div >
2019-08-29 18:14:36 -04:00
< / div >
< / div >
) ;
}
}
2023-03-24 18:15:25 -04:00
export default injectIntl ( connect ( makeMapStateToProps , mapDispatchToProps ) ( AccountCard ) ) ;