Add emoji reaction deletion api

app/javascript/mastodon/actions/interactions.js

@@ -206,7 +206,6 @@ export function unfavouriteFail(status, error) {
 export function emojiReact(status, emoji) {
   return function (dispatch, getState) {
     dispatch(emojiReactRequest(status, emoji));
-    console.dir(emoji.custom ? (emoji.name + (emoji.domain || '')) : emoji.native);
 
     api(getState).put(`/api/v1/statuses/${status.get('id')}/emoji_reactions/${emoji.custom ? (emoji.name + (emoji.domain || '')) : emoji.native}`).then(function (response) {
       dispatch(importFetchedStatus(response.data));
@@ -221,7 +220,7 @@ export function unEmojiReact(status, emoji) {
   return (dispatch, getState) => {
     dispatch(unEmojiReactRequest(status, emoji));
 
-    api(getState).post(`/api/v1/statuses/${status.get('id')}/emoji_unreactions/${emoji.native}`).then(response => {
+    api(getState).post(`/api/v1/statuses/${status.get('id')}/emoji_unreaction`, { emoji }).then(response => {
       dispatch(importFetchedStatus(response.data));
       dispatch(unEmojiReactSuccess(status, emoji));
     }).catch(error => {

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 (

app/javascript/mastodon/features/notifications/containers/notification_container.js

@@ -8,6 +8,7 @@ import {
   favourite,
   unreblog,
   unfavourite,
+  emojiReact,
 } from '../../../actions/interactions';
 import {
   hideStatus,
@@ -62,7 +63,7 @@ const mapDispatchToProps = dispatch => ({
   },
 
   onEmojiReact (status, emoji) {
-    
+    dispatch(emojiReact(status, emoji));
   },
 
   onToggleHidden (status) {

app/javascript/mastodon/features/status/components/action_bar.jsx

@@ -63,6 +63,7 @@ class ActionBar extends React.PureComponent {
     onReply: PropTypes.func.isRequired,
     onReblog: PropTypes.func.isRequired,
     onFavourite: PropTypes.func.isRequired,
+    onEmojiReact: PropTypes.func.isRequired,
     onBookmark: PropTypes.func.isRequired,
     onDelete: PropTypes.func.isRequired,
     onEdit: PropTypes.func.isRequired,
@@ -182,13 +183,7 @@ class ActionBar extends React.PureComponent {
   };
 
   handleEmojiPick = (data) => {
-    /*
-    const { text }     = this.props;
-    const position     = this.autosuggestTextarea.textarea.selectionStart;
-    const needsSpace   = data.custom && position > 0 && !allowedAroundShortCode.includes(text[position - 1]);
-
-    this.props.onPickEmoji(position, data, needsSpace);
-    */
+    this.props.onEmojiReact(this.props.status, data);
   };
 
   render () {

app/javascript/mastodon/features/status/components/detailed_status.jsx

@@ -191,7 +191,7 @@ class DetailedStatus 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} onEmojiReaction={this.props.onEmojiReaction} OnUnEmojiReaction={this.props.OnUnEmojiReaction} />;
     }
 
     if (status.get('application')) {

app/javascript/mastodon/features/status/containers/detailed_status_container.js

@@ -13,6 +13,7 @@ import {
   unfavourite,
   pin,
   unpin,
+  emojiReact,
 } from '../../../actions/interactions';
 import {
   muteStatus,
@@ -94,7 +95,7 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
   },
 
   onEmojiReact (status, emoji) {
-    
+    dispatch(emojiReact(status, emoji));
   },
 
   onPin (status) {