Index: my-react-app/src/components/ReservationConfirmation.js
===================================================================
--- my-react-app/src/components/ReservationConfirmation.js	(revision e15e8d976a275ebb70018ca698e8c0f11b3f09df)
+++ my-react-app/src/components/ReservationConfirmation.js	(revision 2518b3a6aa84204d9520a068dae1a3b3234ea5f6)
@@ -56,5 +56,5 @@
             rating: parseFloat(restaurant.rating) || null,
             tableNumber: parseInt(table.id, 10),
-            restaurant: restaurant,
+            restaurantId: restaurant.restaurantId,
             reservationDateTime: adjustedTimeSlot,
             partySize: parseInt(partySize, 10),
@@ -62,10 +62,20 @@
             specialRequests: specialRequests.trim(),
             paymentStatus: 'Pending',
-            preOrderedItems: preOrderedItems.map(item => `${item.itemName}:${item.quantity}:${item.price}`)
+            preOrderedItems: preOrderedItems.map(item => ({
+                name: item.itemName,
+                quantity: item.quantity,
+                price: item.price
+            }))
         };
+        console.log(payload)
 
 
         try {
-            const response = await axios.post('http://localhost:8081/api/reservations', payload);
+            console.log(payload)
+            const response = await axios.post('http://localhost:8081/api/reservations', payload, {
+                headers: {
+                    'Content-Type': 'application/json'
+                }
+            });
             console.log('Reservation created successfully:', response.data);
             navigate("/reservations")
Index: my-react-app/src/components/Reservations.js
===================================================================
--- my-react-app/src/components/Reservations.js	(revision e15e8d976a275ebb70018ca698e8c0f11b3f09df)
+++ my-react-app/src/components/Reservations.js	(revision 2518b3a6aa84204d9520a068dae1a3b3234ea5f6)
@@ -1,12 +1,13 @@
-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,5 +25,4 @@
                 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,6 +63,12 @@
                                 <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,26 +99,14 @@
                                             <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>
Index: my-react-app/src/components/RestaurantContext.js
===================================================================
--- my-react-app/src/components/RestaurantContext.js	(revision e15e8d976a275ebb70018ca698e8c0f11b3f09df)
+++ my-react-app/src/components/RestaurantContext.js	(revision 2518b3a6aa84204d9520a068dae1a3b3234ea5f6)
@@ -8,7 +8,9 @@
 
     useEffect(() => {
+        if (restaurants.length > 0) return;
         const fetchRestaurants = async () => {
             try {
                 const response = await axios.get('http://localhost:8081/api/restaurants');
+                console.log("Fetched once", response.data);
                 setRestaurants(response.data);
             } catch (error) {
@@ -16,5 +18,4 @@
             }
         };
-
         fetchRestaurants();
     }, []);
Index: my-react-app/src/components/Restaurants.js
===================================================================
--- my-react-app/src/components/Restaurants.js	(revision e15e8d976a275ebb70018ca698e8c0f11b3f09df)
+++ my-react-app/src/components/Restaurants.js	(revision 2518b3a6aa84204d9520a068dae1a3b3234ea5f6)
@@ -26,4 +26,5 @@
     const navigate = useNavigate();
     const restaurantContext = useContext(RestaurantContext);
+    console.log(restaurantContext)
 
     useEffect(() => {
