Source: pages-sections/Manage-Suggestions-Sections/FoodSug.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 FoodSugCard from "./FoodSugCard.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: {
    display: "flex",
    justifyContent: "space-between",
    textAlign: "center",
    flex: "1",
  },
  cardFooterEdit: {
    display: "flex",
    justifyContent: "space-between",
  },
  cardFooterInfo: {
    display: "flex",
    justifyContent: "flex-end",
  },
});

/**
 * The function `FoodSug` fetches food suggestions data and displays them in a card format, handling
 * cases where there are no suggestions available.
 * @returns The `FoodSug` component is being returned. Inside the component, it checks if the
 * `foodSuggestions` array is empty. If it is empty, it displays a message "-- No food suggestions
 * currently --". If there are suggestions in the array, it maps over the `foodSuggestions` array and
 * renders a `FoodSugCard` component for each suggestion inside a `Card` component.
 */
export function FoodSug() {
  const classes = useStyles();
  const classess = useStyly();
  const [foodSuggestions, setFoodSuggestions] = useState([]); // State to store toilet suggestions
  const router = useRouter();

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

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