Source: pages/routeplanner/displaymap.js

import React, { useState, useEffect } from "react";
// nodejs library that concatenates classes
import classNames from "classnames";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";

// @material-ui/icons

// core components
import Header from "/components/Header/Header.js";
import Footer from "/components/Footer/Footer.js";
import GridContainer from "/components/Grid/GridContainer.js";
import GridItem from "/components/Grid/GridItem.js";
import Button from "/components/CustomButtons/Button.js";
import HeaderLinks from "/components/Header/HeaderLinks.js";
import Parallax from "/components/Parallax/Parallax.js";
import { useAuth } from "/context/AuthContext";
import Router from "next/router";

// Sections
import Map from "/pages-sections/Routeplanner-Sections/Map";

import styles from "/styles/jss/nextjs-material-kit/pages/components.js";

const useStyles = makeStyles(styles);

/**
 * The `DisplayMapPage` function is a React component that displays a map page with authentication
 * checks and conditional rendering based on the user's authentication status.
 * @param props - In the `DisplayMapPage` function, the `props` parameter is used to pass data and
 * functions to the component. It contains the properties that are passed to the component when it is
 * rendered. These properties can be accessed using `props.propertyName`.
 * @returns The `DisplayMapPage` function is returning JSX elements that make up the main content of
 * the page if the user is authenticated. This includes a header component with links, a parallax image
 * with a title and subtitle, a main content section containing a map component with the current user's
 * ID, and a footer component. If the user is not authenticated or the page is still loading, it
 * returns an
 */
export function DisplayMapPage(props) {
  const classes = useStyles();
  const { ...rest } = props;
  const { currentUser } = useAuth();
  const [loading, setLoading] = useState(true);

  // Redirect if not logged in
  useEffect(() => {
    const checkAuth = async () => {
      try {
        // If currentUser is undefined, wait for authentication state synchronization
        if (currentUser === undefined) {
          return;
        }
        // If currentUser is null, redirect to login page
        if (!currentUser) {
          Router.push("/login");
        } else {
          setLoading(false);
        }
      } catch (error) {
        console.error("Error checking authentication:", error);
        setLoading(false);
      }
    };

    checkAuth();
  }, [currentUser, Router]);

  // Render nothing if not authenticated or still loading
  if (currentUser === null || loading) {
    console.log("Loading");
    return <div></div>; // You can also render a loading spinner or message here
  }

  // Render main content if authenticated
  return (
    <div>
      <Header
        brand="ThisIsNotFair"
        rightLinks={<HeaderLinks />}
        fixed
        brandlink="/mainmenu"
        color="transparent"
        changeColorOnScroll={{
          height: 400,
          color: "white",
        }}
        {...rest}
      />
      <Parallax image="/img/bg7.jpg">
        <div className={classes.container}>
          <GridContainer>
            <GridItem>
              <div className={classes.brand}>
                <h1 className={classes.title}>Route Planner</h1>
                <h3 className={classes.subtitle}>
                  Map Router and trusty helper
                </h3>
              </div>
            </GridItem>
          </GridContainer>
        </div>
      </Parallax>
      <div className={classNames(classes.main, classes.mainRaised)}>
        <Map userID={currentUser.uid} />
      </div>
      <Footer />
    </div>
  );
}