TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-11-28 14:03:48 +03:00
Code Issues Projects Releases Wiki Activity

Added a member check for toggling on and off likes

Browse Source 
- This should stop people who are not logged in from liking comments

refs https://github.com/TryGhost/Team/issues/1693
This commit is contained in:
James Morris 2022-07-19 17:45:22 +01:00
parent dce15950cd
commit 28b566f95a
1 changed files with 17 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
apps/comments-ui/src/components/Like.js
View File

@ -3,23 +3,30 @@ import {ReactComponent as LikeIcon} from '../images/icons/like.svg';
import AppContext from '../AppContext'; import AppContext from '../AppContext';
function Like(props) { function Like(props) {
const {onAction} = useContext(AppContext); const {onAction, member} = useContext(AppContext);
const [animationClass, setAnimation] = useState(''); const [animationClass, setAnimation] = useState('');
let likeCursor = 'cursor-pointer';
if (!member) {
likeCursor = 'cursor-text';
}
const toggleLike = () => { const toggleLike = () => {
if (!props.comment.liked) { if (member) {
onAction('likeComment', props.comment); if (!props.comment.liked) {
setAnimation('animate-heartbeat'); onAction('likeComment', props.comment);
setTimeout(() => { setAnimation('animate-heartbeat');
setAnimation(''); setTimeout(() => {
}, 400); setAnimation('');
} else { }, 400);
onAction('unlikeComment', props.comment); } else {
onAction('unlikeComment', props.comment);
}
} }
}; };
return ( return (
<button className={`flex font-sans items-center text-sm ${props.comment.liked ? 'text-neutral-900 dark:text-[rgba(255,255,255,0.9)]' : 'text-neutral-400 dark:text-[rgba(255,255,255,0.5)]'}`} onClick={toggleLike}> <button className={`flex font-sans items-center text-sm ${props.comment.liked ? 'text-neutral-900 dark:text-[rgba(255,255,255,0.9)]' : 'text-neutral-400 dark:text-[rgba(255,255,255,0.5)]'} ${likeCursor}`} onClick={toggleLike}>
<LikeIcon className={animationClass + ` mr-[6px] ${props.comment.liked ? 'fill-neutral-900 stroke-neutral-900 dark:fill-white dark:stroke-white' : 'stroke-neutral-400 dark:stroke-[rgba(255,255,255,0.5)]'}`} /> <LikeIcon className={animationClass + ` mr-[6px] ${props.comment.liked ? 'fill-neutral-900 stroke-neutral-900 dark:fill-white dark:stroke-white' : 'stroke-neutral-400 dark:stroke-[rgba(255,255,255,0.5)]'}`} />
{props.comment.likes_count} {props.comment.likes_count}
</button> </button>