fixed blog link on home main
This commit is contained in:
DESKTOP-QHP1O2H\MIKE
+82
-137
@@ -1,75 +1,45 @@
|
||||
/** @format */
|
||||
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import BGImg from "../../../assets/images/bread_crumb_bg.png";
|
||||
import SiteService from "../../../vendors/service/siteService";
|
||||
|
||||
const Main = ({ brdcum, bgimg }) => {
|
||||
const [blogData, setBlogData] = useState([]);
|
||||
console.log(blogData);
|
||||
|
||||
let api = new SiteService();
|
||||
const api = new SiteService();
|
||||
useEffect(() => {
|
||||
getBlogData();
|
||||
}, []);
|
||||
|
||||
const getBlogData = async () => {
|
||||
/*
|
||||
The reason for this, is because of the breaking I had when building the blog
|
||||
I decided to save to the local storage for an hour so that it won't need to be going to the server again but I can change this
|
||||
*/
|
||||
// Saving it locally to avoid interfering with server
|
||||
if (localStorage.getItem("myFit--blogData") == null) {
|
||||
try {
|
||||
let res = await api.blogData();
|
||||
try {
|
||||
const res = await api.blogData();
|
||||
|
||||
// Set the blog data to local storage
|
||||
localStorage.setItem("myFit--blogData", JSON.stringify(res.data));
|
||||
setBlogData(res.data);
|
||||
// Set a time out for the blog data to be deleted from local storage
|
||||
setTimeout(() => {
|
||||
localStorage.removeItem("myFit--blogData");
|
||||
}, 3600);
|
||||
} catch (error) {
|
||||
console.log("Error from blog data ", error);
|
||||
}
|
||||
} else {
|
||||
try {
|
||||
let data = JSON.parse(localStorage.getItem("myFit--blogData"));
|
||||
setBlogData(data);
|
||||
} catch (error) {
|
||||
console.error("Error parsing JSON data: ", error);
|
||||
}
|
||||
setBlogData(res.data);
|
||||
|
||||
// console.log(res.data);
|
||||
|
||||
|
||||
} catch (error) {
|
||||
console.log("Error from blog data ", error);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className="bred_crumb"
|
||||
style={{ backgroundImage: `url(${BGImg})` }}>
|
||||
<div className="bred_crumb" style={{ backgroundImage: `url(${BGImg})` }}>
|
||||
<div className="container">
|
||||
<span className="banner_shape1">
|
||||
{" "}
|
||||
<img
|
||||
src="assets/images/banner-shape1.png"
|
||||
alt="image"
|
||||
/>{" "}
|
||||
<img src="assets/images/banner-shape1.png" alt="image" />{" "}
|
||||
</span>
|
||||
<span className="banner_shape2">
|
||||
{" "}
|
||||
<img
|
||||
src="assets/images/banner-shape2.png"
|
||||
alt="image"
|
||||
/>{" "}
|
||||
<img src="assets/images/banner-shape2.png" alt="image" />{" "}
|
||||
</span>
|
||||
<span className="banner_shape3">
|
||||
{" "}
|
||||
<img
|
||||
src="assets/images/banner-shape3.png"
|
||||
alt="image"
|
||||
/>{" "}
|
||||
<img src="assets/images/banner-shape3.png" alt="image" />{" "}
|
||||
</span>
|
||||
|
||||
<div className="bred_text">
|
||||
@@ -82,122 +52,97 @@ const Main = ({ brdcum, bgimg }) => {
|
||||
<span>»</span>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/blog">
|
||||
{blogData.map((item, idx) => {
|
||||
if (idx === 0) {
|
||||
return <span>{item.post_title}</span>;
|
||||
}
|
||||
})}
|
||||
</Link>
|
||||
<Link to="/blog">Blog</Link>
|
||||
</li>
|
||||
</ul>
|
||||
{/* <div className="search_bar">
|
||||
<form action="">
|
||||
<div className="form-group">
|
||||
<input type="text" placeholder="Search here" className="form-control"/>
|
||||
<button className="btn" type="submit"><i className="icofont-search-1"></i></button>
|
||||
</div>
|
||||
</form>
|
||||
</div>*/}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section className="row_am blog_list_main">
|
||||
{blogData.length < 1 && (
|
||||
<div
|
||||
className="loader loader-sm"
|
||||
id="loader-1"></div>
|
||||
)}
|
||||
{blogData.map((data, index) => {
|
||||
if (index == 0) {
|
||||
{blogData.map((data,index) => {
|
||||
if (index == 0){
|
||||
return (
|
||||
<div
|
||||
className="container"
|
||||
key={data.id}>
|
||||
<div className="row">
|
||||
<div
|
||||
className="col-lg-6"
|
||||
data-aos="fade-in"
|
||||
data-aos-duration="1500">
|
||||
<div className="blog_img">
|
||||
<img
|
||||
src={data.meta_value}
|
||||
alt="image"
|
||||
/>
|
||||
|
||||
<span>{new Date(data.post_date).toDateString()}</span>
|
||||
</div>
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div
|
||||
className="col-lg-6"
|
||||
data-aos="fade-in"
|
||||
data-aos-duration="1500"
|
||||
>
|
||||
<div className="blog_img">
|
||||
<img
|
||||
src={data.meta_value}
|
||||
alt="image"
|
||||
/>
|
||||
{/* <span>20 min ago</span> */}
|
||||
|
||||
<span>{new Date (data.post_date).toDateString()}</span>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<div className="blog_text">
|
||||
<div className="section_title">
|
||||
<h2>{data.post_title}</h2>
|
||||
<div
|
||||
dangerouslySetInnerHTML={{
|
||||
__html:
|
||||
data.post_content.substring(0, 400) + " . . .",
|
||||
}}></div>
|
||||
{/* Change the route name */}
|
||||
<Link
|
||||
to={`/blogdetails/${data.id}`}
|
||||
state={{ data }}>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<div className="blog_text">
|
||||
<div className="section_title">
|
||||
<h2>{data.post_title}</h2>
|
||||
<div dangerouslySetInnerHTML={{__html: data.post_content.substring(0,400)+' . . .'}}></div>
|
||||
{/* <Link to={`/blog-single/${data.id}`} state={{data}}>
|
||||
READ MORE
|
||||
</Link>
|
||||
</div>
|
||||
</Link> */}
|
||||
<Link to={`/blogdetails/${data.id}`} state={{data, allData: blogData}}>
|
||||
READ MORE
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
})}
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<section
|
||||
className="row_am latest_story blog_list_story"
|
||||
id="blog">
|
||||
)
|
||||
}
|
||||
})}
|
||||
|
||||
|
||||
</section>
|
||||
<section className="row_am latest_story blog_list_story" id="blog">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
{blogData.map((data, index) => {
|
||||
if (index > 0) {
|
||||
if (index > 0){
|
||||
return (
|
||||
<div
|
||||
key={data.id}
|
||||
className="col-md-4">
|
||||
<div
|
||||
className="story_box"
|
||||
data-aos="fade-up"
|
||||
data-aos-duration="1500">
|
||||
<div className="story_img">
|
||||
<img
|
||||
src={data.meta_value}
|
||||
alt="image"
|
||||
/>
|
||||
<span>
|
||||
{new Date(data && data.post_date).toDateString()}
|
||||
</span>
|
||||
</div>
|
||||
<div className="story_text">
|
||||
<h3>{data.post_title}</h3>
|
||||
<div
|
||||
dangerouslySetInnerHTML={{
|
||||
__html:
|
||||
data &&
|
||||
data.post_content.substring(0, 100) + " . . .",
|
||||
}}></div>
|
||||
{/* Change the route name */}
|
||||
<Link
|
||||
to={`/blogdetails/${data.id}`}
|
||||
state={{ data }}>
|
||||
READ MORE
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div key={data.id} className="col-md-4">
|
||||
<div className="story_box" data-aos="fade-up" data-aos-duration="1500">
|
||||
<div className="story_img">
|
||||
<img src={data.meta_value} alt="image" />
|
||||
<span>{new Date (data && data.post_date).toDateString()}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
})}
|
||||
</div>
|
||||
<div className="story_text">
|
||||
<h3>{data.post_title}</h3>
|
||||
<div dangerouslySetInnerHTML={{__html: data && data.post_content.substring(0,100)+' . . .'}}></div>
|
||||
<Link to={`/blogdetails/${data.id}`} state={{data, allData: blogData}}>
|
||||
READ MORE
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
)}
|
||||
|
||||
|
||||
})}
|
||||
</div>
|
||||
<div className="pagination_block">
|
||||
<ul>
|
||||
<li>
|
||||
<Link
|
||||
to={process.env.REACT_APP_BLOGSITE}
|
||||
className="prev">
|
||||
<Link to={process.env.REACT_APP_BLOGSITE}
|
||||
className="prev">
|
||||
{" "}
|
||||
Visit our blog
|
||||
</Link>
|
||||
|
||||
@@ -1,201 +0,0 @@
|
||||
/** @format */
|
||||
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { Link, useLocation } from "react-router-dom";
|
||||
import Bredcrumb from "../../Bredcrumb/Main";
|
||||
import BGImg from "../../../assets/images/bread_crumb_bg.png";
|
||||
import BGImg1 from "../../../assets/images/bread_crumb_bg_one.png";
|
||||
import BGImg2 from "../../../assets/images/bread_crumb_bg_two.png";
|
||||
import SiteService from "../../../vendors/service/siteService";
|
||||
|
||||
const Main = ({ brdcum }) => {
|
||||
const location = useLocation();
|
||||
let data = location.state?.data;
|
||||
const [blogData, setBlogData] = useState([]);
|
||||
|
||||
let api_call = new SiteService();
|
||||
useEffect(() => {
|
||||
getBlogData();
|
||||
}, []);
|
||||
|
||||
const getBlogData = async () => {
|
||||
/*
|
||||
The reason for this, is because of the breaking I had when building the blog
|
||||
I decided to save to the local storage for an hour so that it won't need to be going to the server again but I can change this
|
||||
*/
|
||||
// Saving it locally to avoid interfering with server
|
||||
if (localStorage.getItem("myFit--blogData") == null) {
|
||||
try {
|
||||
let res = await api_call.blogData();
|
||||
|
||||
// Set the blog data to local storage
|
||||
localStorage.setItem("myFit--blogData", JSON.stringify(res.data));
|
||||
setBlogData(res.data);
|
||||
// Set a time out for the blog data to be deleted from local storage
|
||||
setTimeout(() => {
|
||||
localStorage.removeItem("myFit--blogData");
|
||||
}, 3600);
|
||||
} catch (error) {
|
||||
console.log("Error from blog data ", error);
|
||||
}
|
||||
} else {
|
||||
try {
|
||||
let data = JSON.parse(localStorage.getItem("myFit--blogData"));
|
||||
setBlogData(data);
|
||||
} catch (error) {
|
||||
console.error("Error parsing JSON data: ", error);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{brdcum.b1 && (
|
||||
<Bredcrumb
|
||||
no={1}
|
||||
title="Blog details"
|
||||
tag={data && data.post_title}
|
||||
bgimg={BGImg}
|
||||
/>
|
||||
)}
|
||||
|
||||
{brdcum.b2 && (
|
||||
<Bredcrumb
|
||||
no={2}
|
||||
title="Blog details"
|
||||
tag={data && data.post_title}
|
||||
bgimg={BGImg1}
|
||||
/>
|
||||
)}
|
||||
|
||||
{brdcum.b5 && (
|
||||
<Bredcrumb
|
||||
no={5}
|
||||
title="Blog details"
|
||||
tag={data && data.post_title}
|
||||
bgimg={BGImg}
|
||||
/>
|
||||
)}
|
||||
|
||||
{brdcum.b3 && (
|
||||
<Bredcrumb
|
||||
no={3}
|
||||
title="Blog details"
|
||||
tag={data && data.post_title}
|
||||
/>
|
||||
)}
|
||||
|
||||
{brdcum.b4 && (
|
||||
<Bredcrumb
|
||||
no={4}
|
||||
title="Blog details"
|
||||
tag={data && data.post_title}
|
||||
bgimg={BGImg2}
|
||||
/>
|
||||
)}
|
||||
|
||||
<section className="blog_detail_section">
|
||||
<div className="container">
|
||||
<div className="blog_inner_pannel">
|
||||
<span className="blog_date">
|
||||
{new Date(data && data.post_modified).toDateString()}
|
||||
</span>
|
||||
|
||||
<div className="section_title">
|
||||
<h2>{data && data.post_title}</h2>
|
||||
</div>
|
||||
<div className="main_img">
|
||||
<img
|
||||
src={data && data.meta_value}
|
||||
alt="image"
|
||||
/>
|
||||
</div>
|
||||
<div className="info">
|
||||
<h3>{data && data.post_name}</h3>
|
||||
<div
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: data && data.post_content,
|
||||
}}></div>
|
||||
</div>
|
||||
|
||||
<div className="blog_authore">
|
||||
<div className="authore_info">
|
||||
<div className="text">
|
||||
{/* <h3>{data && data.post_author}</h3> */}
|
||||
<span>{new Date(data && data.post_date).toDateString()}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="social_media">
|
||||
<ul>
|
||||
<li>
|
||||
<a href={process.env.REACT_APP_FACEBOOK}>
|
||||
<i className="icofont-facebook"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href={process.env.REACT_APP_TWITTER}>
|
||||
<i className="icofont-twitter"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="blog_tags">
|
||||
<a href={process.env.REACT_APP_BLOGSITE}>Visit Blog Site </a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section
|
||||
className="row_am latest_story"
|
||||
id="blog">
|
||||
<div className="container">
|
||||
{/* Latest Title */}
|
||||
<div
|
||||
className="section_title"
|
||||
data-aos="fade-in"
|
||||
data-aos-duration="1500"
|
||||
data-aos-delay="100">
|
||||
<h2>
|
||||
Read latest <span>story</span>
|
||||
</h2>
|
||||
<br />
|
||||
</div>
|
||||
{/* Body */}
|
||||
<div className="row">
|
||||
{blogData.slice(-4, -1).map((item, index) => (
|
||||
<div
|
||||
className="col-md-4"
|
||||
key={index}>
|
||||
<div
|
||||
className="story_box"
|
||||
data-aos="fade-up"
|
||||
data-aos-duration="1500">
|
||||
<div className="story_img">
|
||||
<img
|
||||
src={item.meta_value}
|
||||
alt="image"
|
||||
/>
|
||||
<span>{new Date(item.post_date).toDateString()}</span>
|
||||
</div>
|
||||
<div className="story_text">
|
||||
<h3>{item.post_title}</h3>
|
||||
<div
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: item.post_content.substring(0, 100) + " . . .",
|
||||
}}></div>
|
||||
<a href={`/blogdetails/${item.id}`}>READ MORE</a>
|
||||
{/* <Link to={`/blogdetails/${item.id}`}>READ MORE</Link> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Main;
|
||||
@@ -149,25 +149,27 @@ const Main = ({brdcum}) => {
|
||||
</div>
|
||||
<div className="social_media">
|
||||
<ul>
|
||||
<li><Link to="#"><i className="icofont-facebook"></i></Link></li>
|
||||
<li><Link to="#"><i className="icofont-twitter"></i></Link></li>
|
||||
<li><Link to="#"><i className="icofont-instagram"></i></Link></li>
|
||||
<li><Link to="#"><i className="icofont-pinterest"></i></Link></li>
|
||||
<li>
|
||||
<a href={process.env.REACT_APP_FACEBOOK}>
|
||||
<i className="icofont-facebook"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href={process.env.REACT_APP_TWITTER}>
|
||||
<i className="icofont-twitter"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="blog_tags">
|
||||
<ul>
|
||||
<li className="tags"><p>Tags:</p></li>
|
||||
<li><span>app,</span></li>
|
||||
<li><span>rating,</span></li>
|
||||
<li><span>development</span></li>
|
||||
</ul>
|
||||
<a href={process.env.REACT_APP_BLOGSITE}>Visit Blog Site </a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section className="row_am comment_section">
|
||||
|
||||
{/* <section className="row_am comment_section">
|
||||
<div className="container">
|
||||
<div className="section_title">
|
||||
<h2>3 Comments</h2>
|
||||
@@ -260,7 +262,7 @@ const Main = ({brdcum}) => {
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
</section> */}
|
||||
|
||||
<section className="row_am latest_story" id="blog">
|
||||
<div className="container">
|
||||
@@ -283,7 +285,10 @@ const Main = ({brdcum}) => {
|
||||
<div className="story_text">
|
||||
<h3>{data.post_title}</h3>
|
||||
<div dangerouslySetInnerHTML={{__html: data.post_content.substring(0,300)+' . . .'}}></div>
|
||||
<Link to={`/blogdetails/${data.id}`} state={{data}}>
|
||||
{/* <Link to={`/blog-single/${data.id}`} state={{data}}>
|
||||
READ MORE
|
||||
</Link> */}
|
||||
<Link to={`/blogdetails/${data.id}`} state={{data, allData: blogData}}>
|
||||
READ MORE
|
||||
</Link>
|
||||
</div>
|
||||
@@ -291,10 +296,6 @@ const Main = ({brdcum}) => {
|
||||
</div>
|
||||
|
||||
)})}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{/* <div className="col-md-4">
|
||||
<div className="story_box" data-aos="fade-up" data-aos-duration="1500">
|
||||
|
||||
@@ -32,7 +32,8 @@ const Main = () => {
|
||||
<h2>Read latest <span>story</span></h2>
|
||||
</div>
|
||||
<div className="row">
|
||||
{blogData.slice(1, 4).map((item, index) => (
|
||||
|
||||
{blogData.slice(1, 4).map((data, index) => (
|
||||
<div
|
||||
className="col-md-4"
|
||||
key={index}>
|
||||
@@ -42,18 +43,21 @@ const Main = () => {
|
||||
data-aos-duration="1500">
|
||||
<div className="story_img">
|
||||
<img
|
||||
src={item.meta_value}
|
||||
src={data.meta_value}
|
||||
alt="image"
|
||||
/>
|
||||
<span>{new Date(item.post_date).toDateString()}</span>
|
||||
<span>{new Date(data.post_date).toDateString()}</span>
|
||||
</div>
|
||||
<div className="story_text">
|
||||
<h3>{item.post_title}</h3>
|
||||
<h3>{data.post_title}</h3>
|
||||
<div
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: item.post_content.substring(0, 100) + " . . .",
|
||||
__html: data.post_content.substring(0, 100) + " . . .",
|
||||
}}></div>
|
||||
<Link to={`/blogdetails/${item.id}`}>READ MORE</Link>
|
||||
<Link to={`/blogdetails/${data.id}`} state={{data, allData: blogData}}>
|
||||
READ MORE
|
||||
</Link>
|
||||
{/* <Link to={`/blogdetails/${item.id}`}>READ MORE</Link> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user