Ebube
90 lines
2.4 KiB
JavaScript
90 lines
2.4 KiB
JavaScript
import React, { useEffect, useState } from "react";
|
|
import { Link } from "react-router-dom";
|
|
import blogOne from "../../assets/images/blog/1.jpg";
|
|
import BlogData from "../../Services/BlogData";
|
|
|
|
/**
|
|
* Fetches blog data from an API and renders the blogs on the page.
|
|
* Displays a maximum of six blogs on the home page and all blogs on other pages.
|
|
*
|
|
* @param {string} pathname - The current path of the page.
|
|
* @returns {JSX.Element} - The rendered HTML of the blogs component.
|
|
*/
|
|
function Blogs({ pathname }) {
|
|
const [blogs, setBlogs] = useState([]);
|
|
|
|
useEffect(() => {
|
|
const fetchBlogData = async () => {
|
|
try {
|
|
const res = await BlogData();
|
|
setBlogs(res.data);
|
|
} catch (err) {
|
|
console.log("Error loading blogdata", err);
|
|
}
|
|
};
|
|
|
|
fetchBlogData();
|
|
}, []);
|
|
|
|
const renderBlogItem = (blog) => {
|
|
const options = {
|
|
weekday: "short",
|
|
year: "numeric",
|
|
month: "long",
|
|
day: "numeric",
|
|
};
|
|
const postDt = new Date(blog.post_date).toLocaleDateString(
|
|
"en-US",
|
|
options
|
|
);
|
|
const blgImg =
|
|
blog.meta_value != null
|
|
? `${blogs?.blogconfig?.media_url}/${blog.meta_value}`
|
|
: blogOne;
|
|
|
|
return (
|
|
<div key={blog.id} className="col-lg-4 col-md-6">
|
|
<div
|
|
className="appie-blog-item mt-30 wow animated fadeInUp"
|
|
data-wow-duration="3000ms"
|
|
data-wow-delay="200ms"
|
|
>
|
|
<Link to={`/blog/blogdetail/${blog?.id}`} className="thumb">
|
|
<img
|
|
src={blgImg}
|
|
alt={blog.post_title}
|
|
style={{ cursor: "pointer" }}
|
|
/>
|
|
</Link>
|
|
<div className="content">
|
|
<div className="blog-meta">
|
|
<ul>
|
|
<li style={{ cursor: "pointer" }}>{postDt}</li>
|
|
</ul>
|
|
</div>
|
|
<h3 className="title">
|
|
<Link to={`/blog/blogdetail/${blog?.id}`}>{blog.post_title}</Link>
|
|
</h3>
|
|
<Link to={`/blog/blogdetail/${blog?.id}`}>
|
|
Learn More <i className="fal fa-arrow-right" />
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<div className="row">
|
|
{pathname === "/" // ON HOME PAGE LIMIT TO SIX(6) BLOGS
|
|
? blogs?.blogdata?.slice(0, 6).map(renderBlogItem)
|
|
: // ON OTHER PAGES SHOW ALL BLOG
|
|
blogs?.blogdata?.map(renderBlogItem)}
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default Blogs;
|