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

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

  let 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();

        // 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 (
    <>
      <div
        className="bred_crumb"
        style={{ backgroundImage: `url(${BGImg})` }}>
        <div className="container">
          <span className="banner_shape1">
            {" "}
            <img
              src="assets/images/banner-shape1.png"
              alt="image"
            />{" "}
          </span>
          <span className="banner_shape2">
            {" "}
            <img
              src="assets/images/banner-shape2.png"
              alt="image"
            />{" "}
          </span>
          <span className="banner_shape3">
            {" "}
            <img
              src="assets/images/banner-shape3.png"
              alt="image"
            />{" "}
          </span>

          <div className="bred_text">
            <h1>Latest Blog Post</h1>
            <ul>
              <li>
                <Link to="/">Home</Link>
              </li>
              <li>
                <span>»</span>
              </li>
              <li>
                <Link to="/blog">
                  {blogData.map((item, idx) => {
                    if (idx === 0) {
                      return <span>{item.post_title}</span>;
                    }
                  })}
                </Link>
              </li>
            </ul>
          </div>
        </div>
      </div>

      <section className="row_am blog_list_main">
        {blogData.length < 1 && (
          <div
            className="loader loader-sm"
            id="loader-1"></div>
        )}
        {blogData.map((data, index) => {
          if (index == 0) {
            return (
              <div
                className="container"
                key={data.id}>
                <div className="row">
                  <div
                    className="col-lg-6"
                    data-aos="fade-in"
                    data-aos-duration="1500">
                    <div className="blog_img">
                      <img
                        src={data.meta_value}
                        alt="image"
                      />

                      <span>{new Date(data.post_date).toDateString()}</span>
                    </div>
                  </div>
                  <div className="col-lg-6">
                    <div className="blog_text">
                      <div className="section_title">
                        <h2>{data.post_title}</h2>
                        <div
                          dangerouslySetInnerHTML={{
                            __html:
                              data.post_content.substring(0, 400) + "  . . .",
                          }}></div>
                        {/* Change the route name */}
                        <Link
                          to={`/blogdetails/${data.id}`}
                          state={{ data }}>
                          READ MORE
                        </Link>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            );
          }
        })}
      </section>

      <section
        className="row_am latest_story blog_list_story"
        id="blog">
        <div className="container">
          <div className="row">
            {blogData.map((data, index) => {
              if (index > 0) {
                return (
                  <div
                    key={data.id}
                    className="col-md-4">
                    <div
                      className="story_box"
                      data-aos="fade-up"
                      data-aos-duration="1500">
                      <div className="story_img">
                        <img
                          src={data.meta_value}
                          alt="image"
                        />
                        <span>
                          {new Date(data && data.post_date).toDateString()}
                        </span>
                      </div>
                      <div className="story_text">
                        <h3>{data.post_title}</h3>
                        <div
                          dangerouslySetInnerHTML={{
                            __html:
                              data &&
                              data.post_content.substring(0, 100) + "  . . .",
                          }}></div>
                        {/* Change the route name */}
                        <Link
                          to={`/blogdetails/${data.id}`}
                          state={{ data }}>
                          READ MORE
                        </Link>
                      </div>
                    </div>
                  </div>
                );
              }
            })}
          </div>

          <div className="pagination_block">
            <ul>
              <li>
                <Link
                  to={process.env.REACT_APP_BLOGSITE}
                  className="prev">
                  {" "}
                  Visit our blog
                </Link>
              </li>
            </ul>
          </div>
        </div>
      </section>
    </>
  );
};

export default Main;