Create StatusActionButton component

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

@@ -0,0 +1,64 @@
+import classNames from 'classnames';
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+import { IconButton, Text } from 'soapbox/components/ui';
+
+interface IStatusActionCounter {
+  count: number,
+  to?: string,
+}
+
+/** Action button numerical counter, eg "5" likes */
+const StatusActionCounter: React.FC<IStatusActionCounter> = ({ to, count = 0 }): JSX.Element => {
+  const text = <Text size='xs' theme='muted'>{count}</Text>;
+  return to ? <Link to={to}>{text}</Link> : text;
+};
+
+interface IStatusActionButton {
+  icon: string,
+  onClick: () => void,
+  count: number,
+  active?: boolean,
+  title?: string,
+  to?: string,
+}
+
+/** Status action container element */
+const StatusAction: React.FC = ({ children }) => {
+  return (
+    <div className='flex items-center space-x-0.5 p-1 rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500'>
+      {children}
+    </div>
+  );
+};
+
+/** Action button (eg "Like") for a Status */
+const StatusActionButton: React.FC<IStatusActionButton> = ({ icon, title, to, active = false, onClick, count = 0 }): JSX.Element => {
+
+  const handleClick: React.EventHandler<React.MouseEvent> = (e) => {
+    onClick();
+    e.stopPropagation();
+    e.preventDefault();
+  };
+
+  return (
+    <StatusAction>
+      <IconButton
+        title={title}
+        src={icon}
+        onClick={handleClick}
+        className={classNames('text-gray-400 hover:text-gray-600 dark:hover:text-white', {
+          'text-success-600 hover:text-success-600': active,
+        })}
+      />
+
+      {count ? (
+        <StatusActionCounter to={to} count={count} />
+      ) : null}
+    </StatusAction>
+  );
+};
+
+export { StatusAction, StatusActionButton, StatusActionCounter };
+export default StatusActionButton;

app/soapbox/components/status_action_bar.js

@@ -10,6 +10,7 @@ import { Link, withRouter } from 'react-router-dom';
 
 import { simpleEmojiReact } from 'soapbox/actions/emoji_reacts';
 import EmojiSelector from 'soapbox/components/emoji_selector';
+import { StatusAction, StatusActionButton } from 'soapbox/components/status-action-button';
 import DropdownMenuContainer from 'soapbox/containers/dropdown_menu_container';
 import { isUserTouching } from 'soapbox/is_mobile';
 import { isStaff, isAdmin } from 'soapbox/utils/accounts';
@@ -643,25 +644,18 @@ class StatusActionBar extends ImmutablePureComponent {
 
     return (
       <div className='pt-4 flex flex-row space-x-2'>
-        <div className='flex items-center space-x-0.5 p-1 rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500'>
+        <StatusActionButton
-          <IconButton
           title={replyTitle}
-            src={require('@tabler/icons/icons/message-circle.svg')}
+          icon={require('@tabler/icons/icons/message-circle.svg')}
           onClick={this.handleReplyClick}
-            className='text-gray-400 hover:text-gray-600 dark:hover:text-white'
+          to={`/@${status.getIn(['account', 'acct'])}/posts/${status.get('id')}`}
+          count={replyCount}
         />
 
-          {replyCount !== 0 ? (
+        <StatusAction>
-            <Link to={`/@${status.getIn(['account', 'acct'])}/posts/${status.get('id')}`}>
-              <Text size='xs' theme='muted'>{replyCount}</Text>
-            </Link>
-          ) : null}
-        </div>
-
-        <div className='flex items-center space-x-0.5 p-1 text-gray-400 hover:text-gray-600 rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500'>
           {reblogButton}
           {reblogCount !== 0 && <Text size='xs' theme='muted' role='presentation' onClick={this.handleOpenReblogsModal}>{reblogCount}</Text>}
-        </div>
+        </StatusAction>
 
         <div
           ref={this.setRef}
@@ -704,9 +698,9 @@ class StatusActionBar extends ImmutablePureComponent {
 
         {shareButton}
 
-        <div className='flex items-center space-x-0.5 p-1 text-gray-400 hover:text-gray-600 rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500'>
+        <StatusAction>
           <DropdownMenuContainer items={menu} title={intl.formatMessage(messages.more)} status={status} src={require('@tabler/icons/icons/dots.svg')} direction='right' />
-        </div>
+        </StatusAction>
       </div>
     );
   }

app/soapbox/components/ui/icon-button/icon-button.tsx

@@ -10,7 +10,7 @@ interface IIconButton {
   iconClassName?: string,
   disabled?: boolean,
   src: string,
-  onClick?: () => void,
+  onClick?: React.EventHandler<React.MouseEvent>,
   text?: string,
   title?: string,
   transparent?: boolean