Changeset cfc16a3 for my-react-app

Timestamp:

03/03/24 10:52:49 (15 months ago)

Author:

Aleksandar Panovski <apano77@…>

Branches:

main

Children:

c63036a

Parents:

75f5086

Message:

RetaurantServiceImpl problemi
isAvailable od tableEntity...

Location:

my-react-app/src

Files:

• App.js (modified) (9 diffs)
• components/CuisineContext.js (added)
• components/Customers.js (modified) (1 diff)
• components/RestaurantCard.js (added)
• components/RestaurantContext.js (added)
• components/Restaurants.js (modified) (2 diffs)
• index.js (modified) (1 diff)

my-react-app/src/App.js

@@ -2 +2 @@
 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 +12 @@
 import ReservationEdit from "./components/ReservationEdit";
 import axios from "axios";
+import { CuisineContext } from './components/CuisineContext';
 
 const App = () => {
@@ -45 +46 @@
     const [timeSlots, setTimeSlots] = useState([]);
 
+    const cuisineTypes = useContext(CuisineContext);
+
     useEffect(() => {
         if (date) {
@@ -82 +85 @@
     }, [date]);
 
-
     const handleDateChange = (e) => {
         setDate(e.target.value);
@@ -102 +104 @@
         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 +133 @@
         };
 
-        console.log("pecatam data pod mene")
-        console.log(data)
+        console.log("Data to be submitted:");
+        console.log(data);
 
         try {
@@ -141 +146 @@
     };
 
+    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 +170 @@
     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 +204 @@
                     <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>

my-react-app/src/components/Customers.js

@@ -35 +35 @@
             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");
         }
     }

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

@@ -1 @@
-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 +90 @@
                                 </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>

my-react-app/src/index.js

@@ -3 +3 @@
 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>
 );