리액션 추가

.env.production.sample

@@ -274,6 +274,9 @@ MAX_POLL_OPTIONS=5
 # Maximum allowed poll option characters
 MAX_POLL_OPTION_CHARS=100
 
+# Maximum number of emoji reactions per toot and user (minimum 1)
+MAX_REACTIONS=1
+
 # Maximum image and video/audio upload sizes
 # Units are in bytes
 # 1048576 bytes equals 1 megabyte

app/controllers/api/v1/statuses/reactions_controller.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+class Api::V1::Statuses::ReactionsController < Api::V1::Statuses::BaseController
+  before_action -> { doorkeeper_authorize! :write, :'write:favourites' }
+  before_action :require_user!
+
+  def create
+    ReactService.new.call(current_account, @status, params[:id])
+    render json: @status, serializer: REST::StatusSerializer
+  end
+
+  def destroy
+    UnreactWorker.perform_async(current_account.id, @status.id, params[:id])
+
+    render json: @status, serializer: REST::StatusSerializer, relationships: StatusRelationshipsPresenter.new([@status], current_account.id, reactions_map: { @status.id => false })
+  rescue Mastodon::NotPermittedError
+    not_found
+  end
+end

app/javascript/flavours/glitch/actions/interactions.js

@@ -51,6 +51,16 @@ export const UNBOOKMARK_REQUEST = 'UNBOOKMARKED_REQUEST';
 export const UNBOOKMARK_SUCCESS = 'UNBOOKMARKED_SUCCESS';
 export const UNBOOKMARK_FAIL    = 'UNBOOKMARKED_FAIL';
 
+export const REACTION_UPDATE = 'REACTION_UPDATE';
+
+export const REACTION_ADD_REQUEST = 'REACTION_ADD_REQUEST';
+export const REACTION_ADD_SUCCESS = 'REACTION_ADD_SUCCESS';
+export const REACTION_ADD_FAIL    = 'REACTION_ADD_FAIL';
+
+export const REACTION_REMOVE_REQUEST = 'REACTION_REMOVE_REQUEST';
+export const REACTION_REMOVE_SUCCESS = 'REACTION_REMOVE_SUCCESS';
+export const REACTION_REMOVE_FAIL    = 'REACTION_REMOVE_FAIL';
+
 export function reblog(status, visibility) {
   return function (dispatch, getState) {
     dispatch(reblogRequest(status));
@@ -516,3 +526,75 @@ export function unpinFail(status, error) {
     skipLoading: true,
   };
 }
+
+export const addReaction = (statusId, name, url) => (dispatch, getState) => {
+  const status = getState().get('statuses').get(statusId);
+  let alreadyAdded = false;
+  if (status) {
+    const reaction = status.get('reactions').find(x => x.get('name') === name);
+    if (reaction && reaction.get('me')) {
+      alreadyAdded = true;
+    }
+  }
+  if (!alreadyAdded) {
+    dispatch(addReactionRequest(statusId, name, url));
+  }
+
+  // encodeURIComponent is required for the Keycap Number Sign emoji, see:
+  // <https://github.com/glitch-soc/mastodon/pull/1980#issuecomment-1345538932>
+  api(getState).post(`/api/v1/statuses/${statusId}/react/${encodeURIComponent(name)}`).then(() => {
+    dispatch(addReactionSuccess(statusId, name));
+  }).catch(err => {
+    if (!alreadyAdded) {
+      dispatch(addReactionFail(statusId, name, err));
+    }
+  });
+};
+
+export const addReactionRequest = (statusId, name, url) => ({
+  type: REACTION_ADD_REQUEST,
+  id: statusId,
+  name,
+  url,
+});
+
+export const addReactionSuccess = (statusId, name) => ({
+  type: REACTION_ADD_SUCCESS,
+  id: statusId,
+  name,
+});
+
+export const addReactionFail = (statusId, name, error) => ({
+  type: REACTION_ADD_FAIL,
+  id: statusId,
+  name,
+  error,
+});
+
+export const removeReaction = (statusId, name) => (dispatch, getState) => {
+  dispatch(removeReactionRequest(statusId, name));
+
+  api(getState).post(`/api/v1/statuses/${statusId}/unreact/${encodeURIComponent(name)}`).then(() => {
+    dispatch(removeReactionSuccess(statusId, name));
+  }).catch(err => {
+    dispatch(removeReactionFail(statusId, name, err));
+  });
+};
+
+export const removeReactionRequest = (statusId, name) => ({
+  type: REACTION_REMOVE_REQUEST,
+  id: statusId,
+  name,
+});
+
+export const removeReactionSuccess = (statusId, name) => ({
+  type: REACTION_REMOVE_SUCCESS,
+  id: statusId,
+  name,
+});
+
+export const removeReactionFail = (statusId, name) => ({
+  type: REACTION_REMOVE_FAIL,
+  id: statusId,
+  name,
+});

app/javascript/flavours/glitch/actions/notifications.js

@@ -174,6 +174,7 @@ const excludeTypesFromFilter = filter => {
     'follow',
     'follow_request',
     'favourite',
+    'reaction',
     'reblog',
     'mention',
     'poll',

app/javascript/flavours/glitch/components/status.jsx

@@ -20,8 +20,9 @@ import Card from '../features/status/components/card';
 // to use the progress bar to show download progress
 import Bundle from '../features/ui/components/bundle';
 import { MediaGallery, Video, Audio } from '../features/ui/util/async-components';
+import { IdentityConsumer } from '../features/ui/util/identity_consumer';
 import { SensitiveMediaContext } from '../features/ui/util/sensitive_media_context';
-import { displayMedia } from '../initial_state';
+import { displayMedia, visibleReactions } from '../initial_state';
 
 import AttachmentList from './attachment_list';
 import { CollapseButton } from './collapse_button';
@@ -31,6 +32,7 @@ import StatusContent from './status_content';
 import StatusHeader from './status_header';
 import StatusIcons from './status_icons';
 import StatusPrepend from './status_prepend';
+import StatusReactions from './status_reactions';
 
 const domParser = new DOMParser();
 
@@ -91,6 +93,8 @@ class Status extends ImmutablePureComponent {
     onDelete: PropTypes.func,
     onDirect: PropTypes.func,
     onMention: PropTypes.func,
+    onReactionAdd: PropTypes.func,
+    onReactionRemove: PropTypes.func,
     onPin: PropTypes.func,
     onOpenMedia: PropTypes.func,
     onOpenVideo: PropTypes.func,
@@ -758,6 +762,7 @@ class Status extends ImmutablePureComponent {
     if (this.props.prepend && account) {
       const notifKind = {
         favourite: 'favourited',
+        reaction: 'reacted',
         reblog: 'boosted',
         reblogged_by: 'boosted',
         status: 'posted',
@@ -841,6 +846,19 @@ class Status extends ImmutablePureComponent {
               {...statusContentProps}
             />
 
+            <IdentityConsumer>
+              {identity => (
+                <StatusReactions
+                  statusId={status.get('id')}
+                  reactions={status.get('reactions')}
+                  numVisible={visibleReactions}
+                  addReaction={this.props.onReactionAdd}
+                  removeReaction={this.props.onReactionRemove}
+                  canReact={identity.signedIn}
+                />
+              )}
+            </IdentityConsumer>
+
             {(!isCollapsed || !(muted || !settings.getIn(['collapsed', 'show_action_bar']))) && (
               <StatusActionBar
                 status={status}

app/javascript/flavours/glitch/components/status_action_bar.jsx

@@ -8,6 +8,7 @@ import { withRouter } from 'react-router-dom';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
+import AddReactionIcon from '@/material-icons/400-24px/add_reaction.svg?react';
 import BookmarkIcon from '@/material-icons/400-24px/bookmark-fill.svg?react';
 import BookmarkBorderIcon from '@/material-icons/400-24px/bookmark.svg?react';
 import MoreHorizIcon from '@/material-icons/400-24px/more_horiz.svg?react';
@@ -26,7 +27,8 @@ import { accountAdminLink, statusAdminLink } from 'flavours/glitch/utils/backend
 import { WithRouterPropTypes } from 'flavours/glitch/utils/react_router';
 
 import DropdownMenuContainer from '../containers/dropdown_menu_container';
-import { me } from '../initial_state';
+import EmojiPickerDropdown from '../features/compose/containers/emoji_picker_dropdown_container';
+import { me, maxReactions } from '../initial_state';
 
 import { IconButton } from './icon_button';
 import { RelativeTimestamp } from './relative_timestamp';
@@ -48,6 +50,7 @@ const messages = defineMessages({
   cancel_reblog_private: { id: 'status.cancel_reblog_private', defaultMessage: 'Unboost' },
   cannot_reblog: { id: 'status.cannot_reblog', defaultMessage: 'This post cannot be boosted' },
   favourite: { id: 'status.favourite', defaultMessage: 'Favorite' },
+  react: { id: 'status.react', defaultMessage: 'React' },
   bookmark: { id: 'status.bookmark', defaultMessage: 'Bookmark' },
   open: { id: 'status.open', defaultMessage: 'Expand this status' },
   report: { id: 'status.report', defaultMessage: 'Report @{name}' },
@@ -76,6 +79,7 @@ class StatusActionBar extends ImmutablePureComponent {
     status: ImmutablePropTypes.map.isRequired,
     onReply: PropTypes.func,
     onFavourite: PropTypes.func,
+    onReactionAdd: PropTypes.func,
     onReblog: PropTypes.func,
     onDelete: PropTypes.func,
     onDirect: PropTypes.func,
@@ -133,6 +137,10 @@ class StatusActionBar extends ImmutablePureComponent {
     }
   };
 
+  handleEmojiPick = data => {
+    this.props.onReactionAdd(this.props.status.get('id'), data.native.replace(/:/g, ''), data.imageUrl);
+  };
+
   handleReblogClick = e => {
     const { signedIn } = this.context.identity;
 
@@ -321,6 +329,8 @@ class StatusActionBar extends ImmutablePureComponent {
       <IconButton className='status__action-bar-button' title={intl.formatMessage(messages.hide)} icon='eye' iconComponent={VisibilityIcon} onClick={this.handleHideClick} />
     );
 
+    const canReact = permissions && status.get('reactions').filter(r => r.get('count') > 0 && r.get('me')).size < maxReactions;
+
     return (
       <div className='status__action-bar'>
         <IconButton
@@ -334,6 +344,7 @@ class StatusActionBar extends ImmutablePureComponent {
         />
         <IconButton className={classNames('status__action-bar-button', { reblogPrivate })} disabled={!publicStatus && !reblogPrivate} active={status.get('reblogged')} title={reblogTitle} icon={reblogIcon} iconComponent={reblogIconComponent} onClick={this.handleReblogClick} counter={withCounters ? status.get('reblogs_count') : undefined} />
         <IconButton className='status__action-bar-button star-icon' animate active={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' iconComponent={status.get('favourited') ? StarIcon : StarBorderIcon} onClick={this.handleFavouriteClick} counter={withCounters ? status.get('favourites_count') : undefined} />
+        <EmojiPickerDropdown className='status__action-bar-button' onPickEmoji={this.handleEmojiPick} title={intl.formatMessage(messages.react)} icon={AddReactionIcon} disabled={!canReact} />
         <IconButton className='status__action-bar-button bookmark-icon' disabled={!signedIn} active={status.get('bookmarked')} title={intl.formatMessage(messages.bookmark)} icon='bookmark' iconComponent={status.get('bookmarked') ? BookmarkIcon : BookmarkBorderIcon} onClick={this.handleBookmarkClick} />
 
         {filterButton}

app/javascript/flavours/glitch/components/status_prepend.jsx

@@ -9,6 +9,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import EditIcon from '@/material-icons/400-24px/edit.svg?react';
 import HomeIcon from '@/material-icons/400-24px/home-fill.svg?react';
 import InsertChartIcon from '@/material-icons/400-24px/insert_chart.svg?react';
+import MoodIcon from '@/material-icons/400-24px/mood.svg?react';
 import PushPinIcon from '@/material-icons/400-24px/push_pin.svg?react';
 import RepeatIcon from '@/material-icons/400-24px/repeat.svg?react';
 import StarIcon from '@/material-icons/400-24px/star-fill.svg?react';
@@ -69,6 +70,14 @@ export default class StatusPrepend extends PureComponent {
           values={{ name : link }}
         />
       );
+    case 'reaction':
+      return (
+        <FormattedMessage
+          id='notification.reaction'
+          defaultMessage='{name} reacted to your status'
+          values={{ name: link }}
+        />
+      );
     case 'reblog':
       return (
         <FormattedMessage
@@ -124,6 +133,10 @@ export default class StatusPrepend extends PureComponent {
       iconId = 'star';
       iconComponent = StarIcon;
       break;
+    case 'reaction':
+      iconId = 'mood';
+      iconComponent = MoodIcon;
+      break;
     case 'featured':
       iconId = 'thumb-tack';
       iconComponent = PushPinIcon;