source: my-react-app/src/components/Reservations.js@ deea3c4

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import 'bootstrap/dist/css/bootstrap.min.css';
import {useNavigate} from "react-router-dom";
import {jwtDecode} from "jwt-decode";


const Reservations = () => {
    const navigate = useNavigate();

    const [reservations, setReservations] = useState([]);

    useEffect(() => {
        const fetchReservations = async () => {
            try {
                const token = localStorage.getItem("token");
                if (!token) {
                    console.error("No token found");
                    return;
                }
                const decodedToken = jwtDecode(token);
                const userId = decodedToken.iss;

                const response = await axios.get(`http://localhost:8081/api/reservations/by/${userId}`);
                setReservations(response.data);
            } catch (error) {
                console.error('Error fetching reservations:', error);
            }
        };

        fetchReservations();
    }, []);

    const handleEditReservation = async (reservationId) => {
        if(reservationId!=null) {
            navigate(`/reservations/reservationEdit/${reservationId}`);
        }
    }

    const handleCancelReservation = async (reservationID) => {
        try {
            await axios.delete(`http://localhost:8081/api/reservations/delete/${reservationID}`);
            setReservations(reservations.filter(reservation => reservation.reservationID !== reservationID));
            alert('Reservation canceled successfully!');
        } catch (error) {
            console.error('Error canceling reservation:', error);
            alert('An error occurred while canceling the reservation. Please try again later.');
        }
    };
    return (
        <div className="container">
            <div className="row">
                {reservations.length === 0 ? (
                    <div className="text-center mt-5">
                        <h4>No active reservations</h4>
                        <p>Looking for a place to dine? Check out our <a href="/restaurants" className="text-primary">restaurants</a>.</p>
                    </div>
                ) : (
                    reservations.map(reservation => (
                        <div key={reservation.reservationID} className="col-md-4 mb-4">
                            <div className="card h-100">
                                <div className="card-body">
                                    <h5 className="card-title">Reservation ID: {reservation.reservationID}</h5>
                                    <p className="card-text">Restaurant: {reservation?.restaurant.name || "Not specified"}</p>
                                    <p className="card-text">Table Number: {reservation?.tableNumber || "Not specified"}</p>
                                    <p className="card-text">
                                        Reservation Date: {reservation.checkInTime ?
                                        new Date(reservation.checkInTime).toLocaleDateString('en-US', {
                                            weekday: 'long', year: 'numeric', month: 'long', day: 'numeric'
                                        }) :
                                        "Not specified"}
                                    </p>
                                    <p className="card-text">
                                        Reservation Time: {reservation.checkInTime ?
                                        new Date(reservation.checkInTime).toLocaleTimeString('en-US', {
                                            hour: 'numeric', minute: 'numeric', hour12: true
                                        }) :
                                        "Not specified"}
                                    </p>
                                    <p className="card-text">Reservation made on: {reservation.reservationDateTime ?
                                        new Date(reservation.reservationDateTime).toLocaleTimeString('en-US', {
                                            hour: 'numeric', minute: 'numeric', hour12: true
                                        }) :
                                        "Not specified"}  {reservation.reservationDateTime ?
                                        new Date(reservation.reservationDateTime).toLocaleDateString('en-US', {
                                            weekday: 'long', year: 'numeric', month: 'long', day: 'numeric'
                                        }) :
                                        "Not specified"} </p>
                                    <p className="card-text">Party Size: {reservation.partySize || "Not specified"}</p>
                                    <p className="card-text text-danger">Special Requests: {reservation.specialRequests || "None"}</p>
                                    <p className="card-text">Status: {reservation.status || "Pending"}</p>
                                    <p className="card-text text-danger">Grace period of 15 minutes +-</p>
                                    <div className="d-flex justify-content-between mt-3">
                                        <button
                                            className="btn btn-warning"
                                            onClick={() => handleEditReservation(reservation.reservationID)}>
                                            Edit Reservation
                                        </button>
                                        <button
                                            className="btn btn-danger"
                                            onClick={() => handleCancelReservation(reservation.reservationID)}>
                                            Cancel Reservation
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    ))
                )}
            </div>
        </div>
    );
};

export default Reservations;