app/javascript/mastodon/features/notifications/components/notification.js

   1 import React from 'react';
   2 import PropTypes from 'prop-types';
   3 import ImmutablePropTypes from 'react-immutable-proptypes';
   4 import StatusContainer from '../../../containers/status_container';
   5 import AccountContainer from '../../../containers/account_container';
   6 import { FormattedMessage } from 'react-intl';
   7 import Permalink from '../../../components/permalink';
   8 import ImmutablePureComponent from 'react-immutable-pure-component';
   9
  10 export default class Notification extends ImmutablePureComponent {
  11
  12   static propTypes = {
  13     notification: ImmutablePropTypes.map.isRequired,
  14     hidden: PropTypes.bool,
  15   };
  16
  17   renderFollow (account, link) {
  18     return (
  19       <div className='notification notification-follow'>
  20         <div className='notification__message'>
  21           <div className='notification__favourite-icon-wrapper'>
  22             <i className='fa fa-fw fa-user-plus' />
  23           </div>
  24
  25           <FormattedMessage id='notification.follow' defaultMessage='{name} followed you' values={{ name: link }} />
  26         </div>
  27
  28         <AccountContainer id={account.get('id')} withNote={false} hidden={this.props.hidden} />
  29       </div>
  30     );
  31   }
  32
  33   renderMention (notification) {
  34     return <StatusContainer id={notification.get('status')} withDismiss hidden={this.props.hidden} />;
  35   }
  36
  37   renderFavourite (notification, link) {
  38     return (
  39       <div className='notification notification-favourite'>
  40         <div className='notification__message'>
  41           <div className='notification__favourite-icon-wrapper'>
  42             <i className='fa fa-fw fa-star star-icon' />
  43           </div>
  44           <FormattedMessage id='notification.favourite' defaultMessage='{name} favourited your status' values={{ name: link }} />
  45         </div>
  46
  47         <StatusContainer id={notification.get('status')} account={notification.get('account')} muted withDismiss hidden={!!this.props.hidden} />
  48       </div>
  49     );
  50   }
  51
  52   renderReblog (notification, link) {
  53     return (
  54       <div className='notification notification-reblog'>
  55         <div className='notification__message'>
  56           <div className='notification__favourite-icon-wrapper'>
  57             <i className='fa fa-fw fa-retweet' />
  58           </div>
  59           <FormattedMessage id='notification.reblog' defaultMessage='{name} boosted your status' values={{ name: link }} />
  60         </div>
  61
  62         <StatusContainer id={notification.get('status')} account={notification.get('account')} muted withDismiss hidden={this.props.hidden} />
  63       </div>
  64     );
  65   }
  66
  67   render () {
  68     const { notification } = this.props;
  69     const account          = notification.get('account');
  70     const displayNameHtml  = { __html: account.get('display_name_html') };
  71     const link             = <Permalink className='notification__display-name' href={account.get('url')} title={account.get('acct')} to={`/accounts/${account.get('id')}`} dangerouslySetInnerHTML={displayNameHtml} />;
  72
  73     switch(notification.get('type')) {
  74     case 'follow':
  75       return this.renderFollow(account, link);
  76     case 'mention':
  77       return this.renderMention(notification);
  78     case 'favourite':
  79       return this.renderFavourite(notification, link);
  80     case 'reblog':
  81       return this.renderReblog(notification, link);
  82     }
  83
  84     return null;
  85   }
  86
  87 }