victorAnumudu
81 lines
2.3 KiB
JavaScript
81 lines
2.3 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.
|
|
*/
|
|
function Blogs({ pathname }) {
|
|
const [blogs, setBlogs] = useState([]);
|
|
|
|
useEffect(() => {
|
|
const fetchBlogs = async () => {
|
|
try {
|
|
const res = await BlogData();
|
|
setBlogs(res.data);
|
|
} catch (err) {
|
|
console.log("Error loading blogdata", err);
|
|
}
|
|
};
|
|
|
|
fetchBlogs();
|
|
}, []);
|
|
|
|
const renderBlogs = () => {
|
|
return blogs?.blogdata?.map((blog, index) => {
|
|
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} width={370} height={'auto'} loading="lazy" />
|
|
</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 === "/" ? renderBlogs()?.slice(0, 6) : renderBlogs()}
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default Blogs; |