import { FC } from 'react'; import { Modal, ModalBody } from 'reactstrap'; import { MapContainer, TileLayer, Marker, Popup, MapContainerProps } from 'react-leaflet'; import { prop } from 'ramda'; import { CityStats } from '../types'; import './MapModal.scss'; interface MapModalProps { toggle: () => void; isOpen: boolean; title: string; locations?: CityStats[]; } const OpenStreetMapTile: FC = () => ( ); const calculateMapProps = (locations: CityStats[]): MapContainerProps => { if (locations.length === 0) { return {}; } if (locations.length > 1) { return { bounds: locations.map(prop('latLong')) }; } // When there's only one location, an error is thrown if trying to calculate the bounds. // When that happens, we use "zoom" and "center" as a workaround const [{ latLong: center }] = locations; return { zoom: 10, center }; }; export const MapModal = ({ toggle, isOpen, title, locations = [] }: MapModalProps) => (

{title}

{locations.map(({ cityName, latLong, count }, index) => ( {count} visit{count > 1 ? 's' : ''} from {cityName} ))}
);