app/javascript/themes/glitch/components/status_prepend.js

   1 //  Package imports  //
   2 import React from 'react';
   3 import PropTypes from 'prop-types';
   4 import ImmutablePropTypes from 'react-immutable-proptypes';
   5 import { FormattedMessage } from 'react-intl';
   6
   7 export default class StatusPrepend extends React.PureComponent {
   8
   9   static propTypes = {
  10     type: PropTypes.string.isRequired,
  11     account: ImmutablePropTypes.map.isRequired,
  12     parseClick: PropTypes.func.isRequired,
  13     notificationId: PropTypes.number,
  14   };
  15
  16   handleClick = (e) => {
  17     const { account, parseClick } = this.props;
  18     parseClick(e, `/accounts/${+account.get('id')}`);
  19   }
  20
  21   Message = () => {
  22     const { type, account } = this.props;
  23     let link = (
  24       <a
  25         onClick={this.handleClick}
  26         href={account.get('url')}
  27         className='status__display-name'
  28       >
  29         <b
  30           dangerouslySetInnerHTML={{
  31             __html : account.get('display_name_html') || account.get('username'),
  32           }}
  33         />
  34       </a>
  35     );
  36     switch (type) {
  37     case 'reblogged_by':
  38       return (
  39         <FormattedMessage
  40           id='status.reblogged_by'
  41           defaultMessage='{name} boosted'
  42           values={{ name : link }}
  43         />
  44       );
  45     case 'favourite':
  46       return (
  47         <FormattedMessage
  48           id='notification.favourite'
  49           defaultMessage='{name} favourited your status'
  50           values={{ name : link }}
  51         />
  52       );
  53     case 'reblog':
  54       return (
  55         <FormattedMessage
  56           id='notification.reblog'
  57           defaultMessage='{name} boosted your status'
  58           values={{ name : link }}
  59         />
  60       );
  61     }
  62     return null;
  63   }
  64
  65   render () {
  66     const { Message } = this;
  67     const { type } = this.props;
  68
  69     return !type ? null : (
  70       <aside className={type === 'reblogged_by' ? 'status__prepend' : 'notification__message'}>
  71         <div className={type === 'reblogged_by' ? 'status__prepend-icon-wrapper' : 'notification__favourite-icon-wrapper'}>
  72           <i
  73             className={`fa fa-fw fa-${
  74               type === 'favourite' ? 'star star-icon' : 'retweet'
  75             } status__prepend-icon`}
  76           />
  77         </div>
  78         <Message />
  79       </aside>
  80     );
  81   }
  82
  83 }