import "./Reservations.css"; import React, { useState, useEffect } from "react"; import { formatDate } from "../utils/formatDate"; import { Link } from "react-router-dom"; const ReservationList = () => { const [reservationList, setReservationList] = useState([]); const [isLoading, setIsLoading] = useState(true); useEffect(() => { const fetchData = async () => { const response = await fetch("http://localhost:5000/reservations"); const data = await response.json(); setReservationList(data); setIsLoading(false); }; fetchData(); }, []); if (isLoading) { return <p>Loading...</p>; } return ( <> <h1 className="upcoming-reservations">Upcoming reservations</h1> <ul className="reservation-list"> {reservationList.map((reservation) => { return ( <li key={reservation.id} className="reservation"> <h2 className="name-grid-item">{reservation.restaurantName}</h2> <p className="date-grid-item">{formatDate(reservation.date)}</p> <Link to={`/reservations/${reservation.id}`} className="view-details" > View details → </Link> </li> ); })} </ul> </> ); }; export default ReservationList;