Merge branch 'master' of https://gitlab.chiefsoft.net/FloatSystems/float-www into footer-social-links

.env

@@ -11,4 +11,6 @@ REACT_APP_GOOGLE_PLAY_LINK='https://apps.apple.com/us/app/float-mobility/id14653
 REACT_APP_FACEBOOK_LINK='https://www.facebook.com/tryfloat'
 REACT_APP_TWITTER_LINK='https://twitter.com/tryfloat/'
 REACT_APP_LINKEDIN_LINK="https://www.linkedin.com/company/float-mobility/"
-REACT_APP_INSTAGRAM_LINK="https://www.instagram.com/company/float-mobility/"
+REACT_APP_INSTAGRAM_LINK="https://www.instagram.com/company/float-mobility/"
+
+REACT_APP_AUX_ENDPOINT='https://float-gat.dev.chiefsoft.net/en/floatweb/api/v1/'

package.json

@@ -1,6 +1,6 @@
 {
   "name": "wwww-float",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "private": true,
   "dependencies": {
     "@reduxjs/toolkit": "^1.8.2",

src/App.js

@@ -29,15 +29,34 @@ import FindMobility from "./pages/FindMobility";
 // } from "react-router-dom";
 
 import { Routes, Route } from "react-router-dom";
-
+import { useState, useEffect } from "react";
+import SiteService from "./svs/SiteService";
 
 function App() {
+	const [blogData, setBlogData] = useState([]) // for holding
+	const siteApi = new SiteService(); // instantiating the API SERVICE
+	const getBlogData = async () => {
+		try {
+			const res = await siteApi.blogData();
+			if(res.status == 200 /* && res.data.status > 0*/){
+				console.log(res.data.payload);
+				setBlogData(res.data)
+				return
+			}
+		}catch(error) {
+		}
+	};
+
+	useEffect(() => {
+		getBlogData();
+	}, []);
+
   return (
     <div className="App">
 
 	 <Header/>
    	    <Routes>
-			<Route path="/" element={<FloatHome/>} />
+			<Route path="/" element={<FloatHome blogData={blogData} />} />
 			<Route path="/about" element={<About/>} />
 			<Route path="/faqs" element={<Faqs/>} />
 			<Route path="/features" element={<Features/>} />
@@ -48,7 +67,7 @@ function App() {
 			<Route path="/demo" element={<Demo/>} />
 			<Route path="/about" element={<About/>} />
 			<Route path="/blog_listing" element={<Blog_listing/>} />
-			<Route path="/blogs" element={<Blog_listing/>} />
+			<Route path="/blogs" element={<Blog_listing blogData={blogData} />} />
 			<Route path="/contacts" element={<Contacts/>} />
 			<Route path="/users" element={<Users/>} />
 			<Route path="/business" element={<Fleet/>} />

src/components/Footer.js

@@ -12,21 +12,22 @@ class Footer extends React.Component {
 							<div className="row">
 								<div className="col-sm-6 col-md-4 col-lg-3">
 									<div className="footer-links mb-40">
-										<ul className="foo-links clearfix">									
+										<ul className="foo-links clearfix">
-
+											<li><p className="p-md"><Link to="#">Stop the Surge</Link></p></li>
-											<li><p className="p-md"><Link to="/#">Users</Link></p></li>
+											<li><p className="p-md"><Link to="/blogs">Travel Guide</Link></p></li>
-											<li><p className="p-md"><Link to="/#">Fleet Mangers</Link></p></li>
 											<li><p className="p-md"><Link to="/findev">Find Ev Charge</Link></p></li>
 											<li><p className="p-md"><Link to="/findmobility">Find Options</Link></p></li>
+
+
 										</ul>
 									</div>
 								</div>
 								<div className="col-sm-6 col-md-4 col-lg-3">
 									<div className="footer-links mb-40">
-										<ul className="foo-links clearfix">													
+										<ul className="foo-links clearfix">
-											<li><p className="p-md"><Link to="/blogs">Our Blog</Link></p></li>	
+											<li><p className="p-md"><Link to="/#">Users</Link></p></li>
+											<li><p className="p-md"><Link to="/#">Fleet Mangers</Link></p></li>
 											<li><p className="p-md"><Link to="/contacts">Customer Stories</Link></p></li>
-											<li><p className="p-md"><Link to="/#">Help & Support</Link></p></li>	
 											<li><p className="p-md"><Link to="/#">Resources</Link></p></li>
 										</ul>
 									</div>
@@ -35,7 +36,8 @@ class Footer extends React.Component {
 									<div className="footer-links mb-40">
 										<ul className="foo-links clearfix">
 											<li><p className="p-md"><Link to="/about">About Us</Link></p></li>
-											<li><p className="p-md"><Link to="/#">Press & Media</Link></p></li>	
+											<li><p className="p-md"><Link to="/blogs">Our Blog</Link></p></li>
+											<li><p className="p-md"><Link to="/#">Press Kit (Download)</Link></p></li>
 											<li><p className="p-md"><Link to="/privacy">Privacy Policy</Link></p></li>
 											<li><p className="p-md"><Link to="/terms">Terms & Privacy</Link></p></li>					
 										</ul>

src/pages/Blog_listing.js

@@ -1,7 +1,22 @@
-import React, {Component} from 'react';
+import React, {Component,useState, useEffect} from 'react';
+import SiteService from "../svs/SiteService";
 
 class Blog_listing extends React.Component {
+
+  constructor(props) {
+    super(props);
+    // Don't call this.setState() here!
+    // this.state = { counter: 0 };
+    // this.handleClick = this.handleClick.bind(this);
+    console.log("OLU-AMEY BLOG LISTING ",props.blogData);
+  }
+
+
     render() {
+     // const [blogData, setBlogData] = useState([]) // for holding
+      //const siteApi = new SiteService(); // instantiating the API SERVICE
+
+
         return(
             <div>
 

src/pages/FloatHome.js

@@ -15,6 +15,15 @@ import Assistant from '../pages/assests/images/assistant (2).ico'
 
 
 class FloatHome extends React.Component {
+
+  constructor(props) {
+    super(props);
+    // Don't call this.setState() here!
+   // this.state = { counter: 0 };
+    // this.handleClick = this.handleClick.bind(this);
+    console.log("OLU-AMEY 22",props.blogData);
+  }
+
     render() {
         return(
             <div>
@@ -1041,6 +1050,36 @@ class FloatHome extends React.Component {
               </div>
               {/* BLOG POSTS */}
               <div className="row">
+                {
+                  this.props.blogData?.blogdata?.map((x) => {
+                    <div 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">
+                          <img className="img-fluid" src="assets/images/blog/post-1-img.jpg" alt="blog-post-image" />
+                        </div>
+                        {/* BLOG POST TEXT */}
+                        <div className="blog-post-txt">
+                          {/* Post Tag */}
+                          <p className="p-md post-tag">Float News</p>
+                          {/* Post Link */}
+                          <h5 className="h5-sm">
+                            <a href="single-post.html">{x.title}</a>
+                          </h5>
+                          {/* Text */}
+                          <p className="p-md">Aliqum mullam blandit vitae tempor sapien a donec lipsum gravida porta velna dolor vitae auctor
+                            congue
+                          </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>
+                      </div>
+                    </div>
+                  })
+                }
                 {/* BLOG POST #1 */}
                 <div id="b-post-1" className="col-md-6 col-lg-4">
                   <div className="blog-post mb-40 wow fadeInUp" data-wow-delay="0.4s">	
@@ -1122,6 +1161,7 @@ class FloatHome extends React.Component {
                     </div>	{/* END BLOG POST TEXT */}
                   </div>
                 </div>	{/* END  BLOG POST #3 */}
+
               </div>	{/* END BLOG POSTS */}
             </div>	   {/* End container */}		
           </section>	{/* END BLOG-1 */}

src/pages/Users.js

@@ -790,8 +790,8 @@ export default Users
 //HERO SECTION
 let heroSection = {
   leadTitle: `Float`,
-  title: `Your Mobility & Star Access Feed`,
+  title: `Your Mobility Made Smarter`,
-  desc: `Stay Connected with Your Fleet`,
+  desc: `Stay Connected with Your World`,
   mainSiteLink: 'This leads to users PORTAL',
 };
 

src/svs/SiteService.js

@@ -0,0 +1,84 @@
+//https://float-gat.dev.chiefsoft.net/en/floatweb/api/v1/wp
+import React from "react";
+import Axios from "axios";
+
+class SiteService {
+    constructor() {
+        console.log("Site Service Entered");
+    }
+    // Blog Data {Get}
+    blogData() {
+        return this.getAuxEnd("/blogdata", null);
+    }
+
+    // Country Data {GET}
+    countryData() {
+        return this.getAuxEnd("/country", null);
+    }
+
+    // Contact Data{POST}
+    contactData() {
+        return this.postAuxEnd("/contact", null)
+    }
+
+    faqData() {
+        return this.getAuxEnd("/faq", null);
+    }
+
+    priceData() {
+        return this.getAuxEnd("/pricing", null);
+    }
+
+    //----------------------------------------  -----
+    //----------------------------------------  -----
+    // Unified call below
+    //----------------------------------------  -----
+    //----------------------------------------  -----
+    getAuxEnd(uri, reqData) {
+        const endPoint = process.env.REACT_APP_AUX_ENDPOINT + uri;
+        return Axios.get(endPoint)
+            .then((response) => {
+                // console.log(response);
+                // res = response;
+                // console.log("~~~~~~~ Toks2 GET ~~~~~~~~");
+                return response;
+            })
+            .catch((error) => {
+                if (error.response) {
+                    //response status is an error code
+                    console.log(error.response.status);
+                } else if (error.request) {
+                    //response not received though the request was sent
+                    console.log(error.request);
+                } else {
+                    //an error occurred when setting up the request
+                    console.log(error.message);
+                }
+            });
+    }
+
+    postAuxEnd(uri, reqData) {
+        const endPoint = process.env.REACT_APP_AUX_ENDPOINT + uri;
+        return Axios.post(endPoint, reqData)
+            .then((response) => {
+                console.log(response);
+                // res = response;
+                console.log("~~~~~~~ Toks2 POST ~~~~~~~~");
+                return response;
+            })
+            .catch((error) => {
+                if (error.response) {
+                    //response status is an error code
+                    console.log(error.response.status);
+                } else if (error.request) {
+                    //response not received though the request was sent
+                    console.log(error.request);
+                } else {
+                    //an error occurred when setting up the request
+                    console.log(error.message);
+                }
+            });
+    }
+}
+
+export default SiteService;