Source: pages-sections/Manage-Suggestions-Sections/WaterSug.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 WaterSugCard from "./WaterSugCard.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 `FoodSug` function fetches water suggestions and displays them in a card format on a webpage.
 * @returns The `FoodSug` function is being exported as the default export. It returns a JSX structure
 * that conditionally renders either a message indicating no water suggestions are currently available
 * or a Card component containing water suggestions fetched from the `waterSuggestions` state. Each
 * water suggestion is rendered using the `WaterSugCard` component within a CardBody component.
 */
export function FoodSug() {
  const classes = useStyles();
  const classess = useStyly();
  const [waterSuggestions, setWaterSuggestions] = useState([]); // State to store toilet suggestions
  const router = useRouter();

  useEffect(() => {
    fetchPoints("waterpoint").then((data) => {
      setWaterSuggestions(data);
    });
  }, []); // Empty dependency array

  return (
    <div>
      {waterSuggestions.length === 0 ? (
        <div style={{ display: "flex", justifyContent: "center" }}>
          <h2>-- No water suggestions currently --</h2>
        </div>
      ) : (
        <Card className={classess.card}>
          {waterSuggestions.map((suggestion, index) => (
            <CardBody key={index} className={classess.cardBody}>
              {/* Render each suggestion's data here */}
              <div className={classess.container}>
                <div className={classess.data}>
                  <WaterSugCard data={suggestion} />
                  <br />
                </div>
              </div>
            </CardBody>
          ))}
        </Card>
      )}
    </div>
  );
}