Moved button to open map to separated component

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>
     );
   }