Feature added

frontend_react/package.json

@@ -15,6 +15,7 @@
     "react-cookie": "^7.1.4",
     "react-cookies": "^0.1.1",
     "react-dom": "^18.3.1",
+    "react-icons": "^5.3.0",
     "react-router-dom": "^6.23.1",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"

frontend_react/src/components/Blog.js

@@ -4,6 +4,7 @@ import API_BASE_URL from '../config/environment';
 import { useAuth } from '../context/AuthContext';
 import { useCookies } from 'react-cookie';
 import { formatDistanceToNow } from 'date-fns';
+import Rating from './Blog/Rating';
 
 
 const Blog = () => {
@@ -14,6 +15,7 @@ const Blog = () => {
   const [error, setError] = useState(null);
   const [newComment, setNewComment] = useState('');
   const [comments, setComments] = useState([]);
+  const [rating, setRating] = useState(0);
 
   useEffect(()=>{
     const fetchBlog = async ()=>{
@@ -33,7 +35,8 @@ const Blog = () => {
         const data = await response.json();
         //console.log('blog response data', data);
         setBlog(data);
-        setComments(...comments, data.comments);
+        setComments(data.comments || []);
+        setRating(data.rating || 0);
         setLoading(false);
 
       } catch (error) {
@@ -42,7 +45,7 @@ const Blog = () => {
       }
     }
     fetchBlog();
-  },[])
+  },[id])
 
   const handleAddComment = async () => {
     if (newComment.trim() === '') {
@@ -75,6 +78,39 @@ const Blog = () => {
       setError('An error occurred while adding the comment');
     }
   };
+
+  const handleAddRating = async () => {
+    if (rating === 0) {
+      setError('Please select a rating');
+      return;
+    }
+
+    try {
+      const ratingInfo = {
+        rating: rating,
+        blog: id
+      }
+      const url = `${API_BASE_URL}/api/v1/rating/`
+      const response = await fetch(url, {
+        method: "POST",
+        headers:{
+          'Content-Type': 'application/json',
+          Authorization: `Bearer ${cookies.accessToken}`,
+        },
+        body: JSON.stringify(ratingInfo),
+      })
+
+      if (!response.ok) {
+        let res = await response.json();
+        throw new Error(res.error);
+      }
+      const data = await response.json();
+      //console.log('comment response data', data);
+      //setRating(0);
+    } catch (error) {
+      setError('An error occurred while adding the rating');
+    }
+  };
 
 
 
@@ -130,6 +166,12 @@ const Blog = () => {
               Add Comment
             </button>
           </div>
+
+          <div className="mt-6">
+            <h3 className="text-lg font-semibold mb-2">Rate this Blog:</h3>
+            <Rating rating={rating} onRating={handleAddRating} />
+          </div>
+
         </div>
       )}
     </div>

frontend_react/src/components/Blog/Card.js

@@ -26,11 +26,11 @@ const Card = ({ cardItem }) => {
         <div className="px-6 py-4 flex flex-wrap justify-between items-center border-t border-gray-200">
           <div className="flex items-center text-gray-700 mb-2 md:mb-0">
             <FontAwesomeIcon icon={faComments} className="mr-2" />
-            <span className="font-bold">{cardItem.comments}</span> Comments
+            <span className="font-bold">{cardItem.comments && cardItem.comments.length}</span> Comments
           </div>
           <div className="flex items-center text-gray-700">
-            <FontAwesomeIcon icon={faStar} className="mr-2" />
-            <span className="font-bold">{cardItem.ratings}</span> Ratings
+            <FontAwesomeIcon icon={faStar} className="mr-1" />
+            <span className="font-bold">{cardItem.rating}</span> Ratings
           </div>
         </div>
       </div>

frontend_react/src/components/Blog/Rating.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { FaStar } from 'react-icons/fa';
+
+const Rating = ({ rating, onRating }) => {
+  return (
+    <div className="flex">
+      {[...Array(5)].map((star, index) => {
+        const ratingValue = index + 1;
+
+        return (
+          <label key={index}>
+            <input
+              type="radio"
+              name="rating"
+              value={ratingValue}
+              onClick={() => onRating(ratingValue)}
+              className="hidden"
+            />
+            <FaStar
+              size={24}
+              color={ratingValue <= rating ? "#ffc107" : "#e4e5e9"}
+              className="cursor-pointer hover:fill-slate-400"
+            />
+          </label>
+        );
+      })}
+    </div>
+  );
+};
+
+export default Rating;