Merge pull request #121 from acelaya/feature/fix-empty-locations

Feature/fix empty locations

CHANGELOG.md

@@ -4,6 +4,29 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org).
 
+## [Unreleased]
+
+#### Added
+
+* *Nothing*
+
+#### Changed
+
+* *Nothing*
+
+#### Deprecated
+
+* *Nothing*
+
+#### Removed
+
+* *Nothing*
+
+#### Fixed
+
+* [#120](https://github.com/shlinkio/shlink-web-client/issues/120) Fixed crash when visits page is loaded and there are no visits with known cities.
+
+
 ## 2.0.2 - 2019-03-04
 
 #### Added

src/common/ErrorHandler.js

@@ -3,7 +3,7 @@ import * as PropTypes from 'prop-types';
 import './ErrorHandler.scss';
 import { Button } from 'reactstrap';
 
-const ErrorHandler = ({ location }) => class ErrorHandler extends React.Component {
+const ErrorHandler = ({ location }, { error }) => class ErrorHandler extends React.Component {
   static propTypes = {
     children: PropTypes.node.isRequired,
   };
@@ -17,6 +17,12 @@ const ErrorHandler = ({ location }) => class ErrorHandler extends React.Componen
     return { hasError: true };
   }
 
+  componentDidCatch(e) {
+    if (process.env.NODE_ENV !== 'development') {
+      error(e);
+    }
+  }
+
   render() {
     if (this.state.hasError) {
       return (

src/common/services/provideServices.js

@@ -7,6 +7,7 @@ import ErrorHandler from '../ErrorHandler';
 
 const provideServices = (bottle, connect, withRouter) => {
   bottle.constant('window', global.window);
+  bottle.constant('console', global.console);
 
   bottle.serviceFactory('ScrollToTop', ScrollToTop, 'window');
   bottle.decorator('ScrollToTop', withRouter);
@@ -31,7 +32,7 @@ const provideServices = (bottle, connect, withRouter) => {
 
   bottle.serviceFactory('AsideMenu', AsideMenu, 'DeleteServerButton');
 
-  bottle.serviceFactory('ErrorHandler', ErrorHandler, 'window');
+  bottle.serviceFactory('ErrorHandler', ErrorHandler, 'window', 'console');
 };
 
 export default provideServices;

src/visits/ShortUrlVisits.js

@@ -76,6 +76,7 @@ const ShortUrlVisits = ({ processStatsFromVisits }) => class ShortUrlVisits exte
       const { os, browsers, referrers, countries, cities, citiesForMap } = processStatsFromVisits(
         { id: this.memoizationId, visits }
       );
+      const mapLocations = values(citiesForMap);
 
       return (
         <div className="row">
@@ -109,14 +110,9 @@ const ShortUrlVisits = ({ processStatsFromVisits }) => class ShortUrlVisits exte
             <SortableBarGraph
               stats={cities}
               title="Cities"
-              extraHeaderContent={[
-                () => (
-                  <OpenMapModalBtn
-                    modalTitle="Cities"
-                    locations={values(citiesForMap)}
-                  />
-                ),
-              ]}
+              extraHeaderContent={
+                [ () => mapLocations.length > 0 && <OpenMapModalBtn modalTitle="Cities" locations={mapLocations} /> ]
+              }
               sortingItems={{
                 name: 'City name',
                 amount: 'Visits amount',

test/common/ErrorHandler.test.js

@@ -9,10 +9,11 @@ describe('<ErrorHandler />', () => {
       reload: jest.fn(),
     },
   };
+  const console = { error: jest.fn() };
   let wrapper;
 
   beforeEach(() => {
-    const ErrorHandler = createErrorHandler(window);
+    const ErrorHandler = createErrorHandler(window, console);
 
     wrapper = shallow(<ErrorHandler children={<span>Foo</span>} />);
   });