Moved button to open map to separated component

src/visits/ShortUrlVisits.js

@@ -12,6 +12,7 @@ import { VisitsHeader } from './VisitsHeader';
 import GraphCard from './GraphCard';
 import { shortUrlDetailType } from './reducers/shortUrlDetail';
 import './ShortUrlVisits.scss';
+import OpenMapModalBtn from './helpers/OpenMapModalBtn';
 
 const ShortUrlVisits = ({
   processOsStats,
@@ -101,6 +102,7 @@ const ShortUrlVisits = ({
             <SortableBarGraph
               stats={processCitiesStats(visits)}
               title="Cities"
+              extraHeaderContent={[ () => <OpenMapModalBtn title="Cities" /> ]}
               sortingItems={{
                 name: 'City name',
                 amount: 'Visits amount',

src/visits/SortableBarGraph.js

@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import { fromPairs, head, identity, keys, pipe, prop, reverse, sortBy, toLower, toPairs, type } from 'ramda';
 import SortingDropdown from '../utils/SortingDropdown';
 import GraphCard from './GraphCard';
-import MapModal from './helpers/MapModal';
 
 const toLowerIfString = (value) => type(value) === 'String' ? toLower(value) : identity(value);
 
@@ -12,16 +11,16 @@ export default class SortableBarGraph extends React.Component {
     stats: PropTypes.object.isRequired,
     title: PropTypes.string.isRequired,
     sortingItems: PropTypes.object.isRequired,
+    extraHeaderContent: PropTypes.arrayOf(PropTypes.func),
   };
 
   state = {
     orderField: undefined,
     orderDir: undefined,
-    mapIsOpened: false,
   };
 
   render() {
-    const { stats, sortingItems, title } = this.props;
+    const { stats, sortingItems, title, extraHeaderContent } = this.props;
     const sortStats = () => {
       if (!this.state.orderField) {
         return stats;
@@ -38,14 +37,10 @@ export default class SortableBarGraph extends React.Component {
       return fromPairs(this.state.orderDir === 'ASC' ? sortedPairs : reverse(sortedPairs));
     };
 
-    const toggleMap = () => this.setState(({ mapIsOpened }) => ({ mapIsOpened: !mapIsOpened }));
-
     return (
       <GraphCard stats={sortStats()} isBarChart>
         {title}
         <div className="float-right">
-          <button className="btn btn-link btn-sm" onClick={toggleMap}>Show in map</button>
-          <MapModal toggle={toggleMap} isOpen={this.state.mapIsOpened} title={title} />
           <SortingDropdown
             isButton={false}
             right
@@ -55,6 +50,11 @@ export default class SortableBarGraph extends React.Component {
             onChange={(orderField, orderDir) => this.setState({ orderField, orderDir })}
           />
         </div>
+        {extraHeaderContent && extraHeaderContent.map((content, index) => (
+          <div key={index} className="float-right">
+            {content()}
+          </div>
+        ))}
       </GraphCard>
     );
   }

src/visits/helpers/MapModal.js

@@ -10,14 +10,15 @@ const propTypes = {
   title: PropTypes.string,
 };
 
+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">
+  return (
+    <Modal toggle={toggle} isOpen={isOpen} className="map-modal__modal" contentClassName="map-modal__modal-content">
       <ModalHeader toggle={toggle}>{title}</ModalHeader>
-    <ModalBody>
+      <ModalBody className="map-modal__modal-body">
         <Map center={latLong} zoom="13">
           <TileLayer
             attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
@@ -32,6 +33,7 @@ const MapModal = ({ toggle, isOpen, title }) => (
       </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;
+}