EmojiButtonWrapper: handle click

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,
       })}
 

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}
             />

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>
         ) : (