From 965e69c5251ca03ca4b8600ba1d845573ee39f49 Mon Sep 17 00:00:00 2001 From: Alejandro Celaya Date: Sun, 3 Apr 2022 10:10:10 +0200 Subject: [PATCH] Fixed reference error --- package-lock.json | 77 +++++++++----------------- package.json | 3 +- src/utils/BooleanControl.tsx | 6 +- src/utils/helpers/hooks.ts | 6 ++ src/visits/helpers/OpenMapModalBtn.tsx | 10 ++-- tsconfig.json | 4 +- 6 files changed, 44 insertions(+), 62 deletions(-) diff --git a/package-lock.json b/package-lock.json index 2bf2b6d6..7b765c94 100644 --- a/package-lock.json +++ b/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", - "resolved": "https://registry.npmjs.org/react-leaflet/-/react-leaflet-3.2.5.tgz", - "integrity": "sha512-Z3KZ+4SijsRbbrt2I1a3ZDY6+V6Pm91eYTdxTN18G6IOkFRsJo1BuSPLFnyFrlF3WDjQFPEcTPkEgD1VEeAoBg==", + "version": "4.0.0-beta.0", + "resolved": "https://registry.npmjs.org/react-leaflet/-/react-leaflet-4.0.0-beta.0.tgz", + "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-dom": "^17.0.1" - } - }, - "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" + "react": "^18.0.0", + "react-dom": "^18.0.0" } }, "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", - "resolved": "https://registry.npmjs.org/react-leaflet/-/react-leaflet-3.2.5.tgz", - "integrity": "sha512-Z3KZ+4SijsRbbrt2I1a3ZDY6+V6Pm91eYTdxTN18G6IOkFRsJo1BuSPLFnyFrlF3WDjQFPEcTPkEgD1VEeAoBg==", + "version": "4.0.0-beta.0", + "resolved": "https://registry.npmjs.org/react-leaflet/-/react-leaflet-4.0.0-beta.0.tgz", + "integrity": "sha512-LCPSfqBOCvDcpXGAPhe5KrnO/rAmtWJ10SQG7FOLIErI+DU3rhhDfbao2/YPe+a1JJfvL4vODkp6Cf4jel0TBg==", "requires": { - "@react-leaflet/core": "^1.1.1" - }, - "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-leaflet/core": "^2.0.0-beta.0" } }, "react-redux": { diff --git a/package.json b/package.json index fc0bc240..a158890b 100644 --- a/package.json +++ b/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", diff --git a/src/utils/BooleanControl.tsx b/src/utils/BooleanControl.tsx index 5b0be1bc..bc54dbfb 100644 --- a/src/utils/BooleanControl.tsx +++ b/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 = ( { checked = false, onChange = identity, className, children, type, inline = false }, ) => { - const { current: id } = useRef(uuid()); + const id = useDomId(); const onChecked = (e: ChangeEvent) => onChange(e.target.checked, e); const typeClasses = { 'form-switch': type === 'switch', diff --git a/src/utils/helpers/hooks.ts b/src/utils/helpers/hooks.ts index 7b816373..327b55ba 100644 --- a/src/utils/helpers/hooks.ts +++ b/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; +}; diff --git a/src/visits/helpers/OpenMapModalBtn.tsx b/src/visits/helpers/OpenMapModalBtn.tsx index d4a5f88a..1afc8583 100644 --- a/src/visits/helpers/OpenMapModalBtn.tsx +++ b/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([]); - const buttonRef = useRef(); + 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 ( <> - - buttonRef.current) as any}>Show in map + Show in map Show all locations diff --git a/tsconfig.json b/tsconfig.json index 655fb804..a822a90e 100644 --- a/tsconfig.json +++ b/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,