matty/ncd-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

pl-fe: Usually authentication is not required to display interactions

Browse Source 
Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
This commit is contained in:
marcin mikołajczak
2024-09-12 11:02:08 +02:00
parent 40675093f5
commit 6c208a5b91
3 changed files with 28 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -414,6 +414,10 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
}
}
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<IStatusActionBar> = ({
});
}
if (!me) {
return menu;
}
const isGroupStatus = typeof status.group === 'object';
if (features.bookmarks) {

27
packages/pl-fe/src/components/status-reactions-bar.tsx
View File

@ -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<SelectedStatus, 'id'>;
reaction: EmojiReaction;
obfuscate?: boolean;
disabled?: boolean;
unauthenticated?: boolean;
}
const StatusReaction: React.FC<IStatusReaction> = ({ reaction, status, obfuscate, disabled }) => {
const StatusReaction: React.FC<IStatusReaction> = ({ reaction, status, obfuscate, unauthenticated }) => {
const dispatch = useAppDispatch();
const intl = useIntl();
@ -40,9 +41,9 @@ const StatusReaction: React.FC<IStatusReaction> = ({ reaction, status, obfuscate
const handleClick: React.MouseEventHandler<HTMLButtonElement> = (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<IStatusReaction> = ({ 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<IStatusReaction> = ({ reaction, status, obfuscate
emoji: `:${shortCode}:`,
count: reaction.count,
})}
disabled={disabled}
disabled={unauthenticated}
>
<Emoji className='h-4 w-4' emoji={reaction.name} src={reaction.url || undefined} />
@ -100,7 +101,13 @@ const StatusReactionsBar: React.FC<IStatusReactionsBar> = ({ status, collapsed }
return (
<HStack className='pt-2' space={2} wrap>
{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}
unauthenticated={!me}
/>
) : null)}
{me && (
<EmojiPickerDropdown onPickEmoji={handlePickEmoji}>

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

@ -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<IStatusInteractionBar> = ({ 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<IStatusInteractionBar> = ({ status }): JSX.
const handleOpenReblogsModal: React.EventHandler<React.MouseEvent> = (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<IStatusInteractionBar> = ({ status }): JSX.
const handleOpenFavouritesModal: React.EventHandler<React.MouseEvent<HTMLButtonElement>> = (e) => {
e.preventDefault();
if (!me) onOpenUnauthorizedModal();
else onOpenFavouritesModal(account.acct, status.id);
// if (!me) onOpenUnauthorizedModal();
onOpenFavouritesModal(account.acct, status.id);
};
const handleOpenDislikesModal: React.EventHandler<React.MouseEvent<HTMLButtonElement>> = (e) => {
e.preventDefault();
if (!me) onOpenUnauthorizedModal();
else onOpenDislikesModal(account.acct, status.id);
// if (!me) onOpenUnauthorizedModal();
onOpenDislikesModal(account.acct, status.id);
};
const getFavourites = () => {