Friendica dislikes

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

app/soapbox/components/status-action-bar.tsx

@@ -8,7 +8,7 @@ import { launchChat } from 'soapbox/actions/chats';
 import { directCompose, mentionCompose, quoteCompose, replyCompose } from 'soapbox/actions/compose';
 import { editEvent } from 'soapbox/actions/events';
 import { groupBlock, groupDeleteStatus, groupKick } from 'soapbox/actions/groups';
-import { toggleBookmark, toggleFavourite, togglePin, toggleReblog } from 'soapbox/actions/interactions';
+import { toggleBookmark, toggleDislike, toggleFavourite, togglePin, toggleReblog } from 'soapbox/actions/interactions';
 import { openModal } from 'soapbox/actions/modals';
 import { deleteStatusModal, toggleStatusSensitivityModal } from 'soapbox/actions/moderation';
 import { initMuteModal } from 'soapbox/actions/mutes';
@@ -45,6 +45,7 @@ const messages = defineMessages({
   cancel_reblog_private: { id: 'status.cancel_reblog_private', defaultMessage: 'Un-repost' },
   cannot_reblog: { id: 'status.cannot_reblog', defaultMessage: 'This post cannot be reposted' },
   favourite: { id: 'status.favourite', defaultMessage: 'Like' },
+  disfavourite: { id: 'status.disfavourite', defaultMessage: 'Disike' },
   open: { id: 'status.open', defaultMessage: 'Expand this post' },
   bookmark: { id: 'status.bookmark', defaultMessage: 'Bookmark' },
   unbookmark: { id: 'status.unbookmark', defaultMessage: 'Remove bookmark' },
@@ -161,6 +162,14 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
     }
   };
 
+  const handleDislikeClick: React.EventHandler<React.MouseEvent> = (e) => {
+    if (me) {
+      dispatch(toggleDislike(status));
+    } else {
+      onOpenUnauthorizedModal('DISLIKE');
+    }
+  };
+
   const handleBookmarkClick: React.EventHandler<React.MouseEvent> = (e) => {
     dispatch(toggleBookmark(status));
   };
@@ -645,7 +654,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
         ) : (
           <StatusActionButton
             title={intl.formatMessage(messages.favourite)}
-            icon={require('@tabler/icons/heart.svg')}
+            icon={features.dislikes ? require('@tabler/icons/thumb-up.svg') : require('@tabler/icons/heart.svg')}
             color='accent'
             filled
             onClick={handleFavouriteClick}
@@ -655,6 +664,19 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
           />
         )}
 
+        {features.dislikes && (
+          <StatusActionButton
+          title={intl.formatMessage(messages.disfavourite)}
+          icon={require('@tabler/icons/thumb-down.svg')}
+          color='accent'
+          filled
+          onClick={handleDislikeClick}
+          active={status.friendica.get('disliked')}
+          count={status.friendica.get('dislikes_count')}
+          text={withLabels ? intl.formatMessage(messages.disfavourite) : undefined  }
+          />
+        )}
+
         {canShare && (
           <StatusActionButton
             title={intl.formatMessage(messages.share)}