InteractionCounter: refactor with <button>

app/soapbox/features/status/components/status-interaction-bar.tsx

@@ -68,23 +68,17 @@ const StatusInteractionBar: React.FC<IStatusInteractionBar> = ({ status }): JSX.
   const getReposts = () => {
     if (status.reblogs_count) {
       return (
-        <button
+        <InteractionCounter count={status.reblogs_count} onClick={handleOpenReblogsModal}>
-          type='button'
-          onClick={handleOpenReblogsModal}
-          className='text-gray-600 dark:text-gray-700 hover:underline'
-        >
-          <InteractionCounter count={status.reblogs_count}>
           <FormattedMessage
             id='status.interactions.reblogs'
             defaultMessage='{count, plural, one {Repost} other {Reposts}}'
             values={{ count: status.reblogs_count }}
           />
         </InteractionCounter>
-        </button>
       );
     }
 
-    return '';
+    return null;
   };
 
   const handleOpenFavouritesModal: React.EventHandler<React.MouseEvent<HTMLButtonElement>> = (e) => {
@@ -97,29 +91,17 @@ const StatusInteractionBar: React.FC<IStatusInteractionBar> = ({ status }): JSX.
   const getFavourites = () => {
     if (status.favourites_count) {
       return (
-        <button
+        <InteractionCounter count={status.favourites_count} onClick={features.exposableReactions ? handleOpenFavouritesModal : undefined}>
-          type='button'
-          onClick={features.exposableReactions ? handleOpenFavouritesModal : undefined}
-          className={
-            classNames({
-              'text-gray-600 dark:text-gray-700 hover:underline': true,
-              'hover:underline': features.exposableReactions,
-              'cursor-default': !features.exposableReactions,
-            })
-          }
-        >
-          <InteractionCounter count={status.favourites_count}>
           <FormattedMessage
             id='status.interactions.favourites'
             defaultMessage='{count, plural, one {Like} other {Likes}}'
             values={{ count: status.favourites_count }}
           />
         </InteractionCounter>
-        </button>
       );
     }
 
-    return '';
+    return null;
   };
 
   const handleOpenReactionsModal = () => {
@@ -136,19 +118,9 @@ const StatusInteractionBar: React.FC<IStatusInteractionBar> = ({ status }): JSX.
       acc + cur.get('count')
     ), 0);
 
+    if (count) {
       return (
-      <button
+        <InteractionCounter count={count} onClick={features.exposableReactions ? handleOpenReactionsModal : undefined}>
-        type='button'
-        onClick={features.exposableReactions ? handleOpenReactionsModal : undefined}
-        className={
-          classNames({
-            'text-gray-600 dark:text-gray-700': true,
-            'hover:underline': features.exposableReactions,
-            'cursor-default': !features.exposableReactions,
-          })
-        }
-      >
-        <InteractionCounter count={count}>
           <HStack space={0.5} alignItems='center'>
             {emojiReacts.take(3).map((e, i) => {
               return (
@@ -161,27 +133,42 @@ const StatusInteractionBar: React.FC<IStatusInteractionBar> = ({ status }): JSX.
             })}
           </HStack>
         </InteractionCounter>
-      </button>
       );
+    }
+
+    return null;
   };
 
   return (
     <HStack space={3}>
       {getReposts()}
       {getFavourites()}
-      {features.emojiReacts ? getEmojiReacts() : null}
+      {features.emojiReacts && getEmojiReacts()}
     </HStack>
   );
 };
 
 interface IInteractionCounter {
   count: number,
+  onClick?: React.MouseEventHandler<HTMLButtonElement>,
   children: React.ReactNode,
 }
 
-/** InteractionCounter component. */
+const InteractionCounter: React.FC<IInteractionCounter> = ({ count, onClick, children }) => {
-const InteractionCounter: React.FC<IInteractionCounter> = ({ count, children }) => {
+  const features = useFeatures();
+
   return (
+    <button
+      type='button'
+      onClick={onClick}
+      className={
+        classNames({
+          'text-gray-600 dark:text-gray-700': true,
+          'hover:underline': features.exposableReactions,
+          'cursor-default': !features.exposableReactions,
+        })
+      }
+    >
       <HStack space={1} alignItems='center'>
         <Text theme='primary' weight='bold'>
           <FormattedNumber value={count} />
@@ -191,6 +178,7 @@ const InteractionCounter: React.FC<IInteractionCounter> = ({ count, children })
           {children}
         </Text>
       </HStack>
+    </button>
   );
 };