Index: my-react-app/src/App.js
===================================================================
--- my-react-app/src/App.js	(revision 65b6638865a1485e9cc722615973d9fb675b9d84)
+++ my-react-app/src/App.js	(revision cfc16a3143db2a719a3031cf0cf4bdb718b66d4f)
@@ -2,5 +2,5 @@
 import Customers from './components/Customers';
 import Layout from "./components/Layout";
-import React, {useEffect, useState} from 'react';
+import React, {useContext, useEffect, useState} from 'react';
 import CustomerFormContainer from "./components/CustomerFormContainer";
 import CustomerDetails from "./components/CustomerDetails";
@@ -12,4 +12,5 @@
 import ReservationEdit from "./components/ReservationEdit";
 import axios from "axios";
+import { CuisineContext } from './components/CuisineContext';
 
 const App = () => {
@@ -45,4 +46,6 @@
     const [timeSlots, setTimeSlots] = useState([]);
 
+    const cuisineTypes = useContext(CuisineContext);
+
     useEffect(() => {
         if (date) {
@@ -82,5 +85,4 @@
     }, [date]);
 
-
     const handleDateChange = (e) => {
         setDate(e.target.value);
@@ -102,22 +104,25 @@
         e.preventDefault();
         const [year, month, day] = date.split("-");
-
         let formattedDateTime;
-        const [selectedHours, selectedMinutes] = selectedTime.split(":");
-        // Check if selectedHours and selectedMinutes are valid numbers
-        if (!isNaN(selectedHours) && !isNaN(selectedMinutes)) {
-            const dateTime = new Date(Date.UTC(year, month - 1, day, selectedHours, selectedMinutes));
-            formattedDateTime = dateTime.toISOString().slice(0, 16).replace('T', ' ');
+
+        if (selectedTime) {
+            const [selectedHours, selectedMinutes] = selectedTime.split(":");
+            // Check if selectedHours and selectedMinutes are valid numbers
+            if (!isNaN(selectedHours) && !isNaN(selectedMinutes)) {
+                const dateTime = new Date(Date.UTC(year, month - 1, day, selectedHours, selectedMinutes));
+                formattedDateTime = dateTime.toISOString().slice(0, 16).replace('T', ' ');
+            }
         } else {
-            // Default values if selectedTime is not valid
+            // Find the first available time slot after the current time
             const now = new Date();
-            let defaultTime;
-            if (now.getHours() >= 9 && now.getHours() <= 23) {
-                defaultTime = now;
-            } else {
-                defaultTime = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 9, 0); // Set to 09:00 if current time is before 09:00
-            }
-            const dateTime = new Date(Date.UTC(year, month - 1, day, defaultTime.getHours(), defaultTime.getMinutes()));
-            formattedDateTime = dateTime.toISOString().slice(0, 16).replace('T', ' ');
+            const currentTime = now.getHours() * 60 + now.getMinutes(); // Current time in minutes
+            const nextSlot = timeSlots.find(slot => {
+                const [hours, minutes] = slot.split(":");
+                const slotTime = parseInt(hours) * 60 + parseInt(minutes); // Time of the slot in minutes
+                return slotTime > currentTime;
+            });
+
+            // If no slot is found after the current time, use the first slot of the day
+            formattedDateTime = nextSlot ? `${date} ${nextSlot}` : `${date} ${timeSlots[0]}`;
         }
 
@@ -128,6 +133,6 @@
         };
 
-        console.log("pecatam data pod mene")
-        console.log(data)
+        console.log("Data to be submitted:");
+        console.log(data);
 
         try {
@@ -141,4 +146,15 @@
     };
 
+    const handleSearchByCuisine = async (cuisine) => {
+        const cuisineName = cuisine.replace('Searching by cuisine: ', '');
+        try {
+            const response = await axios.post(`http://localhost:8080/api/search/shortcut/${cuisineName}`, cuisineName);
+            // Handle the response as needed
+            console.log(response.data); // Log the response data, for example
+        } catch (error) {
+            console.error('Error searching by cuisine:', error);
+            // Handle errors, such as displaying an error message to the user
+        }
+    };
 
 
@@ -154,6 +170,5 @@
     return (
         <div className="container">
-            <h2>Home</h2>
-            <p>Welcome to My Awesome App!</p>
+            <h2 className="display-1">Rezerviraj masa</h2>
             <form className="row g-2 align-items-center" onSubmit={handleSubmit}>
                 <div className="col-auto">
@@ -189,4 +204,21 @@
                     <button className="btn btn-outline-success" type="submit">Search</button>
                 </div>
+                <form>
+                    <div className="mb-3">
+                        <h2 className="display-2">Search by cuisine type</h2>
+                        <ul className="list-group">
+                            {cuisineTypes.map((cuisine, index) => (
+                                <li key={index} className="list-group-item">
+                                    <button type="button" className="btn btn-outline-primary"
+                                            onClick={() => handleSearchByCuisine(cuisine)}>
+                                        {cuisine}
+                                    </button>
+                                </li>
+                            ))}
+                        </ul>
+                    </div>
+                </form>
+
+
             </form>
         </div>
Index: my-react-app/src/components/CuisineContext.js
===================================================================
--- my-react-app/src/components/CuisineContext.js	(revision cfc16a3143db2a719a3031cf0cf4bdb718b66d4f)
+++ my-react-app/src/components/CuisineContext.js	(revision cfc16a3143db2a719a3031cf0cf4bdb718b66d4f)
@@ -0,0 +1,26 @@
+import React, { createContext, useState, useEffect } from 'react';
+import axios from 'axios';
+
+export const CuisineContext = createContext();
+
+export const CuisineProvider = ({ children }) => {
+    const [cuisineTypes, setCuisineTypes] = useState([]);
+
+    useEffect(() => {
+        const fetchCuisineTypes = async () => {
+            try {
+                const response = await axios.get('http://localhost:8080/api/cuisineTypes');
+                setCuisineTypes(response.data);
+            } catch (error) {
+                console.error('Error fetching cuisine types:', error);
+            }
+        };
+        fetchCuisineTypes();
+    }, []);
+
+    return (
+        <CuisineContext.Provider value={cuisineTypes}>
+            {children}
+        </CuisineContext.Provider>
+    );
+};
Index: my-react-app/src/components/Customers.js
===================================================================
--- my-react-app/src/components/Customers.js	(revision 65b6638865a1485e9cc722615973d9fb675b9d84)
+++ my-react-app/src/components/Customers.js	(revision cfc16a3143db2a719a3031cf0cf4bdb718b66d4f)
@@ -35,8 +35,7 @@
             await axios.delete(`http://localhost:8080/api/customers/delete/${customerId}`);
             setCustomers(customers.filter(customer => customer.customerID !== customerId));
-            alert('Reservation canceled successfully');
+            window.location.reload();
         } catch (error) {
             console.error("Error + " + error);
-            alert("An error occurred while deleting");
         }
     }
Index: my-react-app/src/components/RestaurantCard.js
===================================================================
--- my-react-app/src/components/RestaurantCard.js	(revision cfc16a3143db2a719a3031cf0cf4bdb718b66d4f)
+++ my-react-app/src/components/RestaurantCard.js	(revision cfc16a3143db2a719a3031cf0cf4bdb718b66d4f)
@@ -0,0 +1,22 @@
+import React from 'react';
+import StarRating from './StarRating';
+
+const RestaurantCard = ({ restaurant, onDetailClick }) => {
+    return (
+        <div className="col-md-4 mb-4">
+            <div className="card">
+                <div className="card-body">
+                    <h5 className="card-title">
+                        {restaurant.name} <StarRating 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>
+                </div>
+                <button onClick={() => onDetailClick(restaurant.restaurantId)} className="btn btn-primary">View Details</button>
+            </div>
+        </div>
+    );
+};
+
+export default RestaurantCard;
Index: my-react-app/src/components/RestaurantContext.js
===================================================================
--- my-react-app/src/components/RestaurantContext.js	(revision cfc16a3143db2a719a3031cf0cf4bdb718b66d4f)
+++ my-react-app/src/components/RestaurantContext.js	(revision cfc16a3143db2a719a3031cf0cf4bdb718b66d4f)
@@ -0,0 +1,27 @@
+import React, { createContext, useState, useEffect } from 'react';
+import axios from 'axios';
+
+export const RestaurantContext = createContext();
+
+export const RestaurantProvider = ({ children }) => {
+    const [restaurants, setRestaurants] = useState([]);
+
+    useEffect(() => {
+        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);
+            }
+        };
+
+        fetchRestaurants();
+    }, []);
+
+    return (
+        <RestaurantContext.Provider value={{ restaurants }}>
+            {children}
+        </RestaurantContext.Provider>
+    );
+};
Index: my-react-app/src/components/Restaurants.js
===================================================================
--- my-react-app/src/components/Restaurants.js	(revision 65b6638865a1485e9cc722615973d9fb675b9d84)
+++ my-react-app/src/components/Restaurants.js	(revision cfc16a3143db2a719a3031cf0cf4bdb718b66d4f)
@@ -1,24 +1,16 @@
-import React, { useState, useEffect } from 'react';
-import axios from 'axios';
+import React, {useState, useEffect, useContext} from 'react';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import StarRating from './StarRating';
 import { useNavigate } from 'react-router-dom';
+import {RestaurantContext} from "./RestaurantContext";
 
 const Restaurants = () => {
     const [restaurants, setRestaurants] = useState([]);
     const navigate = useNavigate();
+    const restaurantContext = useContext(RestaurantContext);
 
     useEffect(() => {
-        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);
-            }
-        };
-
-        fetchRestaurants();
-    }, []);
+        setRestaurants(restaurantContext.restaurants);
+    }, [restaurantContext]);
 
     const handleDetailClick = (restaurantId) => {
@@ -98,5 +90,7 @@
                                 </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>
Index: my-react-app/src/index.js
===================================================================
--- my-react-app/src/index.js	(revision 65b6638865a1485e9cc722615973d9fb675b9d84)
+++ my-react-app/src/index.js	(revision cfc16a3143db2a719a3031cf0cf4bdb718b66d4f)
@@ -3,9 +3,15 @@
 import './index.css';
 import App from './App';
+import { CuisineProvider } from './components/CuisineContext';
+import {RestaurantProvider} from "./components/RestaurantContext";
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
+    <React.StrictMode>
+        <CuisineProvider>
+            <RestaurantProvider>
+                <App />
+            </RestaurantProvider>
+        </CuisineProvider>
+    </React.StrictMode>
 );
