logo

mastofe

My custom branche(s) on git.pleroma.social/pleroma/mastofe git clone https://hacktivis.me/git/mastofe.git

notification.js (5024B)


  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. import { HotKeys } from 'react-hotkeys';
  10. export default class Notification extends ImmutablePureComponent {
  11. static contextTypes = {
  12. router: PropTypes.object,
  13. };
  14. static propTypes = {
  15. notification: ImmutablePropTypes.map.isRequired,
  16. hidden: PropTypes.bool,
  17. onMoveUp: PropTypes.func.isRequired,
  18. onMoveDown: PropTypes.func.isRequired,
  19. onMention: PropTypes.func.isRequired,
  20. };
  21. handleMoveUp = () => {
  22. const { notification, onMoveUp } = this.props;
  23. onMoveUp(notification.get('id'));
  24. }
  25. handleMoveDown = () => {
  26. const { notification, onMoveDown } = this.props;
  27. onMoveDown(notification.get('id'));
  28. }
  29. handleOpen = () => {
  30. const { notification } = this.props;
  31. if (notification.get('status')) {
  32. this.context.router.history.push(`/statuses/${notification.get('status')}`);
  33. } else {
  34. this.handleOpenProfile();
  35. }
  36. }
  37. handleOpenProfile = () => {
  38. const { notification } = this.props;
  39. this.context.router.history.push(`/accounts/${notification.getIn(['account', 'id'])}`);
  40. }
  41. handleMention = e => {
  42. e.preventDefault();
  43. const { notification, onMention } = this.props;
  44. onMention(notification.get('account'), this.context.router.history);
  45. }
  46. getHandlers () {
  47. return {
  48. moveUp: this.handleMoveUp,
  49. moveDown: this.handleMoveDown,
  50. open: this.handleOpen,
  51. openProfile: this.handleOpenProfile,
  52. mention: this.handleMention,
  53. reply: this.handleMention,
  54. };
  55. }
  56. renderFollow (account, link) {
  57. return (
  58. <HotKeys handlers={this.getHandlers()}>
  59. <div className='notification notification-follow focusable' tabIndex='0'>
  60. <div className='notification__message'>
  61. <div className='notification__favourite-icon-wrapper'>
  62. <i className='fa fa-fw fa-user-plus' />
  63. </div>
  64. <FormattedMessage id='notification.follow' defaultMessage='{name} followed you' values={{ name: link }} />
  65. </div>
  66. <AccountContainer id={account.get('id')} withNote={false} hidden={this.props.hidden} />
  67. </div>
  68. </HotKeys>
  69. );
  70. }
  71. renderMention (notification) {
  72. return (
  73. <StatusContainer
  74. id={notification.get('status')}
  75. withDismiss
  76. hidden={this.props.hidden}
  77. onMoveDown={this.handleMoveDown}
  78. onMoveUp={this.handleMoveUp}
  79. />
  80. );
  81. }
  82. renderFavourite (notification, link) {
  83. return (
  84. <HotKeys handlers={this.getHandlers()}>
  85. <div className='notification notification-favourite focusable' tabIndex='0'>
  86. <div className='notification__message'>
  87. <div className='notification__favourite-icon-wrapper'>
  88. <i className='fa fa-fw fa-star star-icon' />
  89. </div>
  90. <FormattedMessage id='notification.favourite' defaultMessage='{name} favourited your status' values={{ name: link }} />
  91. </div>
  92. <StatusContainer id={notification.get('status')} account={notification.get('account')} muted withDismiss hidden={!!this.props.hidden} />
  93. </div>
  94. </HotKeys>
  95. );
  96. }
  97. renderReblog (notification, link) {
  98. return (
  99. <HotKeys handlers={this.getHandlers()}>
  100. <div className='notification notification-reblog focusable' tabIndex='0'>
  101. <div className='notification__message'>
  102. <div className='notification__favourite-icon-wrapper'>
  103. <i className='fa fa-fw fa-retweet' />
  104. </div>
  105. <FormattedMessage id='notification.reblog' defaultMessage='{name} boosted your status' values={{ name: link }} />
  106. </div>
  107. <StatusContainer id={notification.get('status')} account={notification.get('account')} muted withDismiss hidden={this.props.hidden} />
  108. </div>
  109. </HotKeys>
  110. );
  111. }
  112. render () {
  113. const { notification } = this.props;
  114. const account = notification.get('account');
  115. const displayNameHtml = { __html: account.get('display_name_html') };
  116. const link = <bdi><Permalink className='notification__display-name' href={account.get('url')} title={account.get('acct')} to={`/accounts/${account.get('id')}`} dangerouslySetInnerHTML={displayNameHtml} /></bdi>;
  117. switch(notification.get('type')) {
  118. case 'follow':
  119. return this.renderFollow(account, link);
  120. case 'mention':
  121. return this.renderMention(notification);
  122. case 'favourite':
  123. return this.renderFavourite(notification, link);
  124. case 'reblog':
  125. return this.renderReblog(notification, link);
  126. }
  127. return null;
  128. }
  129. }