Create new stream event type: emoji_reaction

app/javascript/mastodon/actions/interactions.js

@@ -217,8 +217,7 @@ export function emojiReact(status, emoji) {
   return function (dispatch, getState) {
     dispatch(emojiReactRequest(status, emoji));
 
-    api(getState).post(`/api/v1/statuses/${status.get('id')}/emoji_reactions`, { emoji: emoji.custom ? (emoji.name + (emoji.domain || '')) : emoji.native }).then(function (response) {
-      dispatch(importFetchedStatus(response.data));
+    api(getState).post(`/api/v1/statuses/${status.get('id')}/emoji_reactions`, { emoji: emoji.custom ? (emoji.name + (emoji.domain || '')) : emoji.native }).then(function () {
       dispatch(emojiReactSuccess(status, emoji));
     }).catch(function (error) {
       dispatch(emojiReactFail(status, emoji, error));
@@ -230,8 +229,7 @@ export function unEmojiReact(status, emoji) {
   return (dispatch, getState) => {
     dispatch(unEmojiReactRequest(status, emoji));
 
-    api(getState).post(`/api/v1/statuses/${status.get('id')}/emoji_unreaction`, { emoji }).then(response => {
-      dispatch(importFetchedStatus(response.data));
+    api(getState).post(`/api/v1/statuses/${status.get('id')}/emoji_unreaction`, { emoji }).then(() => {
       dispatch(unEmojiReactSuccess(status, emoji));
     }).catch(error => {
       dispatch(unEmojiReactFail(status, emoji, error));

app/javascript/mastodon/actions/notifications.js

@@ -21,6 +21,7 @@ import { submitMarkers } from './markers';
 import { notificationsUpdate } from "./notifications_typed";
 import { register as registerPushNotifications } from './push_notifications';
 import { saveSettings } from './settings';
+import { STATUS_EMOJI_REACTION_UPDATE } from './statuses';
 
 export * from "./notifications_typed";
 
@@ -61,6 +62,15 @@ export const loadPending = () => ({
   type: NOTIFICATIONS_LOAD_PENDING,
 });
 
+export function updateEmojiReactions(emoji_reaction, accountId) {
+  return (dispatch) =>
+    dispatch({
+      type: STATUS_EMOJI_REACTION_UPDATE,
+      emoji_reaction,
+      accountId,
+    });
+}
+
 export function updateNotifications(notification, intlMessages, intlLocale) {
   return (dispatch, getState) => {
     const activeFilter = getState().getIn(['settings', 'notifications', 'quickFilter', 'active']);

app/javascript/mastodon/actions/statuses.js

@@ -42,6 +42,8 @@ export const STATUS_TRANSLATE_SUCCESS = 'STATUS_TRANSLATE_SUCCESS';
 export const STATUS_TRANSLATE_FAIL    = 'STATUS_TRANSLATE_FAIL';
 export const STATUS_TRANSLATE_UNDO    = 'STATUS_TRANSLATE_UNDO';
 
+export const STATUS_EMOJI_REACTION_UPDATE = 'STATUS_EMOJI_REACTION_UPDATE';
+
 export function fetchStatusRequest(id, skipLoading) {
   return {
     type: STATUS_FETCH_REQUEST,
@@ -373,3 +375,8 @@ export function revealQuote(ids) {
     ids,
   };
 };
+
+export const updateEmojiReaction = (emoji_reaction) => ({
+  type: STATUS_EMOJI_REACTION_UPDATE,
+  emoji_reaction,
+});

app/javascript/mastodon/actions/streaming.js

@@ -10,7 +10,7 @@ import {
   deleteAnnouncement,
 } from './announcements';
 import { updateConversations } from './conversations';
-import { updateNotifications, expandNotifications } from './notifications';
+import { updateNotifications, expandNotifications, updateEmojiReactions } from './notifications';
 import { updateStatus } from './statuses';
 import {
   updateTimeline,
@@ -24,6 +24,8 @@ import {
   fillListTimelineGaps,
 } from './timelines';
 
+const { messages } = getLocale();
+
 /**
  * @param {number} max
  * @returns {number}
@@ -102,6 +104,9 @@ export const connectTimelineStream = (timelineId, channelName, params = {}, opti
           // @ts-expect-error
           dispatch(updateNotifications(JSON.parse(data.payload), messages, locale));
           break;
+        case 'emoji_reaction':
+          dispatch(updateEmojiReactions(JSON.parse(data.payload), getState().getIn(['meta', 'me'])));
+          break;
         case 'conversation':
           // @ts-expect-error
           dispatch(updateConversations(JSON.parse(data.payload)));

app/javascript/mastodon/components/status_emoji_reactions_bar.jsx

@@ -14,7 +14,6 @@ class EmojiReactionButton extends React.PureComponent {
     staticUrl: PropTypes.string,
     count: PropTypes.number.isRequired,
     me: PropTypes.bool,
-    status: PropTypes.map,
     onEmojiReact: PropTypes.func,
     onUnEmojiReact: PropTypes.func,
   };

app/javascript/mastodon/locales/en.json

@@ -430,7 +430,8 @@
   "not_signed_in_indicator.not_signed_in": "You need to login to access this resource.",
   "notification.admin.report": "{name} reported {target}",
   "notification.admin.sign_up": "{name} signed up",
-  "notification.favourite": "{name} favorited your post",
+  "notification.emoji_reaction": "{name} reacted your post with emoji",
+  "notification.favourite": "{name} favourited your post",
   "notification.follow": "{name} followed you",
   "notification.follow_request": "{name} has requested to follow you",
   "notification.mention": "{name} mentioned you",

app/javascript/mastodon/locales/ja.json

@@ -431,6 +431,7 @@
   "not_signed_in_indicator.not_signed_in": "この機能を使うにはログインする必要があります。",
   "notification.admin.report": "{name}さんが{target}さんを通報しました",
   "notification.admin.sign_up": "{name}さんがサインアップしました",
+  "notification.emoji_reaction": "{name}さんがあなたの投稿に絵文字をつけました",
   "notification.favourite": "{name}さんがあなたのトゥートに╰( ^o^)╮-=ﾆ=一＝三★しました",
   "notification.follow": "{name}さんにフォローされました",
   "notification.follow_request": "{name}さんがあなたにフォローリクエストしました",

app/javascript/mastodon/reducers/statuses.js

@@ -26,6 +26,7 @@ import {
   STATUS_TRANSLATE_UNDO,
   STATUS_FETCH_REQUEST,
   STATUS_FETCH_FAIL,
+  STATUS_EMOJI_REACTION_UPDATE,
   QUOTE_REVEAL,
   QUOTE_HIDE,
 } from '../actions/statuses';
@@ -65,6 +66,30 @@ const statusTranslateUndo = (state, id) => {
   });
 };
 
+const updateStatusEmojiReaction = (state, emoji_reaction, myId) => {
+  emoji_reaction.me = emoji_reaction.account_ids ? emoji_reaction.account_ids.indexOf(myId) >= 0 : false;
+
+  const status = state.get(emoji_reaction.status_id);
+  if (!status) return state;
+
+  let emoji_reactions = Array.from(status.get('emoji_reactions') || []);
+
+  if (emoji_reaction.count > 0) {
+    const old_emoji = emoji_reactions.find((er) => er.name === emoji_reaction.name && er.url === emoji_reaction.url);
+    if (old_emoji) {
+      old_emoji.account_ids = emoji_reaction.account_ids;
+      old_emoji.count       = emoji_reaction.count;
+      old_emoji.me          = emoji_reaction.me;
+    } else {
+      emoji_reactions.push(ImmutableMap(emoji_reaction));
+    }
+  } else {
+    emoji_reactions = emoji_reactions.filter((er) => er.get('name') !== emoji_reaction.name || er.get('domain') !== emoji_reaction.domain);
+  }
+
+  return state.setIn([emoji_reaction.status_id, 'emoji_reactions'], ImmutableList(emoji_reactions));
+};
+
 const initialState = ImmutableMap();
 
 export default function statuses(state = initialState, action) {
@@ -137,6 +162,8 @@ export default function statuses(state = initialState, action) {
     return statusTranslateSuccess(state, action.id, action.translation);
   case STATUS_TRANSLATE_UNDO:
     return statusTranslateUndo(state, action.id);
+  case STATUS_EMOJI_REACTION_UPDATE:
+    return updateStatusEmojiReaction(state, action.emoji_reaction, action.accountId);
   default:
     return state;
   }

app/javascript/styles/mastodon/components.scss

@@ -1419,7 +1419,8 @@ body > [data-popper-placement] {
 }
 .status__emoji-reactions-bar {
   display: flex;
-  gap: 8px;
+  flex-wrap: wrap;
+  gap: 4px 8px;
   margin: 8px 0 2px 4px;
 
   .emoji-reactions-bar__button {