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

Blog API Implemented #15

Merged
ameye merged 1 commits from blog-implementation into master 2023-07-01 12:34:55 +00:00
Conversation 0 Commits 1 Files Changed 2
+45 -15
2 changed files with 45 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/HomeOne/BlogHomeOne.js
+1 -1
View File
@@ -17,7 +17,7 @@ function BlogHomeOne() {
</div>
</div>
</div>
<Blogs />
<Blogs pathname='/' />
</div>
</section>
</>
src/components/News/Blogs.js
+44 -14
View File
@@ -2,12 +2,11 @@ import React, { useEffect, useState } from 'react';
import blogOne from '../../assets/images/blog/1.jpg';
import BlogData from '../../Services/BlogData';
function Blogs() {
function Blogs({pathname}) {
const [blogs, setBlogs] = useState([])
useEffect(()=>{
BlogData().then(res => {
// console.log('TESTING',res)
setBlogs(res.data)
}).catch(err => {
console.log('Error loading blogdata', err)
@@ -17,14 +16,14 @@ function Blogs() {
return (
<>
<div className="row">
{
blogs?.blogdata?.map(i => {
{ 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.image_url}/${i.meta_value}` : blogOne;
return (<div key={i.id} className="col-lg-4 col-md-6">
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"
@@ -49,14 +48,45 @@ function Blogs() {
</a>
</div>
</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>
</>