Source: pages-sections/Routeplanner-Sections/SavedRoutesTab.js

import { useState, useRef, useEffect } from "react";

// Icons
import MapIcon from "@material-ui/icons/Map";

// Core Componenets
import { makeStyles } from "@material-ui/core/styles";
import CustomDropdown from "/components/CustomDropdown/CustomDropdown.js";
import CustomInput from "/components/CustomInput/CustomInput.js";
import Button from "/components/CustomButtons/Button.js";
import GridContainer from "/components/Grid/GridContainer.js";
import GridItem from "/components/Grid/GridItem.js";

// Components
import GPXdownload from "./GPXdownload";
import { getSavedRoutes, uploadSavedRoutes } from "/data/savedroutes";

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

const useStyles = makeStyles(styles);

/**
 * The `SavedRoutesTab` function in JavaScript manages saved routes, allowing users to save, retrieve,
 * and download routes with associated details.
 * @param props - The `SavedRoutesTab` component accepts the following props:
 * @returns The `SavedRoutesTab` component is being returned. It consists of various elements such as
 * dropdowns for saved routes, buttons for saving routes, and input fields for entering route names.
 * The component also includes functions for handling route name changes and retrieving saved routes
 * for a specific user asynchronously.
 */
export function SavedRoutesTab(props) {
  const {
    waypoints,
    setwaypoints,
    routeResponse,
    userID,
    totalPathDistance = 0,
    totalPathDuration = 0,
    ...rest
  } = props;
  const classes = useStyles();
  const [routeName, setRouteName] = useState("");
  const [allRoute, setAllRoute] = useState([]);
  const [retrievedOnce, setRetrievedOnce] = useState(false);

  if (!retrievedOnce) {
    setRetrievedOnce(true);
    getUserRoutes().then((array) => {
      console.log(array);
      setAllRoute(array ? array : []);
    });
  }

  return (
    <div>
      <GridContainer>
        <GridItem xs={4}>
          <CustomDropdown
            noLiPadding
            navDropdown
            buttonText="Saved Routes"
            buttonProps={{
              className: classes.navLink,
              color: "transparent",
            }}
            buttonIcon={MapIcon}
            dropdownList={
              allRoute.length > 0
                ? allRoute.map((obj, idx, arr) => {
                    return (
                      <a
                        className={classes.dropdownLink}
                        onClick={() => {
                          setwaypoints(obj.route);
                        }}
                      >
                        {obj.name}
                      </a>
                    );
                  })
                : [<a className={classes.dropdownLink}>No saved routes</a>]
            }
          />
        </GridItem>
        <GridItem xs={4}>
          <Button
            color="info"
            onClick={() => {
              if (waypoints.length > 1 && routeName != "") {
                uploadSavedRoutes(userID, {
                  name: routeName,
                  route: waypoints,
                  totalPathDistance: totalPathDistance,
                  totalPathDuration: totalPathDuration,
                });
                alert(`${routeName} saved successfully!`);
                setRouteName("");
              } else {
                alert(
                  "Make sure that the route has a name and you have created a route!"
                );
              }
            }}
          >
            Save Route
          </Button>
        </GridItem>
        <GridItem xs={4}>
          <GPXdownload
            routeResponse={waypoints.length > 1 ? routeResponse : null}
          />
        </GridItem>
      </GridContainer>
      <CustomInput
        labelText="Route Name"
        id="route_name"
        formControlProps={{
          fullWidth: true,
        }}
        inputProps={{
          type: "text",
          onChange: handleRouteNameChange,
          autoComplete: "off",
          value: routeName,
        }}
      />
    </div>
  );
}
/**
 * The function `handleRouteNameChange` updates the route name based on the value entered in an input
 * field.
 * @param event - The `event` parameter in the `handleRouteNameChange` function is an object that
 * represents an event being triggered, such as a change in an input field value. It contains
 * information about the event, including the target element that triggered the event and any data
 * associated with it.
 */
export const handleRouteNameChange = (event) => {
  const enteredRouteName = event.target.value;
  setRouteName(enteredRouteName);
};

/**
 * The function `getUserRoutes` asynchronously retrieves saved routes for a specific user.
 * @returns The function `getUserRoutes` is returning the routes that are fetched asynchronously
 * using `getSavedRoutes` function for the specified `userID`.
 */
export async function getUserRoutes() {
  var routes = await getSavedRoutes(userID);

  return routes;
}