WrenchBoard/WrenchBoardMainSite
2
0
Fork 0
Code Issues Pull Requests 1 Releases Activity

fixed the specified bugs

Browse Source
This commit is contained in:
Ebube
2023-09-13 00:34:26 +01:00
parent 18baab3c1b
commit ecdf2590a5
6 changed files with 127 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Blog/Blogs.js
+80 -87
View File
@@ -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;