Updated more production dependencies

src/common/MenuLayout.tsx

@@ -1,6 +1,6 @@
 import { FC, useEffect } from 'react';
 import { Route, Switch } from 'react-router-dom';
-import { EventData, Swipeable } from 'react-swipeable';
+import { useSwipeable } from 'react-swipeable';
 import { faBars as burgerIcon } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import classNames from 'classnames';
@@ -33,7 +33,7 @@ const MenuLayout = (
   const burgerClasses = classNames('menu-layout__burger-icon', {
     'menu-layout__burger-icon--active': sidebarVisible,
   });
-  const swipeMenuIfNoModalExists = (callback: () => void) => (e: EventData) => {
+  const swipeMenuIfNoModalExists = (callback: () => void) => (e: any) => {
     const swippedOnVisitsTable = (e.event.composedPath() as HTMLElement[]).some(
       ({ classList }) => classList?.contains('visits-table'),
     );
@@ -44,17 +44,17 @@ const MenuLayout = (
 
     callback();
   };
+  const swipeableProps = useSwipeable({
+    delta: 40,
+    onSwipedLeft: swipeMenuIfNoModalExists(hideSidebar),
+    onSwipedRight: swipeMenuIfNoModalExists(showSidebar),
+  });
 
   return (
     <>
       <FontAwesomeIcon icon={burgerIcon} className={burgerClasses} onClick={toggleSidebar} />
 
-      <Swipeable
-        delta={40}
-        className="menu-layout__swipeable"
-        onSwipedLeft={swipeMenuIfNoModalExists(hideSidebar)}
-        onSwipedRight={swipeMenuIfNoModalExists(showSidebar)}
-      >
+      <div {...swipeableProps} className="menu-layout__swipeable">
         <div className="row menu-layout__swipeable-inner">
           <AsideMenu className="col-lg-2 col-md-3" selectedServer={selectedServer} showOnMobile={sidebarVisible} />
           <div className="col-lg-10 offset-lg-2 col-md-9 offset-md-3" onClick={() => hideSidebar()}>
@@ -72,7 +72,7 @@ const MenuLayout = (
             </div>
           </div>
         </div>
-      </Swipeable>
+      </div>
     </>
   );
 }, ServerError);

src/visits/helpers/MapModal.tsx

@@ -1,6 +1,6 @@
 import { FC } from 'react';
 import { Modal, ModalBody } from 'reactstrap';
-import { Map, TileLayer, Marker, Popup } from 'react-leaflet';
+import { MapContainer, TileLayer, Marker, Popup, MapContainerProps } from 'react-leaflet';
 import { prop } from 'ramda';
 import { CityStats } from '../types';
 import './MapModal.scss';
@@ -19,7 +19,7 @@ const OpenStreetMapTile: FC = () => (
   />
 );
 
-const calculateMapProps = (locations: CityStats[]): any => {
+const calculateMapProps = (locations: CityStats[]): MapContainerProps => {
   if (locations.length === 0) {
     return {};
   }
@@ -42,14 +42,14 @@ const MapModal = ({ toggle, isOpen, title, locations = [] }: MapModalProps) => (
         {title}
         <button type="button" className="close" onClick={toggle}>&times;</button>
       </h3>
-      <Map {...calculateMapProps(locations)}>
+      <MapContainer {...calculateMapProps(locations)}>
         <OpenStreetMapTile />
         {locations.map(({ cityName, latLong, count }, index) => (
           <Marker key={index} position={latLong}>
             <Popup><b>{count}</b> visit{count > 1 ? 's' : ''} from <b>{cityName}</b></Popup>
           </Marker>
         ))}
-      </Map>
+      </MapContainer>
     </ModalBody>
   </Modal>
 );