Add FavouriteButton

app/soapbox/components/status_action_bar.tsx

@@ -1,15 +1,17 @@
 import { List as ImmutableList } from 'immutable';
 import React from 'react';
 import ImmutablePureComponent from 'react-immutable-pure-component';
-import { defineMessages, injectIntl, IntlShape } from 'react-intl';
-import { connect } from 'react-redux';
+import { defineMessages, injectIntl, useIntl, IntlShape } from 'react-intl';
+import { connect, useDispatch } from 'react-redux';
 import { withRouter, RouteComponentProps } from 'react-router-dom';
 
 import { simpleEmojiReact } from 'soapbox/actions/emoji_reacts';
+import { favourite, unfavourite } from 'soapbox/actions/interactions';
 import EmojiSelector from 'soapbox/components/emoji_selector';
 import Hoverable from 'soapbox/components/hoverable';
 import StatusActionButton from 'soapbox/components/status-action-button';
 import DropdownMenuContainer from 'soapbox/containers/dropdown_menu_container';
+import { useAppSelector, useOwnAccount } from 'soapbox/hooks';
 import { isUserTouching } from 'soapbox/is_mobile';
 import { getReactForStatus, reduceEmoji } from 'soapbox/utils/emoji_reacts';
 import { getFeatures } from 'soapbox/utils/features';
@@ -68,6 +70,61 @@ const messages = defineMessages({
   quotePost: { id: 'status.quote', defaultMessage: 'Quote post' },
 });
 
+interface IFavouriteButtonWrapper {
+  statusId: string,
+  children: JSX.Element,
+}
+
+const FavouriteButtonWrapper: React.FC<IFavouriteButtonWrapper> = ({ statusId, children }) => {
+  const dispatch = useDispatch();
+  const ownAccount = useOwnAccount();
+  const status = useAppSelector(state => state.statuses.get(statusId));
+  if (!status) return null;
+
+  const toggleFavourite = () => {
+    if (status.favourited) {
+      dispatch(unfavourite(status));
+    } else {
+      dispatch(favourite(status));
+    }
+  };
+
+  const onClick: React.EventHandler<React.MouseEvent> = (e) => {
+    if (ownAccount) {
+      toggleFavourite();
+    } else {
+      dispatch(openModal('UNAUTHORIZED', { action: 'FAVOURITE' }));
+    }
+
+    e.stopPropagation();
+  };
+
+  return React.cloneElement(children, { onClick });
+};
+
+interface IFavouriteButton {
+  statusId: string,
+}
+
+const FavouriteButton: React.FC<IFavouriteButton> = ({ statusId }): JSX.Element | null => {
+  const intl = useIntl();
+  const status = useAppSelector(state => state.statuses.get(statusId));
+  if (!status) return null;
+
+  return (
+    <FavouriteButtonWrapper statusId={statusId}>
+      <StatusActionButton
+        title={intl.formatMessage(messages.favourite)}
+        icon={require('@tabler/icons/icons/heart.svg')}
+        color='accent'
+        filled
+        active={status.favourited}
+        count={status.favourites_count}
+      />
+    </FavouriteButtonWrapper>
+  );
+};
+
 interface IStatusActionBar extends RouteComponentProps {
   status: Status,
   onOpenUnauthorizedModal: (modalType?: string) => void,
@@ -659,15 +716,7 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
             />
           </Hoverable>
         ): (
-          <StatusActionButton
-            title={intl.formatMessage(messages.favourite)}
-            icon={require('@tabler/icons/icons/heart.svg')}
-            color='accent'
-            filled
-            onClick={this.handleFavouriteClick}
-            active={Boolean(meEmojiReact)}
-            count={favouriteCount}
-          />
+          <FavouriteButton statusId={status.id} />
         )}
 
         {canShare && (