Implemented map to show visits from every city

src/visits/helpers/MapModal.js

@@ -8,33 +8,40 @@ const propTypes = {
   toggle: PropTypes.func,
   isOpen: PropTypes.bool,
   title: PropTypes.string,
+  locations: PropTypes.arrayOf(PropTypes.shape({
+    city: PropTypes.string.isRequired,
+    latLong: PropTypes.arrayOf(PropTypes.number).isRequired,
+    count: PropTypes.number.isRequired,
+  })),
+};
+const defaultProps = {
+  locations: [],
 };
 
-const MapModal = ({ toggle, isOpen, title }) => {
-  const madridLat = 40.416775;
-  const madridLong = -3.703790;
-  const latLong = [ madridLat, madridLong ];
+const OpenStreetMapTile = () => (
+  <TileLayer
+    attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
+    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+  />
+);
 
-  return (
-    <Modal toggle={toggle} isOpen={isOpen} className="map-modal__modal" contentClassName="map-modal__modal-content">
-      <ModalHeader toggle={toggle}>{title}</ModalHeader>
-      <ModalBody className="map-modal__modal-body">
-        <Map center={latLong} zoom="13">
-          <TileLayer
-            attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
-            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
-          />
-          <Marker position={latLong}>
-            <Popup>
-              A pretty CSS3 popup. <br /> Easily customizable.
-            </Popup>
+const MapModal = ({ toggle, isOpen, title, locations }) => (
+  <Modal toggle={toggle} isOpen={isOpen} className="map-modal__modal" contentClassName="map-modal__modal-content">
+    <ModalHeader toggle={toggle}>{title}</ModalHeader>
+    <ModalBody className="map-modal__modal-body">
+      <Map center={[ 0, 0 ]} zoom="3">
+        <OpenStreetMapTile />
+        {locations.map(({ city, latLong, count }, index) => (
+          <Marker key={index} position={latLong}>
+            <Popup><b>{count}</b> visit{count > 1 ? 's' : ''} from <b>{city}</b></Popup>
           </Marker>
-        </Map>
-      </ModalBody>
-    </Modal>
-  );
-};
+        ))}
+      </Map>
+    </ModalBody>
+  </Modal>
+);
 
 MapModal.propTypes = propTypes;
+MapModal.defaultProps = defaultProps;
 
 export default MapModal;

src/visits/helpers/OpenMapModalBtn.js

@@ -9,12 +9,13 @@ import './OpenMapModalBtn.scss';
 export default class OpenMapModalBtn extends React.Component {
   static propTypes = {
     title: PropTypes.string.isRequired,
+    locations: PropTypes.arrayOf(PropTypes.object),
   };
 
   state = { mapIsOpened: false };
 
   render() {
-    const { title } = this.props;
+    const { title, locations = [] } = this.props;
     const toggleMap = () => this.setState(({ mapIsOpened }) => ({ mapIsOpened: !mapIsOpened }));
     const buttonRef = React.createRef();
 
@@ -24,7 +25,7 @@ export default class OpenMapModalBtn extends React.Component {
           <FontAwesomeIcon icon={mapIcon} />
         </button>
         <UncontrolledTooltip placement="bottom" target={() => buttonRef.current}>Show in map</UncontrolledTooltip>
-        <MapModal toggle={toggleMap} isOpen={this.state.mapIsOpened} title={title} />
+        <MapModal toggle={toggleMap} isOpen={this.state.mapIsOpened} title={title} locations={locations} />
       </React.Fragment>
     );
   }