made the required changes for implementing like system for comment and going to implement the same for tutorial

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 <div>Loading...</div>; 
+  }
 
   return (
-    data && (
+    data  && (
       <>
+      {console.log("status",isLiked)}
         <Paper variant="outlined" className={classes.comments}>
           <Typography mb={1} sx={{ fontSize: "18px" }}>
             {data?.content}

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);
   };

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";
+
+

src/store/actions/tutorialPageActions.js

@@ -159,13 +159,15 @@ 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 });
       console.log(e);
     }
   };
 
+
 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;
+  }
+};

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;
   }