Task Complete

src/components/Blog/BlogDetail.js

@@ -1,45 +1,83 @@
-import React from 'react';
-import useToggle from '../../Hooks/useToggle';
-import BackToTop from '../BackToTop';
-import FooterHomeOne from '../HomeOne/FooterHomeOne';
-import Drawer from '../Mobile/Drawer';
-import Blog from './Blog';
-import BlogSideBar from './BlogSideBar';
-import HeaderNews from './HeaderNews';
-import HeroNews from './HeroNews';
-import StickyHeaderNav from '../StickyHeader/StickyHeaderNav';
+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);
-    return (
-        <>
-            <Drawer drawer={drawer} action={drawerAction.toggle} />
-            {/* <StickyHeaderNav action={drawerAction.toggle} /> */}
-            <HeaderNews action={drawerAction.toggle} />
-            <HeroNews
-                title="Blog"
-                breadcrumb={[
-                    { link: '/', title: 'home' },
-                    { link: '/blog', title: 'Blogs' },
-                    { link: '/blog/blogdetail', title: 'TITLE OF THE ARTICLE*****' },
-                ]}
-            />
-            <section className="blogpage-section">
-                <div className="container">
-                    <div className="row">
-                        <div className="col-lg-8 col-md-7">
-                            <Blog />
-                        </div>
-                        <div className="col-lg-4 col-md-5">
-                            <BlogSideBar />
-                        </div>
-                    </div>
-                </div>
-            </section>
-            <FooterHomeOne />
-            <BackToTop />
-        </>
-    );
+  const [drawer, drawerAction] = useToggle(false);
+  const [blogs, setBlogs] = useState([]);
+  const { id } = useParams();
+
+  useEffect(() => {
+    const fetchBlogs = async () => {
+      try {
+        const res = await BlogData();
+        setBlogs(res.data);
+      } catch (err) {
+        console.log("Error loading blogdata", err);
+      }
+    };
+
+    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",
+            title: 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} />
+            </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;