diff --git a/src/component/Blog/Blog/Main.js b/src/component/Blog/Blog/Main.js index ba78687..2a7122e 100644 --- a/src/component/Blog/Blog/Main.js +++ b/src/component/Blog/Blog/Main.js @@ -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 ( <> -
+
{" "} - image{" "} + image{" "} {" "} - image{" "} + image{" "} {" "} - image{" "} + image{" "}
@@ -82,122 +52,97 @@ const Main = ({ brdcum, bgimg }) => { ยป
  • - - {blogData.map((item, idx) => { - if (idx === 0) { - return {item.post_title}; - } - })} - + Blog
    • + {/*
    +
    +
    + + +
    +
    +
    */}
    - {blogData.length < 1 && ( -
    - )} - {blogData.map((data, index) => { - if (index == 0) { + {blogData.map((data,index) => { + if (index == 0){ return ( -
    -
    -
    -
    - image - - {new Date(data.post_date).toDateString()} -
    +
    +
    +
    +
    + image + {/* 20 min ago */} + + {new Date (data.post_date).toDateString()}
    -
    -
    -
    -

    {data.post_title}

    -
    - {/* Change the route name */} - +
    +
    +
    +
    +

    {data.post_title}

    +
    + {/* READ MORE - -
    + */} + + READ MORE +
    - ); - } - })} -
    +
    -
    + ) + } + })} + + +
    +
    {blogData.map((data, index) => { - if (index > 0) { + if (index > 0){ return ( -
    -
    -
    - image - - {new Date(data && data.post_date).toDateString()} - -
    -
    -

    {data.post_title}

    -
    - {/* Change the route name */} - - READ MORE - -
    -
    +
    +
    +
    + image + {new Date (data && data.post_date).toDateString()}
    - ); - } - })} -
    +
    +

    {data.post_title}

    +
    + + READ MORE + +
    +
    +
    + )} + + + })} +
    • - + {" "} Visit our blog diff --git a/src/component/Blog/BlogSingle/Main.js b/src/component/Blog/BlogSingle/Main.js index b2be0a5..8236ad5 100644 --- a/src/component/Blog/BlogSingle/Main.js +++ b/src/component/Blog/BlogSingle/Main.js @@ -1,201 +1,333 @@ -/** @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()} +
      +
      +
      + +
      +
      + +
      +
      +
      + + {/*
      +
      +
      +

      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 + */} + + 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 diff --git a/src/component/HomeMain/Story/Main.js b/src/component/HomeMain/Story/Main.js index 6a1b5bf..8c9cfb5 100644 --- a/src/component/HomeMain/Story/Main.js +++ b/src/component/HomeMain/Story/Main.js @@ -32,7 +32,8 @@ const Main = () => {

    Read latest story

    - {blogData.slice(1, 4).map((item, index) => ( + + {blogData.slice(1, 4).map((data, index) => (
    @@ -42,18 +43,21 @@ const Main = () => { data-aos-duration="1500">
    image - {new Date(item.post_date).toDateString()} + {new Date(data.post_date).toDateString()}
    -

    {item.post_title}

    +

    {data.post_title}

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