fixed the specified bugs
This commit is contained in:
Ebube
@@ -10,7 +10,7 @@ function Blog({ blogItem, imgUrl }) {
|
||||
return (
|
||||
<>
|
||||
<div className="single-post-area">
|
||||
<div className="post-thumb">
|
||||
<div className="post-thumb" style={{marginTop : "0"}}>
|
||||
<img src={blogImg} alt="" />
|
||||
</div>
|
||||
<h4 className="article-title">{blogItem?.post_title}</h4>
|
||||
|
||||
@@ -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",
|
||||
},
|
||||
]}
|
||||
|
||||
@@ -45,20 +45,16 @@ function BlogSideBar({ blogs }) {
|
||||
{/*<h3 className="widget-title">Categories</h3>*/}
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#">About</a>
|
||||
{/*<span>(24)</span>*/}
|
||||
<Link to="/about-us">About</Link>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Sign up</a>
|
||||
{/*<span>(15)</span>*/}
|
||||
<a href={process.env.REACT_APP_DASH_URL_SIGNUP}>Sign up</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Login</a>
|
||||
<span>(8)</span>
|
||||
<a href={process.env.REACT_APP_DASH_URL_LOGIN}>Login</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://blog.wrenchboard.com/">More Articles</a>
|
||||
{/*<span>(12)</span>*/}
|
||||
</li>
|
||||
</ul>
|
||||
</aside>
|
||||
@@ -66,21 +62,6 @@ function BlogSideBar({ blogs }) {
|
||||
<h3 className="widget-title">Other Posts</h3>
|
||||
{renderOtherBlogPosts()}
|
||||
</aside>
|
||||
{/*<aside className="widget">*/}
|
||||
{/* <h3 className="widget-title">Popular Tags</h3>*/}
|
||||
{/* <div className="tags">*/}
|
||||
{/* <a href="#">Bisy LMS</a>*/}
|
||||
{/* <a href="#">Design</a>*/}
|
||||
{/* <a href="#">General</a>*/}
|
||||
{/* <a href="#">Online</a>*/}
|
||||
{/* <a href="#">Prevention</a>*/}
|
||||
{/* <a href="#">Artist</a>*/}
|
||||
{/* <a href="#">Education</a>*/}
|
||||
{/* <a href="#">Motivation</a>*/}
|
||||
{/* <a href="#">Politico</a>*/}
|
||||
{/* <a href="#">Live Cases</a>*/}
|
||||
{/* </div>*/}
|
||||
{/*</aside>*/}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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 (
|
||||
<>
|
||||
<div className="row">
|
||||
{ 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 (
|
||||
<div key={i.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"
|
||||
>
|
||||
<div className="thumb">
|
||||
<img src={blgImg} alt={i.post_title} />
|
||||
</div>
|
||||
<div className="content">
|
||||
<div className="blog-meta">
|
||||
<ul>
|
||||
<li>{postDt}</li>
|
||||
</ul>
|
||||
</div>
|
||||
<h3 className="title">
|
||||
<a href={i.guid}>
|
||||
{i.post_title}
|
||||
</a>
|
||||
</h3>
|
||||
<a href={i.guid}>
|
||||
Learn More <i className="fal fa-arrow-right" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
: // 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 (
|
||||
<div key={i.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"
|
||||
>
|
||||
<div className="thumb">
|
||||
<img src={blgImg} alt={i.post_title} />
|
||||
</div>
|
||||
<div className="content">
|
||||
<div className="blog-meta">
|
||||
<ul>
|
||||
<li>{postDt}</li>
|
||||
</ul>
|
||||
</div>
|
||||
<h3 className="title">
|
||||
<a href={i.guid}>
|
||||
{i.post_title}
|
||||
</a>
|
||||
</h3>
|
||||
<a href={i.guid}>
|
||||
Learn More <i className="fal fa-arrow-right" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
}
|
||||
<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;
|
||||
|
||||
@@ -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 (
|
||||
<>
|
||||
<Drawer drawer={drawer} action={drawerAction.toggle} />
|
||||
{/* <StickyHeaderNav action={drawerAction.toggle} /> */}
|
||||
<HeaderNews action={drawerAction.toggle} />
|
||||
<HeroNews
|
||||
title="Blogs"
|
||||
breadcrumb={[
|
||||
{ link: '/', title: 'home' },
|
||||
{ link: '/news', title: 'Blogs' },
|
||||
]}
|
||||
/>
|
||||
<section className="blogpage-section">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-lg-12 col-md-7">
|
||||
<Blogs />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<FooterHomeOne />
|
||||
<BackToTop />
|
||||
</>
|
||||
);
|
||||
const [drawer, drawerAction] = useToggle(false);
|
||||
return (
|
||||
<>
|
||||
<Drawer drawer={drawer} action={drawerAction.toggle} />
|
||||
{/* <StickyHeaderNav action={drawerAction.toggle} /> */}
|
||||
<HeaderNews action={drawerAction.toggle} />
|
||||
<HeroNews
|
||||
title="Blogs"
|
||||
breadcrumb={[
|
||||
{ link: "/", title: "Home" },
|
||||
{ link: "/blog", title: "Blogs" },
|
||||
]}
|
||||
/>
|
||||
<section className="blogpage-section">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-lg-12 col-md-7">
|
||||
<Blogs />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<FooterHomeOne />
|
||||
<BackToTop />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default Blog;
|
||||
|
||||
Reference in New Issue
Block a user