From f641cde3bfbb186dca0632d47e92e3265b8d2e2b Mon Sep 17 00:00:00 2001
From: darshan2006-op <darshanpanzade2006@gmail.com>
Date: Tue, 1 Jul 2025 01:14:55 +0530
Subject: [PATCH 1/2] added like functionality

---
 app/api/blogs/getAllBlogs.ts           |  1 +
 app/api/blogs/toggleLike.ts            |  5 +++-
 app/blog/[id]/page.tsx                 | 39 +++++++++++++++++---------
 app/store/features/blogs/blogsSlice.ts | 10 +++++++
 4 files changed, 41 insertions(+), 14 deletions(-)

diff --git a/app/api/blogs/getAllBlogs.ts b/app/api/blogs/getAllBlogs.ts
index d88191f..30f2de9 100644
--- a/app/api/blogs/getAllBlogs.ts
+++ b/app/api/blogs/getAllBlogs.ts
@@ -6,5 +6,6 @@ import axios from 'axios';
 export default async function getAllBlogs(): Promise<BlogPost[]> {
   const url = `${config.backendUrl}blog/`;
   const res = await axios.get(url);
+  console.log(res.data.data.blogs)
   return res.data.data.blogs;
 }
diff --git a/app/api/blogs/toggleLike.ts b/app/api/blogs/toggleLike.ts
index f09a2bf..567a724 100644
--- a/app/api/blogs/toggleLike.ts
+++ b/app/api/blogs/toggleLike.ts
@@ -13,5 +13,8 @@ export default async function toggleLike(token: string, id: string) {
       },
     }
   );
-  return res.data.blog;
+
+  console.log(res.data)
+
+  return res.data.liked;
 }
diff --git a/app/blog/[id]/page.tsx b/app/blog/[id]/page.tsx
index ead5cc0..98f4c9f 100644
--- a/app/blog/[id]/page.tsx
+++ b/app/blog/[id]/page.tsx
@@ -25,9 +25,12 @@ import { BlogPost } from '@/types/blog';
 // import postsData from '@/data/post.json';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
-import { useSelector } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { RootState } from '@/app/store/store';
 import getBlogById from '@/app/api/blogs/getBlogById';
+import toggleLike from '@/app/api/blogs/toggleLike';
+import useAuth from '@/hooks/auth/useAuth';
+import { refreshBlog } from '@/app/store/features/blogs/blogsSlice';
 
 export default function BlogDetailPage() {
   const params = useParams();
@@ -52,7 +55,9 @@ export default function BlogDetailPage() {
     { user: string; text: string; date: string }[]
   >([]);
   const [newComment, setNewComment] = useState('');
-
+  const { getToken } = useAuth()
+  const dispatch = useDispatch()
+ 
   // Get all blogs from Redux store
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const allBlogs = useSelector((state: RootState) => state.blogs.blogs) || [];
@@ -128,16 +133,18 @@ export default function BlogDetailPage() {
     return filtered;
   }, [post, allBlogs]);
 
+  const fetchData = async (id: string) => {
+    const foundPost = await getBlogById(id);
+    if (foundPost) {
+      setPost(foundPost);
+      dispatch(refreshBlog(foundPost))
+      const wordCount = foundPost.excerpt.split(' ').length * 10; // Simulated content length
+      setReadingTime(Math.ceil(wordCount / 200));
+    }
+  };
+
   useEffect(() => {
-    const fetchData = async () => {
-      const foundPost = await getBlogById(params.id?.toString() || '');
-      if (foundPost) {
-        setPost(foundPost);
-        const wordCount = foundPost.excerpt.split(' ').length * 10; // Simulated content length
-        setReadingTime(Math.ceil(wordCount / 200));
-      }
-    };
-    fetchData();
+    fetchData(params.id?.toString() || '');
   }, [params.id]);
 
   // Handle text selection in the article
@@ -185,6 +192,12 @@ export default function BlogDetailPage() {
     };
   }, []);
 
+  const handleLike = async () => {
+    const liked = await toggleLike((await getToken())!, params.id?.toString() || '')
+    await fetchData(params.id?.toString() || '');
+    setIsLiked(liked);
+  }
+
   const handleTextShare = (platform: string) => {
     if (!selectedText) return;
     const url = window.location.href;
@@ -499,7 +512,7 @@ export default function BlogDetailPage() {
           <div className="flex items-center justify-between">
             <div className="flex items-center space-x-6">
               <button
-                onClick={() => setIsLiked(!isLiked)}
+                onClick={handleLike}
                 className={`flex items-center space-x-2 px-4 py-2 rounded-full transition-all duration-200 ${
                   isLiked
                     ? 'bg-red-100 text-red-600'
@@ -507,7 +520,7 @@ export default function BlogDetailPage() {
                 }`}
               >
                 <Heart className={`w-5 h-5 ${isLiked ? 'fill-current' : ''}`} />
-                <span className="font-medium">{isLiked ? '124' : '123'}</span>
+                <span className="font-medium">{post.likes.length}</span>
               </button>
 
               <button
diff --git a/app/store/features/blogs/blogsSlice.ts b/app/store/features/blogs/blogsSlice.ts
index 924dccc..dccf515 100644
--- a/app/store/features/blogs/blogsSlice.ts
+++ b/app/store/features/blogs/blogsSlice.ts
@@ -24,6 +24,15 @@ const blogsSlice = createSlice({
       console.log('Setting user blogs:', action.payload);
       state.userBlogs = action.payload;
     },
+    refreshBlog(state, action: PayloadAction<BlogPost>){
+      state.blogs =
+        state.blogs?.filter(post => post.id !== action.payload.id) || [];
+      state.blogs.push(action.payload)
+
+      state.userBlogs =
+        state.userBlogs?.filter(post => post.id !== action.payload.id) || [];
+      state.userBlogs.push(action.payload)
+    },
     clearBlogs(state) {
       state.blogs = null;
     },
@@ -47,6 +56,7 @@ export const {
   clearBlogs,
   clearUserBlogs,
   deleteBlog,
+  refreshBlog,
   deleteUserBlog,
 } = blogsSlice.actions;
 export default blogsSlice.reducer;

From 3239fdb9792c151816d4b372d7ea6e30607762d6 Mon Sep 17 00:00:00 2001
From: darshan2006-op <darshanpanzade2006@gmail.com>
Date: Tue, 1 Jul 2025 01:57:27 +0530
Subject: [PATCH 2/2] added review and likes

---
 app/api/blogs/fetchCommentsByBlogId.ts |  8 +++
 app/api/blogs/getAllBlogs.ts           |  2 +-
 app/api/blogs/postComment.ts           | 21 ++++++++
 app/api/blogs/toggleLike.ts            |  2 +-
 app/blog/[id]/page.tsx                 | 68 ++++++++++++++++----------
 app/store/features/blogs/blogsSlice.ts |  6 +--
 6 files changed, 77 insertions(+), 30 deletions(-)
 create mode 100644 app/api/blogs/fetchCommentsByBlogId.ts
 create mode 100644 app/api/blogs/postComment.ts

diff --git a/app/api/blogs/fetchCommentsByBlogId.ts b/app/api/blogs/fetchCommentsByBlogId.ts
new file mode 100644
index 0000000..1dcaf7e
--- /dev/null
+++ b/app/api/blogs/fetchCommentsByBlogId.ts
@@ -0,0 +1,8 @@
+import config from '@/lib/config';
+import axios from 'axios';
+
+export default async function fetchCommentsByBlogId(id: string) {
+  const res = await axios.get(`${config.backendUrl}blog/comment/${id}`);
+  console.log(res.data);
+  return res.data.comments;
+}
diff --git a/app/api/blogs/getAllBlogs.ts b/app/api/blogs/getAllBlogs.ts
index 30f2de9..0c699c6 100644
--- a/app/api/blogs/getAllBlogs.ts
+++ b/app/api/blogs/getAllBlogs.ts
@@ -6,6 +6,6 @@ import axios from 'axios';
 export default async function getAllBlogs(): Promise<BlogPost[]> {
   const url = `${config.backendUrl}blog/`;
   const res = await axios.get(url);
-  console.log(res.data.data.blogs)
+  console.log(res.data.data.blogs);
   return res.data.data.blogs;
 }
diff --git a/app/api/blogs/postComment.ts b/app/api/blogs/postComment.ts
new file mode 100644
index 0000000..33a136e
--- /dev/null
+++ b/app/api/blogs/postComment.ts
@@ -0,0 +1,21 @@
+import config from '@/lib/config';
+import axios from 'axios';
+
+export default async function postComment(
+  sessionId: string,
+  blogId: string,
+  comment: string
+) {
+  const res = await axios.post(
+    `${config.backendUrl}blog/comment/${blogId}`,
+    {
+      comment,
+    },
+    {
+      headers: {
+        Authorization: `Bearer ${sessionId}`,
+      },
+    }
+  );
+  return res.data.comment;
+}
diff --git a/app/api/blogs/toggleLike.ts b/app/api/blogs/toggleLike.ts
index 567a724..d5ff630 100644
--- a/app/api/blogs/toggleLike.ts
+++ b/app/api/blogs/toggleLike.ts
@@ -14,7 +14,7 @@ export default async function toggleLike(token: string, id: string) {
     }
   );
 
-  console.log(res.data)
+  console.log(res.data);
 
   return res.data.liked;
 }
diff --git a/app/blog/[id]/page.tsx b/app/blog/[id]/page.tsx
index 98f4c9f..4a91303 100644
--- a/app/blog/[id]/page.tsx
+++ b/app/blog/[id]/page.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useEffect, useRef, useMemo } from 'react';
+import { useState, useEffect, useRef, useMemo, FormEvent } from 'react';
 import { useParams, useRouter } from 'next/navigation';
 import Image from 'next/image';
 import Link from 'next/link';
@@ -31,6 +31,8 @@ import getBlogById from '@/app/api/blogs/getBlogById';
 import toggleLike from '@/app/api/blogs/toggleLike';
 import useAuth from '@/hooks/auth/useAuth';
 import { refreshBlog } from '@/app/store/features/blogs/blogsSlice';
+import postComment from '@/app/api/blogs/postComment';
+import fetchCommentsByBlogId from '@/app/api/blogs/fetchCommentsByBlogId';
 
 export default function BlogDetailPage() {
   const params = useParams();
@@ -52,12 +54,14 @@ export default function BlogDetailPage() {
   const [showTextShareMenu, setShowTextShareMenu] = useState(false);
   const [showComments, setShowComments] = useState(false);
   const [comments, setComments] = useState<
-    { user: string; text: string; date: string }[]
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    { userId: string; comment: string; updatedAt: string; user: any }[]
   >([]);
   const [newComment, setNewComment] = useState('');
-  const { getToken } = useAuth()
-  const dispatch = useDispatch()
- 
+  const { getToken } = useAuth();
+  const dispatch = useDispatch();
+  const user = useSelector((state: RootState) => state.user);
+
   // Get all blogs from Redux store
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const allBlogs = useSelector((state: RootState) => state.blogs.blogs) || [];
@@ -134,10 +138,20 @@ export default function BlogDetailPage() {
   }, [post, allBlogs]);
 
   const fetchData = async (id: string) => {
-    const foundPost = await getBlogById(id);
+    const foundPost = (await getBlogById(id)) as BlogPost;
+    const foundComments = await fetchCommentsByBlogId(id);
     if (foundPost) {
+      console.log('likes:');
+      console.log(foundPost.likes);
       setPost(foundPost);
-      dispatch(refreshBlog(foundPost))
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      if (
+        foundPost.likes.filter((likes: any) => likes.userId !== user.user?.id)
+          .length > 0
+      )
+        setIsLiked(true);
+      setComments(foundComments || []);
+      dispatch(refreshBlog(foundPost));
       const wordCount = foundPost.excerpt.split(' ').length * 10; // Simulated content length
       setReadingTime(Math.ceil(wordCount / 200));
     }
@@ -145,6 +159,7 @@ export default function BlogDetailPage() {
 
   useEffect(() => {
     fetchData(params.id?.toString() || '');
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [params.id]);
 
   // Handle text selection in the article
@@ -192,11 +207,26 @@ export default function BlogDetailPage() {
     };
   }, []);
 
+  const handleComment = async (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    if (!newComment.trim()) return;
+    await postComment(
+      (await getToken())!,
+      params.id?.toString() || '',
+      newComment
+    );
+    await fetchData(params.id?.toString() || '');
+    setNewComment('');
+  };
+
   const handleLike = async () => {
-    const liked = await toggleLike((await getToken())!, params.id?.toString() || '')
+    const liked = await toggleLike(
+      (await getToken())!,
+      params.id?.toString() || ''
+    );
     await fetchData(params.id?.toString() || '');
     setIsLiked(liked);
-  }
+  };
 
   const handleTextShare = (platform: string) => {
     if (!selectedText) return;
@@ -548,19 +578,7 @@ export default function BlogDetailPage() {
             <div className="mt-8 p-6 bg-gray-50 rounded-xl shadow-inner">
               <h4 className="text-lg font-semibold mb-4">Comments</h4>
               <form
-                onSubmit={e => {
-                  e.preventDefault();
-                  if (!newComment.trim()) return;
-                  setComments([
-                    ...comments,
-                    {
-                      user: 'Anonymous', // Replace with actual user if available
-                      text: newComment,
-                      date: new Date().toISOString(),
-                    },
-                  ]);
-                  setNewComment('');
-                }}
+                onSubmit={handleComment}
                 className="flex flex-col gap-2 mb-6"
               >
                 <textarea
@@ -589,11 +607,11 @@ export default function BlogDetailPage() {
                     className="bg-white p-4 rounded-lg shadow flex flex-col"
                   >
                     <span className="font-medium text-gray-800">
-                      {comment.user}
+                      {comment.user.name}
                     </span>
-                    <span className="text-gray-600">{comment.text}</span>
+                    <span className="text-gray-600">{comment.comment}</span>
                     <span className="text-xs text-gray-400 mt-1">
-                      {new Date(comment.date).toLocaleString()}
+                      {new Date(comment.updatedAt).toLocaleString()}
                     </span>
                   </div>
                 ))}
diff --git a/app/store/features/blogs/blogsSlice.ts b/app/store/features/blogs/blogsSlice.ts
index dccf515..2f6ea36 100644
--- a/app/store/features/blogs/blogsSlice.ts
+++ b/app/store/features/blogs/blogsSlice.ts
@@ -24,14 +24,14 @@ const blogsSlice = createSlice({
       console.log('Setting user blogs:', action.payload);
       state.userBlogs = action.payload;
     },
-    refreshBlog(state, action: PayloadAction<BlogPost>){
+    refreshBlog(state, action: PayloadAction<BlogPost>) {
       state.blogs =
         state.blogs?.filter(post => post.id !== action.payload.id) || [];
-      state.blogs.push(action.payload)
+      state.blogs.push(action.payload);
 
       state.userBlogs =
         state.userBlogs?.filter(post => post.id !== action.payload.id) || [];
-      state.userBlogs.push(action.payload)
+      state.userBlogs.push(action.payload);
     },
     clearBlogs(state) {
       state.blogs = null;