fix(deps): update dependencies and fix minor eslint errors

.env

@@ -3,4 +3,5 @@ REACT_APP_API_WS_URL="ws://localhost:4180/v1/graphql"
 
 REACT_APP_VERSION=${VERSION}
 REACT_APP_SHA_VERSION=${GIT_SHA}
-INLINE_RUNTIME_CHUNK=false
+INLINE_RUNTIME_CHUNK=false
+GENERATE_SOURCEMAP=false

.vscode/settings.json

@@ -3,7 +3,7 @@
     "editor.formatOnPaste": true,
     "prettier.printWidth": 70,
     "editor.codeActionsOnSave": {
-        "source.fixAll.eslint": true
+        "source.fixAll.eslint": "explicit"
     },
     "eslint.validate": [
         "javascript"

.yarnrc.yml

@@ -1,3 +1,7 @@
 nodeLinker: node-modules
 
+plugins:
+  - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
+    spec: "@yarnpkg/plugin-interactive-tools"
+
 yarnPath: .yarn/releases/yarn-3.6.0.cjs

package.json

@@ -3,53 +3,52 @@
   "version": "22.0.0",
   "private": true,
   "dependencies": {
-    "@apollo/client": "^3.8.9",
-    "@fortawesome/fontawesome-svg-core": "^6.4.2",
-    "@fortawesome/free-regular-svg-icons": "^6.4.2",
-    "@fortawesome/free-solid-svg-icons": "^6.4.2",
+    "@apollo/client": "^3.8.10",
+    "@fortawesome/fontawesome-svg-core": "^6.5.1",
+    "@fortawesome/free-regular-svg-icons": "^6.5.1",
+    "@fortawesome/free-solid-svg-icons": "^6.5.1",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@mapbox/mapbox-gl-draw": "~1.3.0",
     "@svgr/webpack": "^8.1.0",
-    "@testing-library/dom": "^9.3.3",
+    "@testing-library/dom": "^9.3.4",
     "@turf/bearing": "^6.5.0",
     "@turf/center": "^6.5.0",
     "@turf/helpers": "^6.5.0",
-    "@watergis/mapbox-gl-export": "^1.2.22",
+    "@watergis/maplibre-gl-export": "~2.0.1",
     "bulma": "^0.9.4",
-    "classnames": "^2.3.2",
+    "classnames": "^2.5.1",
     "dayjs": "^1.11.10",
+    "eslint": "^8.56.0",
     "graphql": "^16.8.1",
     "hat": "^0.0.3",
-    "i18next": "^23.2.11",
-    "i18next-browser-languagedetector": "^7.1.0",
+    "i18next": "^23.7.18",
+    "i18next-browser-languagedetector": "^7.2.0",
     "lodash": "^4.17.21",
-    "mapbox-gl": "npm:[email protected]",
     "mapbox-gl-style-switcher": "^1.0.11",
     "maplibre-gl": "^2.4.0",
     "react": "^17.0.2",
     "react-autocomplete-hint": "^2.0.0",
     "react-color": "^2.19.3",
     "react-dom": "^17.0.2",
-    "react-i18next": "^14.0.0",
-    "react-map-gl": "~7.0.25",
+    "react-i18next": "^14.0.1",
+    "react-map-gl": "~7.1.7",
     "react-markdown": "^8.0.7",
-    "react-router-dom": "^6.15.0",
-    "usehooks-ts": "^2.9.1",
-    "web-vitals": "^3.3.2"
+    "react-router-dom": "^6.21.3",
+    "usehooks-ts": "^2.9.5",
+    "web-vitals": "^3.5.1"
   },
   "scripts": {
     "analyze": "source-map-explorer 'build/static/js/*.js'",
     "start": "VERSION=dev GIT_SHA=HEAD react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject",
-    "lint": "eslint src"
+    "eject": "react-scripts eject"
   },
   "eslintConfig": {
     "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
+      "react-app"
+    ],
+    "overrides": []
   },
   "browserslist": {
     "production": [
@@ -72,27 +71,24 @@
     ]
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^6.1.3",
-    "@testing-library/react": "^12.1.3",
-    "@testing-library/user-event": "^14.5.1",
+    "@testing-library/jest-dom": "^6.2.1",
+    "@testing-library/react": "^12.1.5",
+    "@testing-library/user-event": "^14.5.2",
     "@types/hat": "^0.0.4",
-    "@types/jest": "^29.5.3",
-    "@types/lodash": "^4.14.198",
-    "@types/mapbox-gl": "^2.7.18",
-    "@types/mapbox__mapbox-gl-draw": "~1.3.1",
-    "@types/node": "^20.6.2",
-    "@types/react": "^17.0.39",
-    "@types/react-color": "^3.0.6",
-    "@types/react-dom": "^17.0.13",
+    "@types/jest": "^29.5.11",
+    "@types/lodash": "^4.14.202",
+    "@types/mapbox-gl": "^2.7.19",
+    "@types/mapbox__mapbox-gl-draw": "~1.3.3",
+    "@types/node": "^20.11.5",
+    "@types/react": "^17.0.75",
+    "@types/react-color": "^3.0.11",
+    "@types/react-dom": "^17.0.25",
     "@types/react-router-dom": "^5.3.3",
-    "@typescript-eslint/eslint-plugin": "^6.12.0",
-    "@typescript-eslint/parser": "^6.19.0",
-    "eslint": "^8.52.0",
     "husky": "^8.0.3",
-    "lint-staged": "^15.1.0",
-    "prettier": "^3.0.3",
+    "lint-staged": "^15.2.0",
+    "prettier": "^3.2.4",
     "react-scripts": "5.0.1",
-    "sass": "^1.69.4",
+    "sass": "^1.70.0",
     "source-map-explorer": "^2.5.3",
     "typescript": "^4.9.5"
   },
@@ -102,4 +98,4 @@
     "semver": "^5.7.2"
   },
   "packageManager": "[email protected]"
-}
+}

src/components/Navbar.tsx

@@ -324,4 +324,9 @@ const MapNavBar: FunctionComponent = () => {
   );
 };
 
+export {
+  TasksNavBar,
+  ResourcesNavBar,
+};
+
 export default Navbar;

src/views/map/FeatureDetails.tsx

@@ -5,7 +5,7 @@ import { Feature, GeoJsonProperties } from "geojson";
 import { isEmpty, isUndefined, omitBy } from "lodash";
 import { memo, useCallback, useEffect, useState } from "react";
 import { CirclePicker } from "react-color";
-import { useMap } from "react-map-gl";
+import { useMap } from "react-map-gl/maplibre";
 
 const calculateIconRotationForLines = (feature: Feature<LineString>): number => {
 

src/views/map/Map.tsx

@@ -11,7 +11,7 @@ import isEmpty from 'lodash/isEmpty';
 import maplibregl from 'maplibre-gl';
 import 'maplibre-gl/dist/maplibre-gl.css';
 import { memo, useCallback, useEffect, useRef, useState } from 'react';
-import { FullscreenControl, Map, MapRef, NavigationControl, ScaleControl } from 'react-map-gl';
+import { FullscreenControl, Map, MapRef, NavigationControl, ScaleControl } from 'react-map-gl/maplibre';
 import { useParams } from 'react-router-dom';
 import Notification from 'utils/Notification';
 import useLocalStorage from 'utils/useLocalStorage';
@@ -265,14 +265,8 @@ function MapComponent() {
         </>
     );
 }
-const layerStyle = {
-    id: 'point',
-    type: 'circle',
-    paint: {
-        'circle-radius': 10,
-        'circle-color': '#007cbf'
-    }
-};
+
+
 const MemoMap = memo(MapComponent);
 
 export { MemoMap as Map };

src/views/map/controls/DrawControl.tsx

@@ -2,7 +2,7 @@ import MapboxDraw from "@mapbox/mapbox-gl-draw";
 import { useControl } from "react-map-gl";
 
 import { Dispatch, memo, SetStateAction, useEffect, useState } from "react";
-import type { ControlPosition, MapRef } from "react-map-gl";
+import type { ControlPosition } from "react-map-gl/maplibre";
 
 type DrawControlProps = ConstructorParameters<typeof MapboxDraw>[0] & {
     position?: ControlPosition;
@@ -23,7 +23,7 @@ function DrawControl(props: DrawControlProps) {
     }, [draw, setDrawInParent])
 
     useControl<MapboxDraw>(
-        ({ map }: { map: MapRef }) => {
+        ({ map }) => {
             map.on("draw.create", props.onCreate);
             map.on("draw.update", props.onUpdate);
             map.on("draw.combine", props.onCombine);
@@ -36,9 +36,7 @@ function DrawControl(props: DrawControlProps) {
 
             return draw;
         },
-        ({ map }: { map: MapRef }) => {
-
-            map.removeImage("KFO")
+        ({ map }) => {
             map.off("draw.create", props.onCreate);
             map.off("draw.update", props.onUpdate);
             map.off("draw.combine", props.onCombine);

src/views/map/controls/ExportControl.tsx

@@ -1,6 +1,6 @@
-import { Format, MapboxExportControl, PageOrientation, Size } from "@watergis/mapbox-gl-export";
-import '@watergis/mapbox-gl-export/css/styles.css';
-import { ControlPosition, useControl } from "react-map-gl";
+import { Format, MaplibreExportControl, PageOrientation, Size } from "@watergis/maplibre-gl-export";
+import '@watergis/maplibre-gl-export/dist/maplibre-gl-export.css';
+import { ControlPosition, useControl } from "react-map-gl/maplibre";
 
 export type ExportControlProps = {
     /** Placement of the control relative to the map. */
@@ -10,9 +10,9 @@ export type ExportControlProps = {
 
 function ExportControl(props: ExportControlProps): null {
     const { position } = props;
-    useControl<MapboxExportControl>(
+    useControl<MaplibreExportControl>(
         ({ map }) =>
-            new MapboxExportControl({
+            new MaplibreExportControl({
                 PageSize: Size.A3,
                 PageOrientation: PageOrientation.Landscape,
                 Format: Format.PDF,

src/views/map/controls/StyleSwitcherControl.tsx

@@ -1,6 +1,6 @@
 import { MapboxStyleDefinition, MapboxStyleSwitcherControl, MapboxStyleSwitcherOptions } from "mapbox-gl-style-switcher";
 import React from "react";
-import { ControlPosition, useControl } from "react-map-gl";
+import { ControlPosition, useControl } from "react-map-gl/maplibre";
 
 import "mapbox-gl-style-switcher/styles.css";