Home.js

import React, { useEffect, useState } from "react";
import axios from "axios";
import "./Home.css"; // If you want to add styling later
import logo from "../assets/corps_logo.png";
import { jwtDecode } from "jwt-decode";

/*
Home page where users will be redirected after log in or continuing as a guest
*/
function Home() {
  // when the page mounts check for auth tokens
  useEffect(() => {
    const readLoginCookie = () => {
      try {
        // find the auth cookie sent from the backend
        const cookies = document.cookie;
        const cookieArray = cookies.split("; ");
        const authCookie = cookieArray.find((cookie) =>
          cookie.startsWith("auth_token=")
        );

        // return early if no cookie found
        if (!authCookie) {
          console.log("cannot find auth cookie.");
          return;
        }

        // extract the token from the cookie
        const token = authCookie.split("=")[1];

        // decode the token
        const decoded = jwtDecode(token);

        console.log("decoded token: ", decoded);

        // extract details from token and store them in memory
        localStorage.setItem("userId", decoded.id);
        localStorage.setItem("peopleId", decoded.peopleId);
        localStorage.setItem("role", decoded.role);
      } catch (error) {
        console.log("error reading cookie: ", error);
      }
    };

    readLoginCookie();
  }, []);

  return (
    <>
      <div className="text-center">
        <h1 className="thin-veranda">VT Cadet Directory</h1>
        <h1 className="bold-veranda">Connect to any Cadet</h1>
      </div>
      <div className="containerB">
        <div className="description-section">
          <div className="transparent-box-text">
            <h1 className="title-font">
              Virginia Tech Corps of Cadets Directory
            </h1>
            {/*Adding this here so you guys see how to access but feel free to change it*/}

            <h1 className="description-font">
              Lorem ipsum odor amet, consectetuer adipiscing elit. Primis quam
              vel posuere lobortis inceptos. Nostra sociosqu tristique sagittis
              iaculis velit morbi lobortis. Maecenas vivamus consectetur
              vestibulum adipiscing neque. Sollicitudin ornare nam sapien class
              ex velit in. Senectus pretium quisque cras phasellus sociosqu
              malesuada. Sapien pretium viverra adipiscing est libero aliquam.
              Cursus conubia a volutpat condimentum libero sed. Vulputate velit
              purus posuere amet class ut.
              <br />
              <br />
              Conubia mauris curabitur bibendum quisque justo dapibus potenti.
              Sem cubilia quisque in donec ipsum sem. Elit risus convallis
              ornare dis pharetra senectus. Sit sodales cursus mattis taciti
              purus vel suscipit proin. Cursus metus euismod primis sit praesent
              magnis phasellus. Ut sagittis inceptos pretium sociosqu bibendum,
              at tempus adipiscing. Ac elementum rhoncus egestas viverra commodo
              cursus turpis lectus torquent.
            </h1>
          </div>
        </div>
        <div className="transparent-box-image">
          <img src={logo} alt="Corps Logo" className="logo" width={400} />
        </div>
      </div>
    </>
  );
}

export default Home;