From 28f888560930f0af8d4ed1a61733e80a227b6e57 Mon Sep 17 00:00:00 2001
From: Philimuhire <philimuhire@gmail.com>
Date: Thu, 28 Nov 2024 03:04:55 +0200
Subject: [PATCH] Fix(#266): added comments and reactions

---
 src/pages/Blogs/BlogComment.tsx         | 156 ++++++++++++
 src/pages/Blogs/BlogReactions.tsx       | 105 ++++++++
 src/pages/Blogs/singleBlog.tsx          |  79 +-----
 src/redux/actions/commentActions.tsx    | 320 ++++++++++++++++++++++++
 src/redux/actions/reactionActions.tsx   |  94 +++++++
 src/redux/actiontypes/commentTypes.tsx  |  24 ++
 src/redux/actiontypes/reactionTypes.tsx |  18 ++
 src/redux/index.ts                      |  21 ++
 src/redux/reducers/commentReducers.ts   | 163 ++++++++++++
 src/redux/reducers/index.ts             |   6 +-
 src/redux/reducers/reactionReducers.tsx |  94 +++++++
 11 files changed, 1004 insertions(+), 76 deletions(-)
 create mode 100644 src/pages/Blogs/BlogComment.tsx
 create mode 100644 src/pages/Blogs/BlogReactions.tsx
 create mode 100644 src/redux/actions/commentActions.tsx
 create mode 100644 src/redux/actions/reactionActions.tsx
 create mode 100644 src/redux/actiontypes/commentTypes.tsx
 create mode 100644 src/redux/actiontypes/reactionTypes.tsx
 create mode 100644 src/redux/reducers/commentReducers.ts
 create mode 100644 src/redux/reducers/reactionReducers.tsx

diff --git a/src/pages/Blogs/BlogComment.tsx b/src/pages/Blogs/BlogComment.tsx
new file mode 100644
index 000000000..fb020fa5f
--- /dev/null
+++ b/src/pages/Blogs/BlogComment.tsx
@@ -0,0 +1,156 @@
+import React, { useState, useEffect } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { RootState } from "../../redux/reducers";
+import {
+  getCommentsByBlogId,
+  createCommentAction,
+  fetchRepliesByComment,
+  addReplyToComment,
+} from "../../redux/actions/commentActions";
+const profile: string = require("../../assets/avatar.png").default;
+
+interface BlogCommentProps {
+  blogId: string;
+}
+
+const BlogComment: React.FC<BlogCommentProps> = ({ blogId }) => {
+  const dispatch = useDispatch();
+
+  const {
+    comment_data: comments,
+    isCommentLoading,
+    errors,
+    repliesByCommentId,
+  } = useSelector((state: RootState) => state.comments);
+
+  const [newComment, setNewComment] = useState("");
+  const [activeCommentId, setActiveCommentId] = useState<string | null>(null);
+  const [replyContent, setReplyContent] = useState("");
+
+  useEffect(() => {
+    if (blogId) {
+      dispatch(getCommentsByBlogId(blogId));
+    }
+  }, [dispatch, blogId]);
+
+  useEffect(() => {
+    if (activeCommentId) {
+      dispatch(fetchRepliesByComment(activeCommentId));
+    }
+  }, [dispatch, activeCommentId]);
+
+  const handleAddComment = () => {
+    if (newComment.trim()) {
+      dispatch(createCommentAction(blogId, newComment));
+      setNewComment("");
+    } 
+  };
+
+  const handleAddReply = (commentId: string) => {
+    const userId = localStorage.getItem("userId");
+    if (!userId) {
+      alert("You must be logged in to reply.");
+      return;
+    }
+
+    if (replyContent.trim()) {
+      dispatch(addReplyToComment(replyContent, commentId));
+      setReplyContent("");
+    } 
+  };
+
+  return (
+    <div className="space-y-4">
+      <h2 className="text-xl font-semibold">
+        {`${comments.length} Comments`}
+      </h2>
+
+      <div className="flex flex-row my-2 gap-4 w-full items-center justify-start">
+        <textarea
+          value={newComment}
+          onChange={(e) => setNewComment(e.target.value)}
+          placeholder="Write your comment here..."
+          className="px-4 py-2 w-1/2 bg-gray-800 border rounded-lg focus:outline-none focus:ring-2 focus:ring-green-400"
+        />
+        <button
+          onClick={handleAddComment}
+          disabled={isCommentLoading}
+          className="rounded py-1 px-4 bg-green text-white transition-colors dark:hover:bg-dark-frame-bg hover:text-green hover:border hover:border-green"
+        >
+          Add Comment
+        </button>
+      </div>
+
+      {comments.length > 0 ? (
+        <div>
+          {comments.map((comment) => (
+            <div
+              key={comment.id} 
+              className="dark:bg-slate-800 bg-slate-400 rounded-lg p-4 space-y-2"
+            >
+              <div className="flex items-center gap-3 w-1/2">
+                <div className="w-10 h-10 bg-slate-300 dark:bg-slate-700 rounded-full overflow-hidden">
+                  <img
+                    src={profile}
+                    className="w-full h-full object-cover"
+                  />
+                </div>
+                <div>
+                  <h3 className="font-medium">{`${comment.user.firstname} ${comment.user.lastname}`}</h3>
+                </div>
+              </div>
+              <p className="text-white">{comment.content}</p>
+
+              <button
+                onClick={() =>
+                  setActiveCommentId(activeCommentId === comment.id ? null : comment.id) 
+                }
+                className="text-green text-sm"
+              >
+                {activeCommentId === comment.id ? "Hide Replies" : "View Replies"}
+              </button>
+              {activeCommentId === comment.id && (
+                <div>
+                  {repliesByCommentId[comment.id]?.length > 0 ? (
+                    repliesByCommentId[comment.id].map((reply) => (
+                      <div key={reply.id} className="ml-4 mt-2">
+                        <p className="text-gray-200">{reply.content}</p>
+                        <span className="text-xs text-gray-400">
+                          - {reply.user.firstname || "Anonymous"} {reply.user.lastname || ""}
+                        </span>
+                      </div>
+                    ))
+                  ) : (
+                    <p>No replies yet</p>
+                  )}
+                  <div className="mt-2">
+                    <textarea
+                      value={replyContent}
+                      onChange={(e) => setReplyContent(e.target.value)}
+                      placeholder="Write a reply..."
+                      className="bg-gray-800 px-2 py-1 w-1/2 border rounded-md mr-4"
+                    />
+                    <button
+                      onClick={() => handleAddReply(comment.id)} 
+                      className="rounded py-1 px-4 bg-green text-white transition-colors dark:hover:bg-dark-frame-bg hover:text-green hover:border hover:border-green"
+                    >
+                      Reply
+                    </button>
+                  </div>
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+      ) : (
+        <div>
+          <p className="text-left">No comments yet</p>
+        </div>
+      )}
+
+      {errors && <p className="text-red-500">{errors}</p>}
+    </div>
+  );
+};
+
+export default BlogComment;
\ No newline at end of file
diff --git a/src/pages/Blogs/BlogReactions.tsx b/src/pages/Blogs/BlogReactions.tsx
new file mode 100644
index 000000000..b9c16ae10
--- /dev/null
+++ b/src/pages/Blogs/BlogReactions.tsx
@@ -0,0 +1,105 @@
+import React, { useState, useEffect } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { RootState } from "../../redux/reducers";
+import {
+  getReactionsByBlogId,
+  addReactionAction,
+  removeReactionAction,
+} from "../../redux/actions/reactionActions";
+
+interface Reaction {
+  [type: string]: number;
+}
+
+interface BlogReactionProps {
+  blogId: string;
+}
+
+const reactionTypes = [
+  { type: "LIKE", label: "Like", emoji: "👍" },
+  { type: "CELEBRATE", label: "Celebrate", emoji: "🎉" },
+  { type: "LOVE", label: "Love", emoji: "❤️" },
+  { type: "SUPPORT", label: "Support", emoji: "👏" },
+  { type: "FUNNY", label: "Funny", emoji: "😂" },
+];
+
+const BlogReaction: React.FC<BlogReactionProps> = ({ blogId }) => {
+  const dispatch = useDispatch();
+  const [currentReaction, setCurrentReaction] = useState<string | null>(null); 
+  const [showReactionsMenu, setShowReactionsMenu] = useState(false);
+
+  const { reactions, isReactionLoading } = useSelector(
+    (state: RootState) => state.reactions
+  );
+
+  const typedReactions: Reaction = reactions;
+
+  useEffect(() => {
+    if (blogId) {
+      dispatch(getReactionsByBlogId(blogId));
+    }
+  }, [dispatch, blogId]);
+
+  const handleAddReaction = async (type: string) => {
+    if (type === currentReaction) {
+      await dispatch(removeReactionAction(blogId));
+      setCurrentReaction(null);
+    } else {
+      if (currentReaction) {
+        await dispatch(removeReactionAction(blogId));
+      }
+      await dispatch(addReactionAction(blogId, type));
+      setCurrentReaction(type);
+    }
+    dispatch(getReactionsByBlogId(blogId));
+    setShowReactionsMenu(false);
+  };
+
+  const totalReactions = typedReactions
+    ? Object.values(typedReactions).reduce((total, count) => total + count, 0)
+    : 0;
+
+  useEffect(() => {
+  }, [typedReactions, totalReactions]);
+
+  return (
+    <div className="relative">
+      <button
+        className="rounded-full text-white px-4 py-2 transition"
+        onMouseEnter={() => setShowReactionsMenu(true)}
+        onMouseLeave={() => setShowReactionsMenu(false)}
+      >
+        <span role="img" aria-label="like" className="text-xl flex items-center gap-2">
+          👍 <span>Like</span>
+        </span>
+      </button>
+
+      {showReactionsMenu && (
+        <div
+          className="absolute top-[-50px] left-0 flex gap-1 bg-white shadow-lg rounded-xl p-2 z-10"
+          onMouseEnter={() => setShowReactionsMenu(true)}
+          onMouseLeave={() => setShowReactionsMenu(false)}
+        >
+          {reactionTypes.map(({ type, label, emoji }) => (
+            <button
+              key={type}
+              className={`flex flex-col items-center hover:bg-gray-300 p-2 rounded-xl transition ${
+                type === currentReaction ? "bg-blue-200" : ""
+              }`}
+              onClick={() => handleAddReaction(type)}
+            >
+              <span className="text-2xl">{emoji}</span>
+              <span className="text-sm text-black">{label}</span>
+            </button>
+          ))}
+        </div>
+      )}
+
+      <div className="text-sm text-gray-400 mb-4">
+        {`${totalReactions} reactions`}
+      </div>
+    </div>
+  );
+};
+
+export default BlogReaction;
\ No newline at end of file
diff --git a/src/pages/Blogs/singleBlog.tsx b/src/pages/Blogs/singleBlog.tsx
index 5c8872d33..89c34c34d 100644
--- a/src/pages/Blogs/singleBlog.tsx
+++ b/src/pages/Blogs/singleBlog.tsx
@@ -9,6 +9,8 @@ import SingleBlogSkeleton from '../../skeletons/singleBlogSkeleton';
 import * as icons from "react-icons/ai";
 import { useSelector } from 'react-redux';
 import { toast } from 'react-toastify';
+import BlogComment from './BlogComment'; 
+import BlogReaction from './BlogReactions';
 
 import { useNavigate } from 'react-router-dom';
 
@@ -181,6 +183,8 @@ const SingleBlogView = () => {
               )}
             </div>
           </div>
+          {id && <BlogReaction blogId={id} />}
+          {id && <BlogComment blogId={id} />}
           {topArticles && topArticles.length > 0 ? (
               <div className='mt-10'>
                 <h1>Related Articles</h1>
@@ -205,81 +209,6 @@ const SingleBlogView = () => {
               ): (
                 <p>No related articles available</p>
               )}
-          <div className="flex items-center gap-4">
-            <button onClick={handleLike} className="flex items-center gap-2">
-              <Heart
-                className={`w-6 h-6 ${
-                  isLiked ? "fill-green-400 text-green-400" : "dark:text-white"
-                }`}
-              />
-              <span>{blog.likes.length}</span>
-            </button>
-          </div>
-          <div className="flex flex-row my-2 gap-4 w-full items-center justify-start">
-            <input
-              type="text"
-              value={comment}
-              onChange={(e) => setComment(e.target.value)}
-              placeholder="Add your comment here..."
-              className="px-4 py-2 w-1/2 dark:bg-slate-800 border rounded-lg focus:outline-none focus:ring-2 focus:ring-green-400"
-            />
-            <button
-              onClick={handleComment}
-              className="rounded py-1 px-4 bg-green text-white transition-colors dark:hover:bg-dark-frame-bg hover:text-green hover:border hover:border-green"
-            >
-              Comment
-            </button>
-          </div>
-          <div className="space-y-4">
-            <h2 className="text-xl font-semibold">
-              {blog.comments.length} Comments
-            </h2>
-            {blog.comments.length > 0 ? (
-              <>
-                {blog.comments.map((comment) => (
-                  <div
-                    key={comment.id}
-                    className="dark:bg-slate-800 bg-slate-400 rounded-lg p-4 space-y-2"
-                  >
-                    <div className="flex items-center gap-3">
-                      <div className="w-10 h-10 bg-slate-300 dark:bg-slate-700 rounded-full overflow-hidden">
-                        <img
-                          src="/api/placeholder/40/40"
-                          alt={comment.user.firstname}
-                          className="w-full h-full object-cover"
-                        />
-                      </div>
-                      <div>
-                        <h3 className="font-medium">
-                          {comment.user.firstname}
-                        </h3>
-                        <p className="text-sm text-slate-400">
-                          {comment.created_at}
-                        </p>
-                      </div>
-                    </div>
-
-                    <p className="text-slate-300">{comment.content}</p>
-
-                    <div className="flex items-center gap-4 text-sm dark:text-slate-400">
-                      <button className="flex items-center gap-1">
-                        <MessageCircle className="w-4 h-4" />
-                        {comment.replies.length} Replies
-                      </button>
-                      <button className="flex items-center gap-1">
-                        <Heart className="w-4 h-4" />
-                        {comment.likes.length}
-                      </button>
-                    </div>
-                  </div>
-                ))}
-              </>
-            ) : (
-              <div>
-                <p className="text-left">No comments yet</p>
-              </div>
-            )}
-          </div>
       
           <div className={`${userId === blog.author.id ? "" : "hidden"} flex flex-col gap-2 mt-10`}>
             <h1 className='text-red-500 font-bold'>Danger Zone</h1>
diff --git a/src/redux/actions/commentActions.tsx b/src/redux/actions/commentActions.tsx
new file mode 100644
index 000000000..b4bb59afb
--- /dev/null
+++ b/src/redux/actions/commentActions.tsx
@@ -0,0 +1,320 @@
+import axios from "./axiosconfig";
+import { toast } from "react-toastify";
+import creator from "./creator";
+import { ApolloClient, InMemoryCache, gql } from "@apollo/client";
+import {
+  FETCH_COMMENTS_FAIL,
+  FETCH_COMMENTS_LOADING,
+  FETCH_COMMENTS_SUCCESS,
+  CREATE_COMMENT_FAIL,
+  CREATE_COMMENT_LOADING,
+  CREATE_COMMENT_SUCCESS,
+  DELETE_COMMENT_FAIL,
+  DELETE_COMMENT_LOADING,
+  DELETE_COMMENT_SUCCESS,
+  UPDATE_COMMENT_FAIL,
+  UPDATE_COMMENT_LOADING,
+  UPDATE_COMMENT_SUCCESS,
+  COUNT_COMMENTS_LOADING,
+  COUNT_COMMENTS_SUCCESS,
+  COUNT_COMMENTS_FAIL,
+  FETCH_REPLIES_LOADING,
+  FETCH_REPLIES_SUCCESS,
+  FETCH_REPLIES_FAIL,
+  ADD_REPLY_LOADING,
+  ADD_REPLY_SUCCESS,
+  ADD_REPLY_FAIL,
+} from "../index";
+
+export const getCommentsByBlogId = (id: string) => async (dispatch: any) => {
+  dispatch({
+    type: FETCH_COMMENTS_LOADING,
+  });
+
+  try {
+    const response = await axios.post("/", {
+      query: `query GetCommentsByBlog($blog: ID!) {
+        getCommentsByBlog(blog: $blog) {
+          id
+          content
+          user {
+            id
+            firstname
+            lastname
+          }  
+        }
+      }`,
+      variables: { blog: id },
+    });
+
+    const comments = response.data.data.getCommentsByBlog;
+
+    dispatch({
+      type: FETCH_COMMENTS_SUCCESS,
+      payload: comments,
+    });
+
+    const commentCount = comments.length;
+    dispatch({
+      type: COUNT_COMMENTS_SUCCESS,
+      payload: commentCount,
+    });
+  } catch (err: any) {
+    const errorMessage =
+      err.response?.data?.errors?.[0]?.message ||
+      err.message ||
+      "Failed to fetch comments";
+
+    dispatch({
+      type: FETCH_COMMENTS_FAIL,
+      payload: errorMessage,
+    });
+
+    toast.error(errorMessage);
+  }
+};
+
+export const createCommentAction = (blogId: string, content: string) => async (dispatch: any) => {
+  const userId = localStorage.getItem('userId'); 
+
+  if (!userId) {
+    toast.error("User not logged in.");
+    return;
+  }
+
+  dispatch({
+    type: CREATE_COMMENT_LOADING,
+  });
+
+  try {
+    const response = await axios.post("/", {
+      query: `
+        mutation addComment($content: String!, $user: ID!, $blog: ID!) {
+          addComment(content: $content, user: $user, blog: $blog) {
+            id
+            content
+            user {
+              id
+              firstname
+              lastname
+            }
+
+          }
+        }
+      `,
+      variables: {
+        content,
+        user: userId,
+        blog: blogId,
+      },
+    });
+
+    const createdComment = response?.data?.data?.addComment;
+
+    if (!createdComment || !createdComment.id) {
+      throw new Error("Invalid response structure: 'id' is missing.");
+    }
+
+    dispatch({
+      type: CREATE_COMMENT_SUCCESS,
+      payload: createdComment,
+    });
+    toast.success("Comment created successfully!");
+  } catch (err: any) {
+    const errorMessage =
+      err.response?.data?.errors?.[0]?.message || err.message || "Failed to create comment";
+    dispatch({
+      type: CREATE_COMMENT_FAIL,
+      error: errorMessage,
+    });
+    toast.error(errorMessage);
+  }
+};
+
+export const updateCommentAction = (commentId: string, updateFields: any) => async (dispatch: any) => {
+  dispatch({
+    type: UPDATE_COMMENT_LOADING,
+  });
+
+  try {
+    const response = await axios.post("/", {
+      query: `mutation UpdateComment($commentId: ID!, $updateFields: CommentInput!) {
+        updateComment(commentId: $commentId, updateFields: $updateFields) {
+          id
+          content
+          created_at
+          updated_at
+          author {
+            id
+            email
+            firstname
+            lastname
+          }
+        }
+      }`,
+      variables: { commentId, updateFields },
+    });
+
+    const updatedComment = response?.data?.data?.updateComment;
+
+    if (!updatedComment || !updatedComment.id) {
+      throw new Error("Invalid response structure for update.");
+    }
+
+    dispatch({
+      type: UPDATE_COMMENT_SUCCESS,
+      payload: updatedComment,
+    });
+    toast.success("Comment updated successfully!");
+  } catch (err: any) {
+    const errorMessage = err.response?.data?.errors?.[0]?.message || err.message || "Failed to update comment";
+    dispatch({
+      type: UPDATE_COMMENT_FAIL,
+      error: errorMessage,
+    });
+    toast.error(errorMessage);
+  }
+};
+
+export const deleteCommentAction = (commentId: string) => async (dispatch: any) => {
+  dispatch({
+    type: DELETE_COMMENT_LOADING,
+  });
+
+  try {
+    const response = await axios.post("/", {
+      query: `mutation DeleteComment($commentId: ID!) {
+        deleteComment(commentId: $commentId)
+      }`,
+      variables: { commentId },
+    });
+
+    dispatch({
+      type: DELETE_COMMENT_SUCCESS,
+      payload: commentId, 
+    });
+    toast.success("Comment deleted successfully!");
+  } catch (err: any) {
+    const errorMessage = err.response?.data?.errors?.[0]?.message || err.message || "Failed to delete comment";
+    dispatch({
+      type: DELETE_COMMENT_FAIL,
+      error: errorMessage,
+    });
+    toast.error(errorMessage);
+  }
+};
+
+export const countCommentsByBlogId = (blogId: string) => async (dispatch: any) => {
+  dispatch({
+    type: COUNT_COMMENTS_LOADING,
+  });
+
+  try {
+    const response = await axios.post("/", {
+      query: `query CountCommentsByBlog($blog: ID!) {
+        countCommentsByBlog(blog: $blog)
+      }`,
+      variables: { blog: blogId },
+    });
+
+    const commentCount = response.data.data.countCommentsByBlog;
+
+    dispatch({
+      type: COUNT_COMMENTS_SUCCESS,
+      payload: { blogId, count: commentCount },
+    });
+
+  } catch (err: any) {
+    const errorMessage =
+      err.response?.data?.errors?.[0]?.message || err.message || "Failed to count comments";
+
+    dispatch({
+      type: COUNT_COMMENTS_FAIL,
+      error: errorMessage,
+    });
+
+    toast.error(errorMessage);
+  }
+};
+
+export const fetchRepliesByComment = (commentId: string) => async (dispatch: any) => {
+  dispatch({ type: FETCH_REPLIES_LOADING });
+
+  try {
+    const response = await axios.post("/", {
+      query: `
+        query GetRepliesByComment($comment: ID!) {
+          getRepliesByComment(comment: $comment) {
+            id
+            content
+            user {
+              id
+              firstname
+              lastname
+            }
+          }
+        }
+      `,
+      variables: { comment: commentId },
+    });
+
+    const replies = response.data.data.getRepliesByComment.map((reply: any) => ({
+      id: reply.id,
+      content: reply.content,
+      user: reply.user,
+    }));
+
+    dispatch({
+      type: FETCH_REPLIES_SUCCESS,
+      payload: { commentId, replies },
+    });
+  } catch (err: any) {
+    dispatch({
+      type: FETCH_REPLIES_FAIL,
+    });
+  }
+};
+
+
+export const addReplyToComment = (content: string, commentId: string) => async (dispatch: any) => {
+  const userId = localStorage.getItem("userId");
+
+  if (!userId) {
+    toast.error("User not logged in.");
+    return;
+  }
+
+  dispatch({ type: ADD_REPLY_LOADING });
+
+  try {
+    const response = await axios.post("/", {
+      query: `mutation AddReply($content: String!, $comment: ID!, $user: ID!) {
+        addCommentReply(content: $content, comment: $comment, user: $user) {
+          id
+          content
+        }
+      }`,
+      variables: {
+        content,
+        comment: commentId,
+        user: userId, 
+      },
+    });
+
+    const newReply = response.data.data.addCommentReply;
+    dispatch({
+      type: ADD_REPLY_SUCCESS,
+      payload: { commentId, reply: newReply },
+    });
+    toast.success("Reply added successfully!");
+  } catch (err: any) {
+    const errorMessage =
+      err.response?.data?.errors?.[0]?.message || err.message || "Failed to add reply";
+
+    dispatch({
+      type: ADD_REPLY_FAIL,
+      error: errorMessage,
+    });
+    toast.error(errorMessage);
+  }
+};
\ No newline at end of file
diff --git a/src/redux/actions/reactionActions.tsx b/src/redux/actions/reactionActions.tsx
new file mode 100644
index 000000000..de331b26f
--- /dev/null
+++ b/src/redux/actions/reactionActions.tsx
@@ -0,0 +1,94 @@
+import axios from "./axiosconfig";
+import { toast } from "react-toastify";
+import creator from "./creator";
+import {
+  fetchReactions,
+  addReaction,
+  removeReaction,
+} from "./../actiontypes/reactionTypes";
+
+export const getReactionsByBlogId = (blogId: string) => async (dispatch: any) => {
+  dispatch({
+    type: fetchReactions.FETCH_REACTIONS_LOADING,
+  });
+
+  try {
+    const response = await axios.post("/", {
+      query: `
+        query GetReactionsByBlog($blog: ID!) {
+          getAllReactionsCount(blog: $blog)
+        }
+      `,
+      variables: { blog: blogId },
+    });
+
+    const reactionsData = response?.data?.data?.getAllReactionsCount;
+    dispatch(creator(fetchReactions.FETCH_REACTIONS_SUCCESS, reactionsData));
+  } catch (err: any) {}
+};
+  
+
+export const addReactionAction = (blogId: string, type: string) => async (dispatch: any) => {
+  const userId = localStorage.getItem("userId");
+
+  if (!userId) {
+    toast.error("User not logged in.");
+    return;
+  }
+
+  dispatch({
+    type: addReaction.ADD_REACTION_LOADING,
+  });
+
+  try {
+    const response = await axios.post("/", {
+      query: `
+        mutation AddReaction($user: ID!, $blog: ID!, $type: ReactionType!) {
+          addReaction(reactionFields: { user: $user, blog: $blog, type: $type }) {
+            id
+            type
+            user {
+              id
+              firstname
+            }
+            blog {
+              id
+              title
+            }
+          }
+        }
+      `,
+      variables: { user: userId, blog: blogId, type },
+    });
+
+    const reaction = response?.data?.data?.addReaction;
+    dispatch(creator(addReaction.ADD_REACTION_SUCCESS, reaction));
+    toast.success("Reaction added successfully!");
+  } catch (err: any) {}
+};
+
+export const removeReactionAction = (blogId: string) => async (dispatch: any) => {
+  const userId = localStorage.getItem("userId");
+
+  if (!userId) {
+    toast.error("User not logged in.");
+    return;
+  }
+
+  dispatch({
+    type: removeReaction.REMOVE_REACTION_LOADING,
+  });
+
+  try {
+    const response = await axios.post("/", {
+      query: `
+        mutation RemoveReaction($user: ID!, $blog: ID!) {
+          removeReaction(user: $user, blog: $blog)
+        }
+      `,
+      variables: { user: userId, blog: blogId },
+    });
+
+    dispatch(creator(removeReaction.REMOVE_REACTION_SUCCESS, { userId, blogId }));
+  } catch (err: any) {}
+};
\ No newline at end of file
diff --git a/src/redux/actiontypes/commentTypes.tsx b/src/redux/actiontypes/commentTypes.tsx
new file mode 100644
index 000000000..4e9787065
--- /dev/null
+++ b/src/redux/actiontypes/commentTypes.tsx
@@ -0,0 +1,24 @@
+export enum fetchComments {
+    FETCH_COMMENTS_LOADING = "FETCH_COMMENTS_LOADING",
+    FETCH_COMMENTS_SUCCESS = "FETCH_COMMENTS_SUCCESS",
+    FETCH_COMMENTS_FAIL = "FETCH_COMMENTS_FAIL",
+  }
+  
+  export enum createComment {
+    CREATE_COMMENT_LOADING = "CREATE_COMMENT_LOADING",
+    CREATE_COMMENT_SUCCESS = "CREATE_COMMENT_SUCCESS",
+    CREATE_COMMENT_FAIL = "CREATE_COMMENT_FAIL",
+  }
+  
+  export enum updateComment {
+    UPDATE_COMMENT_LOADING = "UPDATE_COMMENT_LOADING",
+    UPDATE_COMMENT_SUCCESS = "UPDATE_COMMENT_SUCCESS",
+    UPDATE_COMMENT_FAIL = "UPDATE_COMMENT_FAIL",
+  }
+  
+  export enum deleteComment {
+    DELETE_COMMENT_LOADING = "DELETE_COMMENT_LOADING",
+    DELETE_COMMENT_SUCCESS = "DELETE_COMMENT_SUCCESS",
+    DELETE_COMMENT_FAIL = "DELETE_COMMENT_FAIL",
+  }
+  
\ No newline at end of file
diff --git a/src/redux/actiontypes/reactionTypes.tsx b/src/redux/actiontypes/reactionTypes.tsx
new file mode 100644
index 000000000..4af5715c5
--- /dev/null
+++ b/src/redux/actiontypes/reactionTypes.tsx
@@ -0,0 +1,18 @@
+export enum fetchReactions {
+    FETCH_REACTIONS_LOADING = "FETCH_REACTIONS_LOADING",
+    FETCH_REACTIONS_SUCCESS = "FETCH_REACTIONS_SUCCESS",
+    FETCH_REACTIONS_FAIL = "FETCH_REACTIONS_FAIL",
+  }
+  
+  export enum addReaction {
+    ADD_REACTION_LOADING = "ADD_REACTION_LOADING",
+    ADD_REACTION_SUCCESS = "ADD_REACTION_SUCCESS",
+    ADD_REACTION_FAIL = "ADD_REACTION_FAIL",
+  }
+  
+  export enum removeReaction {
+    REMOVE_REACTION_LOADING = "REMOVE_REACTION_LOADING",
+    REMOVE_REACTION_SUCCESS = "REMOVE_REACTION_SUCCESS",
+    REMOVE_REACTION_FAIL = "REMOVE_REACTION_FAIL",
+  }
+  
\ No newline at end of file
diff --git a/src/redux/index.ts b/src/redux/index.ts
index 60d1f54b8..96262f10f 100644
--- a/src/redux/index.ts
+++ b/src/redux/index.ts
@@ -114,3 +114,24 @@ export const FETCH_BLOG_RELATED_ARTICLE_FAIL = "FETCH_BLOG_RELATED_ARTICLE_FAIL"
 export const HIDE_BLOG_LOADING = "HIDE_BLOG_LOADING";
 export const HIDE_BLOG_SUCCESS = "HIDE_BLOG_SUCCESS";
 export const HIDE_BLOG_FAIL = "HIDE_BLOG_FAIL"
+export const FETCH_COMMENTS_LOADING = "FETCH_COMMENTS_LOADING";
+export const FETCH_COMMENTS_SUCCESS = "FETCH_COMMENTS_SUCCESS";
+export const FETCH_COMMENTS_FAIL = "FETCH_COMMENTS_FAIL";
+export const CREATE_COMMENT_LOADING = "CREATE_COMMENT_LOADING";
+export const CREATE_COMMENT_SUCCESS = "CREATE_COMMENT_SUCCESS";
+export const CREATE_COMMENT_FAIL = "CREATE_COMMENT_FAIL";
+export const UPDATE_COMMENT_LOADING = "UPDATE_COMMENT_LOADING";
+export const UPDATE_COMMENT_SUCCESS = "UPDATE_COMMENT_SUCCESS";
+export const UPDATE_COMMENT_FAIL = "UPDATE_COMMENT_FAIL";
+export const DELETE_COMMENT_LOADING = "DELETE_COMMENT_LOADING";
+export const DELETE_COMMENT_SUCCESS = "DELETE_COMMENT_SUCCESS";
+export const DELETE_COMMENT_FAIL = "DELETE_COMMENT_FAIL";
+export const COUNT_COMMENTS_LOADING = "COUNT_COMMENTS_LOADING";
+export const COUNT_COMMENTS_SUCCESS = "COUNT_COMMENTS_SUCCESS";
+export const COUNT_COMMENTS_FAIL = "COUNT_COMMENTS_FAIL";
+export const FETCH_REPLIES_LOADING = "FETCH_REPLIES_LOADING";
+export const FETCH_REPLIES_SUCCESS = "FETCH_REPLIES_SUCCESS";
+export const FETCH_REPLIES_FAIL = "FETCH_REPLIES_FAIL";
+export const ADD_REPLY_LOADING = "ADD_REPLY_LOADING";
+export const ADD_REPLY_SUCCESS = "ADD_REPLY_SUCCESS";
+export const ADD_REPLY_FAIL = "ADD_REPLY_FAIL";
\ No newline at end of file
diff --git a/src/redux/reducers/commentReducers.ts b/src/redux/reducers/commentReducers.ts
new file mode 100644
index 000000000..118354649
--- /dev/null
+++ b/src/redux/reducers/commentReducers.ts
@@ -0,0 +1,163 @@
+import {
+      FETCH_COMMENTS_LOADING,
+      FETCH_COMMENTS_SUCCESS,
+      FETCH_COMMENTS_FAIL,
+      CREATE_COMMENT_LOADING,
+      CREATE_COMMENT_SUCCESS,
+      CREATE_COMMENT_FAIL,
+      COUNT_COMMENTS_LOADING,
+      COUNT_COMMENTS_SUCCESS,
+      COUNT_COMMENTS_FAIL,
+      ADD_REPLY_FAIL,
+      FETCH_REPLIES_FAIL,
+      ADD_REPLY_SUCCESS,
+      FETCH_REPLIES_SUCCESS,
+      FETCH_REPLIES_LOADING,
+      ADD_REPLY_LOADING,
+    } from '../index';
+    
+    interface User {
+      id: string;
+      firstname: string;
+      lastname: string;
+    }
+    
+    interface Comment {
+      id: string;
+      content: string;
+      user: User;
+      createdAt?: string;
+      updatedAt?: string;
+    }
+    
+    interface CommentState {
+      isCommentLoading: boolean;
+      isLoaded: boolean;
+      comment_data: Comment[];
+      commentCounts: { [blogId: string]: number };
+      repliesByCommentId: { [commentId: string]: Comment[] };
+    }
+    
+    const initialState: CommentState = {
+      isCommentLoading: false,
+      isLoaded: false,
+      comment_data: [],
+      commentCounts: {},
+      repliesByCommentId: {},
+    };
+    
+    const normalizeComment = (comment: any): Comment => ({
+      id: comment.id || 'unknown',
+      content: comment.content || 'No content provided',
+      user: comment.user || { id: '', firstname: 'Anonymous', lastname: 'User' },
+      createdAt: comment.createdAt || new Date().toISOString(),
+      updatedAt: comment.updatedAt || new Date().toISOString(),
+    });
+    
+    const handleLoadingStates = (state: CommentState): CommentState => ({
+      ...state,
+      isCommentLoading: true,
+    });
+    
+    const handleFailState = (state: CommentState): CommentState => ({
+      ...state,
+      isCommentLoading: false,
+    });
+    
+    const handleSuccessState = (state: CommentState, updates: Partial<CommentState>): CommentState => ({
+      ...state,
+      isCommentLoading: false,
+      ...updates,
+    });
+    
+    const reducer = (state = initialState, action: { type: string; payload: any }): CommentState => {
+      let newState = state;
+    
+      if (action.type.endsWith('_LOADING')) {
+        newState = handleLoadingStates(state);
+      } else if (action.type.endsWith('_FAIL')) {
+        newState = handleFailState(state); 
+      } else if (action.type.endsWith('_SUCCESS')) {
+        switch (action.type) {
+          case FETCH_COMMENTS_SUCCESS:
+            newState = handleSuccessState(state, {
+              isLoaded: true,
+              comment_data: Array.isArray(action.payload)
+                ? action.payload.map(normalizeComment)
+                : state.comment_data,
+            });
+            break;
+    
+          case CREATE_COMMENT_SUCCESS:
+            if (action.payload && action.payload.id) {
+              newState = handleSuccessState(state, {
+                isLoaded: true,
+                comment_data: [...state.comment_data, normalizeComment(action.payload)],
+              });
+            }
+            break;
+    
+          case COUNT_COMMENTS_SUCCESS:
+            if (action.payload?.blogId && typeof action.payload.count === 'number') {
+              newState = handleSuccessState(state, {
+                commentCounts: {
+                  ...state.commentCounts,
+                  [action.payload.blogId]: action.payload.count,
+                },
+              });
+            }
+            break;
+    
+          case FETCH_REPLIES_SUCCESS:
+            if (Array.isArray(action.payload?.replies)) {
+              const repliesByCommentId = action.payload.replies.reduce((acc, reply) => {
+                const commentId = reply.comment;
+                acc[commentId] = acc[commentId] || [];
+                acc[commentId].push({
+                  id: reply._id,
+                  content: reply.content,
+                  user: reply.user,
+                  createdAt: reply.created_at,
+                });
+                return acc;
+              }, {});
+    
+              newState = handleSuccessState(state, {
+                repliesByCommentId: {
+                  ...state.repliesByCommentId,
+                  ...repliesByCommentId,
+                },
+              });
+            }
+            break;
+    
+          case ADD_REPLY_SUCCESS:
+            const { commentId, reply } = action.payload || {};
+            if (commentId && reply) {
+              newState = handleSuccessState(state, {
+                repliesByCommentId: {
+                  ...state.repliesByCommentId,
+                  [commentId]: [
+                    ...(state.repliesByCommentId[commentId] || []),
+                    {
+                      id: reply._id,
+                      content: reply.content,
+                      user: reply.user || { firstname: 'Anonymous', lastname: '' },
+                    },
+                  ],
+                },
+              });
+            }
+            break;
+    
+          default:
+            break;
+        }
+      }
+    
+      return newState;
+    };
+
+    export default reducer;
+    
+    
\ No newline at end of file
diff --git a/src/redux/reducers/index.ts b/src/redux/reducers/index.ts
index 48c1e1ddc..d1e449f73 100755
--- a/src/redux/reducers/index.ts
+++ b/src/redux/reducers/index.ts
@@ -58,6 +58,8 @@ import userUpdateReducer from "./getUser";
 import blogsReducer from "./blogsReducers";
 import singleBlogReducer from "./singleBlogReducer";
 import blogRelatedArticle from "./blogRelatedArticleReducer";
+import commentReducer from "./commentReducers";
+import reactionReducer from "./reactionReducers";
 
 const allReducers = combineReducers({
   counter: counterReducer,
@@ -112,7 +114,9 @@ const allReducers = combineReducers({
   updateUser: userUpdateReducer,
   blogs: blogsReducer,
   singleBlog: singleBlogReducer,
-  blogRelatedArticle: blogRelatedArticle
+  blogRelatedArticle: blogRelatedArticle,
+  comments: commentReducer,
+  reactions: reactionReducer,
 });
 
 export type RootState = ReturnType<typeof allReducers>;
diff --git a/src/redux/reducers/reactionReducers.tsx b/src/redux/reducers/reactionReducers.tsx
new file mode 100644
index 000000000..cf9f89edf
--- /dev/null
+++ b/src/redux/reducers/reactionReducers.tsx
@@ -0,0 +1,94 @@
+import {
+      fetchReactions,
+      addReaction,
+      removeReaction,
+    } from "../actiontypes/reactionTypes";
+    
+    
+    interface ReactionState {
+      isReactionLoading: boolean; 
+      reactions: Record<string, number>; 
+      errors: null | string; 
+    }
+    
+    const initialState: ReactionState = {
+      isReactionLoading: false, 
+      reactions: {}, 
+      errors: null, 
+    };
+    
+    export default (
+      state = initialState,
+      { type, payload }: { type: string; payload: any }
+    ): ReactionState => {
+      switch (type) {
+        case fetchReactions.FETCH_REACTIONS_LOADING:
+        case addReaction.ADD_REACTION_LOADING:
+        case removeReaction.REMOVE_REACTION_LOADING:
+          return {
+            ...state,
+            isReactionLoading: true,
+          };
+    
+        case fetchReactions.FETCH_REACTIONS_SUCCESS:
+    
+      const transformedReactions =
+        typeof payload === "number"
+          ? { TOTAL: payload } 
+          : Array.isArray(payload)
+          ? payload.reduce((acc: Record<string, number>, reaction: { type: string }) => {
+              if (reaction.type) {
+                acc[reaction.type] = (acc[reaction.type] || 0) + 1;
+              }
+              return acc;
+            }, {})
+          : {};
+    
+      return {
+        ...state,
+        isReactionLoading: false,
+        reactions: transformedReactions,
+      };
+    
+        case addReaction.ADD_REACTION_SUCCESS:
+          const updatedReactions = (payload || []).reduce(
+            (acc: Record<string, number>, reaction: { type: string; count: number }) => {
+              acc[reaction.type] = reaction.count;
+              return acc;
+            },
+            {}
+          );
+          return {
+            ...state,
+            isReactionLoading: false,
+            reactions: updatedReactions, 
+          };
+    
+        case removeReaction.REMOVE_REACTION_SUCCESS:
+          const reactionsAfterRemoval = (payload || []).reduce(
+            (acc: Record<string, number>, reaction: { type: string; count: number }) => {
+              acc[reaction.type] = reaction.count;
+              return acc;
+            },
+            {}
+          );
+          return {
+            ...state,
+            isReactionLoading: false,
+            reactions: reactionsAfterRemoval, 
+          };
+    
+        case fetchReactions.FETCH_REACTIONS_FAIL:
+        case addReaction.ADD_REACTION_FAIL:
+        case removeReaction.REMOVE_REACTION_FAIL:
+          return {
+            ...state,
+            isReactionLoading: false,
+            errors: payload,
+          };
+    
+        default:
+          return state;
+      }
+    };
+   
\ No newline at end of file