Changeset cfc16a3 for my-react-app/src/App.js

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...

File:

• my-react-app/src/App.js (modified) (9 diffs)

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>