Index: my-react-app/src/components/Restaurants.js
===================================================================
--- my-react-app/src/components/Restaurants.js	(revision e48199adf103ea72701a91722bdbf8cfb9732731)
+++ my-react-app/src/components/Restaurants.js	(revision d24f17cb212e43f94a77a44d655ba10b4b8143d2)
@@ -1,61 +1,28 @@
-import React, {useState, useEffect, useContext} from 'react';
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import StarRating from './StarRating';
 import { useNavigate } from 'react-router-dom';
-import {RestaurantContext} from "./RestaurantContext";
-import {Alert} from "bootstrap";
-
-const parseTime = (timeString) => {
-    const [hours, minutes] = timeString.trim().split(':').map(Number);
-    return new Date().setHours(hours, minutes, 0, 0);
-};
-
-const roundToNextQuarter = (date) => {
-    const minutes = date.getMinutes();
-    const roundedMinutes = Math.floor(minutes / 15) * 15;
-    date.setMinutes(roundedMinutes, 0, 0);
-    return date;
-};
-
-const shouldMoveToNextDay = (currentTime, endTime) => {
-    return (endTime - currentTime) <= 2 * 60 * 60 * 1000;
-};
 
 const Restaurants = () => {
     const [restaurants, setRestaurants] = useState([]);
     const navigate = useNavigate();
-    const restaurantContext = useContext(RestaurantContext);
 
     useEffect(() => {
-        setRestaurants(restaurantContext.restaurants);
-    }, [restaurantContext]);
+        const fetchRestaurants = async () => {
+            try {
+                const response = await axios.get('http://localhost:8080/api/restaurants');
+                setRestaurants(response.data);
+            } catch (error) {
+                console.error('Error fetching restaurants:', error);
+            }
+        };
 
-
-    const generateTimeSlots = (operatingHours) => {
-        const timeSlots = [];
-        const [startTimeStr, endTimeStr] = operatingHours.split('-').map((time) => time.trim());
-
-        const startTime = parseTime(startTimeStr);
-        let endTime = parseTime(endTimeStr);
-
-        const currentTime = new Date().getTime();
-        if (shouldMoveToNextDay(currentTime, endTime)) {
-            endTime += 24 * 60 * 60 * 1000;
-        }
-
-        let currentTimeSlot = new Date(startTime);
-        currentTimeSlot = roundToNextQuarter(currentTimeSlot);
-
-        while (currentTimeSlot.getTime() < endTime) {
-            timeSlots.push(currentTimeSlot.toISOString());
-            currentTimeSlot.setMinutes(currentTimeSlot.getMinutes() + 15);
-        }
-
-        return timeSlots;
-    };
+        fetchRestaurants();
+    }, []);
 
     const handleDetailClick = (restaurantId) => {
         navigate(`/restaurants/${restaurantId}`);
-    };
+    }
 
     const handleTimeSlotClick = (table, timeSlot, restaurant) => {
@@ -64,49 +31,40 @@
         const restaurantId = restaurant.restaurantId;
 
-        const encodedTableNumber = encodeURIComponent(tableNumber);
+        const encodedTableNumber = encodeURI(tableNumber);
         const encodedTimeSlot = encodeURIComponent(formattedTimeSlot);
         const encodedRestaurantId = encodeURIComponent(restaurantId);
 
         navigate(`/reservationConfirmation/${encodedTableNumber}/${encodedTimeSlot}/${encodedRestaurantId}`);
-    };
+    }
 
     const renderTimeSlots = (tablesList, restaurant) => {
         const currentTime = new Date().getTime();
-        let renderedTimeSlots = {};
+        let renderedTimeSlots = {}; // Object to store rendered slots for each table capacity
 
-        if (tablesList.length === 0) {
-            return <p>No tables available for reservations at this restaurant.</p>;
-        }
-
-        return tablesList.flatMap((table) => {
-            const tableTimeSlots = generateTimeSlots(restaurant.operatingHours);
-
+        return tablesList.flatMap(table => {
+            // Render capacity header when encountering a new capacity
             if (!renderedTimeSlots[table.capacity]) {
                 renderedTimeSlots[table.capacity] = 0;
                 return (
                     <div key={table.capacity}>
-                        <h3>Table for {table.capacity} guests</h3>
-                        {tableTimeSlots.map((timeSlot, index) => {
+                        <h3>Table for: {table.capacity}</h3>
+                        {table.timeSlots.map((timeSlot, index) => {
                             const timeSlotTime = new Date(timeSlot).getTime();
+                            const tableCapacity = table.capacity;
 
-                            if (timeSlotTime > currentTime && renderedTimeSlots[table.capacity] < 3) {
-                                renderedTimeSlots[table.capacity]++;
+                            // Check if the time slot is after the current time and limit to 3 slots
+                            if (timeSlotTime > currentTime && renderedTimeSlots[tableCapacity] < 3) {
+                                renderedTimeSlots[tableCapacity]++;
                                 const timeSlotDateTime = new Date(timeSlot);
-                                const formattedTime = timeSlotDateTime.toLocaleTimeString([], {
-                                    hour: '2-digit',
-                                    minute: '2-digit'
-                                });
+                                const formattedTime = timeSlotDateTime.toLocaleTimeString();
+                                const formattedDateTime = timeSlotDateTime.toLocaleString(); // Format for both date and time
 
                                 return (
-                                    <button
-                                        key={index}
-                                        className="btn btn-primary me-2 mb-2"
-                                        onClick={() => handleTimeSlotClick(table, timeSlot, restaurant)}
-                                    >
-                                        {formattedTime} {}
+                                    <button key={index} className="btn btn-primary me-2 mb-2" onClick={() => handleTimeSlotClick(table, timeSlot, restaurant)}>
+                                        {formattedDateTime} {/* Display both date and time */}
                                     </button>
                                 );
                             } else {
-                                return null;
+                                return null; // Render nothing if the condition is not met
                             }
                         })}
@@ -114,8 +72,11 @@
                 );
             } else {
+                // If capacity has been rendered, return null to avoid duplicate rendering
                 return null;
             }
         });
-    };
+
+    }
+
 
     return (
@@ -124,25 +85,18 @@
             <div className="row">
                 {restaurants.map((restaurant) => (
-                    <div key={restaurant.restaurantId} className="col-md-4 mb-4">
+                    <div key={restaurant.id} className="col-md-4 mb-4">
                         <div className="card">
                             <div className="card-body">
                                 <h5 className="card-title">
-                                    {restaurant.name}
+                                    {restaurant.name} <StarRating key={restaurant.id} rating={restaurant.rating}/>
                                 </h5>
                                 <p className="card-text">{restaurant.cuisineType}</p>
                                 <p className="card-text">{restaurant.operatingHours}</p>
                                 <p className="card-text">Ul. {restaurant.address}</p>
-
-                                {restaurant.tablesList && restaurant.tablesList.length > 0 ? (
-                                    <div className="d-flex flex-wrap">
-                                        {renderTimeSlots(restaurant.tablesList, restaurant)}
-                                    </div>
-                                ) : (
-                                    <p>No tables available for reservations at this restaurant.</p>
-                                )}
+                                <div className="d-flex flex-wrap">
+                                    {renderTimeSlots(restaurant.tablesList.flatMap((table) => table), restaurant)}
+                                </div>
                             </div>
-                            <button onClick={() => handleDetailClick(restaurant.restaurantId)} className="btn btn-primary">
-                                View Details
-                            </button>
+                            <button onClick={() => handleDetailClick(restaurant.restaurantId)} className="btn btn-primary">View Details</button>
                         </div>
                     </div>
