import React from 'react';

import { maxZoom } from '../constants';

function flyAndOpen(marker, event) {
  const { map } = marker;
  map.once('moveend zoomend', (_) => marker.openPopup());
  map.flyTo(marker._latlng, maxZoom);
}

function Statistics({ statistics }) {
  return (
    <>
      {Object.keys(statistics).length == 0 && (
        <p>
          No statistics to show. Click on <i>Show nodes</i> to get some
          statistics.
        </p>
      )}
      <table className="table table-striped">
        <tbody>
          {Object.keys(statistics).map((key) => (
            <tr key={key}>
              <th scope="row">{statistics[key].label}</th>
              <td>
                <button
                  className="btn btn-link p-0"
                  type="button"
                  onClick={flyAndOpen.bind(null, statistics[key].marker)}
                >
                  {statistics[key].osmid}
                </button>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </>
  );
}

export default Statistics;

@@ -377,34 +377,15 @@
 ow. 
-Click on %3Ci%3EShow nodes%3C/i%3E
+Zoom in
  to 
@@ -392,26 +392,16 @@
 get some
-%0A         
  statist

Update 'No statistics to show' message