Add emoji reaction deletion api

app/javascript/mastodon/components/status.jsx

@@ -511,7 +511,7 @@ class Status extends ImmutablePureComponent {
     let emojiReactionsBar = null;
     if (status.get('emoji_reactions')) {
       const emojiReactions = status.get('emoji_reactions');
-      emojiReactionsBar = <StatusEmojiReactionsBar emojiReactions={emojiReactions} statusId={status.get('id')} />;
+      emojiReactionsBar = <StatusEmojiReactionsBar emojiReactions={emojiReactions} status={status} onEmojiReact={this.props.onEmojiReact} onUnEmojiReact={this.props.onUnEmojiReact} />;
     }
 
     return (

app/javascript/mastodon/components/status_emoji_reactions_bar.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import PropTypes from 'prop-types';
-import { FormattedMessage, injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl';
 import emojify from '../features/emoji/emoji';
 import classNames from 'classnames';
 
@@ -9,11 +9,25 @@ class EmojiReactionButton extends React.PureComponent {
 
   static propTypes = {
     name: PropTypes.string,
+    domain: PropTypes.string,
     url: PropTypes.string,
     staticUrl: PropTypes.string,
     count: PropTypes.number.isRequired,
     me: PropTypes.bool,
-    onClick: PropTypes.func,
+    status: PropTypes.map,
+    onEmojiReact: PropTypes.func,
+    onUnEmojiReact: PropTypes.func,
+  };
+
+  onClick = () => {
+    const { name, domain, me } = this.props;
+
+    const nameParameter = domain ? `${name}@${domain}` : name;
+    if (me) {
+      if (this.props.onUnEmojiReact) this.props.onUnEmojiReact(nameParameter);
+    } else {
+      if (this.props.onEmojiReact) this.props.onEmojiReact(nameParameter);
+    }
   };
 
   render () {
@@ -34,7 +48,7 @@ class EmojiReactionButton extends React.PureComponent {
     };
 
     return (
-      <button className={classNames(classList)} type='button'>
+      <button className={classNames(classList)} type='button' onClick={this.onClick}>
         <span className='emoji' dangerouslySetInnerHTML={{ __html: emojiHtml }} />
         <span className='count'>{count}</span>
       </button>
@@ -48,11 +62,23 @@ class StatusEmojiReactionsBar extends React.PureComponent {
 
   static propTypes = {
     emojiReactions: ImmutablePropTypes.list.isRequired,
-    statusId: PropTypes.string,
+    status: ImmutablePropTypes.map,
+    onEmojiReact: PropTypes.func,
+    onUnEmojiReact: PropTypes.func,
+  };
+
+  onEmojiReact = (name) => {
+    if (!this.props.onEmojiReact) return;
+    this.props.onEmojiReact(this.props.status, name);
+  };
+
+  onUnEmojiReact = (name) => {
+    if (!this.props.onUnEmojiReact) return;
+    this.props.onUnEmojiReact(this.props.status, name);
   };
 
   render () {
-    const { emojiReactions, statusId } = this.props;
+    const { emojiReactions } = this.props;
 
     const emojiButtons = Array.from(emojiReactions).map((emoji, index) => (
       <EmojiReactionButton
@@ -62,6 +88,9 @@ class StatusEmojiReactionsBar extends React.PureComponent {
         me={emoji.get('me')}
         url={emoji.get('url')}
         staticUrl={emoji.get('static_url')}
+        domain={emoji.get('domain')}
+        onEmojiReact={this.onEmojiReact}
+        onUnEmojiReact={this.onUnEmojiReact}
       />));
 
     return (