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 }) => {
*/}
- eye - {likes} + eye { + 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