From 477f47ef80d194ecaf3f9fc6c5e661d0f51ca4fd Mon Sep 17 00:00:00 2001
From: victorAnumudu <anumuduchukwuebuka@gmail.com>
Date: Mon, 10 Apr 2023 21:47:08 +0100
Subject: [PATCH] image and featured blog implemented

---
 .env                        |  1 +
 public/assets/css/style.css |  4 +--
 src/App.js                  |  4 +--
 src/components/BlogItems.js | 19 ++++++----
 src/pages/Blog_listing.js   | 72 +++++++++++++++++++++----------------
 src/svs/SiteService.js      |  2 +-
 6 files changed, 59 insertions(+), 43 deletions(-)

diff --git a/.env b/.env
index 8599fdd..f29de0a 100644
--- a/.env
+++ b/.env
@@ -10,3 +10,4 @@ REACT_APP_GOOGLE_PLAY_LINK='https://apps.apple.com/us/app/float-mobility/id14653
 
 REACT_APP_AUX_ENDPOINT='https://float-gat.dev.chiefsoft.net/en/floatweb/api/v1/'
 
+REACT_APP_IMAGE_LINK='https://blog.float.sg/wp-content/uploads/'
diff --git a/public/assets/css/style.css b/public/assets/css/style.css
index dc1a00a..5afc1b1 100644
--- a/public/assets/css/style.css
+++ b/public/assets/css/style.css
@@ -4714,8 +4714,8 @@ h5.posts-category {
 .featured-badge {
   z-index: 70;
   position: absolute;
-  top: 20px;
-  right: 20px;
+  top: 10px;
+  right: 10px;
   width: 45px;
   height: 45px;
   -webkit-border-radius: 100%;
diff --git a/src/App.js b/src/App.js
index 62f40f0..1aa3b1b 100644
--- a/src/App.js
+++ b/src/App.js
@@ -39,12 +39,12 @@ function App() {
 		try {
 			const res = await siteApi.blogData();
 			if(res.status == 200 /* && res.data.status > 0*/){
-				console.log(res.data.payload, res.data);
+				console.log(res.data);
 				setBlogData(res.data)
 				return
 			}
 		}catch(error) {
-			setBlogData({payload: {blogdata: []}})
+			setBlogData({blogdata: []})
 		}
 	};
 
diff --git a/src/components/BlogItems.js b/src/components/BlogItems.js
index 4699e3c..c5ea798 100644
--- a/src/components/BlogItems.js
+++ b/src/components/BlogItems.js
@@ -27,23 +27,27 @@ const BlogItems = ({blogData}) => {
   return (
     <div className="row">
         {
-            blogData?.payload == undefined ? // API CALL IN PROGRESS
-            <div className='col-12 text-center display-4'>Loading...</div>
+            blogData?.blogdata == undefined ? // API CALL IN PROGRESS
+            // <div className='col-12 text-center display-4'>Loading...</div>
+            <div className="col-12 text-center">
+                <div className="spinner-border spinner-border-lg" role="status" style={{width: '3rem', height: '3rem'}}>
+                </div>
+            </div>
             :
             // API CALL FINISHED
             (
-                blogData?.payload?.blogdata.length < 1 ?
+                blogData?.blogdata.length < 1 ?
                 <div className='col-12 text-center display-4'>No Blog Currently Found!</div>
                 :
-                blogData?.payload?.blogdata.map((blog, index) => {
+                blogData?.blogdata.map((blog, index) => {
                     if(location == '/blogs'){
                         return(
                             <div key={index} id="b-post-1" className="col-md-6 col-lg-4">
                                 <div className="blog-post mb-40 wow fadeInUp" data-wow-delay="0.4s">
                                 {/* BLOG POST IMAGE */}
                                 <div className="blog-post-img rounded">
-                                    <img className="img-fluid rounded" src="assets/images/blog/post-1-img.jpg" alt="blog-post-image" />
-                                    {/* <img className="img-fluid" src={blog.meta_value} alt="blog-post-image" /> */}
+                                    {/* <img className="img-fluid rounded" src="assets/images/blog/post-1-img.jpg" alt="blog-post-image" /> */}
+                                    <img className="img-fluid rounded" src={process.env.REACT_APP_IMAGE_LINK + blog.meta_value} alt="blog-post-image" />
                                 </div>
                                 {/* BLOG POST TEXT */}
                                 <div className="blog-post-txt">
@@ -73,7 +77,8 @@ const BlogItems = ({blogData}) => {
                                 <div className="blog-post mb-40 wow fadeInUp" data-wow-delay="0.4s">
                                 {/* BLOG POST IMAGE */}
                                 <div className="blog-post-img rounded">
-                                    <img className="img-fluid rounded" src="assets/images/blog/post-1-img.jpg" alt="blog-post-image" />
+                                    {/* <img className="img-fluid rounded" src="assets/images/blog/post-1-img.jpg" alt="blog-post-image" /> */}
+                                    <img className="img-fluid rounded" src={process.env.REACT_APP_IMAGE_LINK + blog.meta_value} alt="blog-post-image" />
                                 </div>
                                 {/* BLOG POST TEXT */}
                                 <div className="blog-post-txt">
diff --git a/src/pages/Blog_listing.js b/src/pages/Blog_listing.js
index 3d84133..1ac6e6f 100644
--- a/src/pages/Blog_listing.js
+++ b/src/pages/Blog_listing.js
@@ -12,8 +12,8 @@ class Blog_listing extends React.Component {
     console.log("OLU-AMEY BLOG LISTING ",props.blogData);
   }
 
-
-    render() {
+  
+  render() {
      // const [blogData, setBlogData] = useState([]) // for holding
       //const siteApi = new SiteService(); // instantiating the API SERVICE
 
@@ -53,35 +53,45 @@ class Blog_listing extends React.Component {
                 </div>
               </div>
               {/* FEATURED POST */}
-              <div className="rel blog-post featured-post wide-post">
-                <div className="row d-flex align-items-center">
-                  <div className="featured-badge text-center ico-30 bg_whitesmoke yellow-color">
-                    <span className="flaticon-star" />
-                  </div>
-                  {/* BLOG POST IMAGE */}
-                  <div className="col-lg-7 blog-post-img">
-                    <img className="img-fluid" src="assets/images/blog/post-1-img.jpg" alt="blog-post-image" />	
-                  </div>
-                  {/* BLOG POST TEXT */}
-                  <div className="col-lg-5 blog-post-txt">
-                    {/* Post Tag */}
-                    <p className="p-md post-tag">NordEx News</p>	
-                    {/* Post Link */}
-                    <h5 className="h5-xl">
-                      <a href="single-post.html">Tempor sapien donec gravida a suscipit and porta justo vitae</a>
-                    </h5>
-                    {/* Text */}
-                    <p className="p-md">Aliqum mullam blandit vitae and tempor sapien and donec lipsum gravida a porta 
-                      undo velna dolor in cubilia laoreet
-                    </p>
-                    {/* Post Meta */}
-                    <div className="post-meta">
-                      <div className="post-author-avatar"><img src="assets/images/post-author-1.jpg" alt="author-avatar" /></div>
-                      <p>12 min read</p>
-                    </div>	
-                  </div>	{/* END BLOG POST TEXT */}
-                </div>   {/* End row */}
-              </div>	{/* END FEATURED POST */}
+              {
+                this.props.blogData?.featured == undefined ?  // API CALL IN PROGRESS
+                <div className="text-center">
+                    <div className="spinner-border spinner-border-lg" role="status" style={{width: '3rem', height: '3rem'}}>
+                    </div>
+                </div>
+                :
+                <div className="rel blog-post featured-post wide-post">
+                  <div className="row d-flex align-items-center">
+                    <div className="featured-badge text-center ico-30 bg_whitesmoke yellow-color">
+                      <span className="flaticon-star" />
+                    </div>
+                    {/* BLOG POST IMAGE */}
+                    <div className="col-lg-7 blog-post-img">
+                      <img className="w-auto h-100" src={process.env.REACT_APP_IMAGE_LINK + this.props.blogData?.featured.meta_value} alt="blog-post-image" />
+                    </div>
+                    {/* BLOG POST TEXT */}
+                    <div className="col-lg-5 blog-post-txt">
+                      {/* Post Tag */}
+                      <p className="p-2 post-tag">Float News</p>	
+                      {/* Post Link */}
+                      <h5 className="h5-xl">
+                        <a href="single-post.html">{this.props.blogData?.featured.post_title}</a>
+                      </h5>
+                      {/* Text */}
+                      {/* <p className="p-md">Aliqum mullam blandit vitae and tempor sapien and donec lipsum gravida a porta 
+                        undo velna dolor in cubilia laoreet
+                      </p> */}
+                      <div className="p-2" dangerouslySetInnerHTML={{__html: this.props.blogData?.featured.post_content.substring(0,300)+'  . . .'}}></div>
+                      {/* Post Meta */}
+                      <div className="post-meta">
+                        <div className="post-author-avatar"><img src="assets/images/post-author-1.jpg" alt="author-avatar" /></div>
+                        <p>12 min read</p>
+                      </div>	
+                    </div>	{/* END BLOG POST TEXT */}
+                  </div>   {/* End row */}
+                </div>	
+              } {/* END FEATURED POST */}
+
               {/* POSTS WRAPPER */}
               <div className="posts-wrapper">
                 {/* BLOG POSTS CATEGORY */} 
diff --git a/src/svs/SiteService.js b/src/svs/SiteService.js
index 96888a1..188d259 100644
--- a/src/svs/SiteService.js
+++ b/src/svs/SiteService.js
@@ -8,7 +8,7 @@ class SiteService {
     }
     // Blog Data {Get}
     blogData() {
-        return this.getAuxEnd("/blogdata/10", null);
+        return this.getAuxEnd("/blogdata", null);
     }
 
     // Country Data {GET}
-- 
2.34.1