import React, { useEffect, useState } 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 GridContainer from "/components/Grid/GridContainer.js";
import GridItem from "/components/Grid/GridItem.js";
import HeaderLinks from "/components/Header/HeaderLinks.js";
import Parallax from "/components/Parallax/Parallax.js";
import Router from "next/router";
import { useAuth } from "../context/AuthContext";
import Scroll from "react-scroll";
import Card from "/components/Card/Card.js";
import CardBody from "/components/Card/CardBody.js";
import CardMedia from "@material-ui/core/CardMedia";
import CardFooter from "../components/Card/CardFooter.js";
import Link from "next/link";
var Element = Scroll.Element;
// Sections
import styles from "/styles/jss/nextjs-material-kit/pages/components.js";
import {
getSavedRoutes,
getSavedRoutesWithKeys,
deleteSavedRoutes,
} from "../data/savedroutes";
import RouteCard from "../pages-sections/Routeplanner-Sections/RouteCard";
const useStyles = makeStyles(styles);
/**
* The function `getUserRoutes` asynchronously retrieves saved routes for the current user.
* @returns The `getUserRoutes` function is returning the result of the
* `getSavedRoutes(currentUser.uid)` function after awaiting its completion.
*/
export async function getUserRoutes() {
var RouteFull = await getSavedRoutes(currentUser.uid);
return RouteFull;
}
/**
* The `RoutePlannerPage` function is a React component that handles route planning and display for
* authenticated users, including retrieving saved routes, deleting routes, and rendering route cards.
* @param props - The `RoutePlannerPage` component you provided is a functional component that serves
* as the main page for a route planning application. It includes authentication checks, fetching
* user-specific route data, and rendering route planning and viewing functionalities.
* @returns The `RoutePlannerPage` component is being exported as the default export. It is a
* functional component that renders a page for route planning. The component includes authentication
* checks, retrieval of user routes, deletion of routes, and rendering of route cards. The component
* returns JSX elements that make up the layout of the route planner page, including a header, parallax
* image, route planning options, and a
*/
export function RoutePlannerPage(props) {
const { currentUser } = useAuth();
const classes = useStyles();
const { ...rest } = props;
const [loading, setLoading] = useState(true);
const [retrievedOnce, setRetrievedOnce] = useState(false);
const [allRoute, setAllRoute] = useState([]);
const [allRouteKeys, setAllRouteKeys] = useState([]);
// Redirect if not logged in
useEffect(() => {
const checkAuth = async () => {
try {
if (currentUser === undefined) {
// User not logged in, redirect to login page
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
}
if (!retrievedOnce) {
setRetrievedOnce(true);
getUserRoutes().then((array) => {
console.log(array);
setAllRoute(array ? array : []);
});
getUserRoutesKeys().then((array) => {
console.log(array);
setAllRouteKeys(array ? array : []);
});
}
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.mainRaisededitted)}>
<GridContainer>
<GridItem xs={4}>
<Link href="/routeplanner/displaymap">
<a>
<Card>
<CardMedia
component="img"
alt="Image cannot be loaded"
height="250"
image="/img/mappic.jpg"
title="Picture of a map"
/>
<CardBody>
<h4
className={classes.cardTitle}
style={{ fontWeight: "bold" }}
>
Route Planning
</h4>
<p>Create new routes here!</p>
</CardBody>
<CardFooter></CardFooter>
</Card>
</a>
</Link>
</GridItem>
<GridItem xs={8}>
<Card>
<CardBody>
<h4
className={classes.cardTitle}
style={{ fontWeight: "bold" }}
>
View all your routes here!
</h4>
<Element
name="test7"
className="element"
id="containerElement"
style={{
position: "relative",
height: "600px",
overflow: "scroll",
// marginBottom: "100px",
}}
>
{allRoute.length > 0 &&
allRoute.map((route, index) => {
return (
<RouteCard
name={route.name}
distance={route.totalPathDistance}
duration={route.totalPathDuration}
index={index}
deleteHandler={deleteUserRouteHandler}
/>
);
})}
</Element>
</CardBody>
</Card>
</GridItem>
</GridContainer>
</div>
</div>
);
}
/**
* The function `getUserRoutesKeys` asynchronously retrieves saved routes with keys for the current
* user.
* @returns The function `getUserRoutesKeys` is returning the result of the
* `getSavedRoutesWithKeys(currentUser.uid)` function after awaiting its completion.
*/
export async function getUserRoutesKeys() {
var RouteFull = await getSavedRoutesWithKeys(currentUser.uid);
return RouteFull;
}
/**
* The `deleteUserRouteHandler` function deletes a saved route at a specific index and updates the
* state accordingly.
* @param index - The `index` parameter in the `deleteUserRouteHandler` function represents the
* position of the route to be deleted in the `allRoute` and `allRouteKeys` arrays.
*/
export const deleteUserRouteHandler = (index) => {
deleteSavedRoutes(currentUser.uid, allRouteKeys[index]);
if (index > 0) {
allRoute.splice(index, index);
allRouteKeys.splice(index, index);
} else {
allRoute.shift();
allRouteKeys.shift();
}
setAllRoute((allRoute) => [...allRoute]);
setAllRouteKeys((allRouteKeys) => [...allRouteKeys]);
};