diff --git a/src/components/TutorialPage/components/Commnets/Comment.jsx b/src/components/TutorialPage/components/Commnets/Comment.jsx index 09e486fc..de8332de 100644 --- a/src/components/TutorialPage/components/Commnets/Comment.jsx +++ b/src/components/TutorialPage/components/Commnets/Comment.jsx @@ -27,8 +27,13 @@ import { useFirebase, useFirestore } from "react-redux-firebase"; import { getCommentData, getCommentReply, - addComment + addComment, + addCommentLike, + addcommentlikestatus, + fetchLikeStatus } from "../../../../store/actions/tutorialPageActions"; +import { get, set } from "lodash"; + const useStyles = makeStyles(() => ({ container: { margin: "10px 0", @@ -56,24 +61,73 @@ const Comment = ({ id }) => { const classes = useStyles(); const [showReplyfield, setShowReplyfield] = useState(false); const [alignment, setAlignment] = React.useState("left"); - const [count, setCount] = useState(1); + const [count, setCount] = useState(0); const firestore = useFirestore(); const firebase = useFirebase(); const dispatch = useDispatch(); + const [isLoading, setIsLoading] = useState(true); + const [isLiked, setIsLiked] = useState(0); useState(() => { getCommentData(id)(firebase, firestore, dispatch); }, [id]); + let d=useSelector( + (state)=>{ + return state.tutorialPage.comment.data; + } + ); + console.log("d",d); + useEffect(() => { + + let [da] = d.filter((item) => item.comment_id === id); + console.log("d after", da); + + if (da) { + setCount(da.upvotes - da.downvotes); + } else { + console.log("No matching data found for comment_id:", id); + + } + }, [d, id]); + + useEffect(() => { + const getLikeStatus = async () => { + try { + + setIsLoading(true); + + const status = await fetchLikeStatus(id, firebase.auth().currentUser.uid)(firebase, firestore); + console.log("status", status); + setIsLiked(status); + } catch (error) { + console.error('Failed to fetch like status:', error); + } finally { + + setIsLoading(false); + } + }; + + if (firebase.auth().currentUser) { + getLikeStatus(); + } + }, [id, firebase, firestore]); + + + + const commentsArray = useSelector( ({ tutorialPage: { comment: { data } } }) => data - ); + ); + + const [data] = commentsArray.filter(comment => comment.comment_id == id); + const repliesArray = useSelector( ({ tutorialPage: { @@ -84,12 +138,46 @@ const Comment = ({ id }) => { const [replies] = repliesArray.filter(replies => replies.comment_id == id); - const handleIncrement = () => { - setCount(count + 1); + const handleIncrement = async () => { + if(isLiked==0){ + setIsLiked(n=>n+1); + setCount(count=>count + 1); + await addcommentlikestatus(id,firebase.auth().currentUser.uid,1)(firebase, firestore, dispatch); + await addCommentLike(id,1,0)(firebase, firestore, dispatch); + } + else if(isLiked==-1){ + setIsLiked(n=>n+2); + setCount(count=>count + 2); + await addcommentlikestatus(id,firebase.auth().currentUser.uid,1)(firebase, firestore, dispatch); + await addCommentLike(id,1,-1)(firebase, firestore, dispatch); + } + else{ + setIsLiked(n=>n-1); + setCount(count=>count - 1); + await addcommentlikestatus(id,firebase.auth().currentUser.uid,0)(firebase, firestore, dispatch); + await addCommentLike(id,-1,0)(firebase, firestore, dispatch); + } }; - const handleDecrement = () => { - setCount(count - 1); + const handleDecrement = async () => { + if(isLiked==0){ + setIsLiked(n=>n-1); + setCount(count=>count - 1); + await addcommentlikestatus(id,firebase.auth().currentUser.uid,-1)(firebase, firestore, dispatch); + await addCommentLike(id,0,1)(firebase, firestore, dispatch); + } + else if(isLiked==1){ + setIsLiked(n=>n-2); + setCount(count=>count - 2); + await addcommentlikestatus(id,firebase.auth().currentUser.uid,-1)(firebase, firestore, dispatch); + await addCommentLike(id,-1,1)(firebase, firestore, dispatch); + } + else{ + setIsLiked(n=>n+1); + setCount(count=>count +1); + await addcommentlikestatus(id,firebase.auth().currentUser.uid,0)(firebase, firestore, dispatch); + await addCommentLike(id,0,-1)(firebase, firestore, dispatch); + } }; const handleAlignment = (event, newAlignment) => { @@ -102,14 +190,20 @@ const Comment = ({ id }) => { replyTo: data.comment_id, tutorial_id: data.tutorial_id, createdAt: firestore.FieldValue.serverTimestamp(), - userId: "codelabzuser" + userId: "codelabzuser", + upvotes:0, + downvotes:0 }; addComment(commentData)(firebase, firestore, dispatch); }; + if (isLoading) { + return
Loading...
; + } return ( - data && ( + data && ( <> + {console.log("status",isLiked)} {data?.content} diff --git a/src/components/TutorialPage/components/Commnets/CommentBox.jsx b/src/components/TutorialPage/components/Commnets/CommentBox.jsx index 02f462f9..fb224c0f 100644 --- a/src/components/TutorialPage/components/Commnets/CommentBox.jsx +++ b/src/components/TutorialPage/components/Commnets/CommentBox.jsx @@ -41,7 +41,9 @@ const CommentBox = ({ commentsArray, tutorialId }) => { replyTo: tutorialId, tutorial_id: tutorialId, createdAt: firestore.FieldValue.serverTimestamp(), - userId: "codelabzuser" + userId: "codelabzuser", + upvotes: 0, + downvotes: 0 }; addComment(commentData)(firebase, firestore, dispatch); }; diff --git a/src/store/actions/actionTypes.js b/src/store/actions/actionTypes.js index 34c8d586..a0d2ce4d 100644 --- a/src/store/actions/actionTypes.js +++ b/src/store/actions/actionTypes.js @@ -155,3 +155,9 @@ export const GET_STEPS_DATA_FAIL = "GET_STEPS_DETAILS_FAILED"; export const GET_TUTORIAL_FEED_START = "GET_TUTORIAL_FEED_START"; export const GET_TUTORIAL_FEED_SUCCESS = "GET_TUTORIAL_FEED_SUCCESS"; export const GET_TUTORIAL_FEED_FAILED = "GET_TUTORIAL_FEED_FAILED"; + +export const ADD_COMMENT_LIKE_START = "ADD_COMMENT_LIKE_START"; +export const ADD_COMMENT_LIKE_SUCCESS = "ADD_COMMENT_LIKE_SUCCESS"; +export const ADD_COMMENT_LIKE_FAILED = "ADD_COMMENT_LIKE_FAILED"; + + diff --git a/src/store/actions/tutorialPageActions.js b/src/store/actions/tutorialPageActions.js index c716765a..49205bd9 100644 --- a/src/store/actions/tutorialPageActions.js +++ b/src/store/actions/tutorialPageActions.js @@ -159,6 +159,7 @@ export const getCommentData = .doc(commentId) .get(); const comment = data.data(); + dispatch({ type: actions.GET_COMMENT_DATA_SUCCESS, payload: comment }); } catch (e) { dispatch({ type: actions.GET_COMMENT_DATA_FAIL }); @@ -166,6 +167,7 @@ export const getCommentData = } }; + export const getCommentReply = commentId => async (firebase, firestore, dispatch) => { try { @@ -218,3 +220,73 @@ export const addComment = comment => async (firebase, firestore, dispatch) => { dispatch({ type: actions.ADD_COMMENT_FAILED, payload: e.message }); } }; + +export const addCommentLike = (id,upvote,downvote) => async (firebase, firestore, dispatch) => { + try { + dispatch({ type: actions.ADD_COMMENT_LIKE_START }); + const ref=await firestore + .collection("cl_comments") + .doc(id) + .update({ + upvotes: firebase.firestore.FieldValue.increment(upvote), + downvotes: firebase.firestore.FieldValue.increment(downvote) + }) + .then(() => { + dispatch({ type: actions.ADD_COMMENT_LIKE_SUCCESS }); + }); + } catch (e) { + dispatch({ type: actions.ADD_COMMENT_LIKE_FAILED, payload: e.message }); + } +} + +export const addcommentlikestatus=(id,uid,likestatus)=>async(firebase,firestore,dispatch)=>{ + try{ + const ref=await firestore.collection("comment_likes").doc(`${id}_${uid}`).set({ + comment_id:id, + user_id:uid, + likestatus:likestatus, + timestamp:firebase.firestore.FieldValue.serverTimestamp() + }) + } + catch(e){ + console.log(e) + } +} + +// export const ftechlikestatus=(id,uid)=>async(firebase,firestore,dispatch)=>{ +// try{ +// const ref=await firestore.collection("comment_likes").doc(id+"_"+uid).get() +// if(ref.exists){ +// return ref.data().likestatus +// } +// else{ +// return false +// } +// } +// catch(e){ +// console.log(e) +// } +// } + +export const fetchLikeStatus = async (commentId, userId, firestore) => { + const docId = `${commentId}_${userId}`; + console.log(`Fetching like status for document ID: ${docId}`); + + try { + const docRef = firestore.collection("comment_likes").doc(docId); + const docSnapshot = await docRef.get(); + + console.log(`Document exists: ${docSnapshot.exists}`, docSnapshot.data()); + + if (docSnapshot.exists && docSnapshot.data().hasOwnProperty('likestatus')) { + + return docSnapshot.data().likestatus; + } else { + + return 0; + } + } catch (error) { + console.error('Error fetching like status:', error); + return 0; + } +}; diff --git a/src/store/reducers/tutorialPageReducers/commentReducer.js b/src/store/reducers/tutorialPageReducers/commentReducer.js index 7d1780ac..e5f00bbf 100644 --- a/src/store/reducers/tutorialPageReducers/commentReducer.js +++ b/src/store/reducers/tutorialPageReducers/commentReducer.js @@ -62,6 +62,26 @@ const CommentReducer = (state = initialState, { type, payload }) => { error: payload }; + case actions.ADD_COMMENT_LIKE_START: + return { + ...state, + loading: true + }; + + case actions.ADD_COMMENT_LIKE_SUCCESS: + return { + ...state, + loading: false + }; + + case actions.ADD_COMMENT_LIKE_FAILED: + return { + ...state, + loading: false, + error: payload + }; + + default: return state; }