Updated OpenMapModalBtn so that it allows showing only active cities

src/visits/ShortUrlVisits.js

@@ -116,14 +116,9 @@ const ShortUrlVisits = ({ processStatsFromVisits }) => class ShortUrlVisits exte
             <SortableBarGraph
               stats={cities}
               title="Cities"
-              extraHeaderContent={(filterLocations) =>
+              extraHeaderContent={(activeCities) =>
-                mapLocations.length > 0 && (
+                mapLocations.length > 0 &&
-                  <OpenMapModalBtn
+                  <OpenMapModalBtn modalTitle="Cities" locations={mapLocations} activeCities={activeCities} />
-                    modalTitle="Cities"
-                    locations={mapLocations}
-                    filterLocations={filterLocations}
-                  />
-                )
               }
               sortingItems={{
                 name: 'City name',

src/visits/SortableBarGraph.js

@@ -96,11 +96,7 @@ export default class SortableBarGraph extends React.Component {
   render() {
     const { stats, sortingItems, title, extraHeaderContent, withPagination = true } = this.props;
     const { currentPageStats, pagination, max } = this.determineStats(stats, sortingItems);
-    const filterLocations = (locations) => {
+    const activeCities = keys(currentPageStats);
-      const validCities = keys(currentPageStats);
-
-      return locations.filter(({ cityName }) => validCities.includes(cityName));
-    };
     const computedTitle = (
       <React.Fragment>
         {title}
@@ -129,7 +125,7 @@ export default class SortableBarGraph extends React.Component {
         )}
         {extraHeaderContent && (
           <div className="float-right">
-            {extraHeaderContent(pagination ? filterLocations : undefined)}
+            {extraHeaderContent(pagination ? activeCities : undefined)}
           </div>
         )}
       </React.Fragment>

src/visits/helpers/MapModal.js

@@ -27,6 +27,10 @@ const OpenStreetMapTile = () => (
 );
 
 const calculateMapProps = (locations) => {
+  if (locations.length === 0) {
+    return {};
+  }
+
   if (locations.length > 1) {
     return { bounds: locations.map(prop('latLong')) };
   }

src/visits/helpers/OpenMapModalBtn.js

@@ -1,34 +1,63 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faMapMarkedAlt as mapIcon } from '@fortawesome/free-solid-svg-icons';
-import { UncontrolledTooltip } from 'reactstrap';
+import { Dropdown, DropdownItem, DropdownMenu, UncontrolledTooltip } from 'reactstrap';
 import * as PropTypes from 'prop-types';
 import MapModal from './MapModal';
 import './OpenMapModalBtn.scss';
 
-export default class OpenMapModalBtn extends React.Component {
+const propTypes = {
-  static propTypes = {
+  modalTitle: PropTypes.string.isRequired,
-    modalTitle: PropTypes.string.isRequired,
+  locations: PropTypes.arrayOf(PropTypes.object),
-    locations: PropTypes.arrayOf(PropTypes.object),
+  activeCities: PropTypes.arrayOf(PropTypes.string),
-    filterLocations: PropTypes.func,
+};
+
+const OpenMapModalBtn = ({ modalTitle, locations = [], activeCities }) => {
+  const [ mapIsOpened, setMapIsOpened ] = useState(false);
+  const [ dropdownIsOpened, setDropdownIsOpened ] = useState(false);
+  const [ locationsToShow, setLocationsToShow ] = useState([]);
+
+  const buttonRef = React.createRef();
+  const filterLocations = (locations) => locations.filter(({ cityName }) => activeCities.includes(cityName));
+  const toggleMap = () => setMapIsOpened(!mapIsOpened);
+  const onClick = () => {
+    if (mapIsOpened) {
+      setMapIsOpened(false);
+
+      return;
+    }
+
+    if (!activeCities) {
+      setLocationsToShow(locations);
+      setMapIsOpened(true);
+
+      return;
+    }
+
+    setDropdownIsOpened(true);
+  };
+  const openMapWithLocations = (filtered) => () => {
+    setLocationsToShow(filtered ? filterLocations(locations) : locations);
+    setMapIsOpened(true);
   };
 
-  state = { mapIsOpened: false };
+  return (
+    <React.Fragment>
+      <button className="btn btn-link open-map-modal-btn__btn" ref={buttonRef} onClick={onClick}>
+        <FontAwesomeIcon icon={mapIcon} />
+      </button>
+      <UncontrolledTooltip placement="left" target={() => buttonRef.current}>Show in map</UncontrolledTooltip>
+      <Dropdown isOpen={dropdownIsOpened} toggle={() => setDropdownIsOpened(!dropdownIsOpened)} inNavbar>
+        <DropdownMenu right>
+          <DropdownItem onClick={openMapWithLocations(false)}>Show all locations</DropdownItem>
+          <DropdownItem onClick={openMapWithLocations(true)}>Show locations in current page</DropdownItem>
+        </DropdownMenu>
+      </Dropdown>
+      <MapModal toggle={toggleMap} isOpen={mapIsOpened} title={modalTitle} locations={locationsToShow} />
+    </React.Fragment>
+  );
+};
 
-  render() {
+OpenMapModalBtn.propTypes = propTypes;
-    const { modalTitle, locations = [], filterLocations } = this.props;
-    const toggleMap = () => this.setState(({ mapIsOpened }) => ({ mapIsOpened: !mapIsOpened }));
-    const buttonRef = React.createRef();
-    const filteredLocations = filterLocations ? filterLocations(locations) : locations;
 
-    return (
+export default OpenMapModalBtn;
-      <React.Fragment>
-        <button className="btn btn-link open-map-modal-btn__btn" ref={buttonRef} onClick={toggleMap}>
-          <FontAwesomeIcon icon={mapIcon} />
-        </button>
-        <UncontrolledTooltip placement="left" target={() => buttonRef.current}>Show in map</UncontrolledTooltip>
-        <MapModal toggle={toggleMap} isOpen={this.state.mapIsOpened} title={modalTitle} locations={filteredLocations} />
-      </React.Fragment>
-    );
-  }
-}