88 lines
3.0 KiB
TypeScript
88 lines
3.0 KiB
TypeScript
import { Modal, Button } from 'react-bootstrap'
|
||
import { MapContainer, Marker, Popup, TileLayer } from 'react-leaflet'
|
||
|
||
import LineDot from './LineDot'
|
||
import { categoryNames } from '../assets/category'
|
||
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,
|
||
announcement: Announcement
|
||
}
|
||
|
||
const styles = {
|
||
container: {
|
||
display: 'flex',
|
||
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, bookedBy, userId
|
||
} }: AnnouncementDetailsProps) {
|
||
const { handleBook, bookButton } = useBook()
|
||
const { handleRemove, removeButton } = useRemoveAnnouncement(close)
|
||
|
||
const myId = useId()
|
||
|
||
return (
|
||
<div
|
||
className='modal'
|
||
style={styles.container}
|
||
>
|
||
<Modal.Dialog style={{ minWidth: '50vw' }}>
|
||
<Modal.Header closeButton onHide={close}>
|
||
<Modal.Title>
|
||
Подробнее
|
||
</Modal.Title>
|
||
</Modal.Header>
|
||
|
||
<Modal.Body>
|
||
<h1>{name}</h1>
|
||
|
||
<span>{categoryNames[category]}</span>
|
||
<span className='m-2'>•</span>{/* dot */}
|
||
<span>Годен до {new Date(bestBy).toLocaleString('ru-RU')}</span>
|
||
|
||
<p className='mb-3'>{description}</p>
|
||
|
||
<MapContainer style={styles.map} center={[lat, lng]} zoom={16} >
|
||
<TileLayer
|
||
attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
||
url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
|
||
/>
|
||
|
||
<Marker icon={iconItem} position={[lat, lng]}>
|
||
<Popup>
|
||
{address}
|
||
<br />
|
||
<LineDot station={metro} /> {metro}
|
||
</Popup>
|
||
</Marker>
|
||
</MapContainer>
|
||
</Modal.Body>
|
||
|
||
<Modal.Footer>
|
||
<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>
|
||
)
|
||
}
|
||
|
||
export default AnnouncementDetails
|