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 { injectIntl, FormattedMessage } from 'react-intl';
   7 import Permalink from '../../../components/permalink';
   8 import ImmutablePureComponent from 'react-immutable-pure-component';
   9 import { HotKeys } from 'react-hotkeys';
  10
  11 const notificationForScreenReader = (intl, message, timestamp) => {
  12   const output = [message];
  13
  14   output.push(intl.formatDate(timestamp, { hour: '2-digit', minute: '2-digit', month: 'short', day: 'numeric' }));
  15
  16   return output.join(', ');
  17 };
  18
  19 export default @injectIntl
  20 class Notification extends ImmutablePureComponent {
  21
  22   static contextTypes = {
  23     router: PropTypes.object,
  24   };
  25
  26   static propTypes = {
  27     notification: ImmutablePropTypes.map.isRequired,
  28     hidden: PropTypes.bool,
  29     onMoveUp: PropTypes.func.isRequired,
  30     onMoveDown: PropTypes.func.isRequired,
  31     onMention: PropTypes.func.isRequired,
  32     intl: PropTypes.object.isRequired,
  33   };
  34
  35   handleMoveUp = () => {
  36     const { notification, onMoveUp } = this.props;
  37     onMoveUp(notification.get('id'));
  38   }
  39
  40   handleMoveDown = () => {
  41     const { notification, onMoveDown } = this.props;
  42     onMoveDown(notification.get('id'));
  43   }
  44
  45   handleOpen = () => {
  46     const { notification } = this.props;
  47
  48     if (notification.get('status')) {
  49       this.context.router.history.push(`/statuses/${notification.get('status')}`);
  50     } else {
  51       this.handleOpenProfile();
  52     }
  53   }
  54
  55   handleOpenProfile = () => {
  56     const { notification } = this.props;
  57     this.context.router.history.push(`/accounts/${notification.getIn(['account', 'id'])}`);
  58   }
  59
  60   handleMention = e => {
  61     e.preventDefault();
  62
  63     const { notification, onMention } = this.props;
  64     onMention(notification.get('account'), this.context.router.history);
  65   }
  66
  67   getHandlers () {
  68     return {
  69       moveUp: this.handleMoveUp,
  70       moveDown: this.handleMoveDown,
  71       open: this.handleOpen,
  72       openProfile: this.handleOpenProfile,
  73       mention: this.handleMention,
  74       reply: this.handleMention,
  75     };
  76   }
  77
  78   renderFollow (notification, account, link) {
  79     const { intl } = this.props;
  80
  81     return (
  82       <HotKeys handlers={this.getHandlers()}>
  83         <div className='notification notification-follow focusable' tabIndex='0' aria-label={notificationForScreenReader(intl, intl.formatMessage({ id: 'notification.follow', defaultMessage: '{name} followed you' }, { name: account.get('acct') }), notification.get('created_at'))}>
  84           <div className='notification__message'>
  85             <div className='notification__favourite-icon-wrapper'>
  86               <i className='fa fa-fw fa-user-plus' />
  87             </div>
  88
  89             <FormattedMessage id='notification.follow' defaultMessage='{name} followed you' values={{ name: link }} />
  90           </div>
  91
  92           <AccountContainer id={account.get('id')} withNote={false} hidden={this.props.hidden} />
  93         </div>
  94       </HotKeys>
  95     );
  96   }
  97
  98   renderMention (notification) {
  99     return (
 100       <StatusContainer
 101         id={notification.get('status')}
 102         withDismiss
 103         hidden={this.props.hidden}
 104         onMoveDown={this.handleMoveDown}
 105         onMoveUp={this.handleMoveUp}
 106         contextType='notifications'
 107       />
 108     );
 109   }
 110
 111   renderFavourite (notification, link) {
 112     const { intl } = this.props;
 113
 114     return (
 115       <HotKeys handlers={this.getHandlers()}>
 116         <div className='notification notification-favourite focusable' tabIndex='0' aria-label={notificationForScreenReader(intl, intl.formatMessage({ id: 'notification.favourite', defaultMessage: '{name} favourited your status' }, { name: notification.getIn(['account', 'acct']) }), notification.get('created_at'))}>
 117           <div className='notification__message'>
 118             <div className='notification__favourite-icon-wrapper'>
 119               <i className='fa fa-fw fa-star star-icon' />
 120             </div>
 121             <FormattedMessage id='notification.favourite' defaultMessage='{name} favourited your status' values={{ name: link }} />
 122           </div>
 123
 124           <StatusContainer id={notification.get('status')} account={notification.get('account')} muted withDismiss hidden={!!this.props.hidden} />
 125         </div>
 126       </HotKeys>
 127     );
 128   }
 129
 130   renderReblog (notification, link) {
 131     const { intl } = this.props;
 132
 133     return (
 134       <HotKeys handlers={this.getHandlers()}>
 135         <div className='notification notification-reblog focusable' tabIndex='0' aria-label={notificationForScreenReader(intl, intl.formatMessage({ id: 'notification.reblog', defaultMessage: '{name} boosted your status' }, { name: notification.getIn(['account', 'acct']) }), notification.get('created_at'))}>
 136           <div className='notification__message'>
 137             <div className='notification__favourite-icon-wrapper'>
 138               <i className='fa fa-fw fa-retweet' />
 139             </div>
 140             <FormattedMessage id='notification.reblog' defaultMessage='{name} boosted your status' values={{ name: link }} />
 141           </div>
 142
 143           <StatusContainer id={notification.get('status')} account={notification.get('account')} muted withDismiss hidden={this.props.hidden} />
 144         </div>
 145       </HotKeys>
 146     );
 147   }
 148
 149   render () {
 150     const { notification } = this.props;
 151     const account          = notification.get('account');
 152     const displayNameHtml  = { __html: account.get('display_name_html') };
 153     const link             = <bdi><Permalink className='notification__display-name' href={account.get('url')} title={account.get('acct')} to={`/accounts/${account.get('id')}`} dangerouslySetInnerHTML={displayNameHtml} /></bdi>;
 154
 155     switch(notification.get('type')) {
 156     case 'follow':
 157       return this.renderFollow(notification, account, link);
 158     case 'mention':
 159       return this.renderMention(notification);
 160     case 'favourite':
 161       return this.renderFavourite(notification, link);
 162     case 'reblog':
 163       return this.renderReblog(notification, link);
 164     }
 165
 166     return null;
 167   }
 168
 169 }