diff --git a/src/APP/pages/blog/sections/BlogWrapper.jsx b/src/APP/pages/blog/sections/BlogWrapper.jsx
index d7192f0c..d5eaa39f 100644
--- a/src/APP/pages/blog/sections/BlogWrapper.jsx
+++ b/src/APP/pages/blog/sections/BlogWrapper.jsx
@@ -38,7 +38,7 @@ const BlogWrapper = ({ blog }) => {
-
+
diff --git a/src/APP/pages/blogs/sections/BlogStats.jsx b/src/APP/pages/blogs/sections/BlogStats.jsx
index 2c2b0804..542e749c 100644
--- a/src/APP/pages/blogs/sections/BlogStats.jsx
+++ b/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 (
{/*
@@ -9,8 +41,11 @@ const BlogStats = ({ likes }) => {
*/}
-
-
{likes}
+
{
+ blogId ? addLikeToBlog(blogId) : ''
+ }} />
+
{updatedLikes}
{/*
diff --git a/src/hooks/Queries/blog/usePostLikeBlog.jsx b/src/hooks/Queries/blog/usePostLikeBlog.jsx
new file mode 100644
index 00000000..c59ffd6e
--- /dev/null
+++ b/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
\ No newline at end of file