From 3bffadad361f8f88b33720a58798205ed7afb3b8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= Date: Sat, 28 Sep 2024 16:43:16 +0200 Subject: [PATCH] pl-fe: open reactions/favs modal on long press MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: marcin mikołajczak --- .../pl-fe/src/components/status-action-bar.tsx | 15 +++++++++++++++ .../pl-fe/src/components/status-action-button.tsx | 14 +++++++++++++- .../status/components/status-interaction-bar.tsx | 12 ++++++------ 3 files changed, 34 insertions(+), 7 deletions(-) diff --git a/packages/pl-fe/src/components/status-action-bar.tsx b/packages/pl-fe/src/components/status-action-bar.tsx index c9a8792f8..add2c0267 100644 --- a/packages/pl-fe/src/components/status-action-bar.tsx +++ b/packages/pl-fe/src/components/status-action-bar.tsx @@ -190,6 +190,10 @@ const StatusActionBar: React.FC = ({ } }; + const handleFavouriteLongPress = status.favourites_count ? () => { + openModal('FAVOURITES', { statusId: status.id }); + } : undefined; + const handleDislikeClick: React.EventHandler = (e) => { if (me) { dispatch(toggleDislike(status)); @@ -198,6 +202,10 @@ const StatusActionBar: React.FC = ({ } }; + 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 = ({ } }; + const handleReblogLongPress = status.reblogs_count ? () => { + openModal('REBLOGS', { statusId: status.id }); + } : undefined; + const handleQuoteClick: React.EventHandler = (e) => { if (me) { dispatch(quoteCompose(status)); @@ -670,6 +682,7 @@ const StatusActionBar: React.FC = ({ 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 = ({ 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 = ({ color='accent' filled onClick={handleDislikeClick} + onLongPress={handleDislikeLongPress} active={status.disliked} count={status.dislikes_count} text={withLabels ? intl.formatMessage(messages.disfavourite) : undefined} diff --git a/packages/pl-fe/src/components/status-action-button.tsx b/packages/pl-fe/src/components/status-action-button.tsx index a7fcdaa64..ab29ed4b5 100644 --- a/packages/pl-fe/src/components/status-action-button.tsx +++ b/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 void; } const StatusActionButton = React.forwardRef((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 {renderIcon()} diff --git a/packages/pl-fe/src/features/status/components/status-interaction-bar.tsx b/packages/pl-fe/src/features/status/components/status-interaction-bar.tsx index 91ebfeb3a..92292b2a4 100644 --- a/packages/pl-fe/src/features/status/components/status-interaction-bar.tsx +++ b/packages/pl-fe/src/features/status/components/status-interaction-bar.tsx @@ -20,15 +20,15 @@ const StatusInteractionBar: React.FC = ({ 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 = ({ 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 = ({ status }): JSX. e.preventDefault(); // if (!me) onOpenUnauthorizedModal(); - onOpenFavouritesModal(account.acct, status.id); + onOpenFavouritesModal(status.id); }; const handleOpenDislikesModal: React.EventHandler> = (e) => { e.preventDefault(); // if (!me) onOpenUnauthorizedModal(); - onOpenDislikesModal(account.acct, status.id); + onOpenDislikesModal(status.id); }; const getFavourites = () => {