From 6c208a5b913bf58266faeba8b3a957e4c75660d2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= Date: Thu, 12 Sep 2024 11:02:08 +0200 Subject: [PATCH] pl-fe: Usually authentication is not required to display interactions MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: marcin mikołajczak --- .../src/components/status-action-bar.tsx | 8 +++--- .../src/components/status-reactions-bar.tsx | 27 ++++++++++++------- .../components/status-interaction-bar.tsx | 19 +++++-------- 3 files changed, 28 insertions(+), 26 deletions(-) diff --git a/packages/pl-fe/src/components/status-action-bar.tsx b/packages/pl-fe/src/components/status-action-bar.tsx index b5932de24..5a16e02cd 100644 --- a/packages/pl-fe/src/components/status-action-bar.tsx +++ b/packages/pl-fe/src/components/status-action-bar.tsx @@ -414,6 +414,10 @@ const StatusActionBar: React.FC = ({ } } + if (!me) { + return menu; + } + if (status.emoji_reactions.length && features.exposableReactions) { menu.push({ text: intl.formatMessage(messages.viewReactions), @@ -422,10 +426,6 @@ const StatusActionBar: React.FC = ({ }); } - if (!me) { - return menu; - } - const isGroupStatus = typeof status.group === 'object'; if (features.bookmarks) { diff --git a/packages/pl-fe/src/components/status-reactions-bar.tsx b/packages/pl-fe/src/components/status-reactions-bar.tsx index bc09ca576..d045c6a06 100644 --- a/packages/pl-fe/src/components/status-reactions-bar.tsx +++ b/packages/pl-fe/src/components/status-reactions-bar.tsx @@ -4,6 +4,7 @@ import React from 'react'; import { defineMessages, useIntl } from 'react-intl'; import { emojiReact, unEmojiReact } from 'pl-fe/actions/emoji-reacts'; +import { openModal } from 'pl-fe/actions/modals'; import EmojiPickerDropdown from 'pl-fe/features/emoji/containers/emoji-picker-dropdown-container'; import unicodeMapping from 'pl-fe/features/emoji/mapping'; import { useAppDispatch, useLoggedIn, useSettings } from 'pl-fe/hooks'; @@ -28,10 +29,10 @@ interface IStatusReaction { status: Pick; reaction: EmojiReaction; obfuscate?: boolean; - disabled?: boolean; + unauthenticated?: boolean; } -const StatusReaction: React.FC = ({ reaction, status, obfuscate, disabled }) => { +const StatusReaction: React.FC = ({ reaction, status, obfuscate, unauthenticated }) => { const dispatch = useAppDispatch(); const intl = useIntl(); @@ -40,9 +41,9 @@ const StatusReaction: React.FC = ({ reaction, status, obfuscate const handleClick: React.MouseEventHandler = (e) => { e.stopPropagation(); - if (disabled) return; - - if (reaction.me) { + if (unauthenticated) { + dispatch(openModal('REACTIONS', { statusId: status.id, reaction: reaction.name })); + } else if (reaction.me) { dispatch(unEmojiReact(status, reaction.name)); } else { dispatch(emojiReact(status, reaction.name, reaction.url)); @@ -62,9 +63,9 @@ const StatusReaction: React.FC = ({ reaction, status, obfuscate className={clsx('group flex cursor-pointer items-center gap-2 overflow-hidden rounded-md border border-gray-400 p-1.5 transition-colors', { 'bg-primary-100 dark:border-primary-400 dark:bg-primary-400 black:border-primary-600 black:bg-primary-600': reaction.me, 'bg-transparent dark:border-primary-700 dark:bg-primary-700 black:border-primary-800 black:bg-primary-800': !reaction.me, - 'cursor-pointer': !disabled, - 'hover:bg-primary-200 hover:dark:border-primary-300 hover:dark:bg-primary-300 hover:black:bg-primary-500': reaction.me && !disabled, - 'hover:bg-primary-100 hover:dark:border-primary-600 hover:dark:bg-primary-600 hover:black:bg-primary-700': !reaction.me && !disabled, + 'cursor-pointer': !unauthenticated, + 'hover:bg-primary-200 hover:dark:border-primary-300 hover:dark:bg-primary-300 hover:black:bg-primary-500': reaction.me && !unauthenticated, + 'hover:bg-primary-100 hover:dark:border-primary-600 hover:dark:bg-primary-600 hover:black:bg-primary-700': !reaction.me && !unauthenticated, })} key={reaction.name} onClick={handleClick} @@ -72,7 +73,7 @@ const StatusReaction: React.FC = ({ reaction, status, obfuscate emoji: `:${shortCode}:`, count: reaction.count, })} - disabled={disabled} + disabled={unauthenticated} > @@ -100,7 +101,13 @@ const StatusReactionsBar: React.FC = ({ status, collapsed } return ( {sortedReactions.map((reaction) => reaction.count ? ( - + ) : null)} {me && ( 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 1ed7b6d71..2e924a807 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 @@ -5,7 +5,7 @@ import { Link } from 'react-router-dom'; import { openModal } from 'pl-fe/actions/modals'; import AnimatedNumber from 'pl-fe/components/animated-number'; import { HStack, Text } from 'pl-fe/components/ui'; -import { useAppSelector, useFeatures, useAppDispatch } from 'pl-fe/hooks'; +import { useFeatures, useAppDispatch } from 'pl-fe/hooks'; import type { Status } from 'pl-fe/normalizers'; @@ -14,17 +14,12 @@ interface IStatusInteractionBar { } const StatusInteractionBar: React.FC = ({ status }): JSX.Element | null => { - const me = useAppSelector(({ me }) => me); const dispatch = useAppDispatch(); const features = useFeatures(); const { account } = status; if (!account || typeof account !== 'object') return null; - const onOpenUnauthorizedModal = () => { - dispatch(openModal('UNAUTHORIZED')); - }; - const onOpenReblogsModal = (username: string, statusId: string): void => { dispatch(openModal('REBLOGS', { statusId })); }; @@ -40,8 +35,8 @@ const StatusInteractionBar: React.FC = ({ status }): JSX. const handleOpenReblogsModal: React.EventHandler = (e) => { e.preventDefault(); - if (!me) onOpenUnauthorizedModal(); - else onOpenReblogsModal(account.acct, status.id); + // if (!me) onOpenUnauthorizedModal(); + onOpenReblogsModal(account.acct, status.id); }; const getReposts = () => { @@ -79,15 +74,15 @@ const StatusInteractionBar: React.FC = ({ status }): JSX. const handleOpenFavouritesModal: React.EventHandler> = (e) => { e.preventDefault(); - if (!me) onOpenUnauthorizedModal(); - else onOpenFavouritesModal(account.acct, status.id); + // if (!me) onOpenUnauthorizedModal(); + onOpenFavouritesModal(account.acct, status.id); }; const handleOpenDislikesModal: React.EventHandler> = (e) => { e.preventDefault(); - if (!me) onOpenUnauthorizedModal(); - else onOpenDislikesModal(account.acct, status.id); + // if (!me) onOpenUnauthorizedModal(); + onOpenDislikesModal(account.acct, status.id); }; const getFavourites = () => {