pl-fe: fix status reactions for unauthenticated users

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
This commit is contained in:
marcin mikołajczak 2024-09-11 17:32:59 +02:00
parent 1a05c1fa6c
commit a6deb34558

View file

@ -6,7 +6,7 @@ import { defineMessages, useIntl } from 'react-intl';
import { emojiReact, unEmojiReact } from 'pl-fe/actions/emoji-reacts'; import { emojiReact, unEmojiReact } from 'pl-fe/actions/emoji-reacts';
import EmojiPickerDropdown from 'pl-fe/features/emoji/containers/emoji-picker-dropdown-container'; import EmojiPickerDropdown from 'pl-fe/features/emoji/containers/emoji-picker-dropdown-container';
import unicodeMapping from 'pl-fe/features/emoji/mapping'; import unicodeMapping from 'pl-fe/features/emoji/mapping';
import { useAppDispatch, useSettings } from 'pl-fe/hooks'; import { useAppDispatch, useLoggedIn, useSettings } from 'pl-fe/hooks';
import AnimatedNumber from './animated-number'; import AnimatedNumber from './animated-number';
import { Emoji, HStack, Icon, Text } from './ui'; import { Emoji, HStack, Icon, Text } from './ui';
@ -28,9 +28,10 @@ interface IStatusReaction {
status: Pick<SelectedStatus, 'id'>; status: Pick<SelectedStatus, 'id'>;
reaction: EmojiReaction; reaction: EmojiReaction;
obfuscate?: boolean; obfuscate?: boolean;
disabled?: boolean;
} }
const StatusReaction: React.FC<IStatusReaction> = ({ reaction, status, obfuscate }) => { const StatusReaction: React.FC<IStatusReaction> = ({ reaction, status, obfuscate, disabled }) => {
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const intl = useIntl(); const intl = useIntl();
@ -39,6 +40,8 @@ const StatusReaction: React.FC<IStatusReaction> = ({ reaction, status, obfuscate
const handleClick: React.MouseEventHandler<HTMLButtonElement> = (e) => { const handleClick: React.MouseEventHandler<HTMLButtonElement> = (e) => {
e.stopPropagation(); e.stopPropagation();
if (disabled) return;
if (reaction.me) { if (reaction.me) {
dispatch(unEmojiReact(status, reaction.name)); dispatch(unEmojiReact(status, reaction.name));
} else { } else {
@ -57,8 +60,11 @@ const StatusReaction: React.FC<IStatusReaction> = ({ reaction, status, obfuscate
return ( return (
<button <button
className={clsx('flex cursor-pointer items-center gap-2 rounded-md border border-gray-400 p-1.5 transition-colors', { className={clsx('flex cursor-pointer items-center gap-2 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 hover:bg-primary-200 hover:dark:border-primary-300 hover:dark:bg-primary-300 hover:black:bg-primary-500': reaction.me, '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 hover:bg-primary-100 hover:dark:border-primary-600 hover:dark:bg-primary-600 hover:black:bg-primary-700': !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,
})} })}
key={reaction.name} key={reaction.name}
onClick={handleClick} onClick={handleClick}
@ -66,6 +72,7 @@ const StatusReaction: React.FC<IStatusReaction> = ({ reaction, status, obfuscate
emoji: `:${shortCode}:`, emoji: `:${shortCode}:`,
count: reaction.count, count: reaction.count,
})} })}
disabled={disabled}
> >
<Emoji className='h-4 w-4' emoji={reaction.name} src={reaction.url || undefined} /> <Emoji className='h-4 w-4' emoji={reaction.name} src={reaction.url || undefined} />
@ -79,6 +86,7 @@ const StatusReaction: React.FC<IStatusReaction> = ({ reaction, status, obfuscate
const StatusReactionsBar: React.FC<IStatusReactionsBar> = ({ status, collapsed }) => { const StatusReactionsBar: React.FC<IStatusReactionsBar> = ({ status, collapsed }) => {
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const intl = useIntl(); const intl = useIntl();
const { me } = useLoggedIn();
const { demetricator } = useSettings(); const { demetricator } = useSettings();
const handlePickEmoji = (emoji: EmojiType) => { const handlePickEmoji = (emoji: EmojiType) => {
@ -94,17 +102,19 @@ const StatusReactionsBar: React.FC<IStatusReactionsBar> = ({ status, collapsed }
{sortedReactions.map((reaction) => reaction.count ? ( {sortedReactions.map((reaction) => reaction.count ? (
<StatusReaction key={reaction.name} status={status} reaction={reaction} obfuscate={demetricator} /> <StatusReaction key={reaction.name} status={status} reaction={reaction} obfuscate={demetricator} />
) : null)} ) : null)}
<EmojiPickerDropdown onPickEmoji={handlePickEmoji}> {me && (
<button <EmojiPickerDropdown onPickEmoji={handlePickEmoji}>
className='emoji-picker-dropdown cursor-pointer rounded-md border border-gray-400 bg-transparent p-1.5 transition-colors hover:bg-gray-50 black:border-primary-800 black:bg-primary-800 hover:black:bg-primary-700 dark:border-primary-700 dark:bg-primary-700 hover:dark:border-primary-600 hover:dark:bg-primary-600' <button
title={intl.formatMessage(messages.addEmoji)} className='emoji-picker-dropdown cursor-pointer rounded-md border border-gray-400 bg-transparent p-1.5 transition-colors hover:bg-gray-50 black:border-primary-800 black:bg-primary-800 hover:black:bg-primary-700 dark:border-primary-700 dark:bg-primary-700 hover:dark:border-primary-600 hover:dark:bg-primary-600'
> title={intl.formatMessage(messages.addEmoji)}
<Icon >
className='h-4 w-4' <Icon
src={require('@tabler/icons/outline/mood-plus.svg')} className='h-4 w-4'
/> src={require('@tabler/icons/outline/mood-plus.svg')}
</button> />
</EmojiPickerDropdown> </button>
</EmojiPickerDropdown>
)}
</HStack> </HStack>
); );
}; };