Moved button to open map to separated component

src/visits/helpers/MapModal.js

@@ -10,28 +10,30 @@ const propTypes = {
   title: PropTypes.string,
 };
 
-const madridLat = 40.416775;
-const madridLong = -3.703790;
-const latLong = [ madridLat, madridLong ];
+const MapModal = ({ toggle, isOpen, title }) => {
+  const madridLat = 40.416775;
+  const madridLong = -3.703790;
+  const latLong = [ madridLat, madridLong ];
 
-const MapModal = ({ toggle, isOpen, title }) => (
-  <Modal toggle={toggle} isOpen={isOpen} centered size="lg" className="map-modal__modal">
-    <ModalHeader toggle={toggle}>{title}</ModalHeader>
-    <ModalBody>
-      <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>
-        </Marker>
-      </Map>
-    </ModalBody>
-  </Modal>
-);
+  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>
+          </Marker>
+        </Map>
+      </ModalBody>
+    </Modal>
+  );
+};
 
 MapModal.propTypes = propTypes;
 

src/visits/helpers/MapModal.scss

@@ -15,11 +15,11 @@
   }
 }
 
-.map-modal__modal .modal-content {
+.map-modal__modal-content {
   height: 100%;
 }
 
-.map-modal__modal .modal-body {
+.map-modal__modal-body {
   padding: 0;
   display: flex;
   overflow: hidden;

src/visits/helpers/OpenMapModalBtn.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faMapMarkedAlt as mapIcon } from '@fortawesome/free-solid-svg-icons';
+import { UncontrolledTooltip } from 'reactstrap';
+import * as PropTypes from 'prop-types';
+import MapModal from './MapModal';
+import './OpenMapModalBtn.scss';
+
+export default class OpenMapModalBtn extends React.Component {
+  static propTypes = {
+    title: PropTypes.string.isRequired,
+  };
+
+  state = { mapIsOpened: false };
+
+  render() {
+    const { title } = this.props;
+    const toggleMap = () => this.setState(({ mapIsOpened }) => ({ mapIsOpened: !mapIsOpened }));
+    const buttonRef = React.createRef();
+
+    return (
+      <React.Fragment>
+        <button className="btn btn-link open-map-modal-btn__btn" ref={buttonRef} onClick={toggleMap}>
+          <FontAwesomeIcon icon={mapIcon} />
+        </button>
+        <UncontrolledTooltip placement="bottom" target={() => buttonRef.current}>Show in map</UncontrolledTooltip>
+        <MapModal toggle={toggleMap} isOpen={this.state.mapIsOpened} title={title} />
+      </React.Fragment>
+    );
+  }
+}

src/visits/helpers/OpenMapModalBtn.scss

@@ -0,0 +1,4 @@
+.open-map-modal-btn__btn {
+  padding: 0;
+  margin-right: 1rem;
+}