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

Timestamp:

04/28/25 14:20:18 (3 weeks ago)

Author:

Aleksandar Panovski <apano77@…>

Branches:

main

Children:

deea3c4

Parents:

8ca35dc

Message:

Big change done works with handle_reservation_update() trigger

File:

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

my-react-app/src/App.js

@@ -1 +1 @@
 import {BrowserRouter as Router, Navigate, Route, Routes, useNavigate} from 'react-router-dom';
+
 import Customers from './components/Customers';
 import Layout from "./components/Layout";
@@ -17 +18 @@
 import AppContent from "./components/AppContent";
 import ReservationHistory from "./components/ReservationHistory";
+import AuthContent from "./components/AuthContent";
 
 const ProtectedRoute = ({ element, isAuthenticated }) => {
@@ -23 +25 @@
 
 const App = () => {
-    const [isAuthenticated, setIsAuthenticated] = React.useState(false);
-
-    React.useEffect(() => {
+    const [isAuthenticated, setIsAuthenticated] = useState(false);
+
+    useEffect(() => {
         const token = localStorage.getItem('token');
         if (token) {
@@ -60 +62 @@
     const navigate = useNavigate();
 
-    const todayDate = new Date().toISOString().split('T')[0]; // Get today's date in 'YYYY-MM-DD' format
+    const todayDate = new Date().toISOString().split('T')[0];
 
     const [date, setDate] = useState(todayDate);
@@ -80 +82 @@
             const isToday = selectedDate.toDateString() === today.toDateString();
 
-            // Determine the start hour and minute
             let startHour = 9;
             let startMinute = 0;
@@ -86 +87 @@
                 const currentHour = today.getHours();
                 const currentMinute = today.getMinutes();
-                // If current time is later than 09:00, start from the current hour and minute
                 if (currentHour > 9 || (currentHour === 9 && currentMinute >= 0)) {
                     startHour = currentHour;
@@ -93 +93 @@
             }
 
-            // Create the start time and end time
             const startTime = new Date(selectedDate.getFullYear(), selectedDate.getMonth(), selectedDate.getDate(), startHour, startMinute);
             const endTime = new Date(selectedDate.getFullYear(), selectedDate.getMonth(), selectedDate.getDate(), 23, 30);
 
-            // Generate time slots from start time to end time in 15-minute intervals
             const slots = [];
             let currentTime = new Date(startTime);
@@ -106 +104 @@
             }
 
-            // Update the timeSlots state
             setTimeSlots(slots);
         }
     }, [date]);
+
+    const handleGoToRestaurant = (restaurantId) => {
+        navigate(`/restaurants/${restaurantId}`);
+    };
 
     const handleDateChange = (e) => {
@@ -134 +135 @@
         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));
@@ -141 +141 @@
             }
         } else {
-            // Find the first available time slot after the current time
             const now = new Date();
-            const currentTime = now.getHours() * 60 + now.getMinutes(); // Current time in minutes
+            const currentTime = now.getHours() * 60 + now.getMinutes();
             const nextSlot = timeSlots.find(slot => {
                 const [hours, minutes] = slot.split(":");
-                const slotTime = parseInt(hours) * 60 + parseInt(minutes); // Time of the slot in minutes
+                const slotTime = parseInt(hours) * 60 + parseInt(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]}`;
         }
@@ -160 +158 @@
         };
 
-        console.log("Data to be submitted:");
-        console.log(data);
-
         try {
             const response = await axios.post('http://localhost:8081/api/search', data);
             const filteredRestaurants = response.data;
             setFilteredRestaurants(filteredRestaurants);
-            console.log(filteredRestaurants);
+            console.log(filteredRestaurants)
             setShowCuisineSearch(false);
-            // Handle response accordingly
         } catch (error) {
             console.error('Error:', error);
@@ -179 +173 @@
         try {
             const response = await axios.post(`http://localhost:8081/api/search/shortcut/${cuisineName}`, cuisineName);
-            console.log(response.data);
             setFilteredRestaurants(response.data)
+            console.log(response.data)
         } catch (error) {
             console.error('Error searching by cuisine:', error);
@@ -186 +180 @@
         setShowCuisineSearch(false);
     };
+    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 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;
+    };
+
+    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 handleTimeSlotClick = (table, timeSlot, restaurant) => {
@@ -192 +228 @@
         const restaurantId = restaurant.restaurantId;
 
-        const encodedTableNumber = encodeURI(tableNumber);
+        const encodedTableNumber = encodeURIComponent(tableNumber);
         const encodedTimeSlot = encodeURIComponent(formattedTimeSlot);
         const encodedRestaurantId = encodeURIComponent(restaurantId);
 
         navigate(`/reservationConfirmation/${encodedTableNumber}/${encodedTimeSlot}/${encodedRestaurantId}`);
-    }
+    };
 
     const renderTimeSlots = (tablesList, restaurant) => {
-        const [year, month, day] = date.split("-");
-        const [hours, minutes] = selectedTime.split(":");
-        const dateTime = new Date(year, month - 1, day, hours, minutes); // month is zero-based
-
-        let timestamp = dateTime.getTime();
-        if (isNaN(timestamp)) {
-            timestamp = Date.now();
-        }
-
-        let renderedTimeSlots = {}; // Object to store rendered slots for each table capacity
-
-        return tablesList.flatMap(table => {
-            // Render capacity header when encountering a new capacity
-            if (!renderedTimeSlots[table.capacity] && numPeople <= table.capacity) {
+        const currentTime = new Date().getTime();
+        let renderedTimeSlots = {};
+
+        if (tablesList.length === 0) {
+            return <p>No tables available for reservations at this restaurant.</p>;
+        }
+
+        return tablesList.flatMap((table) => {
+            const tableTimeSlots = generateTimeSlots(restaurant.operatingHours);
+
+            if (!renderedTimeSlots[table.capacity]) {
                 renderedTimeSlots[table.capacity] = 0;
                 return (
                     <div key={table.capacity}>
-                        <h3>Table for: {table.capacity}</h3>
-                        {table.timeSlots.map((timeSlot, index) => {
-                            let timeSlotTime = new Date(timeSlot).getTime();
-
-                            const tableCapacity = table.capacity;
-                            // Check if the time slot is after the current time, numPeople is less than or equal to tableCapacity, and limit to 5 slots
-                            if (timeSlotTime >= timestamp && numPeople <= tableCapacity && renderedTimeSlots[tableCapacity] < 5) {
-                                renderedTimeSlots[tableCapacity]++;
+                        <h3>Table for {table.capacity} guests</h3>
+                        {tableTimeSlots.map((timeSlot, index) => {
+                            const timeSlotTime = new Date(timeSlot).getTime();
+
+                            if (timeSlotTime > currentTime && renderedTimeSlots[table.capacity] < 3) {
+                                renderedTimeSlots[table.capacity]++;
                                 const timeSlotDateTime = new Date(timeSlot);
-                                const formattedDateTime = timeSlotDateTime.toLocaleString(); // Format for both date and time
+                                const formattedTime = timeSlotDateTime.toLocaleTimeString([], {
+                                    hour: '2-digit',
+                                    minute: '2-digit'
+                                });
 
                                 return (
-                                    <button key={index} className="btn btn-primary me-2 mb-2" onClick={() => handleTimeSlotClick(table, timeSlot, restaurant)}>
-                                        {formattedDateTime} {/* Display both date and time */}
+                                    <button
+                                        key={index}
+                                        className="btn btn-primary me-2 mb-2"
+                                        onClick={() => handleTimeSlotClick(table, timeSlot, restaurant)}
+                                    >
+                                        {formattedTime} {}
                                     </button>
                                 );
+                                <br/>
                             } else {
-                                return null; // Render nothing if the condition is not met
+                                return null;
                             }
                         })}
@@ -240 +279 @@
                 );
             } else {
-                // If capacity has been rendered, return null to avoid duplicate rendering
                 return null;
             }
         });
-    }
-
-
-
-// Rest of your component code...
-
-    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}`;
+    };
 
 
@@ -286 +314 @@
                         placeholder="Restaurant or Cuisine"
                         aria-label="Search"
-                        value={searchValue} // Set the value of the input field
-                        onChange={handleInputChange} // Call the event handler on change
+                        value={searchValue}
+                        onChange={handleInputChange}
                     />
                 </div>
@@ -299 +327 @@
                             <div className="card-body">
                                 <RestaurantInfo key={restaurant.id} restaurant={restaurant}/>
-                                <p>Available time slots</p>
+                                {/*<p>Available time slots</p>*/}
                                 <div className="d-flex flex-wrap">
-                                    {renderTimeSlots(restaurant.tablesList.flatMap((table) => table), restaurant)}
+                                    {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>
+                                <button
+                                    className="btn btn-secondary"
+                                    onClick={() => handleGoToRestaurant(restaurant.restaurantId)}
+                                >
+                                    Go to Restaurant
+                                </button>
                             </div>
                         </div>
@@ -308 +348 @@
                 </div>
 
-
                 {showCuisineSearch && (
                     <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>)}
+                        <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>
         </div>