app/javascript/mastodon/components/account.js

   1 import React, { Fragment } from 'react';
   2 import ImmutablePropTypes from 'react-immutable-proptypes';
   3 import PropTypes from 'prop-types';
   4 import Avatar from './avatar';
   5 import DisplayName from './display_name';
   6 import Permalink from './permalink';
   7 import IconButton from './icon_button';
   8 import { defineMessages, injectIntl } from 'react-intl';
   9 import ImmutablePureComponent from 'react-immutable-pure-component';
  10 import { me } from '../initial_state';
  11 import RelativeTimestamp from './relative_timestamp';
  12
  13 const messages = defineMessages({
  14   follow: { id: 'account.follow', defaultMessage: 'Follow' },
  15   unfollow: { id: 'account.unfollow', defaultMessage: 'Unfollow' },
  16   requested: { id: 'account.requested', defaultMessage: 'Awaiting approval' },
  17   unblock: { id: 'account.unblock', defaultMessage: 'Unblock @{name}' },
  18   unmute: { id: 'account.unmute', defaultMessage: 'Unmute @{name}' },
  19   mute_notifications: { id: 'account.mute_notifications', defaultMessage: 'Mute notifications from @{name}' },
  20   unmute_notifications: { id: 'account.unmute_notifications', defaultMessage: 'Unmute notifications from @{name}' },
  21 });
  22
  23 export default @injectIntl
  24 class Account extends ImmutablePureComponent {
  25
  26   static propTypes = {
  27     account: ImmutablePropTypes.map.isRequired,
  28     onFollow: PropTypes.func.isRequired,
  29     onBlock: PropTypes.func.isRequired,
  30     onMute: PropTypes.func.isRequired,
  31     onMuteNotifications: PropTypes.func.isRequired,
  32     intl: PropTypes.object.isRequired,
  33     hidden: PropTypes.bool,
  34     actionIcon: PropTypes.string,
  35     actionTitle: PropTypes.string,
  36     onActionClick: PropTypes.func,
  37   };
  38
  39   handleFollow = () => {
  40     this.props.onFollow(this.props.account);
  41   }
  42
  43   handleBlock = () => {
  44     this.props.onBlock(this.props.account);
  45   }
  46
  47   handleMute = () => {
  48     this.props.onMute(this.props.account);
  49   }
  50
  51   handleMuteNotifications = () => {
  52     this.props.onMuteNotifications(this.props.account, true);
  53   }
  54
  55   handleUnmuteNotifications = () => {
  56     this.props.onMuteNotifications(this.props.account, false);
  57   }
  58
  59   handleAction = () => {
  60     this.props.onActionClick(this.props.account);
  61   }
  62
  63   render () {
  64     const { account, intl, hidden, onActionClick, actionIcon, actionTitle } = this.props;
  65
  66     if (!account) {
  67       return <div />;
  68     }
  69
  70     if (hidden) {
  71       return (
  72         <Fragment>
  73           {account.get('display_name')}
  74           {account.get('username')}
  75         </Fragment>
  76       );
  77     }
  78
  79     let buttons;
  80
  81     if (actionIcon) {
  82       if (onActionClick) {
  83         buttons = <IconButton icon={actionIcon} title={actionTitle} onClick={this.handleAction} />;
  84       }
  85     } else if (account.get('id') !== me && account.get('relationship', null) !== null) {
  86       const following = account.getIn(['relationship', 'following']);
  87       const requested = account.getIn(['relationship', 'requested']);
  88       const blocking  = account.getIn(['relationship', 'blocking']);
  89       const muting  = account.getIn(['relationship', 'muting']);
  90
  91       if (requested) {
  92         buttons = <IconButton disabled icon='hourglass' title={intl.formatMessage(messages.requested)} />;
  93       } else if (blocking) {
  94         buttons = <IconButton active icon='unlock' title={intl.formatMessage(messages.unblock, { name: account.get('username') })} onClick={this.handleBlock} />;
  95       } else if (muting) {
  96         let hidingNotificationsButton;
  97         if (account.getIn(['relationship', 'muting_notifications'])) {
  98           hidingNotificationsButton = <IconButton active icon='bell' title={intl.formatMessage(messages.unmute_notifications, { name: account.get('username') })} onClick={this.handleUnmuteNotifications} />;
  99         } else {
 100           hidingNotificationsButton = <IconButton active icon='bell-slash' title={intl.formatMessage(messages.mute_notifications, { name: account.get('username')  })} onClick={this.handleMuteNotifications} />;
 101         }
 102         buttons = (
 103           <Fragment>
 104             <IconButton active icon='volume-up' title={intl.formatMessage(messages.unmute, { name: account.get('username') })} onClick={this.handleMute} />
 105             {hidingNotificationsButton}
 106           </Fragment>
 107         );
 108       } else if (!account.get('moved') || following) {
 109         buttons = <IconButton icon={following ? 'user-times' : 'user-plus'} title={intl.formatMessage(following ? messages.unfollow : messages.follow)} onClick={this.handleFollow} active={following} />;
 110       }
 111     }
 112
 113     let mute_expires_at;
 114     if (account.get('mute_expires_at')) {
 115       mute_expires_at =  <div><RelativeTimestamp timestamp={account.get('mute_expires_at')} futureDate /></div>;
 116     }
 117
 118     return (
 119       <div className='account'>
 120         <div className='account__wrapper'>
 121           <Permalink key={account.get('id')} className='account__display-name' title={account.get('acct')} href={account.get('url')} to={`/@${account.get('acct')}`}>
 122             <div className='account__avatar-wrapper'><Avatar account={account} size={36} /></div>
 123             {mute_expires_at}
 124             <DisplayName account={account} />
 125           </Permalink>
 126
 127           <div className='account__relationship'>
 128             {buttons}
 129           </div>
 130         </div>
 131       </div>
 132     );
 133   }
 134
 135 }