bigbuffet/pleroma
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

InteractionCounter: refactor with <button>

Browse source
This commit is contained in:
Alex Gleason 2022-11-20 16:14:50 -06:00
parent b9a3f7ec13
commit de3678c272
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7
1 changed files with 49 additions and 61 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

64
app/soapbox/features/status/components/status-interaction-bar.tsx
View file

@ -68,23 +68,17 @@ const StatusInteractionBar: React.FC<IStatusInteractionBar> = ({ status }): JSX.
const getReposts = () => {
if (status.reblogs_count) {
return (
<button
type='button'
onClick={handleOpenReblogsModal}
className='text-gray-600 dark:text-gray-700 hover:underline'
>
<InteractionCounter count={status.reblogs_count}>
<InteractionCounter count={status.reblogs_count} onClick={handleOpenReblogsModal}>
<FormattedMessage
id='status.interactions.reblogs'
defaultMessage='{count, plural, one {Repost} other {Reposts}}'
values={{ count: status.reblogs_count }}
/>
</InteractionCounter>
</button>
);
}
return '';
return null;
};
const handleOpenFavouritesModal: React.EventHandler<React.MouseEvent<HTMLButtonElement>> = (e) => {
@ -97,29 +91,17 @@ const StatusInteractionBar: React.FC<IStatusInteractionBar> = ({ status }): JSX.
const getFavourites = () => {
if (status.favourites_count) {
return (
<button
type='button'
onClick={features.exposableReactions ? handleOpenFavouritesModal : undefined}
className={
classNames({
'text-gray-600 dark:text-gray-700 hover:underline': true,
'hover:underline': features.exposableReactions,
'cursor-default': !features.exposableReactions,
})
}
>
<InteractionCounter count={status.favourites_count}>
<InteractionCounter count={status.favourites_count} onClick={features.exposableReactions ? handleOpenFavouritesModal : undefined}>
<FormattedMessage
id='status.interactions.favourites'
defaultMessage='{count, plural, one {Like} other {Likes}}'
values={{ count: status.favourites_count }}
/>
</InteractionCounter>
</button>
);
}
return '';
return null;
};
const handleOpenReactionsModal = () => {
@ -136,19 +118,9 @@ const StatusInteractionBar: React.FC<IStatusInteractionBar> = ({ status }): JSX.
acc + cur.get('count')
), 0);
if (count) {
return (
<button
type='button'
onClick={features.exposableReactions ? handleOpenReactionsModal : undefined}
className={
classNames({
'text-gray-600 dark:text-gray-700': true,
'hover:underline': features.exposableReactions,
'cursor-default': !features.exposableReactions,
})
}
>
<InteractionCounter count={count}>
<InteractionCounter count={count} onClick={features.exposableReactions ? handleOpenReactionsModal : undefined}>
<HStack space={0.5} alignItems='center'>
{emojiReacts.take(3).map((e, i) => {
return (
@ -161,27 +133,42 @@ const StatusInteractionBar: React.FC<IStatusInteractionBar> = ({ status }): JSX.
})}
</HStack>
</InteractionCounter>
</button>
);
}
return null;
};
return (
<HStack space={3}>
{getReposts()}
{getFavourites()}
{features.emojiReacts ? getEmojiReacts() : null}
{features.emojiReacts && getEmojiReacts()}
</HStack>
);
};
interface IInteractionCounter {
count: number,
onClick?: React.MouseEventHandler<HTMLButtonElement>,
children: React.ReactNode,
}
/** InteractionCounter component. */
const InteractionCounter: React.FC<IInteractionCounter> = ({ count, children }) => {
const InteractionCounter: React.FC<IInteractionCounter> = ({ count, onClick, children }) => {
const features = useFeatures();
return (
<button
type='button'
onClick={onClick}
className={
classNames({
'text-gray-600 dark:text-gray-700': true,
'hover:underline': features.exposableReactions,
'cursor-default': !features.exposableReactions,
})
}
>
<HStack space={1} alignItems='center'>
<Text theme='primary' weight='bold'>
<FormattedNumber value={count} />
@ -191,6 +178,7 @@ const InteractionCounter: React.FC<IInteractionCounter> = ({ count, children })
{children}
</Text>
</HStack>
</button>
);
};