diff --git a/src/pages/bookings/bookings.js b/src/pages/bookings/bookings.js index d2bc964a1999cfe1bdc67b2b60f5a08d878901e9..6fa0a82ff56f24caeaf67fa241141416e97c178d 100644 --- a/src/pages/bookings/bookings.js +++ b/src/pages/bookings/bookings.js @@ -5,6 +5,7 @@ import { Heading, Text, Stack, + Select, Button, AlertDialog, AlertDialogOverlay, @@ -24,6 +25,9 @@ const BookingsPage = () => { const [isOpen, setIsOpen] = useState(false); const [extendTime, setExtendTime] = useState(null); + const bookingServiceBaseUrl = process.env.REACT_APP_BOOKING_SERVICE_ENDPOINT; + + useEffect(() => { fetchBookings(); }, []); @@ -31,19 +35,19 @@ const BookingsPage = () => { const fetchBookings = async () => { setIsLoading(true); try { - // const response = await fetch("/bookings", { - // headers: { - // Authorization: `Bearer ${localStorage.getItem("token")}`, - // }, - // }); - // const data = await response.json(); - const data = [ - { id: 1, location: "Test Location 1", address: "123 Test Address", startTime: "12:00PM - 25/7/2023", endTime: "14:00PM - 25/7/2023", }, - { id: 2, location: "Test Location 2", address: "1224 Test Street", startTime: "12:00PM - 25/7/2023", endTime: "14:00PM - 25/7/2023", }, - { id: 3, location: "Test Location 3", address: "123 Test Address", startTime: "12:00PM - 25/7/2023", endTime: "14:00PM - 25/7/2023", }, - { id: 4, location: "Test Location 4", address: "123 Test Address", startTime: "12:00PM - 25/7/2023", endTime: "14:00PM - 25/7/2023", }, - { id: 5, location: "Test Location 5", address: "123 Test Address", startTime: "12:00PM - 25/7/2023", endTime: "14:00PM - 25/7/2023", }, - ]; + const response = await fetch(`${bookingServiceBaseUrl}/bookings/getAllBookings`, { + headers: { + Authorization: `Bearer ${localStorage.getItem("token")}`, + }, + }); + const data = await response.json(); + // const data = [ + // { id: 1, location: "Test Location 1", address: "123 Test Address", startTime: "12:00PM - 25/7/2023", endTime: "14:00PM - 25/7/2023", }, + // { id: 2, location: "Test Location 2", address: "1224 Test Street", startTime: "12:00PM - 25/7/2023", endTime: "14:00PM - 25/7/2023", }, + // { id: 3, location: "Test Location 3", address: "123 Test Address", startTime: "12:00PM - 25/7/2023", endTime: "14:00PM - 25/7/2023", }, + // { id: 4, location: "Test Location 4", address: "123 Test Address", startTime: "12:00PM - 25/7/2023", endTime: "14:00PM - 25/7/2023", }, + // { id: 5, location: "Test Location 5", address: "123 Test Address", startTime: "12:00PM - 25/7/2023", endTime: "14:00PM - 25/7/2023", }, + // ]; setBookings(data); setIsLoading(false); } catch (error) { @@ -60,30 +64,30 @@ const BookingsPage = () => { const handleSubmitExtend = async () => { setIsOpen(false); setExtendTime(null); - // try { - // const response = await fetch(`/bookings/${selectedBooking.id}/extend`, { - // method: "PUT", - // headers: { - // Authorization: `Bearer ${localStorage.getItem("token")}`, - // "Content-Type": "application/json", - // }, - // body: JSON.stringify({ extendTime }), - // }); - // if (response.ok) { - // const data = await response.json(); - // setBookings( - // bookings.map((booking) => - // booking.id === selectedBooking.id ? data.booking : booking - // ) - // ); - // setExtendTime(null); - // setError(null); - // } else { - // setError("Booking extension failed"); - // } - // } catch (error) { - // setError(error.message); - // } + try { + const response = await fetch(`${bookingServiceBaseUrl}/bookings/extend/${selectedBooking.id}`, { + method: "PUT", + headers: { + Authorization: `Bearer ${localStorage.getItem("token")}`, + "Content-Type": "application/json", + }, + body: JSON.stringify({extend_hours: extendTime }), + }); + if (response.ok) { + const data = await response.json(); + setBookings( + bookings.map((booking) => + booking.id === selectedBooking.id ? data.booking : booking + ) + ); + setExtendTime(null); + setError(null); + } else { + setError("Booking extension failed"); + } + } catch (error) { + setError(error.message); + } }; return ( @@ -102,7 +106,7 @@ const BookingsPage = () => { {!isLoading && !error && bookings.length > 0 && ( <Stack spacing={4} minW={"50vw"}> {bookings.map((booking) => ( - <Box key={booking.id} p={4} borderWidth={1} borderRadius={4}> + <Box key={booking.id} p={4} borderWidth={1} borderRadius={4} > <Text> <strong>Location:</strong> {booking.location} </Text> @@ -128,19 +132,26 @@ const BookingsPage = () => { <AlertDialogHeader>Extend Booking</AlertDialogHeader> <AlertDialogBody> <Text> - Select a time that is greater than {selectedBooking?.endTime}: + Select how many hours you wish to extend your booking by: </Text> - <input - type="datetime-local" - value={extendTime ?? ""} - onChange={(e) => setExtendTime(e.target.value)} - /> + <Select value={extendTime} onChange={(e) => setExtendTime(e.target.value)}> + <option value="" disabled> + Choose an expiry time + </option> + <option value="1">1 hour</option> + <option value="2">2 hours</option> + <option value="3">3 hours</option> + <option value="4">4 hours</option> + <option value="5">5 hours</option> + <option value="6">6 hours</option> + <option value="7">7 hours</option> + <option value="8">8 hours</option> + <option value="9">9 hours</option> + <option value="10">10 hours</option> + <option value="11">11 hours</option> + <option value="12">12 hours</option> + </Select> {error && <Text color="red">{error}</Text>} - {extendTime && ( - <Text> - You have selected {extendTime}. Please confirm to proceed. - </Text> - )} </AlertDialogBody> <AlertDialogFooter> <Button