fix ts err for the deploy

eloicasamayor · Dec 22, 2024 · 0ea5ce2 · 0ea5ce2
1 parent 56c988f
commit 0ea5ce2
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 9 deletions.
diff --git a/src/assets/Map.tsx b/src/assets/Map.tsx
@@ -53,7 +53,7 @@ export const Map = ({
               onZoomWithButtons={onZoomWithButtons}
               zoomToElement={zoomToElement}
               selectedCountry={selectedCountry}
-              wrapperRef={mapRef}
+              mapRef={mapRef}
             />
             <TransformComponent>
               <svg

diff --git a/src/components/MapControls.tsx b/src/components/MapControls.tsx
@@ -1,13 +1,13 @@
 import { useEffect } from "react";
-import { ReactZoomPanPinchRef, useControls } from "react-zoom-pan-pinch";
+import { useControls } from "react-zoom-pan-pinch";
 
 type MapControlsProps = {
   isMaxScale: boolean;
   isMinScale: boolean;
   onZoomWithButtons: Function;
   zoomToElement: Function;
   selectedCountry: string;
-  wrapperRef: React.Ref<ReactZoomPanPinchRef>;
+  mapRef: React.RefObject<HTMLElement>;
 };
 
 export const MapControls = ({
@@ -16,15 +16,17 @@ export const MapControls = ({
   onZoomWithButtons,
   zoomToElement,
   selectedCountry,
-  wrapperRef,
+  mapRef,
 }: MapControlsProps) => {
   const { zoomIn, zoomOut /* resetTransform */ } = useControls();
   useEffect(() => {
-    const countryPath = wrapperRef?.current?.querySelector(
-      `[title="${selectedCountry}"]`
-    );
-    zoomToElement(countryPath);
-    //(node: HTMLElement | string, scale?: number, animationTime?: number, animationType?: keyof typeof animations) => void;
+    let countryPath;
+    if (mapRef?.current) {
+      countryPath = mapRef?.current?.querySelector(
+        `[title="${selectedCountry}"]`
+      );
+      zoomToElement(countryPath);
+    }
   }, [selectedCountry]);
   return (
     <div className="tools">