pl-fe: open reactions/favs modal on long press

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

packages/pl-fe/src/components/status-action-bar.tsx

@@ -190,6 +190,10 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
     }
   };
 
+  const handleFavouriteLongPress = status.favourites_count ? () => {
+    openModal('FAVOURITES', { statusId: status.id });
+  } : undefined;
+
   const handleDislikeClick: React.EventHandler<React.MouseEvent> = (e) => {
     if (me) {
       dispatch(toggleDislike(status));
@@ -198,6 +202,10 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
     }
   };
 
+  const handleDislikeLongPress = status.dislikes_count ? () => {
+    openModal('DISLIKES', { statusId: status.id });
+  } : undefined;
+
   const handlePickEmoji = (emoji: EmojiType) => {
     dispatch(emojiReact(status, emoji.custom ? emoji.id : emoji.native, emoji.custom ? emoji.imageUrl : undefined));
   };
@@ -225,6 +233,10 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
     }
   };
 
+  const handleReblogLongPress = status.reblogs_count ? () => {
+    openModal('REBLOGS', { statusId: status.id });
+  } : undefined;
+
   const handleQuoteClick: React.EventHandler<React.MouseEvent> = (e) => {
     if (me) {
       dispatch(quoteCompose(status));
@@ -670,6 +682,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
       title={!publicStatus ? intl.formatMessage(messages.cannot_reblog) : intl.formatMessage(messages.reblog)}
       active={status.reblogged}
       onClick={handleReblogClick}
+      onLongPress={handleReblogLongPress}
       count={reblogCount + quoteCount}
       text={withLabels ? intl.formatMessage(messages.reblog) : undefined}
       theme={statusActionButtonTheme}
@@ -734,6 +747,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
           color='accent'
           filled
           onClick={handleFavouriteClick}
+          onLongPress={handleFavouriteLongPress}
           active={status.favourited}
           count={favouriteCount}
           text={withLabels ? intl.formatMessage(messages.favourite) : undefined}
@@ -747,6 +761,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
             color='accent'
             filled
             onClick={handleDislikeClick}
+            onLongPress={handleDislikeLongPress}
             active={status.disliked}
             count={status.dislikes_count}
             text={withLabels ? intl.formatMessage(messages.disfavourite) : undefined}

packages/pl-fe/src/components/status-action-button.tsx

@@ -1,3 +1,4 @@
+import { useLongPress } from '@uidotdev/usehooks';
 import clsx from 'clsx';
 import React from 'react';
 
@@ -40,10 +41,20 @@ interface IStatusActionButton extends React.ButtonHTMLAttributes<HTMLButtonEleme
   emoji?: EmojiReaction;
   text?: React.ReactNode;
   theme?: 'default' | 'inverse';
+  onLongPress?: (event: Event) => void;
 }
 
 const StatusActionButton = React.forwardRef<HTMLButtonElement, IStatusActionButton>((props, ref): JSX.Element => {
-  const { icon, className, iconClassName, active, color, filled = false, count = 0, emoji, text, theme = 'default', ...filteredProps } = props;
+  const { icon, className, iconClassName, active, color, filled = false, count = 0, emoji, text, theme = 'default', onLongPress, ...filteredProps } = props;
+
+  const longPressBind = useLongPress((e) => {
+    if (!onLongPress || e.type !== 'touchstart') return;
+
+    e.stopPropagation();
+
+    if ('vibrate' in navigator) navigator.vibrate(1);
+    onLongPress(e);
+  });
 
   const renderIcon = () => {
     if (emoji) {
@@ -100,6 +111,7 @@ const StatusActionButton = React.forwardRef<HTMLButtonElement, IStatusActionButt
         },
         className,
       )}
+      {...longPressBind}
       {...filteredProps}
     >
       {renderIcon()}

packages/pl-fe/src/features/status/components/status-interaction-bar.tsx

@@ -20,15 +20,15 @@ const StatusInteractionBar: React.FC<IStatusInteractionBar> = ({ status }): JSX.
 
   if (!account || typeof account !== 'object') return null;
 
-  const onOpenReblogsModal = (username: string, statusId: string): void => {
+  const onOpenReblogsModal = (statusId: string): void => {
     openModal('REBLOGS', { statusId });
   };
 
-  const onOpenFavouritesModal = (username: string, statusId: string): void => {
+  const onOpenFavouritesModal = (statusId: string): void => {
     openModal('FAVOURITES', { statusId });
   };
 
-  const onOpenDislikesModal = (username: string, statusId: string): void => {
+  const onOpenDislikesModal = (statusId: string): void => {
     openModal('DISLIKES', { statusId });
   };
 
@@ -36,7 +36,7 @@ const StatusInteractionBar: React.FC<IStatusInteractionBar> = ({ status }): JSX.
     e.preventDefault();
 
     // if (!me) onOpenUnauthorizedModal();
-    onOpenReblogsModal(account.acct, status.id);
+    onOpenReblogsModal(status.id);
   };
 
   const getReposts = () => {
@@ -75,14 +75,14 @@ const StatusInteractionBar: React.FC<IStatusInteractionBar> = ({ status }): JSX.
     e.preventDefault();
 
     // if (!me) onOpenUnauthorizedModal();
-    onOpenFavouritesModal(account.acct, status.id);
+    onOpenFavouritesModal(status.id);
   };
 
   const handleOpenDislikesModal: React.EventHandler<React.MouseEvent<HTMLButtonElement>> = (e) => {
     e.preventDefault();
 
     // if (!me) onOpenUnauthorizedModal();
-    onOpenDislikesModal(account.acct, status.id);
+    onOpenDislikesModal(status.id);
   };
 
   const getFavourites = () => {