chore(deps): update to react 18

package.json

@@ -26,10 +26,10 @@
     "lodash": "^4.17.21",
     "mapbox-gl-style-switcher": "^1.0.11",
     "maplibre-gl": "^2.4.0",
-    "react": "^17.0.2",
+    "react": "^18.2.0",
     "react-autocomplete-hint": "^2.0.0",
     "react-color": "^2.19.3",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.2.0",
     "react-i18next": "^14.0.1",
     "react-map-gl": "~7.1.7",
     "react-markdown": "^8.0.7",
@@ -80,9 +80,9 @@
     "@types/mapbox-gl": "^2.7.19",
     "@types/mapbox__mapbox-gl-draw": "~1.3.3",
     "@types/node": "^20.11.6",
-    "@types/react": "^17.0.75",
+    "@types/react": "^18.2.48",
     "@types/react-color": "^3.0.11",
-    "@types/react-dom": "^17.0.25",
+    "@types/react-dom": "^18.2.18",
     "@types/react-router-dom": "^5.3.3",
     "husky": "^8.0.3",
     "lint-staged": "^15.2.0",
@@ -95,7 +95,9 @@
   "resolutions": {
     "@svgr/webpack": "^6.5.1",
     "json5": "^2.2.3",
-    "semver": "^5.7.2"
+    "semver": "^5.7.2",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.18"
   },
   "packageManager": "[email protected]"
 }

src/index.tsx

@@ -1,15 +1,17 @@
 import React from "react";
-import ReactDOM from "react-dom";
+import { createRoot } from 'react-dom/client';
 import App from "./App";
 import './i18n';
 import reportWebVitals from "./reportWebVitals";
 import * as serviceWorkerRegistration from "./serviceWorkerRegistration";
 
-ReactDOM.render(
+const container = document.getElementById('root');
+
+const root = createRoot(container!);
+root.render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>,
-  document.getElementById("root")
+  </React.StrictMode>
 );
 
 // If you want your app to work offline and load faster, you can change

src/utils/Notification.tsx

@@ -2,7 +2,7 @@ import classNames from "classnames";
 import { memo, useState } from "react";
 import { useTimeout } from 'usehooks-ts';
 interface NotificationProps {
-    children: React.ReactChild | React.ReactChildren
+    children: React.ReactNode;
     type: NotificationType;
     timeout: number | null;
 }

src/views/map/FeatureDetails.tsx

@@ -3,7 +3,7 @@ import { LineString, point } from "@turf/helpers";
 import { BabsIcon, IconGroups, Others, Schaeden } from "components/BabsIcons";
 import { Feature, GeoJsonProperties } from "geojson";
 import { isEmpty, isUndefined, omitBy } from "lodash";
-import { memo, useCallback, useEffect, useState } from "react";
+import { SetStateAction, memo, useCallback, useEffect, useState } from "react";
 import { CirclePicker } from "react-color";
 import { useMap } from "react-map-gl/maplibre";
 
@@ -66,7 +66,7 @@ function FeatureDetail(props: { onUpdate: (e: any) => void, feature: Feature | u
         selectableTypes = ZoneTypes;
     }
 
-    const onTypeChange = useCallback((e) => {
+    const onTypeChange = useCallback((e: { target: { value: SetStateAction<string>; }; }) => {
         setKind(e.target.value);
         let t = selectableTypes && Object.values(selectableTypes).find(a => a.name === e.target.value);
         if (t && t.icon) {

src/views/map/Map.tsx

@@ -4,7 +4,7 @@ import "@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css";
 
 import DefaultMaker from 'assets/marker.svg';
 import { AllIcons, LinePatterns, ZonePatterns } from 'components/BabsIcons';
-import { Feature, FeatureCollection } from 'geojson';
+import { Feature, FeatureCollection, Geometry, GeoJsonProperties } from 'geojson';
 import hat from 'hat';
 import { isEqual, unionBy } from 'lodash';
 import isEmpty from 'lodash/isEmpty';
@@ -48,7 +48,7 @@ function MapComponent() {
     // const [features, setFeatures] = useState<FeatureCollection>({ "type": "FeatureCollection", "features": [] });
 
 
-    const onCreate = useCallback(e => {
+    const onCreate = useCallback((e: { features: Feature<Geometry, GeoJsonProperties>[]; }) => {
         setFeatures(curFeatureCollection => {
             console.log("[update]: current features created", e)
 
@@ -67,7 +67,7 @@ function MapComponent() {
         });
     }, [setFeatures]);
 
-    const onUpdate = useCallback(e => {
+    const onUpdate = useCallback((e: { features: Feature<Geometry, GeoJsonProperties>[]; }) => {
         setFeatures(curFeatureCollection => {
             // an update creates a deleted feature with the old properties and adds a new one with the new properties
             const newFeatureCollection = { ...curFeatureCollection };
@@ -113,7 +113,7 @@ function MapComponent() {
         });
     }, [setFeatures]);
 
-    const onDelete = useCallback(e => {
+    const onDelete = useCallback((e: { features: Feature<Geometry, GeoJsonProperties>[]; }) => {
         setFeatures(curFeatureCollection => {
             console.log("[delete]: current features updated", e)
 
@@ -135,7 +135,7 @@ function MapComponent() {
         });
     }, [setFeatures]);
 
-    const onCombine = useCallback(e => {
+    const onCombine = useCallback((e: { createdFeatures: Feature<Geometry, GeoJsonProperties>[]; deletedFeatures: Feature<Geometry, GeoJsonProperties>[]; }) => {
         console.log("onCombine", e);
         setFeatures(curFeatureCollection => {
             const createdFeatures: Feature[] = e.createdFeatures;
@@ -152,7 +152,7 @@ function MapComponent() {
     }, [setFeatures]);
 
 
-    const onSelectionChange = useCallback(e => {
+    const onSelectionChange = useCallback((e: { features: Feature<Geometry, GeoJsonProperties>[]; }) => {
         const features: Feature[] = e.features;
         if (features.length === 1) {
             setSelectedFeature(features[0].id);
@@ -266,7 +266,6 @@ function MapComponent() {
     );
 }
 
-
 const MemoMap = memo(MapComponent);
 
 export { MemoMap as Map };

src/views/map/controls/FeatureDetailControl.tsx

@@ -1,10 +1,10 @@
 import { Feature } from 'geojson';
 import 'maplibre-gl/dist/maplibre-gl.css';
-import { memo, ReactChild, ReactChildren } from 'react';
+import { memo, ReactNode } from 'react';
 
 interface FeatureDetailControlPanelProps {
     feature: Feature | undefined;
-    children: ReactChild | ReactChildren;
+    children: ReactNode;
 }
 
 function FeatureDetailControlPanel(props: FeatureDetailControlPanelProps) {

yarn.lock

@@ -3638,16 +3638,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react-dom@npm:^17.0.25":
-  version: 17.0.25
-  resolution: "@types/react-dom@npm:17.0.25"
-  dependencies:
-    "@types/react": ^17
-  checksum: d1e582682478e0848c8d54ea3e89d02047bac6d916266b85ce63731b06987575919653ea7159d98fda47ade3362b8c4d5796831549564b83088e7aa9ce8b60ed
-  languageName: node
-  linkType: hard
-
-"@types/react-dom@npm:^18.0.0":
+"@types/react-dom@npm:^18.2.18":
   version: 18.2.18
   resolution: "@types/react-dom@npm:18.2.18"
   dependencies:
@@ -3677,36 +3668,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react@npm:*":
-  version: 18.0.25
-  resolution: "@types/react@npm:18.0.25"
-  dependencies:
-    "@types/prop-types": "*"
-    "@types/scheduler": "*"
-    csstype: ^3.0.2
-  checksum: 231d658c45abdef044a716b4502774f1585d8336d73b2f5bd68f181acbfc874b7a457686ecd29b415b43ed0922c309bab7e2cf96832d188a3f4f1b02f2af760a
-  languageName: node
-  linkType: hard
-
-"@types/react@npm:^17":
-  version: 17.0.60
-  resolution: "@types/react@npm:17.0.60"
-  dependencies:
-    "@types/prop-types": "*"
-    "@types/scheduler": "*"
-    csstype: ^3.0.2
-  checksum: 8565e53d6ad83cd5f606fa66f5f9d8d0e5323a0103114a0292ae8f97c17ce4a7dfa15b847c54eb0a2c41c03df7fd64ba1d5bcef91ee0c177e55315e52e334463
-  languageName: node
-  linkType: hard
-
-"@types/react@npm:^17.0.75":
-  version: 17.0.75
-  resolution: "@types/react@npm:17.0.75"
+"@types/react@npm:^18.2.0":
+  version: 18.2.48
+  resolution: "@types/react@npm:18.2.48"
   dependencies:
     "@types/prop-types": "*"
     "@types/scheduler": "*"
     csstype: ^3.0.2
-  checksum: aa503d1643049043fa491966cfc23996a56fb69c2018162ac97fb9ed89c9f26b906afd54ba2a81539f0e6c3487b4fa212d24c881a3efbfb8208a15cd45779e0a
+  checksum: c9ca43ed2995389b7e09492c24e6f911a8439bb8276dd17cc66a2fbebbf0b42daf7b2ad177043256533607c2ca644d7d928fdfce37a67af1f8646d2bac988900
   languageName: node
   linkType: hard
 
@@ -12661,16 +12630,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-dom@npm:^17.0.2":
-  version: 17.0.2
-  resolution: "react-dom@npm:17.0.2"
+"react-dom@npm:^18.2.0":
+  version: 18.2.0
+  resolution: "react-dom@npm:18.2.0"
   dependencies:
     loose-envify: ^1.1.0
-    object-assign: ^4.1.1
-    scheduler: ^0.20.2
+    scheduler: ^0.23.0
   peerDependencies:
-    react: 17.0.2
-  checksum: 1c1eaa3bca7c7228d24b70932e3d7c99e70d1d04e13bb0843bbf321582bc25d7961d6b8a6978a58a598af2af496d1cedcfb1bf65f6b0960a0a8161cb8dab743c
+    react: ^18.2.0
+  checksum: 7d323310bea3a91be2965f9468d552f201b1c27891e45ddc2d6b8f717680c95a75ae0bc1e3f5cf41472446a2589a75aed4483aee8169287909fcd59ad149e8cc
   languageName: node
   linkType: hard
 
@@ -12864,13 +12832,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react@npm:^17.0.2":
-  version: 17.0.2
-  resolution: "react@npm:17.0.2"
+"react@npm:^18.2.0":
+  version: 18.2.0
+  resolution: "react@npm:18.2.0"
   dependencies:
     loose-envify: ^1.1.0
-    object-assign: ^4.1.1
-  checksum: b254cc17ce3011788330f7bbf383ab653c6848902d7936a87b09d835d091e3f295f7e9dd1597c6daac5dc80f90e778c8230218ba8ad599f74adcc11e33b9d61b
+  checksum: 88e38092da8839b830cda6feef2e8505dec8ace60579e46aa5490fc3dc9bba0bd50336507dc166f43e3afc1c42939c09fe33b25fae889d6f402721dcd78fca1b
   languageName: node
   linkType: hard
 
@@ -13445,13 +13412,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"scheduler@npm:^0.20.2":
-  version: 0.20.2
-  resolution: "scheduler@npm:0.20.2"
+"scheduler@npm:^0.23.0":
+  version: 0.23.0
+  resolution: "scheduler@npm:0.23.0"
   dependencies:
     loose-envify: ^1.1.0
-    object-assign: ^4.1.1
-  checksum: c4b35cf967c8f0d3e65753252d0f260271f81a81e427241295c5a7b783abf4ea9e905f22f815ab66676f5313be0a25f47be582254db8f9241b259213e999b8fc
+  checksum: d79192eeaa12abef860c195ea45d37cbf2bbf5f66e3c4dcd16f54a7da53b17788a70d109ee3d3dde1a0fd50e6a8fc171f4300356c5aee4fc0171de526bf35f8a
   languageName: node
   linkType: hard
 
@@ -13703,9 +13669,9 @@ __metadata:
     "@types/mapbox-gl": ^2.7.19
     "@types/mapbox__mapbox-gl-draw": ~1.3.3
     "@types/node": ^20.11.6
-    "@types/react": ^17.0.75
+    "@types/react": ^18.2.48
     "@types/react-color": ^3.0.11
-    "@types/react-dom": ^17.0.25
+    "@types/react-dom": ^18.2.18
     "@types/react-router-dom": ^5.3.3
     "@watergis/maplibre-gl-export": ~2.0.1
     bulma: ^0.9.4
@@ -13722,10 +13688,10 @@ __metadata:
     mapbox-gl-style-switcher: ^1.0.11
     maplibre-gl: ^2.4.0
     prettier: ^3.2.4
-    react: ^17.0.2
+    react: ^18.2.0
     react-autocomplete-hint: ^2.0.0
     react-color: ^2.19.3
-    react-dom: ^17.0.2
+    react-dom: ^18.2.0
     react-i18next: ^14.0.1
     react-map-gl: ~7.1.7
     react-markdown: ^8.0.7