www-myfit/src/component/Blog/BlogSingle/Main.js

/** @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();
  }, [blogData]);

  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 && (
        <Bredcrumb
          no={1}
          title="Blog details"
          tag={data && data.post_title}
          bgimg={BGImg}
        />
      )}

      {brdcum.b2 && (
        <Bredcrumb
          no={2}
          title="Blog details"
          tag={data && data.post_title}
          bgimg={BGImg1}
        />
      )}

      {brdcum.b5 && (
        <Bredcrumb
          no={5}
          title="Blog details"
          tag={data && data.post_title}
          bgimg={BGImg}
        />
      )}

      {brdcum.b3 && (
        <Bredcrumb
          no={3}
          title="Blog details"
          tag={data && data.post_title}
        />
      )}

      {brdcum.b4 && (
        <Bredcrumb
          no={4}
          title="Blog details"
          tag={data && data.post_title}
          bgimg={BGImg2}
        />
      )}

      <section className="blog_detail_section">
        <div className="container">
          <div className="blog_inner_pannel">
            <span className="blog_date">
              {new Date(data && data.post_modified).toDateString()}
            </span>

            <div className="section_title">
              <h2>{data && data.post_title}</h2>
            </div>
            <div className="main_img">
              <img
                src={data && data.meta_value}
                alt="image"
              />
            </div>
            <div className="info">
              <h3>{data && data.post_name}</h3>
              <div
                dangerouslySetInnerHTML={{
                  __html: data && data.post_content,
                }}></div>
            </div>

            <div className="blog_authore">
              <div className="authore_info">
                <div className="text">
                  {/* <h3>{data && data.post_author}</h3> */}
                  <span>{new Date(data && data.post_date).toDateString()}</span>
                </div>
              </div>
              <div className="social_media">
                <ul>
                  <li>
                    <a href={process.env.REACT_APP_FACEBOOK}>
                      <i className="icofont-facebook"></i>
                    </a>
                  </li>
                  <li>
                    <a href={process.env.REACT_APP_TWITTER}>
                      <i className="icofont-twitter"></i>
                    </a>
                  </li>
                </ul>
              </div>
            </div>
            <div className="blog_tags">
              <a href={process.env.REACT_APP_BLOGSITE}>Visit Blog Site </a>
            </div>
          </div>
        </div>
      </section>

      <section
        className="row_am latest_story"
        id="blog">
        <div className="container">
          {/* Latest Title */}
          <div
            className="section_title"
            data-aos="fade-in"
            data-aos-duration="1500"
            data-aos-delay="100">
            <h2>
              Read latest <span>story</span>
            </h2>
            <br />
          </div>
          {/* Body */}
          <div className="row">
            {blogData.slice(-4, -1).map((item, index) => (
              <div
                className="col-md-4"
                key={index}>
                <div
                  className="story_box"
                  data-aos="fade-up"
                  data-aos-duration="1500">
                  <div className="story_img">
                    <img
                      src={item.meta_value}
                      alt="image"
                    />
                    <span>{new Date(item.post_date).toDateString()}</span>
                  </div>
                  <div className="story_text">
                    <h3>{item.post_title}</h3>
                    <div
                      dangerouslySetInnerHTML={{
                        __html: item.post_content.substring(0, 100) + "  . . .",
                      }}></div>
                    <Link to={`/blogdetails/${item.id}`}>READ MORE</Link>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </>
  );
};

export default Main;