Changeset 9293100 for my-react-app

Timestamp:

03/03/24 13:59:59 (15 months ago)

Author:

Aleksandar Panovski <apano77@…>

Branches:

main

Children:

e35d0e9

Parents:

c63036a

Message:

RetaurantServiceImpl problemi
isAvailable od tableEntity...

File:

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

my-react-app/src/App.js

@@ -13 +13 @@
 import axios from "axios";
 import { CuisineContext } from './components/CuisineContext';
+import RestaurantInfo from "./components/RestaurantInfo";
 
 const App = () => {
@@ -42 +43 @@
     const [date, setDate] = useState(todayDate);
     const [selectedTime, setSelectedTime] = useState('');
+    const [formatedDateTime, setFormatedDateTime] = useState('')
     const [numPeople, setNumPeople] = useState(2);
     const [searchValue, setSearchValue] = useState('');
     const [timeSlots, setTimeSlots] = useState([]);
 
+    let [filteredRestaurants, setFilteredRestaurants] = useState([]);
     const cuisineTypes = useContext(CuisineContext);
+    const [showCuisineSearch, setShowCuisineSearch] = useState(true);
 
     useEffect(() => {
@@ -112 +116 @@
                 const dateTime = new Date(Date.UTC(year, month - 1, day, selectedHours, selectedMinutes));
                 formattedDateTime = dateTime.toISOString().slice(0, 16).replace('T', ' ');
+                setFormatedDateTime(formattedDateTime);
             }
         } else {
@@ -139 +144 @@
             const response = await axios.post('http://localhost:8080/api/search', data);
             const filteredRestaurants = response.data;
+            setFilteredRestaurants(filteredRestaurants);
             console.log(filteredRestaurants);
+            setShowCuisineSearch(false);
             // Handle response accordingly
         } catch (error) {
@@ -150 +157 @@
         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
+            console.log(response.data);
+            setFilteredRestaurants(response.data)
         } catch (error) {
             console.error('Error searching by cuisine:', error);
-            // Handle errors, such as displaying an error message to the user
-        }
-    };
+        }
+        setShowCuisineSearch(false);
+    };
+
+    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]) {
+                renderedTimeSlots[table.capacity] = 0;
+                return (
+                    <div key={table.capacity}>
+                        <h3>Table for: {table.capacity}</h3>
+                        {table.timeSlots.map((timeSlot, index) => {
+                            const 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]++;
+                                const timeSlotDateTime = new Date(timeSlot);
+                                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)}>
+                                        {formattedDateTime} {/* Display both date and time */}
+                                    </button>
+                                );
+                            } else {
+                                return null; // Render nothing if the condition is not met
+                            }
+                        })}
+                    </div>
+                );
+            } else {
+                // If capacity has been rendered, return null to avoid duplicate rendering
+                return null;
+            }
+        });
+    }
+
 
 
@@ -204 +258 @@
                     <button className="btn btn-outline-success" type="submit">Search</button>
                 </div>
-                <form>
+
+                <div>
+                    {filteredRestaurants.map((restaurant) => (
+                        <div key={restaurant.id} className="card mb-3">
+                            <div className="card-body">
+                                <RestaurantInfo key={restaurant.id} restaurant={restaurant}/>
+                                <p>Available time slots</p>
+                                <div className="d-flex flex-wrap">
+                                    {renderTimeSlots(restaurant.tablesList.flatMap((table) => table), restaurant)}
+                                </div>
+                            </div>
+                        </div>
+                    ))}
+                </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>
-                </form>
-
-
+                    <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>