import React, { useState, useEffect } from "react"; import { useParams } from "react-router-dom"; import { formatDate } from "../utils/formatDate"; import "./Reservations.css"; import BackButton from "./BackButton"; const Reservation = () => { const { id } = useParams(); const [reservation, setReservation] = useState({}); const [isNotFound, setIsNotFound] = useState(false); const [isNotValid, setIsNotValid] = useState(false); const [isLoading, setIsLoading] = useState(true); useEffect(() => { const fetchData = async () => { const response = await fetch(`http://localhost:5000/reservations/${id}`); if (response.status === 404) { setIsNotFound(true); return; } if (response.status === 400) { setIsNotValid(true); return; } const data = await response.json(); setReservation(data); setIsLoading(false); }; fetchData(); }, [id]); if (isNotFound) { return ( <> <p className="error">Sorry! We can't find that reservation.</p> <BackButton /> </> ); } if (isNotValid) { return ( <> <p className="error">Sorry! The reservation ID is invalid.</p> <BackButton /> </> ); } if (isLoading) { return <p>Loading...</p>; } return ( <> <div className="reservation"> <h1 className="restaurant-name">{reservation.restaurantName}</h1> <p className="date">{formatDate(reservation.date)}</p> <p className="party-size"> <strong>Party size: </strong> {reservation.partySize} </p> </div> <BackButton /> </> ); }; export default Reservation;
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter