Merge branch 'blog_details' of FloatSystems/float-www into master

src/components/BlogItems.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import { useLocation } from 'react-router-dom'
+import { useLocation, Link } from 'react-router-dom'
 // import SiteService from '../svs/SiteService';
 
 const BlogItems = ({blogData}) => {
@@ -55,7 +55,7 @@ const BlogItems = ({blogData}) => {
                                     <p className="p-md post-tag">Float News</p>
                                     {/* Post Link */}
                                     <h5 className="h5-sm">
-                                    <a href="/sel_post/">{blog.post_title.substring(0,40)+'  . . .'}</a>
+                                    <Link to="/sel_post" state={{blog}}>{blog.post_title.substring(0,40)+'  . . .'}</Link>
                                     </h5>
                                     {/* Text */}
                                     <div dangerouslySetInnerHTML={{__html: blog.post_content.substring(0,50)+'  . . .'}}></div>
@@ -86,7 +86,7 @@ const BlogItems = ({blogData}) => {
                                     <p className="p-md post-tag">Float News</p>
                                     {/* Post Link */}
                                     <h5 className="h5-sm">
-                                    <a href="/sel_post">{blog.post_title.substring(0,40)+'  . . .'}</a>
+                                    <Link to="/sel_post" state={{blog}}>{blog.post_title.substring(0,40)+'  . . .'}</Link>
                                     </h5>
                                     {/* Text */}
                                     <div dangerouslySetInnerHTML={{__html: blog.post_content.substring(0,50)+'  . . .'}}></div>

src/pages/Blog_listing.js

@@ -1,4 +1,5 @@
 import React, {Component,useState, useEffect} from 'react';
+import {Link} from 'react-router-dom'
 import BlogItems from '../components/BlogItems';
 import SiteService from "../svs/SiteService";
 
@@ -35,6 +36,7 @@ class Blog_listing extends React.Component {
           {/* HEADER
 			============================================= */}
           
+          
           {/* BLOG POSTS LISTING
 			============================================= */}
           <section id="blog-page" className="bg_whitesmoke hero-offset-nav pb-60 blog-page-section division">
@@ -75,7 +77,7 @@ class Blog_listing extends React.Component {
                       <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>
+                      <Link to="/sel_post" state={{blog:this.props.blogData?.featured}}>{this.props.blogData?.featured.post_title}</Link>
                       </h5>
                       {/* Text */}
                       {/* <p className="p-md">Aliqum mullam blandit vitae and tempor sapien and donec lipsum gravida a porta 

src/pages/Single_post.js

@@ -1,8 +1,36 @@
-import React, {Component} from 'react';
+import React, {Component, useEffect, useState} from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+
+let Single_post = ()=> {
+  const navigate = useNavigate()
+
+  let {state} = useLocation()
+  console.log(state)
+
+  let [pageLoading, setPageloading] = useState(true)
+
+  useEffect(()=>{
+    if(state == null) {
+      navigate('/', {replace: true})
+    }
+    let pageLoadingTimeout = setTimeout(()=>{
+      setPageloading(false)
+    },3000)
+    return ()=>{
+      clearInterval(pageLoadingTimeout)
+    }
+  }, [])
 
-class Single_post extends React.Component {
-    render() {
   return(
+
+    pageLoading ? 
+    <div className='row p-5 mt-5'>
+      <div className="col-12 text-center p-5 mt-5">
+          <div className="spinner-border spinner-border-lg" role="status" style={{width: '3rem', height: '3rem'}}>
+          </div>
+      </div>
+    </div>
+    :
     <div>
 
 
@@ -30,7 +58,7 @@ class Single_post extends React.Component {
                     {/* CATEGORY */}
                     <p className="p-lg post-tag skyblue-color">Float News</p>
                     {/* TITLE */}
-                      <h4 className="h4-xl">Aliquam augue Float, luctus neque purus an ipsum and neque dolor libero</h4>
+                    <h4 className="h4-xl">{state.blog.post_title}</h4>
                     {/* POST DATA */}
                     <div className="post-data clearfix">
                       {/* Author Avatar */}
@@ -39,7 +67,7 @@ class Single_post extends React.Component {
                       </div>
                       {/* Author Data */}
                       <div className="post-author">
-                          <span>Gordon Wright <a href="#" className="follow-author">Follow</a></span>	
+                        <span>Gordon Wright <a href="#" target='_blank' className="follow-author">Follow</a></span>	
                         <span>April 05 - 12 min read</span>	
                       </div>
                     </div>	{/* END POST DATA */}
@@ -47,27 +75,23 @@ class Single_post extends React.Component {
                   {/* BLOG POST TEXT */}
                   <div className="single-post-txt">
                     {/* Text */}
-                      <p className="p-lg">Mauris donec ociis et magnis sapien etiam sapien sem sagittis congue tempor gravida donec 
+                    <div dangerouslySetInnerHTML={{__html: state.blog.post_content}}></div>
-                        and ipsum aporta justo integer at odio velna. Maecenas gravida porttitor nunc vehicula magna luctus tempor. Quisque vel laoreet turpis. An augue viverra a augue eget, dictum tempor pulvinar donec ociis et magnis 
-                        sapien imperdiet dui varius placerat imperdiet ipsum varius viverra augue egestas luctus donec purus and 
-                        blandit impedit ligula risus. Mauris donec
-                      </p>
                   </div>	{/* END BLOG POST TEXT */}
                   {/* BLOG POST INNER IMAGE */}
                   <div className="post-inner-img">
-                      <img className="img-fluid" src="assets/images/blog/inner-img-1.jpg" alt="blog-post-image" />		
+                    <img className="img-fluid" src={process.env.REACT_APP_IMAGE_LINK + state.blog.meta_value} alt="blog-post-image" />		
                   </div>
                   {/* BLOG POST TEXT */}
                   <div className="single-post-txt">
                     {/* Text */}
-                      <p className="p-lg">Aliqum  mullam blandit tempor sapien gravida donec ipsum, at porta justo. Velna vitae auctor 
+                    {/* <p className="p-lg">Aliqum  mullam blandit tempor sapien gravida donec ipsum, at porta justo. Velna vitae auctor 
                       massa congue magna nihil impedit ligula risus. Mauris donec ociis and magnis sapien etiam sapien sagittis 
                       congue tempor a gravida donec enim ipsum porta justo integer undo odio velna. Maecenas gravida porttitor nunc, quis vehicula magna at luctus tempor. Quisque vel laoreet turpis. Urna augue, viverra a augue eget, dictum 
                       tempor diam. Sed pulvinar consectetur nibh, vel imperdiet dui varius viverra. Pellentesque ac massa lorem 
                       fusce eu tempor gravida porttitor cursus fusce
-                      </p>
+                    </p> */}
                     {/* List */}
-                      <ol className="digit-list">
+                    {/* <ol className="digit-list">
                       <li><p className="p-lg">Donec dolor suscipit magna vehicula impedit ligula risus. Mauris donec ociis magnis 
                           sapien etiam and sapien sem sagittis congue tempor gravida porttitor nunc, quis vehicula magna 
                         </p></li>
@@ -79,13 +103,13 @@ class Single_post extends React.Component {
                       <li><p className="p-lg">Maecenas gravida porttitor nunc, quis vehicula magna luctus tempor. Quisque laoreet turpis 
                           urna augue, viverra a augue eget, dictum tempor diam. Sed pulvinar consectetur and placerat donec 
                         </p></li>
-                      </ol>
+                    </ol> */}
                     {/* Small Title */}
-                      <h5 className="h5-md mt-50">Praesent aliquet tempus<br />
+                    {/* <h5 className="h5-md mt-50">Praesent aliquet tempus<br />
                       (tempor gravida ipsum as an example)
-                      </h5>
+                    </h5> */}
                     {/* List */}
-                      <ul className="simple-list">
+                    {/* <ul className="simple-list">
                       <li className="list-item">
                         <p className="p-lg">Donec dolor magna, suscipit in magna dignissim, porttitor hendrerit diam. Nunc gravida 
                           ultrices felis eget faucibus. Praesent aliquet tempus, blandit posuere ligula varius
@@ -102,38 +126,38 @@ class Single_post extends React.Component {
                           pulvinar consectetur purus efficitur ipsum primis in cubilia laoreet augue donec
                         </p>
                       </li>
-                      </ul>
+                    </ul> */}
                     {/* Text */}
-                      <p className="p-lg">Sagittis congue augue egestas volutpat egestas magna suscipit egestas magna ipsum vitae purus 
+                    {/* <p className="p-lg">Sagittis congue augue egestas volutpat egestas magna suscipit egestas magna ipsum vitae purus 
                       efficitur ipsum primis in cubilia laoreet augue egestas luctus donec diam. Curabitur dapibus libero. Mauris 
                       donec ociis a neque. Phasellus blandit tristique justo and aliquam vitae molestie nunc sapien justo, aliquet 
                       non molestie augue, venenatis nec purus aliquam eget lacinia elit tincidunt 
-                      </p> 
+                    </p>  */}
                     {/* BLOG POST INNER IMAGES */}
                     <div className="post-inner-img">
                       <div className="row">
                         {/* Inner Image #1 */}
                         <div className="col-md-6 top-img blog-post-img">
                           {/* Image */}
-                            <img className="img-fluid" src="assets/images/blog/post-4-img.jpg" alt="blog-post-image" />		
+                          {/* <img className="img-fluid" src="assets/images/blog/post-4-img.jpg" alt="blog-post-image" />		 */}
                           {/* Text */}
-                            <p>Maecenas gravida porttitor nunc magna</p>
+                          {/* <p>Maecenas gravida porttitor nunc magna</p> */}
                         </div>
                         {/* Inner Image #2 */}
                         <div className="col-md-6 blog-post-img">
                           {/* Image */}
-                            <img className="img-fluid" src="assets/images/blog/post-7-img.jpg" alt="blog-post-image" />		
+                          {/* <img className="img-fluid" src="assets/images/blog/post-7-img.jpg" alt="blog-post-image" />		 */}
                           {/* Text */}
-                            <p>Gravida porttitor nunc, quis vehicula tempor</p>
+                          {/* <p>Gravida porttitor nunc, quis vehicula tempor</p> */}
                         </div>
                       </div>
                     </div>	{/* END INNER IMAGES */}
                     {/* Text */}  
-                      <p className="p-lg">Nulla tincidunt volutpat tincidunt. Pellentesque habitant morbi tristique senectus and netus 
+                    {/* <p className="p-lg">Nulla tincidunt volutpat tincidunt. Pellentesque habitant morbi tristique senectus and netus 
                       laoreet malesuada famesa augue suscipit, luctus at neque purus neque dolor primis. Nemo sodales ipsam egestas volute turpis a dolores aliquam quaerat sodales sapien congue augue eget gravida laoreet turpis urna augue, viverra a augue eget, dictum dictum tempor diam pulvinar consectetur 
-                      </p>
+                    </p> */}
                     {/* List */}
-                      <ul className="simple-list">
+                    {/* <ul className="simple-list">
                       <li className="list-item">
                         <p className="p-lg">Donec dolor magna, suscipit in magna dignissim, porttitor hendrerit diam. Nunc gravida 
                           ultrices felis eget faucibus. Praesent aliquet tempus, blandit posuere ligula varius
@@ -144,25 +168,25 @@ class Single_post extends React.Component {
                           ligula rutrum tempor mullam blandit tempor sapien and gravida donec ipsum at justo
                         </p>
                       </li>
-                      </ul>
+                    </ul> */}
 
                     {/* Small Title */}
-                      <h5 className="h5-md">Vitae massa placerat vulputate</h5>
+                    {/* <h5 className="h5-md">Vitae massa placerat vulputate</h5> */}
                     {/* Text */}  
-                      <p className="p-lg">Nullam non scelerisque lectus. In at mauris vel nisl convallis porta at vitae dui. Nam lacus 
+                    {/* <p className="p-lg">Nullam non scelerisque lectus. In at mauris vel nisl convallis porta at vitae dui. Nam lacus 
                       vulputate ligula molestie bibendum quis, aliquet elementum massa. Vestibulum ut sagittis purus massa lorem. 
                       Fusce eu cursus est. Fusce non nulla vitae massa placerat vulputate purus. Aliqum mullam a blandit tempor 
                       posuere ligula varius congue cursus congue magna impedit ligula
-                      </p>
+                    </p> */}
                     {/* Text */}
-                      <p className="p-lg"><span className="txt-500">Aliqum  mullam blandit tempor sapien gravida donec ipsum</span>, at porta 
+                    {/* <p className="p-lg"><span className="txt-500">Aliqum  mullam blandit tempor sapien gravida donec ipsum</span>, at porta 
                       justo. Velna vitae and auctor congue magna impedit ligula risus. Mauris donec ociis magnis sapien etiam 
                       sapien sagittis congue posuere ligula varius congue cursus tempor gravida donec integer
-                      </p>
+                    </p> */}
                     {/* Small Title */}
-                      <h5 className="h5-md">Cursus non nulla vitae massa</h5>
+                    {/* <h5 className="h5-md">Cursus non nulla vitae massa</h5> */}
                     {/* List */}
-                      <ul className="simple-list">
+                    {/* <ul className="simple-list">
                       <li className="list-item">
                         <p className="p-lg">Donec dolor magna, suscipit in magna dignissim, porttitor hendrerit diam. Gravida ultrices 
                           felis faucibus aliquet undo tempus, blandit posuere ligula varius congue cursus nulla vitae massa placerat vulputate tempor sapien gravida
@@ -179,20 +203,20 @@ class Single_post extends React.Component {
                           suscipit, luctus neque purus ipsum
                         </p>
                       </li>
-                      </ul>
+                    </ul> */}
                     {/* Text */}
-                      <p className="p-lg">Curabitur ac dapibus libero quisque eu tristique neque sellus blandit tristique justo ut aliquam.
+                    {/* <p className="p-lg">Curabitur ac dapibus libero quisque eu tristique neque sellus blandit tristique justo ut aliquam.
                       Aliquam vitae at molestie nunc sapien justo, aliquet non molestie sed, venenatis nec purus. Aliquam eget lacinia
                       tincidunt massa justo. Quisque vel laoreet turpis. Urna augue, viverra a augue eget, dictum tempor diam. Sed
                       pulvinar consectetur nibh, vel imperdiet varius viverra. Pellentesque ac massa lorem. Fusce eu cursus est. 
                       Fusce non nulla vitae massa placerat bulum tincidunt tincidunt massa, et porttitor justo viverra a augue eget
-                      </p> 
+                    </p>  */}
-                    </div>	{/* END BLOG POST TEXT */}
+                  </div>	
+                  {/* END BLOG POST TEXT */}
                   {/* SINGLE POST SHARE LINKS */}
                   <div className="row post-share-links d-flex align-items-center">
                     {/* POST TAGS */}
                     <div className="col-md-9 col-xl-8 post-tags-list">
-
                     </div>
                     {/* POST SHARE ICONS */}
                     <div className="col-md-3 col-xl-4 post-share-list text-right">
@@ -240,10 +264,8 @@ class Single_post extends React.Component {
       
       </div>	{/* END PAGE CONTENT */}
 
-
-
     </div>
   )
-    }
+    
 }
 export default Single_post