diff --git a/src/components/Blog/Blog.js b/src/components/Blog/Blog.js index 58f0886..d9d901c 100644 --- a/src/components/Blog/Blog.js +++ b/src/components/Blog/Blog.js @@ -10,7 +10,7 @@ function Blog({ blogItem, imgUrl }) { return ( <>
-
+

{blogItem?.post_title}

diff --git a/src/components/Blog/BlogDetail.js b/src/components/Blog/BlogDetail.js index db82abe..85acbf4 100644 --- a/src/components/Blog/BlogDetail.js +++ b/src/components/Blog/BlogDetail.js @@ -51,7 +51,7 @@ function BlogDetail() { { link: "/", title: "Home" }, { link: "/blog", title: "Blogs" }, { - link: "/blog/blogdetail", + link: `/blog/blogdetail/${id}`, title: blogItem ? blogItem.post_title : "Post not found", }, ]} diff --git a/src/components/Blog/BlogSideBar.js b/src/components/Blog/BlogSideBar.js index dfc4c4c..7f8c181 100644 --- a/src/components/Blog/BlogSideBar.js +++ b/src/components/Blog/BlogSideBar.js @@ -45,20 +45,16 @@ function BlogSideBar({ blogs }) { {/*

Categories

*/} @@ -66,21 +62,6 @@ function BlogSideBar({ blogs }) {

Other Posts

{renderOtherBlogPosts()} - {/**/}
); } diff --git a/src/components/Blog/Blogs.js b/src/components/Blog/Blogs.js index 21e23d6..41b65dc 100644 --- a/src/components/Blog/Blogs.js +++ b/src/components/Blog/Blogs.js @@ -1,96 +1,89 @@ -import React, { useEffect, useState } from 'react'; -import blogOne from '../../assets/images/blog/1.jpg'; -import BlogData from '../../Services/BlogData'; +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"; -function Blogs({pathname}) { - const [blogs, setBlogs] = useState([]) +/** + * 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(()=>{ - BlogData().then(res => { - setBlogs(res.data) - }).catch(err => { - console.log('Error loading blogdata', err) - }) - },[]) + 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 ( - <> -
- { pathname == '/' ? // ON HOME PAGE LIMIT TO SIX(6) BLOGS - blogs?.blogdata?.map((i, index)=> { - var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }; - var postDt = new Date(i.post_date).toLocaleDateString("en-US", options); - var blgImg = i.meta_value != null ? `${blogs?.blogconfig?.media_url}/${i.meta_value}` : blogOne; - if(index < 6){ - return ( -
-
-
- {i.post_title} -
-
-
-
    -
  • {postDt}
    • -
-
-

- - {i.post_title} - -

- - Learn More - -
-
-
- ) - } - }) - : // ON OTHER PAGES SHOW ALL BLOG - blogs?.blogdata?.map((i, index)=> { - var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }; - var postDt = new Date(i.post_date).toLocaleDateString("en-US", options); - var blgImg = i.meta_value != null ? `${blogs?.blogconfig?.media_url}/${i.meta_value}` : blogOne; - return ( -
-
-
- {i.post_title} -
-
-
-
    -
  • {postDt}
    • -
-
-

- - {i.post_title} - -

- - Learn More - -
-
-
- ) - }) - } +
+
+ + {blog.post_title} + +
+
+
    +
  • {postDt}
    • +
- - +

+ {blog.post_title} +

+ + Learn More + +
+
+
); + }; + + return ( + <> +
+ {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)} +
+ + ); } export default Blogs; diff --git a/src/components/Blog/index.js b/src/components/Blog/index.js index 2e12f9c..60d1648 100644 --- a/src/components/Blog/index.js +++ b/src/components/Blog/index.js @@ -1,42 +1,41 @@ -import React from 'react'; -import useToggle from '../../Hooks/useToggle'; -import BackToTop from '../BackToTop'; -import FooterHomeOne from '../HomeOne/FooterHomeOne'; -import Drawer from '../Mobile/Drawer'; -import Blogs from './Blogs'; -import BlogSideBar from './BlogSideBar'; -import HeaderNews from './HeaderNews'; -import HeroNews from './HeroNews'; -import StickyHeaderNav from '../StickyHeader/StickyHeaderNav'; +import React from "react"; +import useToggle from "../../Hooks/useToggle"; +import BackToTop from "../BackToTop"; +import FooterHomeOne from "../HomeOne/FooterHomeOne"; +import Drawer from "../Mobile/Drawer"; +import Blogs from "./Blogs"; +import BlogSideBar from "./BlogSideBar"; +import HeaderNews from "./HeaderNews"; +import HeroNews from "./HeroNews"; +import StickyHeaderNav from "../StickyHeader/StickyHeaderNav"; function Blog() { - const [drawer, drawerAction] = useToggle(false); - return ( - <> - - {/* */} - - -
-
-
-
- -
- -
-
-
- - - - ); + const [drawer, drawerAction] = useToggle(false); + return ( + <> + + {/* */} + + +
+
+
+
+ +
+
+
+
+ + + + ); } export default Blog; diff --git a/src/components/News/Blogs.js b/src/components/News/Blogs.js index 8895df9..371ec3e 100644 --- a/src/components/News/Blogs.js +++ b/src/components/News/Blogs.js @@ -47,21 +47,21 @@ function Blogs({ pathname }) { data-wow-duration="3000ms" data-wow-delay="200ms" > -
- {blog.post_title} -
+ + {blog.post_title} +
    -
  • {postDt}
    • +
  • {postDt}

{blog.post_title}

- + Learn More - +