Merge pull request #161 from IFRCGo/fix/bbox-issue

Fix bbox not defined issue

.npmrc

@@ -0,0 +1 @@
+enable-pre-post-scripts=true

package.json

@@ -29,8 +29,8 @@
     "@sentry/react": "^7.81.1",
     "@togglecorp/fujs": "^2.1.1",
     "@togglecorp/re-map": "^0.2.0-beta-6",
-    "@turf/bbox": "^6.5.0",
-    "@turf/circle": "^6.5.0",
+    "@turf/bbox": "^7.1.0",
+    "@turf/circle": "^7.1.0",
     "graphql": "^16.8.1",
     "mapbox-gl": "^1.13.0",
     "patch-package": "^8.0.0",

src/App/PageError/index.tsx

@@ -1,8 +1,18 @@
+import { useEffect } from 'react';
 import { useRouteError } from 'react-router-dom';
 
 function PageError() {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const error = useRouteError() as unknown as any;
+
+    useEffect(
+        () => {
+            // eslint-disable-next-line no-console
+            console.error(error);
+        },
+        [error],
+    );
+
     return (
         <h1>
             {error.statusText || error.message}

src/views/AlertDetails/AlertInfo/AreaInfoDetail/index.tsx

@@ -176,7 +176,7 @@ function AreaInfoDetail(props: Props) {
             const [latStr, lonStr] = centerStr.split(',');
             const options = {
                 steps: 50,
-                units: 'kilometers',
+                units: 'kilometers' as const,
             };
 
             const point = [+latStr, +lonStr];
@@ -203,13 +203,13 @@ function AreaInfoDetail(props: Props) {
         [selectedFeatureDetails],
     );
 
-    const selectedPolygonBounds = useMemo(() => {
+    const selectedPolygonBounds = useMemo((): LngLatBoundsLike => {
         if (isDefined(selectedPolygon)) {
-            return getBbox(selectedPolygon.boundary);
+            return getBbox(selectedPolygon.boundary) as LngLatBoundsLike;
         }
 
         if (isDefined(selectedCircle)) {
-            return getBbox(selectedCircle.boundary);
+            return getBbox(selectedCircle.boundary) as LngLatBoundsLike;
         }
 
         return defaultBounds;

src/views/AlertDetails/CountryAlertMap/index.tsx

@@ -9,7 +9,10 @@ import {
     MapLayer,
 } from '@togglecorp/re-map';
 import getBbox from '@turf/bbox';
-import type { FillLayer } from 'mapbox-gl';
+import type {
+    FillLayer,
+    LngLatBoundsLike,
+} from 'mapbox-gl';
 
 import BaseMap from '#components/domain/BaseMap';
 import { AlertDetailsQuery } from '#generated/types/graphql';
@@ -70,7 +73,7 @@ function CountryAlertMap(props: Props) {
     }, [data]);
 
     const bounds = useMemo(() => (
-        data?.country ? getBbox(data?.country.bbox) : undefined
+        data?.country ? getBbox(data.country.bbox) as LngLatBoundsLike : undefined
     ), [data?.country]);
 
     return (

src/views/Home/AlertsMap/Map/index.tsx

@@ -25,7 +25,6 @@ import {
 import getBbox from '@turf/bbox';
 import {
     type FillLayer,
-    LngLatBoundsLike,
     MapboxGeoJSONFeature,
 } from 'mapbox-gl';
 
@@ -47,7 +46,7 @@ import AlertDataContext from '../../AlertDataContext';
 
 import styles from './styles.module.css';
 
-const defaultBounds: LngLatBoundsLike = [-160, -60, 190, 80];
+const defaultBounds: [number, number, number, number] = [-160, -60, 190, 80];
 
 interface MapMinZoomProps {
     zoom: number;
@@ -166,16 +165,20 @@ function Map(props: Props) {
     );
 
     const bounds = useMemo(
-        () => {
+        (): [number, number, number, number] => {
             if (isDefined(activeAdmin1Id) && isDefined(activeAdmin1Details?.public.admin1?.bbox)) {
-                return getBbox(activeAdmin1Details?.public.admin1?.bbox);
+                return getBbox(
+                    activeAdmin1Details?.public.admin1?.bbox,
+                ) as [number, number, number, number];
             }
 
             if (
                 isDefined(activeCountryId)
                 && isDefined(activeCountryDetails?.public.country?.bbox)
             ) {
-                return getBbox(activeCountryDetails?.public.country?.bbox);
+                return getBbox(
+                    activeCountryDetails?.public.country?.bbox,
+                ) as [number, number, number, number];
             }
 
             return defaultBounds;

tsconfig.json

@@ -1,10 +1,6 @@
 {
     "compilerOptions": {
         "paths": {
-            /* Issue with turf library https://github.com/Turfjs/turf/issues/2598#issuecomment-2084656403 */
-            "@turf/bbox": ["./node_modules/@turf/bbox/dist/js/index.d.ts"],
-            "@turf/circle": ["./node_modules/@turf/circle/dist/js/index.d.ts"],
-
             "#generated/*": ["./generated/*"],
             "#assets/*": ["./src/assets/*"],
             "#components/*": ["./src/components/*"],