Added announcement removal for published by user

front/src/components/AnnouncementDetails.tsx

@@ -3,10 +3,11 @@ import { MapContainer, Marker, Popup, TileLayer } from 'react-leaflet'
 
 import LineDot from './LineDot'
 import { categoryNames } from '../assets/category'
-import { useBook } from '../hooks/api'
+import { useBook, useRemoveAnnouncement } from '../hooks/api'
 import { Announcement } from '../api/announcement/types'
 import { iconItem } from '../utils/markerIcons'
 import { CSSProperties } from 'react'
+import { useId } from '../hooks'
 
 type AnnouncementDetailsProps = {
     close: () => void,
@@ -19,12 +20,19 @@ const styles = {
         alignItems: 'center',
         justifyContent: 'center',
     } as CSSProperties,
+    map: {
+        width: '100%',
+        minHeight: 300,
+    } as CSSProperties,
 }
 
 function AnnouncementDetails({ close, announcement: {
-    id, name, category, bestBy, description, lat, lng, address, metro
+    id, name, category, bestBy, description, lat, lng, address, metro, bookedBy, userId
 } }: AnnouncementDetailsProps) {
     const { handleBook, bookButton } = useBook()
+    const { handleRemove, removeButton } = useRemoveAnnouncement(close)
+
+    const myId = useId()
 
     return (
         <div
@@ -47,7 +55,7 @@ function AnnouncementDetails({ close, announcement: {
 
                     <p className='mb-3'>{description}</p>
 
-                    <MapContainer style={{ width: '100%', minHeight: 300 }} center={[lat, lng]} zoom={16} >
+                    <MapContainer style={styles.map} center={[lat, lng]} zoom={16} >
                         <TileLayer
                             attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
                             url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
@@ -64,7 +72,12 @@ function AnnouncementDetails({ close, announcement: {
                 </Modal.Body>
 
                 <Modal.Footer>
-                    <Button variant='success' onClick={() => void handleBook(id)} {...bookButton} />
+                    <p>Забронировали {bookedBy} чел.</p>
+                    {(myId === userId) ? (
+                        <Button variant='success' onClick={() => void handleRemove(id)} {...removeButton} />
+                    ) : (
+                        <Button variant='success' onClick={() => void handleBook(id)} {...bookButton} />
+                    )}
                 </Modal.Footer>
             </Modal.Dialog>
         </div>