Updated details page, implemented booking

front/src/components/AnnouncementDetails.jsx

@@ -1,19 +1,18 @@
-import Modal from 'react-bootstrap/Modal'
+import { Modal, Button } from 'react-bootstrap'
+import { MapContainer, Marker, Popup, TileLayer } from 'react-leaflet'
 
 import { categoryNames } from '../assets/category'
-import { MapContainer, Marker, Popup, TileLayer } from 'react-leaflet'
-import { Button } from 'react-bootstrap'
-import useBook from '../utils/useBook'
+import { useBook } from '../hooks/api'
 
 function AnnouncementDetails({ close, announcement: { id, name, category, bestBy, description, lat, lng, address, metro } }) {
-    const handleBook = useBook(id)
-    
+    const {handleBook, status: bookStatus} = useBook(id)
+
     return (
         <div
             className="modal show"
             style={{ display: 'flex', position: 'initial', alignItems: "center" }}
         >
-            <Modal.Dialog>
+            <Modal.Dialog style={{minWidth: "50vw"}}>
                 <Modal.Header closeButton onHide={close}>
                     <Modal.Title>
                         Подробнее
@@ -24,10 +23,10 @@ function AnnouncementDetails({ close, announcement: { id, name, category, bestBy
                     <h1>{name}</h1>
 
                     <span>{categoryNames.get(category)}</span>
-                    <span className='m-2'>&#x2022;</span> {/* dot */}
+                    <span className='m-2'>&#x2022;</span>{/* dot */}
                     <span>Годен до {new Date(bestBy).toLocaleString('ru-RU')}</span>
-                    
-                    <p className='mb-2'>{description}</p>
+
+                    <p className='mb-3'>{description}</p>
 
                     <MapContainer style={{ width: "100%", minHeight: 300 }} center={[lat, lng]} zoom={16} >
                         <TileLayer
@@ -43,7 +42,7 @@ function AnnouncementDetails({ close, announcement: { id, name, category, bestBy
 
                 <Modal.Footer>
                     <Button variant='success' onClick={handleBook}>
-                        Забронировать
+                        {bookStatus || "Забронировать"} 
                     </Button>
                 </Modal.Footer>
             </Modal.Dialog>