Migrated first visits helper components to TS

src/visits/VisitsStats.js

@@ -14,6 +14,7 @@ import GraphCard from './helpers/GraphCard';
 import LineChartCard from './helpers/LineChartCard';
 import VisitsTable from './VisitsTable';
 import { VisitsInfoType } from './types';
+import OpenMapModalBtn from './helpers/OpenMapModalBtn';
 
 const propTypes = {
   children: PropTypes.node,
@@ -35,7 +36,7 @@ const highlightedVisitsToStats = (highlightedVisits, prop) => highlightedVisits.
 const format = formatDate();
 let selectedBar;
 
-const VisitsStats = ({ processStatsFromVisits, normalizeVisits }, OpenMapModalBtn) => {
+const VisitsStats = ({ processStatsFromVisits, normalizeVisits }) => {
   const VisitsStatsComp = ({ children, visitsInfo, getVisits, cancelGetVisits, matchMedia = window.matchMedia }) => {
     const [ startDate, setStartDate ] = useState(undefined);
     const [ endDate, setEndDate ] = useState(undefined);

src/visits/helpers/MapModal.scss

@@ -1,7 +1,7 @@
 @import '../../utils/base';
 @import '../../utils/mixins/fit-with-margin';
 
-.map-modal__modal {
+.map-modal__modal.map-modal__modal {
   @media (min-width: $mdMin) {
     $margin: 20px;
 
@@ -15,11 +15,11 @@
   }
 }
 
-.map-modal__modal-content {
+.map-modal__modal-content.map-modal__modal-content {
   height: 100%;
 }
 
-.map-modal__modal-title {
+.map-modal__modal-title.map-modal__modal-title {
   position: absolute;
   width: 100%;
   z-index: 1001;
@@ -29,17 +29,17 @@
   background: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
 }
 
-.map-modal__modal-body {
+.map-modal__modal-body.map-modal__modal-body {
   padding: 0;
   display: flex;
   overflow: hidden;
 }
 
-.map-modal__modal .leaflet-container {
+.map-modal__modal.map-modal__modal .leaflet-container.leaflet-container {
   flex: 1 1 auto;
   border-radius: .3rem;
 }
 
-.map-modal__modal .leaflet-top .leaflet-control {
+.map-modal__modal.map-modal__modal .leaflet-top.leaflet-top .leaflet-control.leaflet-control {
   margin-top: 60px;
 }

src/visits/helpers/MapModal.tsx

@@ -1,32 +1,25 @@
-import React from 'react';
+import React, { FC } from 'react';
 import { Modal, ModalBody } from 'reactstrap';
-import { Map, TileLayer, Marker, Popup } from 'react-leaflet';
+import { Map, TileLayer, Marker, Popup, MapProps } from 'react-leaflet';
 import { prop } from 'ramda';
-import * as PropTypes from 'prop-types';
+import { CityStats } from '../types';
 import './MapModal.scss';
 
-const propTypes = {
-  toggle: PropTypes.func,
-  isOpen: PropTypes.bool,
-  title: PropTypes.string,
-  locations: PropTypes.arrayOf(PropTypes.shape({
-    cityName: PropTypes.string.isRequired,
-    latLong: PropTypes.arrayOf(PropTypes.number).isRequired,
-    count: PropTypes.number.isRequired,
-  })),
-};
-const defaultProps = {
-  locations: [],
-};
+interface MapModalProps {
+  toggle: () => void;
+  isOpen: boolean;
+  title: string;
+  locations?: CityStats[];
+}
 
-const OpenStreetMapTile = () => (
+const OpenStreetMapTile: FC = () => (
   <TileLayer
     attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
     url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
   />
 );
 
-const calculateMapProps = (locations) => {
+const calculateMapProps = (locations: CityStats[]): Partial<MapProps> => {
   if (locations.length === 0) {
     return {};
   }
@@ -39,10 +32,10 @@ const calculateMapProps = (locations) => {
   // When that happens, we use zoom and center as a workaround
   const [{ latLong: center }] = locations;
 
-  return { zoom: '10', center };
+  return { zoom: 10, center };
 };
 
-const MapModal = ({ toggle, isOpen, title, locations }) => (
+const MapModal = ({ toggle, isOpen, title, locations = [] }: MapModalProps) => (
   <Modal toggle={toggle} isOpen={isOpen} className="map-modal__modal" contentClassName="map-modal__modal-content">
     <ModalBody className="map-modal__modal-body">
       <h3 className="map-modal__modal-title">
@@ -61,7 +54,4 @@ const MapModal = ({ toggle, isOpen, title, locations }) => (
   </Modal>
 );
 
-MapModal.propTypes = propTypes;
-MapModal.defaultProps = defaultProps;
-
 export default MapModal;

src/visits/helpers/OpenMapModalBtn.js

@@ -1,60 +0,0 @@
-import React, { useState } from 'react';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faMapMarkedAlt as mapIcon } from '@fortawesome/free-solid-svg-icons';
-import { Dropdown, DropdownItem, DropdownMenu, UncontrolledTooltip } from 'reactstrap';
-import * as PropTypes from 'prop-types';
-import { useToggle } from '../../utils/helpers/hooks';
-import './OpenMapModalBtn.scss';
-
-const propTypes = {
-  modalTitle: PropTypes.string.isRequired,
-  locations: PropTypes.arrayOf(PropTypes.object),
-  activeCities: PropTypes.arrayOf(PropTypes.string),
-};
-
-const OpenMapModalBtn = (MapModal) => {
-  const OpenMapModalBtn = ({ modalTitle, locations = [], activeCities }) => {
-    const [ mapIsOpened, , openMap, closeMap ] = useToggle();
-    const [ dropdownIsOpened, toggleDropdown, openDropdown ] = useToggle();
-    const [ locationsToShow, setLocationsToShow ] = useState([]);
-
-    const buttonRef = React.createRef();
-    const filterLocations = (locations) => locations.filter(({ cityName }) => activeCities.includes(cityName));
-    const onClick = () => {
-      if (!activeCities) {
-        setLocationsToShow(locations);
-        openMap();
-
-        return;
-      }
-
-      openDropdown();
-    };
-    const openMapWithLocations = (filtered) => () => {
-      setLocationsToShow(filtered ? filterLocations(locations) : locations);
-      openMap();
-    };
-
-    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={toggleDropdown} 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={closeMap} isOpen={mapIsOpened} title={modalTitle} locations={locationsToShow} />
-      </React.Fragment>
-    );
-  };
-
-  OpenMapModalBtn.propTypes = propTypes;
-
-  return OpenMapModalBtn;
-};
-
-export default OpenMapModalBtn;

src/visits/helpers/OpenMapModalBtn.tsx

@@ -0,0 +1,55 @@
+import React, { useRef, useState } from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faMapMarkedAlt as mapIcon } from '@fortawesome/free-solid-svg-icons';
+import { Dropdown, DropdownItem, DropdownMenu, UncontrolledTooltip } from 'reactstrap';
+import { useToggle } from '../../utils/helpers/hooks';
+import { CityStats } from '../types';
+import MapModal from './MapModal';
+import './OpenMapModalBtn.scss';
+
+interface OpenMapModalBtnProps {
+  modalTitle: string;
+  activeCities: string[];
+  locations?: CityStats[];
+}
+
+const OpenMapModalBtn = ({ modalTitle, activeCities, locations = [] }: OpenMapModalBtnProps) => {
+  const [ mapIsOpened, , openMap, closeMap ] = useToggle();
+  const [ dropdownIsOpened, toggleDropdown, openDropdown ] = useToggle();
+  const [ locationsToShow, setLocationsToShow ] = useState<CityStats[]>([]);
+  const buttonRef = useRef<HTMLElement>();
+
+  const filterLocations = (cities: CityStats[]) => cities.filter(({ cityName }) => activeCities.includes(cityName));
+  const onClick = () => {
+    if (!activeCities) {
+      setLocationsToShow(locations);
+      openMap();
+
+      return;
+    }
+
+    openDropdown();
+  };
+  const openMapWithLocations = (filtered: boolean) => () => {
+    setLocationsToShow(filtered ? filterLocations(locations) : locations);
+    openMap();
+  };
+
+  return (
+    <React.Fragment>
+      <button className="btn btn-link open-map-modal-btn__btn" ref={buttonRef as any} onClick={onClick}>
+        <FontAwesomeIcon icon={mapIcon} />
+      </button>
+      <UncontrolledTooltip placement="left" target={(() => buttonRef.current) as any}>Show in map</UncontrolledTooltip>
+      <Dropdown isOpen={dropdownIsOpened} toggle={toggleDropdown} 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={closeMap} isOpen={mapIsOpened} title={modalTitle} locations={locationsToShow} />
+    </React.Fragment>
+  );
+};
+
+export default OpenMapModalBtn;

src/visits/services/provideServices.ts

@@ -2,7 +2,6 @@ import Bottle from 'bottlejs';
 import ShortUrlVisits from '../ShortUrlVisits';
 import { cancelGetShortUrlVisits, getShortUrlVisits } from '../reducers/shortUrlVisits';
 import { getShortUrlDetail } from '../reducers/shortUrlDetail';
-import OpenMapModalBtn from '../helpers/OpenMapModalBtn';
 import MapModal from '../helpers/MapModal';
 import VisitsStats from '../VisitsStats';
 import { createNewVisit } from '../reducers/visitCreation';
@@ -13,9 +12,8 @@ import * as visitsParser from './VisitsParser';
 
 const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
   // Components
-  bottle.serviceFactory('OpenMapModalBtn', OpenMapModalBtn, 'MapModal');
   bottle.serviceFactory('MapModal', () => MapModal);
-  bottle.serviceFactory('VisitsStats', VisitsStats, 'VisitsParser', 'OpenMapModalBtn');
+  bottle.serviceFactory('VisitsStats', VisitsStats, 'VisitsParser');
   bottle.serviceFactory('ShortUrlVisits', ShortUrlVisits, 'VisitsStats');
   bottle.decorator('ShortUrlVisits', connect(
     [ 'shortUrlVisits', 'shortUrlDetail', 'mercureInfo' ],