app/javascript/mastodon/components/account.js

   1 import React 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
  11 const messages = defineMessages({
  12   follow: { id: 'account.follow', defaultMessage: 'Follow' },
  13   unfollow: { id: 'account.unfollow', defaultMessage: 'Unfollow' },
  14   requested: { id: 'account.requested', defaultMessage: 'Awaiting approval' },
  15   unblock: { id: 'account.unblock', defaultMessage: 'Unblock @{name}' },
  16   unmute: { id: 'account.unmute', defaultMessage: 'Unmute @{name}' },
  17   mute_notifications: { id: 'account.mute_notifications', defaultMessage: 'Mute notifications from @{name}' },
  18   unmute_notifications: { id: 'account.unmute_notifications', defaultMessage: 'Unmute notifications from @{name}' },
  19 });
  20
  21 @injectIntl
  22 export default class Account extends ImmutablePureComponent {
  23
  24   static propTypes = {
  25     account: ImmutablePropTypes.map.isRequired,
  26     me: PropTypes.number.isRequired,
  27     onFollow: PropTypes.func.isRequired,
  28     onBlock: PropTypes.func.isRequired,
  29     onMute: PropTypes.func.isRequired,
  30     intl: PropTypes.object.isRequired,
  31     hidden: PropTypes.bool,
  32   };
  33
  34   handleFollow = () => {
  35     this.props.onFollow(this.props.account);
  36   }
  37
  38   handleBlock = () => {
  39     this.props.onBlock(this.props.account);
  40   }
  41
  42   handleMute = () => {
  43     this.props.onMute(this.props.account);
  44   }
  45
  46   handleMuteNotifications = () => {
  47     this.props.onMuteNotifications(this.props.account, true);
  48   }
  49
  50   handleUnmuteNotifications = () => {
  51     this.props.onMuteNotifications(this.props.account, false);
  52   }
  53
  54   render () {
  55     const { account, me, intl, hidden } = this.props;
  56
  57     if (!account) {
  58       return <div />;
  59     }
  60
  61     if (hidden) {
  62       return (
  63         <div>
  64           {account.get('display_name')}
  65           {account.get('username')}
  66         </div>
  67       );
  68     }
  69
  70     let buttons;
  71
  72     if (account.get('id') !== me && account.get('relationship', null) !== null) {
  73       const following = account.getIn(['relationship', 'following']);
  74       const requested = account.getIn(['relationship', 'requested']);
  75       const blocking  = account.getIn(['relationship', 'blocking']);
  76       const muting  = account.getIn(['relationship', 'muting']);
  77
  78       if (requested) {
  79         buttons = <IconButton disabled icon='hourglass' title={intl.formatMessage(messages.requested)} />;
  80       } else if (blocking) {
  81         buttons = <IconButton active icon='unlock-alt' title={intl.formatMessage(messages.unblock, { name: account.get('username') })} onClick={this.handleBlock} />;
  82       } else if (muting) {
  83         let hidingNotificationsButton;
  84         if (muting.get('notifications')) {
  85           hidingNotificationsButton = <IconButton active icon='bell' title={intl.formatMessage(messages.unmute_notifications, { name: account.get('username')  })} onClick={this.handleUnmuteNotifications} />;
  86         } else {
  87 <<<<<<< HEAD
  88           hidingNotificationsButton = <IconButton active icon='bell' title={intl.formatMessage(messages.mute_notifications, { name: account.get('username')  })} onClick={this.handleMuteNotifications} />
  89 =======
  90           hidingNotificationsButton = <IconButton active icon='bell-slash' title={intl.formatMessage(messages.mute_notifications, { name: account.get('username')  })} onClick={this.handleMuteNotifications} />;
  91 >>>>>>> 917b2d5f... fixup swapped icons
  92         }
  93         buttons = (
  94           <div>
  95             <IconButton active icon='volume-up' title={intl.formatMessage(messages.unmute, { name: account.get('username') })} onClick={this.handleMute} />
  96             {hidingNotificationsButton}
  97           </div>
  98         );
  99       } else {
 100         buttons = <IconButton icon={following ? 'user-times' : 'user-plus'} title={intl.formatMessage(following ? messages.unfollow : messages.follow)} onClick={this.handleFollow} active={following} />;
 101       }
 102     }
 103
 104     return (
 105       <div className='account'>
 106         <div className='account__wrapper'>
 107           <Permalink key={account.get('id')} className='account__display-name' href={account.get('url')} to={`/accounts/${account.get('id')}`}>
 108             <div className='account__avatar-wrapper'><Avatar account={account} size={36} /></div>
 109             <DisplayName account={account} />
 110           </Permalink>
 111
 112           <div className='account__relationship'>
 113             {buttons}
 114           </div>
 115         </div>
 116       </div>
 117     );
 118   }
 119
 120 }