Index: my-react-app/src/components/ReservationEdit.js
===================================================================
--- my-react-app/src/components/ReservationEdit.js	(revision e48199adf103ea72701a91722bdbf8cfb9732731)
+++ my-react-app/src/components/ReservationEdit.js	(revision d24f17cb212e43f94a77a44d655ba10b4b8143d2)
@@ -3,25 +3,15 @@
 import {useNavigate, useParams} from 'react-router-dom';
 import StarRating from "./StarRating";
-import {jwtDecode} from "jwt-decode";
 
 const ReservationEdit = () => {
     const navigate = useNavigate();
-    const { reservationId } = useParams();
+
     const [isLoading, setIsLoading] = useState(true);
+    const { reservationId } = useParams(); // Extract reservationId from URL params
     const [formData, setFormData] = useState({});
-    const [tableNumber, setTableNumber] = useState({});
     const [table, setTable] = useState({});
     const [restaurant, setRestaurant] = useState({});
-    const [restaurantId, setRestaurantId] = useState({});
     const [timeSlots, setTimeSlots] = useState([]);
     const [filteredTimeSlots, setFilteredTimeSlots] = useState([]);
-    const [checkInTime, setCheckInTime] = useState([]);
-    const [tableReservations, setTableReservations] = useState([]);
-
-    const timeSlotInterval = 15;
-
-    const [selectedDate, setSelectedDate] = useState('');
-    const [selectedTime, setSelectedTime] = useState('');
-    const [timeOptions, setTimeOptions] = useState([]);
 
     useEffect(() => {
@@ -29,16 +19,9 @@
             try {
                 setIsLoading(true);
-                const response = await axios.get(`http://localhost:8081/api/reservations/${reservationId}`);
-                setCheckInTime(response.data.reservationDateTime);
-                setFormData(response.data);
-
-                setRestaurantId(response.data.restaurantId);
-                const restaurantResponse = await axios.get(`http://localhost:8081/api/restaurants/${response.data.restaurantId}`);
-                setRestaurant(restaurantResponse.data);
-
-                setTableNumber(response.data.tableNumber);
-                const tableResponse = await axios.get(`http://localhost:8081/api/tables/${response.data.tableNumber}`);
-                setTable(tableResponse.data)
-
+                const response = await axios.get(`http://localhost:8080/api/reservations/${reservationId}`);
+                setFormData(response.data); // Set form data with reservation data
+                setTable(response.data.table);
+                setRestaurant(response.data.restaurant);
+                setTimeSlots(response.data.table.timeSlots);
                 setIsLoading(false);
             } catch (error) {
@@ -50,76 +33,32 @@
 
     useEffect(() => {
-        const fetchTableReservations = async () => {
-            try {
-                const response = await axios.get(`http://localhost:8081/api/table-reservations/${table.tableId}`);
-                setTableReservations(response.data);
-                setIsLoading(false);
-            } catch (error) {
-                console.error('Error fetching table reservations:', error);
-            }
-        };
+        if (!table || !restaurant) return; // If table or restaurant is not loaded, return early
 
-        if (table?.tableId) {
-            fetchTableReservations();
-        }
-    }, [table]);
+        const currentTime = new Date();
 
-    useEffect(() => {
-        if (table?.restaurant?.operatingHours && selectedDate) {
-            const options = generateTimeOptions(table.restaurant.operatingHours);
-            setTimeOptions(options);
-        }
-    }, [table, selectedDate]);
-
+        const filteredSlots = timeSlots.filter(timeSlot => new Date(timeSlot) >= currentTime);
+        setFilteredTimeSlots(filteredSlots);
+    }, [table, restaurant]);
 
     const handleInputChange = (e) => {
         const { name, value } = e.target;
 
-        if (name === 'partySize') {
-            const valueAsNumber = Math.min(value, table?.capacity);
-            setFormData(prevState => ({
-                ...prevState,
-                [name]: valueAsNumber
-            }));
+        // Check if the changed input is the time slot select element
+        if (name === 'selectedTimeSlot') {
+            // Update the formData with the selected time slot value
+            setFormData({ ...formData, checkInTime: value });
         } else {
-            setFormData(prevState => ({
-                ...prevState,
-                [name]: value
-            }));
+            // For other input fields, update formData as usual
+            setFormData({ ...formData, [name]: value });
         }
     };
 
-
     const handleSubmit = async (e) => {
         e.preventDefault();
-
         try {
-            const token = localStorage.getItem("token");
-            if (!token) {
-                console.error("No token found");
-                return;
-            }
-
-            const decodedToken = jwtDecode(token);
-            const userId = decodedToken.iss;
-
-            const updatedReservationData = {
-                ...formData,
-                reservationDateTime: `${selectedDate}T${selectedTime}`,
-                checkInTime: checkInTime,
-                reservationID: reservationId,
-            };
-            await axios.post(
-                `http://localhost:8081/api/reservations/${reservationId}/${userId}`,
-                updatedReservationData,
-                {
-                    headers: {
-                        'Content-Type': 'application/json',
-                    }
-                }
-            );
-            console.log(updatedReservationData)
-
-            navigate(`/reservations`);
+            // Send updated reservation data to the server
+            await axios.post(`http://localhost:8080/api/reservations/${reservationId}`, formData);
+            // Redirect or show success message
+            navigate(`/reservations`)
         } catch (error) {
             console.error('Error updating reservation:', error);
@@ -134,65 +73,7 @@
     };
 
-    const today = new Date();
-    const year = today.getFullYear();
-    const month = String(today.getMonth() + 1).padStart(2, '0');
-    const day = String(today.getDate()).padStart(2, '0');
-    const formattedDate = `${year}-${month}-${day}`;
-
-    const generateTimeOptions = (operatingHours) => {
-        const now = new Date();
-        const selectedDateObj = new Date(selectedDate);
-        const isToday = selectedDateObj.toDateString() === now.toDateString();
-
-        let options = [];
-        for (const hours of operatingHours.split(',')) {
-            const [start, end] = hours.trim().split('-');
-            const startTime = new Date(selectedDateObj);
-            const endTime = new Date(selectedDateObj);
-            const [startHour, startMinute] = start.split(':').map(Number);
-            const [endHour, endMinute] = end.split(':').map(Number);
-            startTime.setHours(startHour, startMinute, 0);
-            endTime.setHours(endHour, endMinute, 0);
-
-            if (isToday && startTime < now) {
-                startTime.setTime(roundToNext15Minutes(now).getTime());
-            }
-
-            if (endTime <= now) {
-                setNoAvailableMessage('No available time due to closing.');
-                continue;
-            }
-
-            while (startTime <= endTime) {
-                options.push(startTime.toTimeString().slice(0, 5));
-                startTime.setMinutes(startTime.getMinutes() + 15);
-            }
-        }
-
-        return options.length ? options : ['No available time'];
-    };
-
-    const roundToNext15Minutes = (date) => {
-        const ms = 1000 * 60 * 15;
-        const roundedTime = new Date(Math.ceil(date.getTime() / ms) * ms);
-
-        if (roundedTime.getTime() === date.getTime()) {
-            roundedTime.setMinutes(roundedTime.getMinutes() + 15);
-        }
-
-        return roundedTime;
-    };
-
-    useEffect(() => {
-        if (restaurant?.operatingHours && selectedDate) {
-            const options = generateTimeOptions(restaurant.operatingHours);
-            setTimeOptions(options);
-        }
-    }, [restaurant, selectedDate]);
-
-
     return (
         <div className="container">
-            {isLoading ? (
+            {isLoading ? ( // Conditional rendering based on loading state
                 <p>Loading...</p>
             ) : (
@@ -200,67 +81,34 @@
                     <h1>Edit Reservation</h1>
                     <div className="card-body">
-                        <h2 className="card-title">
-                            {restaurant?.name}
-                            <StarRating key={restaurant?.id} rating={restaurant?.rating || 0}/>
+                        <h2>
+                            {restaurant.name} <StarRating key={restaurant.id} rating={restaurant.rating}/>
                         </h2>
-                        <p className="card-text">Operating Hours: {restaurant?.operatingHours}</p>
-                        <p className="card-text">Address: Ul. {restaurant?.address}</p>
+                        <p className="card-text">{restaurant.cuisineType}</p>
+                        <p className="card-text">{restaurant.operatingHours}</p>
+                        <p className="card-text">Ul. {restaurant.address}</p>
                         <br/>
                     </div>
                     <form onSubmit={handleSubmit}>
                         <div className="mb-3">
-                            <label>Select Date:</label>
-                            <input
-                                type="date"
-                                className="form-control mt-2"
-                                onChange={(event) => setSelectedDate(event.target.value)}
-                                value={selectedDate}
-                                min={formattedDate}
-                            />
-
-                            <label>Select Time:</label>
-                            <select
-                                className="form-select mt-2"
-                                onChange={(event) => setSelectedTime(event.target.value)}
-                                value={selectedTime}
-                                disabled={!selectedDate}
-                            >
-                                <option value="">Select Time</option>
-                                {timeOptions.map((time, index) => (
-                                    <option key={index} value={time}>
-                                        {time}
-                                    </option>
+                            <label htmlFor="checkInTime" className="form-label">Check-in Time</label>
+                            <select className="form-select mt-2" aria-label="Select Time Slot"
+                                    name="selectedTimeSlot" // Add name attribute
+                                    onChange={handleInputChange}>
+                                <option value="">Select Time Slot</option>
+                                {filteredTimeSlots.map((timeSlot, index) => (
+                                    <option key={index} value={timeSlot}>{formatTimeSlot(timeSlot)}</option>
                                 ))}
                             </select>
-                            <label className="text-danger">
-                                Current check-in time: {formatTimeSlot(checkInTime)}
-                            </label>
                         </div>
                         <div className="mb-3">
                             <label htmlFor="partySize" className="form-label">Party Size</label>
-                            <input
-                                type="number"
-                                className="form-control"
-                                id="partySize"
-                                name="partySize"
-                                max={table?.capacity}
-                                min={1}
-                                value={formData.partySize || ''}
-                                onChange={handleInputChange}
-                            />
-                            <label className="text-danger">
-                                Table capacity: {table?.capacity}
-                            </label>
+                            <input type="number" className="form-control" id="partySize" name="partySize"
+                                   max={table.capacity}
+                                   value={formData.partySize || ''} onChange={handleInputChange}/>
                         </div>
                         <div className="mb-3">
-                            <label htmlFor="specialRequests" className="form-label">Special Requests</label>
-                            <input
-                                type="text"
-                                className="form-control"
-                                id="specialRequests"
-                                name="specialRequests"
-                                value={formData.specialRequests || ''}
-                                onChange={handleInputChange}
-                            />
+                        <label htmlFor="specialRequests" className="form-label">Special Requests</label>
+                            <input type="text" className="form-control" id="specialRequests" name="specialRequests"
+                                   value={formData.specialRequests || ''} onChange={handleInputChange}/>
                         </div>
                         <button type="submit" className="btn btn-primary">Submit</button>
@@ -270,4 +118,5 @@
         </div>
     );
+
 };
 
