Ebube
88 lines
2.4 KiB
JavaScript
88 lines
2.4 KiB
JavaScript
import React, { useEffect, useMemo, useState } from "react";
|
|
import { useParams } from "react-router-dom";
|
|
import useToggle from "../../Hooks/useToggle";
|
|
import BackToTop from "../BackToTop";
|
|
import FooterHomeOne from "../HomeOne/FooterHomeOne";
|
|
import Drawer from "../Mobile/Drawer";
|
|
import Blog from "./Blog";
|
|
import BlogData from "../../Services/BlogData";
|
|
import BlogSideBar from "./BlogSideBar";
|
|
import HeaderNews from "./HeaderNews";
|
|
import HeroNews from "./HeroNews";
|
|
import StickyHeaderNav from "../StickyHeader/StickyHeaderNav";
|
|
|
|
/**
|
|
* Renders the blog detail page.
|
|
*/
|
|
function BlogDetail() {
|
|
const [drawer, drawerAction] = useToggle(false);
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
const [blogs, setBlogs] = useState([]);
|
|
const { id } = useParams();
|
|
|
|
useEffect(() => {
|
|
const fetchBlogs = async () => {
|
|
setIsLoading(true);
|
|
try {
|
|
const res = await BlogData();
|
|
setBlogs(res.data);
|
|
} catch (err) {
|
|
console.log("Error loading blogdata", err);
|
|
} finally {
|
|
setTimeout(() => setIsLoading(false), 1500);
|
|
}
|
|
};
|
|
|
|
fetchBlogs();
|
|
}, []);
|
|
|
|
const blogItem = useMemo(() => {
|
|
return blogs.blogdata?.find((item) => +item.id === +id);
|
|
}, [blogs, id]);
|
|
|
|
return (
|
|
<>
|
|
{/* Renders the drawer component */}
|
|
<Drawer drawer={drawer} action={drawerAction.toggle} />
|
|
|
|
{/* Renders the header component */}
|
|
<HeaderNews action={drawerAction.toggle} />
|
|
|
|
{/* Renders the hero section */}
|
|
<HeroNews
|
|
title="Blog"
|
|
breadcrumb={[
|
|
{ link: "/", title: "Home" },
|
|
{ link: "/blog", title: "Blogs" },
|
|
{
|
|
link: `/blog/blogdetail/${id}`,
|
|
title: isLoading ? "please wait..." : blogItem ? blogItem.post_title : "Post not found",
|
|
},
|
|
]}
|
|
/>
|
|
|
|
{/* Renders the blog content and sidebar */}
|
|
<section className="blogpage-section">
|
|
<div className="container">
|
|
<div className="row">
|
|
<div className="col-lg-8 col-md-7">
|
|
<Blog blogItem={blogItem} imgUrl={blogs?.image_url} loader={isLoading} />
|
|
</div>
|
|
<div className="col-lg-4 col-md-5">
|
|
<BlogSideBar blogs={blogs} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Renders the footer */}
|
|
<FooterHomeOne />
|
|
|
|
{/* Renders the back-to-top button */}
|
|
<BackToTop />
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default BlogDetail;
|