From ba5c3b224ce97f438b472a5c399381e4a3c4b6b4 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sun, 10 Apr 2022 20:41:00 -0500
Subject: [PATCH] EmojiButtonWrapper: handle click

---
 .../components/emoji-button-wrapper.tsx       | 19 +++++++++++++++++++
 app/soapbox/components/status_action_bar.tsx  |  1 -
 .../features/status/components/action-bar.tsx |  1 -
 3 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/app/soapbox/components/emoji-button-wrapper.tsx b/app/soapbox/components/emoji-button-wrapper.tsx
index eb2ec2f3b..32159b329 100644
--- a/app/soapbox/components/emoji-button-wrapper.tsx
+++ b/app/soapbox/components/emoji-button-wrapper.tsx
@@ -7,6 +7,8 @@ import { simpleEmojiReact } from 'soapbox/actions/emoji_reacts';
 import { openModal } from 'soapbox/actions/modals';
 import EmojiSelector from 'soapbox/components/ui/emoji-selector/emoji-selector';
 import { useAppSelector, useOwnAccount, useSoapboxConfig } from 'soapbox/hooks';
+import { isUserTouching } from 'soapbox/is_mobile';
+import { getReactForStatus } from 'soapbox/utils/emoji_reacts';
 
 interface IEmojiButtonWrapper {
   statusId: string,
@@ -62,6 +64,22 @@ const EmojiButtonWrapper: React.FC<IEmojiButtonWrapper> = ({ statusId, children
     setVisible(false);
   };
 
+  const handleClick: React.EventHandler<React.MouseEvent> = e => {
+    const meEmojiReact = getReactForStatus(status, soapboxConfig.allowedEmoji) || '👍';
+
+    if (isUserTouching()) {
+      if (visible) {
+        handleReact(meEmojiReact);
+      } else {
+        setVisible(true);
+      }
+    } else {
+      handleReact(meEmojiReact);
+    }
+
+    e.stopPropagation();
+  };
+
   // const handleUnfocus: React.EventHandler<React.KeyboardEvent> = () => {
   //   setFocused(false);
   // };
@@ -87,6 +105,7 @@ const EmojiButtonWrapper: React.FC<IEmojiButtonWrapper> = ({ statusId, children
   return (
     <div onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
       {React.cloneElement(children, {
+        onClick: handleClick,
         ref,
       })}
 
diff --git a/app/soapbox/components/status_action_bar.tsx b/app/soapbox/components/status_action_bar.tsx
index dbafd64fd..fa99ffa4e 100644
--- a/app/soapbox/components/status_action_bar.tsx
+++ b/app/soapbox/components/status_action_bar.tsx
@@ -645,7 +645,6 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
               title={meEmojiTitle}
               icon={require('@tabler/icons/icons/thumb-up.svg')}
               color='accent'
-              onClick={this.handleLikeButtonClick}
               active={Boolean(meEmojiReact)}
               count={emojiReactCount}
             />
diff --git a/app/soapbox/features/status/components/action-bar.tsx b/app/soapbox/features/status/components/action-bar.tsx
index 7efb40aff..9ac9b007f 100644
--- a/app/soapbox/features/status/components/action-bar.tsx
+++ b/app/soapbox/features/status/components/action-bar.tsx
@@ -588,7 +588,6 @@ class ActionBar extends React.PureComponent<IActionBar, IActionBarState> {
                 'fill-accent-300': Boolean(meEmojiReact),
               })}
               text={meEmojiTitle}
-              onClick={this.handleLikeButtonClick}
             />
           </EmojiButtonWrapper>
         ) : (