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

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