Source: pages-sections/Manage-Suggestions-Sections/ToiletSugCard.js

import React, { useState, useEffect } from "react";
import { useRouter } from "next/router";
import classNames from "classnames";
import { makeStyles } from "@material-ui/core/styles";
import InputAdornment from "@material-ui/core/InputAdornment";
import People from "@material-ui/icons/People";
import Icon from "@material-ui/core/Icon";
import Button from "/components/CustomButtons/Button.js";
import Card from "/components/Card/Card.js";
import CardBody from "/components/Card/CardBody.js";
import CardFooter from "/components/Card/CardFooter.js";
import CustomInput from "/components/CustomInput/CustomInput.js";
import { useAuth } from "../../context/AuthContext";
import styles from "/styles/jss/nextjs-material-kit/pages/profilePage.js";
import { getDatabase, ref, onValue, set } from "firebase/database";
import { fetchPoints } from "../../data/retrievesuggestedpoi.js";
import GridContainer from "/components/Grid/GridContainer.js";
import Grid from "@material-ui/core/Grid";
import { rejectPOI } from "../../data/rejectpoi.js";
import { acceptPOI } from "../../data/acceptpoi.js";
import {
  AccountCircle,
  LocationOn,
  FitnessCenter,
  Height,
  SettingsApplications,
  Person,
  Wc,
} from "@material-ui/icons";

const useStyles = makeStyles(styles);
const useStyly = makeStyles({
  card: {
    marginTop: "10px",
  },
  cardBody: {
    marginTop: "10px",
  },
  inputIconsColor: {
    color: "#9c27b0",
  },
  button: {
    "&:hover": {
      backgroundColor: "primary",
    },
  },
  formContainer: {
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    marginTop: "15px",
  },
  container: {
    display: "flex",
    justifyContent: "space-between",
    alignItems: "center",
  },
  data: {
    textAlign: "center",
    flex: "1",
  },
  cardFooterEdit: {
    display: "flex",
    justifyContent: "space-between",
  },
  cardFooterInfo: {
    display: "flex",
    justifyContent: "flex-end",
  },
});

/**
 * The function `handleReject` asynchronously rejects a point of interest (POI) and reloads the
 * router, handling any errors that occur.
 */
export const handleReject = async () => {
  try {
    await rejectPOI("toiletpoint", data.id);
    console.log("POI rejected");
    router.push("/mainmenu");
  } catch (error) {
    console.error("Error rejecting POI:", error);
  }
};

/**
 * The `handleApprove` function asynchronously approves a point of interest (POI) named
 * "toiletpoint", logs a message if successful, and reloads the router, handling any errors that
 * occur.
 */
export const handleApprove = async () => {
  try {
    await acceptPOI("toiletpoint", data);
    console.log("POI approved");
    router.push("/mainmenu");
  } catch (error) {
    console.error("Error approving POI:", error);
  }
};

/**
 * The `ToiletSugCard` function displays information about a point of interest (POI) related to a
 * toilet, allowing admin to approve or reject it.
 * @param props - The `ToiletSugCard` component takes in props as a parameter.
 * @returns The `ToiletSugCard` component is being returned. It displays information about a point of
 * interest (POI) related to a toilet, including its name, latitude, longitude, and description. It
 * also provides buttons to reject or approve the POI. The component uses Material-UI's Grid and Button
 * components for layout and interaction.
 */
export function ToiletSugCard(props) {
  const data = props.data;
  useEffect(() => {
    console.log(data);
  }, [data]);

  const classes = useStyles();
  const classess = useStyly();
  const router = useRouter();

  return (
    <CardBody>
      <div className={classess.container}>
        <div className={classess.data}>
          <Grid
            container
            rowSpacing={1}
            columnSpacing={{ xs: 1, sm: 2, md: 3 }}
          >
            <Grid item xs={8} sm={12} md={6}>
              <p
                style={{
                  display: "flex",
                  alignItems: "center",
                  fontSize: "18px",
                  paddingTop: "10px",
                }}
              >
                <span style={{ marginRight: "10px", fontWeight: "bold" }}>
                  Name:
                </span>
                {data.Name}
              </p>
              <p
                style={{
                  display: "flex",
                  alignItems: "center",
                  fontSize: "18px",
                }}
              >
                <span style={{ marginRight: "10px", fontWeight: "bold" }}>
                  Latitude:
                </span>
                {data.Y}
              </p>
              <p
                style={{
                  display: "flex",
                  alignItems: "center",
                  fontSize: "18px",
                }}
              >
                <span style={{ marginRight: "10px", fontWeight: "bold" }}>
                  Longitude:
                </span>
                {data.X}
              </p>
              <p
                style={{
                  display: "flex",
                  alignItems: "center",
                  fontSize: "18px",
                }}
              >
                <span style={{ marginRight: "10px", fontWeight: "bold" }}>
                  Description:
                </span>
                {data.description}
              </p>
            </Grid>
            <Grid
              item
              xs={4}
              sm={12}
              md={6}
              container
              justify="flex-end"
              alignItems="flex-end"
            >
              {/* Buttons */}
              <Grid item>
                <Button
                  color="danger"
                  size="sm"
                  style={{ marginLeft: "50px" }}
                  onClick={() => {
                    handleReject();
                  }}
                >
                  Reject
                </Button>
              </Grid>
              <Grid item style={{ marginLeft: "8px" }}>
                {/* Small gap between buttons */}
              </Grid>
              <Grid item>
                <Button
                  color="success"
                  size="sm"
                  onClick={() => {
                    handleApprove();
                  }}
                >
                  Approve
                </Button>
              </Grid>
            </Grid>
          </Grid>
        </div>
      </div>
      <CardFooter className={classess.cardFooterInfo}></CardFooter>
    </CardBody>
  );
}