From 83a8bd0220a12d87ceb3fba7967c8d14835d9adf Mon Sep 17 00:00:00 2001 From: ITurres Date: Wed, 10 Apr 2024 22:14:11 -0300 Subject: [PATCH] Fix: 'LikeButton' non-persistent liked style - Fixed by swapping the 'toggle' method for 'add' method at 'styleButton' function to always persist the liked style on the 'LikeButton' component when user keep liking the same project. - Simplify all the 'setWasLiked' method logic to just toggle the 'wasLiked' state value, without the need to check the previous value. --- src/components/UI/LikeButton.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/components/UI/LikeButton.tsx b/src/components/UI/LikeButton.tsx index 189f579..22a90f5 100644 --- a/src/components/UI/LikeButton.tsx +++ b/src/components/UI/LikeButton.tsx @@ -38,7 +38,7 @@ function LikeButton(props: LikeButtonProps): React.ReactElement { const styleButton = useCallback(() => { if (wasLiked) { - likeBtn.current?.classList.toggle('liked'); + likeBtn.current?.classList.add('liked'); } }, [wasLiked]); @@ -100,13 +100,15 @@ function LikeButton(props: LikeButtonProps): React.ReactElement { const handleLikeSubmit = async () => { // ? Since 'wasLiked' was false, now it will be set to true. This is to // ? trigger the function 'styleButton' to add the 'liked' class to the button. - setWasLiked((wasLiked) => !wasLiked); + setWasLiked(true); // * shows an instant update of the like count. if (!wasLiked) { setLikeCount((count) => count + 1); // * set 'wasLiked' to false, so that the user can like the project again. - setWasLiked((wasLiked) => !wasLiked); + setTimeout(() => { + setWasLiked(false); + }, 1000); } if (projectsLikes[0].error || error) {