From 4463a98b63bff42aeced5d3eace672ba7a5a9da1 Mon Sep 17 00:00:00 2001 From: "DESKTOP-QHP1O2H\\MIKE" Date: Mon, 23 Jan 2023 11:31:46 -0500 Subject: [PATCH] first commit --- src/component/Blog/BlogSingle/Main copy.js | 201 +++++++++ src/component/Blog/BlogSingle/Main.js | 483 +++++++++++++-------- 2 files changed, 508 insertions(+), 176 deletions(-) create mode 100644 src/component/Blog/BlogSingle/Main copy.js diff --git a/src/component/Blog/BlogSingle/Main copy.js b/src/component/Blog/BlogSingle/Main copy.js new file mode 100644 index 0000000..b2be0a5 --- /dev/null +++ b/src/component/Blog/BlogSingle/Main copy.js @@ -0,0 +1,201 @@ +/** @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 && ( + + )} + + {brdcum.b2 && ( + + )} + + {brdcum.b5 && ( + + )} + + {brdcum.b3 && ( + + )} + + {brdcum.b4 && ( + + )} + +
+
+
+ + {new Date(data && data.post_modified).toDateString()} + + +
+

{data && data.post_title}

+
+
+ image +
+
+

{data && data.post_name}

+
+
+ +
+
+
+ {/*

{data && data.post_author}

*/} + {new Date(data && data.post_date).toDateString()} +
+
+
+ +
+
+ +
+
+
+ +
+
+ {/* Latest Title */} +
+

+ Read latest story +

+
+
+ {/* Body */} +
+ {blogData.slice(-4, -1).map((item, index) => ( +
+
+
+ image + {new Date(item.post_date).toDateString()} +
+
+

{item.post_title}

+
+ READ MORE + {/* READ MORE */} +
+
+
+ ))} +
+
+
+ + ); +}; + +export default Main; diff --git a/src/component/Blog/BlogSingle/Main.js b/src/component/Blog/BlogSingle/Main.js index b2be0a5..cfdebf4 100644 --- a/src/component/Blog/BlogSingle/Main.js +++ b/src/component/Blog/BlogSingle/Main.js @@ -1,201 +1,332 @@ -/** @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 { 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 { useParams } from "react-router-dom"; 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(); +const Main = ({brdcum}) => { + const { id } = useParams(); + const location = useLocation(); + const [blogData, setBlogData] = useState([]); + const [newAllData, setNewAllData] = useState([]); + + useEffect(() => { getBlogData(); - }, []); + getLatestBlog(); + }, [location.state?.data]); + + const api = new SiteService(); + const data = location.state?.data; + const allData = location.state?.allData; + + + const getLatestBlog = () =>{ + const arrData = [ ...allData ]; + const itemIndex = arrData.findIndex(x => x.id === data.id) + arrData.splice(itemIndex, 1); + const newAllData = arrData.splice(0, 3); + setNewAllData(newAllData); + + console.log('All data ', arrData, newAllData); +} 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); - } + try { + const res = await api.blogData(); + setBlogData(res.data); + + } catch (error) { + console.log("Error from blog data ", error); } }; - + return ( <> - {brdcum.b1 && ( - - )} + + {brdcum.b1 && + } - {brdcum.b2 && ( - - )} + {brdcum.b2 && + } - {brdcum.b5 && ( - - )} + {brdcum.b5 && + } - {brdcum.b3 && ( - - )} + {brdcum.b3 && + } - {brdcum.b4 && ( - - )} + {brdcum.b4 && + } -
-
-
- - {new Date(data && data.post_modified).toDateString()} - +
+
+
+
+ Review + {/* 45 min ago */} + {new Date (data && data.post_modified).toDateString()} -
-

{data && data.post_title}

-
-
- image -
-
-

{data && data.post_name}

-
-
- -
-
-
- {/*

{data && data.post_author}

*/} - {new Date(data && data.post_date).toDateString()} +
+
+

{data && data.post_title}

+
+
+ image +
+
+

{data && data.post_name}

+
+
+ {/*
+

Lorem Ipsum is simply dummy text of the printing and typesetting in dustry lorem Ipsum has been the industrys standard dummy text ev er since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic Lorem Ipsum is simply dummy text of the printing and typesettingindustry lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived.

+

Printing and typesetting in dustry lorem Ipsum has been the industrys standard dummy text ev er since the 1500s, when an unnown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic Lorem Ipsum is simply dummy text of the printing and typesettingindustry lorem Ipsum has been the industrys centuries, but also the leap into electronic.

+

Why we are best

+

Lorem Ipsum is simply dummy text of the printing and typesetting in dustry lorem Ipsum has been the industrys standard dummy text ev er since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic.

+
    +

  • Lorem Ipsum is simply dummy text of the printing and typesetting in

    • +

  • Dustry lorem Ipsum has been the industrys standard dummy text ev er since the when

    • +

  • Unknown printer took a galley of type and scrambled it to make.

    • +

  • Type specimen book. It has survived not only five centuries, but also the leap into electronic.

    • +

  • Lorem Ipsum is simply dummy text of the printing.

    • +

  • Dustry lorem Ipsum has been the industrys standard dummy text ev er since.

    • +

  • Unknown printer took a galley of type and scrambled it to make.

    • +

  • Type specimen book. It has survived not only.

    • +
+
+
+
+
+ image +
+
+ image +
+
+
+
+

Why we are best

+

Lorem Ipsum is simply dummy text of the printing and typesetting in dustry lorem Ipsum has been the industrys standard dummy text ev er since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic Lorem Ipsum is simply dummy text of the printing and typesettingindustry lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived.

+
+
+ image +

Lorem Ipsum is simply dummy text of the printing and typesetting in dustry lorem Ipsum has been the industrys standard dummy.

+

Mr. John Doe, Apper Inc

+
*/} + {/*

Lorem Ipsum is simply dummy text of the printing and typesetting in dustry lorem Ipsum has been the industrys standard dummy text ev er since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic industry.

*/} +
+
+ {/*
+ image +
*/} +
+

{data && data.post_author}

+ {new Date (data && data.post_date).toDateString()} +
+
+
+
    +
    • +
    • +
    • +
    • +
+
+
+
+
    +

  • Tags:

    • +
  • app,
    • +
  • rating,
    • +
  • development
    • +
+
+
+
+
+
+
+
+

3 Comments

-
-
    -
  • - - - -
    • -
  • - - - -
    • +
  • +
    +
    + image +
    +
    + 30 min ago +

    Dolly Shell

    +
    +
    +
    +

    Lorem Ipsum is simply dummy text of the printing and typesetting in dustry lorem Ipsum has been the in + dustrys standard dummy text ev er since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen.

    +
    +
    • +
  • +
    +
    + image +
    +
    + 15 min ago +

    Devil Joe

    +
    +
    +
    +

    Lorem Ipsum is simply dummy text of the printing and typesetting in dustry lorem Ipsum has been the industrys standard dummy text ev er since the when.

    +
    +
    • +
  • +
    +
    + image +
    +
    + 2 days ago +

    Sherly Shie

    +
    +
    +
    +

    Lorem Ipsum is simply dummy text of the printing and typesetting in dustry lorem Ipsum has been the in + dustrys standard dummy text ev er since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen.

    +
    +
-
- -
- -
+ -
-
- {/* Latest Title */} -
-

- Read latest story -

-
-
- {/* Body */} -
- {blogData.slice(-4, -1).map((item, index) => ( -
-
-
- image - {new Date(item.post_date).toDateString()} -
-
-

{item.post_title}

-
- READ MORE - {/* READ MORE */} -
+
+
+
+

Leave a comment

+

Your email address will not be published. Required fields are marked *

-
- ))} -
-
-
- - ); -}; +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+ +
+
+
+ + -export default Main; +
+
+
+

Read latest story

+

Lorem Ipsum is simply dummy text of the printing and typese tting
indus orem Ipsum has beenthe standard dummy.

+
+
+ + {newAllData.map((data) => { + + return ( + +
+
+
+ image + 45 min ago +
+
+

{data.post_title}

+
+ + READ MORE + +
+
+
+ + )})} + + + + + + {/*
+
+
+ image + 45 min ago +
+
+

Top rated app! Yupp.

+

Simply dummy text of the printing and typesetting industry lorem Ipsum has Lorem Ipsum is.

+ READ MORE +
+
+
+
+
+
+ image + 45 min ago +
+
+

Creative ideas on app.

+

Printing and typesetting industry lorem Ipsum has Lorem simply dummy text of the.

+ READ MORE +
+
+
*/} +
+
+
+ + ) +} + +export default Main \ No newline at end of file