Add reaction deck remove api

app/javascript/mastodon/actions/reaction_deck.js

@@ -8,6 +8,10 @@ export const REACTION_DECK_UPDATE_REQUEST = 'REACTION_DECK_UPDATE_REQUEST';
 export const REACTION_DECK_UPDATE_SUCCESS = 'REACTION_DECK_UPDATE_SUCCESS';
 export const REACTION_DECK_UPDATE_FAIL = 'REACTION_DECK_UPDATE_FAIL';
 
+export const REACTION_DECK_REMOVE_REQUEST = 'REACTION_DECK_REMOVE_REQUEST';
+export const REACTION_DECK_REMOVE_SUCCESS = 'REACTION_DECK_REMOVE_SUCCESS';
+export const REACTION_DECK_REMOVE_FAIL = 'REACTION_DECK_REMOVE_FAIL';
+
 export function fetchReactionDeck() {
   return (dispatch, getState) => {
     dispatch(fetchReactionDeckRequest());
@@ -77,3 +81,38 @@ export function updateReactionDeckFail(error) {
     skipLoading: true,
   };
 }
+
+export function removeReactionDeck(id) {
+  return (dispatch, getState) => {
+    dispatch(removeReactionDeckRequest());
+
+    api(getState).post('/api/v1/remove_reaction_deck', { emojis: [{ id }] }).then(response => {
+      dispatch(removeReactionDeckSuccess(response.data));
+    }).catch(error => {
+      dispatch(removeReactionDeckFail(error));
+    });
+  };
+}
+
+export function removeReactionDeckRequest() {
+  return {
+    type: REACTION_DECK_REMOVE_REQUEST,
+    skipLoading: true,
+  };
+}
+
+export function removeReactionDeckSuccess(emojis) {
+  return {
+    type: REACTION_DECK_REMOVE_SUCCESS,
+    emojis,
+    skipLoading: true,
+  };
+}
+
+export function removeReactionDeckFail(error) {
+  return {
+    type: REACTION_DECK_REMOVE_FAIL,
+    error,
+    skipLoading: true,
+  };
+}

app/javascript/mastodon/features/reaction_deck/components/reaction_emoji.jsx

@@ -1,17 +1,22 @@
 import PropTypes from 'prop-types';
 
-import { injectIntl } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl';
 
 import { List as ImmutableList, Map as ImmutableMap } from 'immutable';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { connect } from 'react-redux';
 
-import { updateReactionDeck } from 'mastodon/actions/reaction_deck';
+import { updateReactionDeck, removeReactionDeck } from 'mastodon/actions/reaction_deck';
+import Button from 'mastodon/components/button';
 import EmojiPickerDropdownContainer from 'mastodon/features/compose/containers/emoji_picker_dropdown_container';
 import emojify from 'mastodon/features/emoji/emoji';
 import { autoPlayGif } from 'mastodon/initial_state';
 
+const messages = defineMessages({
+  remove: { id: 'reaction_deck.remove', defaultMessage: 'Remove' },
+});
+
 const MapStateToProps = (state, { emojiId, emojiMap }) => ({
   emoji: (state.get('reaction_deck', ImmutableList()).toArray().find(em => em.get('id') === emojiId) || ImmutableMap({ emoji: { shortcode: '' } })).get('name'),
   emojiMap,
@@ -19,6 +24,7 @@ const MapStateToProps = (state, { emojiId, emojiMap }) => ({
 
 const mapDispatchToProps = (dispatch, { emojiId }) => ({
   onChange: (emoji) => dispatch(updateReactionDeck(emojiId, emoji)),
+  onRemove: () => dispatch(removeReactionDeck(emojiId)),
 });
 
 class ReactionEmoji extends ImmutablePureComponent {
@@ -27,6 +33,7 @@ class ReactionEmoji extends ImmutablePureComponent {
     emoji: PropTypes.string,
     emojiMap: ImmutablePropTypes.map.isRequired,
     onChange: PropTypes.func.isRequired,
+    onRemove: PropTypes.func.isRequired,
   };
 
   static defaultProps = {
@@ -34,7 +41,7 @@ class ReactionEmoji extends ImmutablePureComponent {
   };
 
   render () {
-    const { emojiMap, emoji, onChange } = this.props;
+    const { intl, emojiMap, emoji, onChange, onRemove } = this.props;
 
     let content = null;
 
@@ -61,9 +68,14 @@ class ReactionEmoji extends ImmutablePureComponent {
     return (
       <div className='reaction_deck__emoji'>
         <div className='reaction_deck__emoji__wrapper'>
-          <EmojiPickerDropdownContainer onPickEmoji={onChange} />
-          <div>
-            {content}
+          <div className='reaction_deck__emoji__wrapper__content'>
+            <EmojiPickerDropdownContainer onPickEmoji={onChange} />
+            <div>
+              {content}
+            </div>
+          </div>
+          <div className='reaction_deck__emoji__wrapper__options'>
+            <Button secondary text={intl.formatMessage(messages.remove)} onClick={onRemove} />
           </div>
         </div>
       </div>

app/javascript/mastodon/reducers/reaction_deck.js

@@ -1,11 +1,11 @@
 import { List as ImmutableList, fromJS as ConvertToImmutable } from 'immutable';
 
-import { REACTION_DECK_FETCH_SUCCESS, REACTION_DECK_UPDATE_SUCCESS } from '../actions/reaction_deck';
+import { REACTION_DECK_FETCH_SUCCESS, REACTION_DECK_UPDATE_SUCCESS, REACTION_DECK_REMOVE_SUCCESS } from '../actions/reaction_deck';
 
 const initialState = ImmutableList([]);
 
 export default function reaction_deck(state = initialState, action) {
-  if(action.type === REACTION_DECK_FETCH_SUCCESS || action.type === REACTION_DECK_UPDATE_SUCCESS) {
+  if(action.type === REACTION_DECK_FETCH_SUCCESS || action.type === REACTION_DECK_UPDATE_SUCCESS || action.type === REACTION_DECK_REMOVE_SUCCESS) {
     state = ConvertToImmutable(action.emojis);
   }
 

app/javascript/styles/mastodon/components.scss

@@ -7547,8 +7547,7 @@ noscript {
 .reaction_deck__emoji {
   &__wrapper {
     display: flex;
-
-    margin: 8px 4px;
+    margin: 8px 16px 8px 4px;
     height: 32px;
 
     .emojione {
@@ -7561,6 +7560,11 @@ noscript {
       margin-right: 24px;
       padding: 0;
     }
+
+    &__content {
+      display: flex;
+      flex: 1;
+    }
   }
 }