Changeset 2518b3a for my-react-app/src/components/Reservations.js

Timestamp:

05/02/25 00:37:10 (2 weeks ago)

Author:

Aleksandar Panovski <apano77@…>

Branches:

main

Children:

c44c5ed

Parents:

e15e8d9

Message:

Added menu tag

succesfull testing and implemnation

File:

• my-react-app/src/components/Reservations.js (modified) (4 diffs)

my-react-app/src/components/Reservations.js

@@ -1 @@
-import React, { useState, useEffect } from 'react';
+import React, {useState, useEffect, useContext} from 'react';
 import axios from 'axios';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import {useNavigate} from "react-router-dom";
 import {jwtDecode} from "jwt-decode";
+import {RestaurantContext} from "./RestaurantContext";
 
 
 const Reservations = () => {
     const navigate = useNavigate();
-
+    const { restaurants } = useContext(RestaurantContext);
     const [reservations, setReservations] = useState([]);
 
@@ -24 +25 @@
                 const response = await axios.get(`http://localhost:8081/api/reservations/by/${userId}`);
                 setReservations(response.data);
-                console.log(response.data)
             } catch (error) {
                 console.error('Error fetching reservations:', error);
@@ -63 +63 @@
                                 <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">
+                                        Restaurant: {
+                                        restaurants.find(r => r.restaurantId === reservation.restaurantId)?.name || "Not specified"
+                                    }
+                                    </p>
+
+                                    <p className="card-text">Table
+                                        Number: {reservation?.tableNumber || "Not specified"}</p>
                                     <p className="card-text">
                                         Reservation Date: {reservation.checkInTime ?
@@ -93 +99 @@
                                             <h5 className="text-primary">Pre-Ordered Items:</h5>
                                             <ul className="list-group mb-3">
-                                                {reservation.preOrderedItems.map((itemStr, index) => {
-                                                    const parts = itemStr.split(':');
-                                                    const name = parts[0];
-                                                    const quantity = parseInt(parts[1], 10) || 0;
-                                                    const price = parseFloat(parts[2]) || 0;
-
-                                                    return (
-                                                        <li key={index} className="list-group-item d-flex justify-content-between align-items-center">
-                                                            <span><strong>{name}</strong> × {quantity}</span>
-                                                            <span className="badge bg-success rounded-pill">${(price * quantity).toFixed(2)}</span>
-                                                        </li>
-                                                    );
-                                                })}
+                                                {reservation.preOrderedItems.map((item, index) => (
+                                                    <li key={index} className="list-group-item d-flex justify-content-between align-items-center">
+                                                        <span><strong>{item.name}</strong> × {item.quantity}</span>
+                                                        <span className="badge bg-success rounded-pill">${(item.price * item.quantity).toFixed(2)}</span>
+                                                    </li>
+                                                ))}
                                             </ul>
 
                                             <div className="alert alert-info text-center" role="alert">
-                                                <h5>Grand Total: ${reservation.preOrderedItems.reduce((acc, itemStr) => {
-                                                    const parts = itemStr.split(':');
-                                                    const quantity = parseInt(parts[1], 10) || 0;
-                                                    const price = parseFloat(parts[2]) || 0;
-                                                    return acc + (quantity * price);
-                                                }, 0).toFixed(2)}</h5>
+                                                <h5>Grand Total: ${reservation.preOrderedItems.reduce((acc, item) => acc + (item.quantity * item.price), 0).toFixed(2)}</h5>
                                             </div>
                                         </div>