I am currently implementing a like feature for my web application. The issue lies in the fact that my setLike function is not updating the state even after using setLike(!like). I verified this by adding console.log() statements before and after the setLike() call, but both logs showed the same value. Below is my Post component.
import React , {useState,useEffect} from 'react'
import './Post.css'
import Avatar from '@material-ui/core/Avatar';
import {Button, IconButton, Input, Typography } from '@material-ui/core';
import {DataBase} from './firebase'
import firebase from 'firebase';
import FavoriteIcon from '@material-ui/icons/Favorite';
import {useStateValue} from '../contexts/StateProvider'
function Post({postId}) {
//get the user from the provider
const [{user}, dispatch] = useStateValue();
//number of likes
const [likeCount,setLikeCount] = useState(likesCount)
//if like=true or not
const [like, setLike] = useState(false);
My back-end uses Firebase Firestore database. The like document is only created in the database collection when a user interacts with it for the first time (liking it, unliking it, then liking it again). So, the first step is to check if the user has previously liked the document. If they have, retrieve the like value (true/false) for that specific user and set it using setLike(like). Also, fetch the number of documents in the collection where like==true and update the like count using setLikeCount(likeCount).
//=======Get likes from the database ===========================
useEffect(() => {
//check if the user already liked the doc or not (first time or not)
DataBase.collection('posts').doc(postId).collection('postLikes')
.doc(user.uid).get().then((doc) => {
if (doc.exists) {
console.log(doc.data().like)
//set like to value of like from database
setLike(doc.data().like)
} else {
// doc.data() will be undefined in this case
console.log("Not liked");
}
}).catch((error) => {
console.log("Error getting document:", error);
});
//grab the docs which have like=true
DataBase.collection('posts').doc(postId).collection('postLikes').where("like", "==",
true).get()
.then((querySnapshot) => {
setLikeCount((querySnapshot.docs.map(doc =>doc.data())).length)
console.log(likeCount +" likes count")
})
.catch((error) => {
console.log("Error getting documents: ", error);
});
}
//when postId changes or page loads fire the code above
},[postId])
Here is my postLike function. The intention of setLike(!like) is to toggle the user's previous like status for the document stored in Firebase. However, it seems that the update is not taking place.
//=============Post likes to the database=======
const postLike = (e) => {
//if already liked i.e. doc exists
console.log(like+"like before")
setLike(!like)
console.log(like+"like after")
like?(setLikeCount(likeCount+1)):(setLikeCount(likeCount-1))
console.log("likeCount"+likeCount)
DataBase.collection('posts').doc(postId).collection('postLikes').doc(user.uid).set(
{
like:like,
username:user.displayName,
timestamp:firebase.firestore.FieldValue.serverTimestamp(),
}
).catch((err)=>{console.log("something wrong happened "+err.message)})
}
return (
<div className="post">
<div className="post__likes">
{/*like button*/}
{
like?
(<Button onClick={postLike} ><FavoriteIcon fontsize="small" cursor="pointer" onClick=.
{postLike} style={{color:'red'}}/></Button> ):
(<Button onClick={postLike} ><FavoriteIcon fontsize="small" cursor="pointer" />
</Button>)
}
<Typography style={{color:'aliceblue'}}>Liked by {likeCount}</Typography>
</div>
</div>
)
}
export default Post