control de geolocalizacion

front/src/common/hook/useGeolocation.ts

@@ -0,0 +1,79 @@
+"use client";
+import { useState, useCallback, useEffect } from "react";
+
+export interface UserLocation {
+  latitude: number;
+  longitude: number;
+}
+
+export type GeolocationStatus = 
+  | "granted" 
+  | "denied";
+
+export interface UseGeolocationReturn {
+  location: UserLocation | null;
+  status: GeolocationStatus;
+  requestLocation: () => void;
+  clearLocation: () => void;
+}
+
+export function useGeolocation(): UseGeolocationReturn {
+  const [location, setLocation] = useState<UserLocation | null>(null);
+  const [status, setStatus] = useState<GeolocationStatus>("denied");
+
+  //esto es para el check de permisos cuando se cambia desde el navegador
+
+  useEffect(() => {
+    if (!navigator.permissions) return;
+
+    navigator.permissions.query({ name: "geolocation" }).then((result) => {
+      setStatus(result.state === "granted" ? "granted" : "denied");
+
+      result.addEventListener("change", () => {
+        setStatus(result.state === "granted" ? "granted" : "denied");
+        if (result.state === "denied") {
+          setLocation(null);
+        }
+      });
+    });
+  }, []);
+
+  const requestLocation = useCallback(() => {
+    if (!navigator.geolocation) {
+      setStatus("denied");
+      return;
+    }
+
+    navigator.geolocation.getCurrentPosition(
+      (position) => {
+        setLocation({
+          latitude: position.coords.latitude,
+          longitude: position.coords.longitude,
+        });
+        setStatus("granted");
+      },
+      (error) => {
+        if (error.code === error.PERMISSION_DENIED) {
+          setStatus("denied");
+        }
+      },
+      {
+        enableHighAccuracy: true,
+        timeout: 10000,
+        maximumAge: 0,
+      }
+    );
+  }, []);
+
+  const clearLocation = useCallback(() => {
+    setLocation(null);
+    setStatus("denied");
+  }, []);
+
+  return { 
+    location, 
+    status, 
+    requestLocation, 
+    clearLocation,
+  };
+}

front/src/pods/embalse-search/embalse-search.tsx

@@ -9,6 +9,11 @@ import { EmbalseSearchModel } from "./embalse-search.vm";
 import { getFilteredEmbalses as getFilteredEmbalsesBusiness } from "./embalse-search.business";
 import { FilteredList } from "./components/filtered-list";
 import { Input } from "./components/input";
+import { useGeolocation } from "@/common/hook/useGeolocation";
+
+
+
+
 
 interface Props {
   embalses: Embalse[];
@@ -22,10 +27,20 @@ export const EmbalseSearch: React.FC<Props> = (props) => {
   >([]);
   const [isNavigating, setIsNavigating] = useState<boolean>(false);
   const [inputValue, setInputValue] = useState<string>("");
+  const { location, status, requestLocation, clearLocation } = useGeolocation();
 
-  const getFilteredEmbalses = (inputValue: string): EmbalseSearchModel[] => {
-    return getFilteredEmbalsesBusiness(inputValue, embalses);
+  const handleLocationClick = () => {
+    if (location) {
+      clearLocation();
+    } else {
+      requestLocation();
+    }
   };
+
+
+  function getFilteredEmbalses(inputValue: string): EmbalseSearchModel[] {
+    return getFilteredEmbalsesBusiness(inputValue, embalses);
+  }
   const {
     isOpen,
     getMenuProps,
@@ -83,10 +98,20 @@ export const EmbalseSearch: React.FC<Props> = (props) => {
                 Encuentra toda la información disponible de los embalses de
                 España
               </p>
+      <button 
+        onClick={handleLocationClick}       
+        className="btn btn-ghost btn-sm"
+      >
+        { "📍 Mi ubicación"}
+      </button>
+      {location && (
+        <p>📍 {location.latitude.toFixed(4)}, {location.longitude.toFixed(4)}</p>
+      )}
             </div>
           </div>
         </section>
       </div>
+
     </div>
   );
 };