Fixed reference error

package-lock.json

@@ -33,7 +33,7 @@
         "react-datepicker": "^4.7.0",
         "react-dom": "^18.0.0",
         "react-external-link": "^1.2.2",
-        "react-leaflet": "^3.2.5",
+        "react-leaflet": "^4.0.0-beta.0",
         "react-redux": "^8.0.0-beta.4",
         "react-router-dom": "^6.3.0",
         "react-swipeable": "^6.2.0",
@@ -67,7 +67,6 @@
         "@types/react-copy-to-clipboard": "^5.0.2",
         "@types/react-datepicker": "^4.3.4",
         "@types/react-dom": "^17.0.14",
-        "@types/react-leaflet": "^2.8.2",
         "@types/react-redux": "^7.1.23",
         "@types/react-tag-autocomplete": "^6.1.1",
         "@types/uuid": "^8.3.4",
@@ -3383,6 +3382,16 @@
         "url": "https://opencollective.com/popperjs"
       }
     },
+    "node_modules/@react-leaflet/core": {
+      "version": "2.0.0-beta.0",
+      "resolved": "https://registry.npmjs.org/@react-leaflet/core/-/core-2.0.0-beta.0.tgz",
+      "integrity": "sha512-hDk+9Y5vQ9rxkAR8hyvEymqOuPpQvOXTWanh1lW0YQVbsZnx+XMz2sBF0ExrWZm3l0LEKlpMD4VzbCrbDAIpBQ==",
+      "peerDependencies": {
+        "leaflet": "^1.7.1",
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      }
+    },
     "node_modules/@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -4904,16 +4913,6 @@
         "@types/react": "*"
       }
     },
-    "node_modules/@types/react-leaflet": {
-      "version": "2.8.2",
-      "resolved": "https://registry.npmjs.org/@types/react-leaflet/-/react-leaflet-2.8.2.tgz",
-      "integrity": "sha512-Iel8Vd1bSCD38Yhiqcmm/+9hjPEdd39LFE3tBMbOytq3QAQsC3LDrbo6ifoh8JbpqPbCsQPo9Wx5OELHixEShg==",
-      "dev": true,
-      "dependencies": {
-        "@types/leaflet": "*",
-        "@types/react": "*"
-      }
-    },
     "node_modules/@types/react-redux": {
       "version": "7.1.23",
       "resolved": "https://registry.npmjs.org/@types/react-redux/-/react-redux-7.1.23.tgz",
@@ -19449,26 +19448,16 @@
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
     "node_modules/react-leaflet": {
-      "version": "3.2.5",
+      "version": "4.0.0-beta.0",
-      "resolved": "https://registry.npmjs.org/react-leaflet/-/react-leaflet-3.2.5.tgz",
+      "resolved": "https://registry.npmjs.org/react-leaflet/-/react-leaflet-4.0.0-beta.0.tgz",
-      "integrity": "sha512-Z3KZ+4SijsRbbrt2I1a3ZDY6+V6Pm91eYTdxTN18G6IOkFRsJo1BuSPLFnyFrlF3WDjQFPEcTPkEgD1VEeAoBg==",
+      "integrity": "sha512-LCPSfqBOCvDcpXGAPhe5KrnO/rAmtWJ10SQG7FOLIErI+DU3rhhDfbao2/YPe+a1JJfvL4vODkp6Cf4jel0TBg==",
       "dependencies": {
-        "@react-leaflet/core": "^1.1.1"
+        "@react-leaflet/core": "^2.0.0-beta.0"
       },
       "peerDependencies": {
         "leaflet": "^1.7.1",
-        "react": "^17.0.1",
+        "react": "^18.0.0",
-        "react-dom": "^17.0.1"
+        "react-dom": "^18.0.0"
-      }
-    },
-    "node_modules/react-leaflet/node_modules/@react-leaflet/core": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@react-leaflet/core/-/core-1.1.1.tgz",
-      "integrity": "sha512-7PGLWa9MZ5x/cWy8EH2VzI4T8q5WpuHbixzCDXqixP/WyqwIrg5NDUPgYuFnB4IEIZF+6nA265mYzswFo/h1Pw==",
-      "peerDependencies": {
-        "leaflet": "^1.7.1",
-        "react": "^17.0.1",
-        "react-dom": "^17.0.1"
       }
     },
     "node_modules/react-redux": {
@@ -29354,6 +29343,12 @@
       "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.2.tgz",
       "integrity": "sha512-92FRmppjjqz29VMJ2dn+xdyXZBrMlE42AV6Kq6BwjWV7CNUW1hs2FtxSNLQE+gJhaZ6AAmYuO9y8dshhcBl7vA=="
     },
+    "@react-leaflet/core": {
+      "version": "2.0.0-beta.0",
+      "resolved": "https://registry.npmjs.org/@react-leaflet/core/-/core-2.0.0-beta.0.tgz",
+      "integrity": "sha512-hDk+9Y5vQ9rxkAR8hyvEymqOuPpQvOXTWanh1lW0YQVbsZnx+XMz2sBF0ExrWZm3l0LEKlpMD4VzbCrbDAIpBQ==",
+      "requires": {}
+    },
     "@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -30535,16 +30530,6 @@
         "@types/react": "*"
       }
     },
-    "@types/react-leaflet": {
-      "version": "2.8.2",
-      "resolved": "https://registry.npmjs.org/@types/react-leaflet/-/react-leaflet-2.8.2.tgz",
-      "integrity": "sha512-Iel8Vd1bSCD38Yhiqcmm/+9hjPEdd39LFE3tBMbOytq3QAQsC3LDrbo6ifoh8JbpqPbCsQPo9Wx5OELHixEShg==",
-      "dev": true,
-      "requires": {
-        "@types/leaflet": "*",
-        "@types/react": "*"
-      }
-    },
     "@types/react-redux": {
       "version": "7.1.23",
       "resolved": "https://registry.npmjs.org/@types/react-redux/-/react-redux-7.1.23.tgz",
@@ -41542,19 +41527,11 @@
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
     "react-leaflet": {
-      "version": "3.2.5",
+      "version": "4.0.0-beta.0",
-      "resolved": "https://registry.npmjs.org/react-leaflet/-/react-leaflet-3.2.5.tgz",
+      "resolved": "https://registry.npmjs.org/react-leaflet/-/react-leaflet-4.0.0-beta.0.tgz",
-      "integrity": "sha512-Z3KZ+4SijsRbbrt2I1a3ZDY6+V6Pm91eYTdxTN18G6IOkFRsJo1BuSPLFnyFrlF3WDjQFPEcTPkEgD1VEeAoBg==",
+      "integrity": "sha512-LCPSfqBOCvDcpXGAPhe5KrnO/rAmtWJ10SQG7FOLIErI+DU3rhhDfbao2/YPe+a1JJfvL4vODkp6Cf4jel0TBg==",
       "requires": {
-        "@react-leaflet/core": "^1.1.1"
+        "@react-leaflet/core": "^2.0.0-beta.0"
-      },
-      "dependencies": {
-        "@react-leaflet/core": {
-          "version": "1.1.1",
-          "resolved": "https://registry.npmjs.org/@react-leaflet/core/-/core-1.1.1.tgz",
-          "integrity": "sha512-7PGLWa9MZ5x/cWy8EH2VzI4T8q5WpuHbixzCDXqixP/WyqwIrg5NDUPgYuFnB4IEIZF+6nA265mYzswFo/h1Pw==",
-          "requires": {}
-        }
       }
     },
     "react-redux": {

package.json

@@ -49,7 +49,7 @@
     "react-datepicker": "^4.7.0",
     "react-dom": "^18.0.0",
     "react-external-link": "^1.2.2",
-    "react-leaflet": "^3.2.5",
+    "react-leaflet": "^4.0.0-beta.0",
     "react-redux": "^8.0.0-beta.4",
     "react-router-dom": "^6.3.0",
     "react-swipeable": "^6.2.0",
@@ -83,7 +83,6 @@
     "@types/react-copy-to-clipboard": "^5.0.2",
     "@types/react-datepicker": "^4.3.4",
     "@types/react-dom": "^17.0.14",
-    "@types/react-leaflet": "^2.8.2",
     "@types/react-redux": "^7.1.23",
     "@types/react-tag-autocomplete": "^6.1.1",
     "@types/uuid": "^8.3.4",

src/utils/BooleanControl.tsx

@@ -1,7 +1,7 @@
-import { ChangeEvent, FC, useRef } from 'react';
+import { ChangeEvent, FC } from 'react';
 import classNames from 'classnames';
-import { v4 as uuid } from 'uuid';
 import { identity } from 'ramda';
+import { useDomId } from './helpers/hooks';
 
 export interface BooleanControlProps {
   checked?: boolean;
@@ -17,7 +17,7 @@ interface BooleanControlWithTypeProps extends BooleanControlProps {
 const BooleanControl: FC<BooleanControlWithTypeProps> = (
   { checked = false, onChange = identity, className, children, type, inline = false },
 ) => {
-  const { current: id } = useRef(uuid());
+  const id = useDomId();
   const onChecked = (e: ChangeEvent<HTMLInputElement>) => onChange(e.target.checked, e);
   const typeClasses = {
     'form-switch': type === 'switch',

src/utils/helpers/hooks.ts

@@ -2,6 +2,7 @@ import { useState, useRef, EffectCallback, DependencyList, useEffect } from 'rea
 import { useSwipeable as useReactSwipeable } from 'react-swipeable';
 import { useNavigate } from 'react-router-dom';
 import { parseQuery, stringifyQuery } from './query';
+import { v4 as uuid } from 'uuid';
 
 const DEFAULT_DELAY = 2000;
 
@@ -82,3 +83,8 @@ export const useGoBack = () => {
 
   return () => navigate(-1);
 };
+
+export const useDomId = (): string => {
+  const { current: id } = useRef(`dom-${uuid()}`);
+  return id;
+};

src/visits/helpers/OpenMapModalBtn.tsx

@@ -1,8 +1,8 @@
-import { useRef, useState } from 'react';
+import { useState } from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faMapMarkedAlt as mapIcon } from '@fortawesome/free-solid-svg-icons';
 import { Button, Dropdown, DropdownItem, DropdownMenu, UncontrolledTooltip } from 'reactstrap';
-import { useToggle } from '../../utils/helpers/hooks';
+import { useDomId, useToggle } from '../../utils/helpers/hooks';
 import { CityStats } from '../types';
 import MapModal from './MapModal';
 import './OpenMapModalBtn.scss';
@@ -17,7 +17,7 @@ const OpenMapModalBtn = ({ modalTitle, activeCities, locations = [] }: OpenMapMo
   const [mapIsOpened, , openMap, closeMap] = useToggle();
   const [dropdownIsOpened, toggleDropdown, openDropdown] = useToggle();
   const [locationsToShow, setLocationsToShow] = useState<CityStats[]>([]);
-  const buttonRef = useRef<HTMLElement>();
+  const id = useDomId();
 
   const filterLocations = (cities: CityStats[]) => cities.filter(({ cityName }) => activeCities.includes(cityName));
   const onClick = () => {
@@ -37,10 +37,10 @@ const OpenMapModalBtn = ({ modalTitle, activeCities, locations = [] }: OpenMapMo
 
   return (
     <>
-      <Button color="link" className="open-map-modal-btn__btn" ref={buttonRef as any} onClick={onClick}>
+      <Button color="link" className="open-map-modal-btn__btn" id={id} onClick={onClick}>
         <FontAwesomeIcon icon={mapIcon} />
       </Button>
-      <UncontrolledTooltip placement="left" target={(() => buttonRef.current) as any}>Show in map</UncontrolledTooltip>
+      <UncontrolledTooltip placement="left" target={id}>Show in map</UncontrolledTooltip>
       <Dropdown isOpen={dropdownIsOpened} toggle={toggleDropdown} inNavbar>
         <DropdownMenu end>
           <DropdownItem onClick={openMapWithLocations(false)}>Show all locations</DropdownItem>

tsconfig.json

@@ -5,7 +5,7 @@
     "jsx": "preserve",
     "lib": [
       "dom",
-      "es2019"
+      "es2021"
     ],
     "module": "esnext",
     "moduleResolution": "node",
@@ -17,7 +17,7 @@
     "skipLibCheck": true,
     "sourceMap": true,
     "strict": true,
-    "target": "es2019",
+    "target": "es2021",
     "forceConsistentCasingInFileNames": true,
     "esModuleInterop": true,
     "resolveJsonModule": true,