Changeset 2518b3a for my-react-app/src


Ignore:
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

Location:
my-react-app/src/components
Files:
4 edited

Legend:

Unmodified
Added
Removed

  • my-react-app/src/components/ReservationConfirmation.js

    re15e8d9 r2518b3a  
    5656            rating: parseFloat(restaurant.rating) || null,
    5757            tableNumber: parseInt(table.id, 10),
    58             restaurant: restaurant,
     58            restaurantId: restaurant.restaurantId,
    5959            reservationDateTime: adjustedTimeSlot,
    6060            partySize: parseInt(partySize, 10),
    … …  
    6262            specialRequests: specialRequests.trim(),
    6363            paymentStatus: 'Pending',
    64             preOrderedItems: preOrderedItems.map(item => `${item.itemName}:${item.quantity}:${item.price}`)
     64            preOrderedItems: preOrderedItems.map(item => ({
     65                name: item.itemName,
     66                quantity: item.quantity,
     67                price: item.price
     68            }))
    6569        };
     70        console.log(payload)
    6671
    6772
    6873        try {
    69             const response = await axios.post('http://localhost:8081/api/reservations', payload);
     74            console.log(payload)
     75            const response = await axios.post('http://localhost:8081/api/reservations', payload, {
     76                headers: {
     77                    'Content-Type': 'application/json'
     78                }
     79            });
    7080            console.log('Reservation created successfully:', response.data);
    7181            navigate("/reservations")

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

    re15e8d9 r2518b3a  
    1 import React, { useState, useEffect } from 'react';
     1import React, {useState, useEffect, useContext} from 'react';
    22import axios from 'axios';
    33import 'bootstrap/dist/css/bootstrap.min.css';
    44import {useNavigate} from "react-router-dom";
    55import {jwtDecode} from "jwt-decode";
     6import {RestaurantContext} from "./RestaurantContext";
    67
    78
    89const Reservations = () => {
    910    const navigate = useNavigate();
    10 
     11    const { restaurants } = useContext(RestaurantContext);
    1112    const [reservations, setReservations] = useState([]);
    1213
    … …  
    2425                const response = await axios.get(`http://localhost:8081/api/reservations/by/${userId}`);
    2526                setReservations(response.data);
    26                 console.log(response.data)
    2727            } catch (error) {
    2828                console.error('Error fetching reservations:', error);
    … …  
    6363                                <div className="card-body">
    6464                                    <h5 className="card-title">Reservation ID: {reservation.reservationID}</h5>
    65                                     <p className="card-text">Restaurant: {reservation?.restaurant.name || "Not specified"}</p>
    66                                     <p className="card-text">Table Number: {reservation?.tableNumber || "Not specified"}</p>
     65                                    <p className="card-text">
     66                                        Restaurant: {
     67                                        restaurants.find(r => r.restaurantId === reservation.restaurantId)?.name || "Not specified"
     68                                    }
     69                                    </p>
     70
     71                                    <p className="card-text">Table
     72                                        Number: {reservation?.tableNumber || "Not specified"}</p>
    6773                                    <p className="card-text">
    6874                                        Reservation Date: {reservation.checkInTime ?
    … …  
    9399                                            <h5 className="text-primary">Pre-Ordered Items:</h5>
    94100                                            <ul className="list-group mb-3">
    95                                                 {reservation.preOrderedItems.map((itemStr, index) => {
    96                                                     const parts = itemStr.split(':');
    97                                                     const name = parts[0];
    98                                                     const quantity = parseInt(parts[1], 10) || 0;
    99                                                     const price = parseFloat(parts[2]) || 0;
    100 
    101                                                     return (
    102                                                         <li key={index} className="list-group-item d-flex justify-content-between align-items-center">
    103                                                             <span><strong>{name}</strong> × {quantity}</span>
    104                                                             <span className="badge bg-success rounded-pill">${(price * quantity).toFixed(2)}</span>
    105                                                         </li>
    106                                                     );
    107                                                 })}
     101                                                {reservation.preOrderedItems.map((item, index) => (
     102                                                    <li key={index} className="list-group-item d-flex justify-content-between align-items-center">
     103                                                        <span><strong>{item.name}</strong> × {item.quantity}</span>
     104                                                        <span className="badge bg-success rounded-pill">${(item.price * item.quantity).toFixed(2)}</span>
     105                                                    </li>
     106                                                ))}
    108107                                            </ul>
    109108
    110109                                            <div className="alert alert-info text-center" role="alert">
    111                                                 <h5>Grand Total: ${reservation.preOrderedItems.reduce((acc, itemStr) => {
    112                                                     const parts = itemStr.split(':');
    113                                                     const quantity = parseInt(parts[1], 10) || 0;
    114                                                     const price = parseFloat(parts[2]) || 0;
    115                                                     return acc + (quantity * price);
    116                                                 }, 0).toFixed(2)}</h5>
     110                                                <h5>Grand Total: ${reservation.preOrderedItems.reduce((acc, item) => acc + (item.quantity * item.price), 0).toFixed(2)}</h5>
    117111                                            </div>
    118112                                        </div>

  • my-react-app/src/components/RestaurantContext.js

    re15e8d9 r2518b3a  
    88
    99    useEffect(() => {
     10        if (restaurants.length > 0) return;
    1011        const fetchRestaurants = async () => {
    1112            try {
    1213                const response = await axios.get('http://localhost:8081/api/restaurants');
     14                console.log("Fetched once", response.data);
    1315                setRestaurants(response.data);
    1416            } catch (error) {
    … …  
    1618            }
    1719        };
    18 
    1920        fetchRestaurants();
    2021    }, []);

  • my-react-app/src/components/Restaurants.js

    re15e8d9 r2518b3a  
    2626    const navigate = useNavigate();
    2727    const restaurantContext = useContext(RestaurantContext);
     28    console.log(restaurantContext)
    2829
    2930    useEffect(() => {
Note: See TracChangeset for help on using the changeset viewer.