Merge pull request #115 from SpaceyaTech/implement-blog-like-feature

Add blog liking functionality

src/APP/pages/blog/sections/BlogWrapper.jsx

@@ -38,7 +38,7 @@ const BlogWrapper = ({ blog }) => {
               </div>
             </div>
 
-            <BlogStats likes={blog.likes} />
+            <BlogStats likes={blog.likes} blogId={blog.id} />
           </div>
         </div>
 

src/APP/pages/blogs/sections/BlogStats.jsx

@@ -1,6 +1,38 @@
+import { useEffect, useState } from "react";
 import { thumbsUp } from "../../../../assets/images/blogs-page";
+import usePostLikeBlog from "../../../../hooks/Queries/blog/usePostLikeBlog";
+
+const BlogStats = ({ blogId, likes }) => {
+  const [ updatedLikes, setUpdatedLikes ] = useState(likes);
+
+  const {
+    setBlogIDLikes: likeBlog,
+    error: errorLikeBlog,
+    clearError: clearErrorLikeBlog,
+    status: statusLikeBlog,
+    clearStatus: clearStatusLikeBlog
+  } = usePostLikeBlog();
+
+  const addLikeToBlog = (blogId) => {
+    statusLikeBlog === 'error' && clearErrorLikeBlog();
+    errorLikeBlog && clearErrorLikeBlog();
+
+    const blogDetails = {
+      'id': blogId
+    }
+
+    likeBlog({...blogDetails})
+  }
+
+  useEffect(() => {
+    if (statusLikeBlog === 'success') {
+      const newLikes = likes + 1;
+      setUpdatedLikes(newLikes);
+    }
+    clearStatusLikeBlog();
+    clearErrorLikeBlog();
+  }, [likes, statusLikeBlog])
 
-const BlogStats = ({ likes }) => {
   return (
     <div className="flex flex-row items-center gap-2">
       {/* <div className="flex flex-row items-center gap-1">
@@ -9,8 +41,11 @@ const BlogStats = ({ likes }) => {
       </div> */}
 
       <div className="flex flex-row items-center gap-1">
-        <img src={thumbsUp} alt="eye" className="w-5 h-5 object-cover" />
-        <span className="text-base text-[#00664E] leading-5 m-0">{likes}</span>
+        <img src={thumbsUp} alt="eye" className="w-5 h-5 object-cover cursor-pointer"
+            onClick={() => {
+              blogId ? addLikeToBlog(blogId) : ''
+            }} />
+        <span className="text-base text-[#00664E] leading-5 m-0">{updatedLikes}</span>
       </div>
 
       {/* <div className="flex flex-row items-center gap-1">

src/hooks/Queries/blog/usePostLikeBlog.jsx

@@ -0,0 +1,58 @@
+import axios from 'axios';
+import React, { useEffect, useState } from 'react'
+
+const usePostLikeBlog = () => {
+  const [ blogIDLikes, setBlogIDLikes ] = useState(null);
+  const [ error, setError ] = useState(null);
+  const [ status, setStatus ] = useState(null);
+
+  const clearError = (error = 'all') => {
+    error === 'all' && setError(null);
+  }
+
+  const clearStatus = (status = 'all') => {
+    status === 'all' && setStatus(null);
+  }
+
+  useEffect(() => {
+    if (blogIDLikes) {
+      axios.post(
+        `${process.env.REACT_APP_API_BASE_URL}/blog/${blogIDLikes.id}/like/`
+      ).then(response => {
+        if (response.status === 200 || response.status === 201) {
+          setStatus("success");
+          // setChapterData(null);
+          setError(null);
+        } else {
+          setStatus("error");
+          setError(response.data);
+        }
+      }).catch((error) => {
+        switch (error.code) {
+          case 'ERR_NETWORK':
+            setError({ axios: error.message });
+            setStatus("error");
+            break;
+          case 'ERR_BAD_REQUEST':
+            error.response ? (
+              setError({
+                blog: error.response.data
+              })
+            ) : (
+              setError({ server: "Problem contacting the server!" })
+            );
+            setStatus("error");
+            break;
+          default:
+            setStatus("error");
+            setError({ axios: "Please try again later."})
+            break;
+        }
+      })
+    }
+  }, [blogIDLikes]);
+
+  return { setBlogIDLikes, error, clearError, status, clearStatus };
+}
+
+export default usePostLikeBlog