From 7436b890ebc81c598cae080f7f2feb3e0c26a4c2 Mon Sep 17 00:00:00 2001 From: Roberto Milla Martinez Date: Wed, 6 Nov 2024 15:14:50 +0100 Subject: [PATCH] feat: movido a componentes reutilizables y a ts --- src/app/trying/page.tsx | 60 ++-------------- src/components/AddressMap.tsx | 72 +++++++++++++++++++ .../{geolocationMap.js => GeolocationMap.tsx} | 37 +++++++--- 3 files changed, 105 insertions(+), 64 deletions(-) create mode 100644 src/components/AddressMap.tsx rename src/components/map/{geolocationMap.js => GeolocationMap.tsx} (72%) diff --git a/src/app/trying/page.tsx b/src/app/trying/page.tsx index 636c647a..3aa25705 100644 --- a/src/app/trying/page.tsx +++ b/src/app/trying/page.tsx @@ -1,63 +1,11 @@ 'use client'; -import { useState } from 'react'; - -// @ts-expect-error -import GeoLocationMap from '@/components/map/geolocationMap'; +import AddressMap, { AddressAndTown } from '@/components/AddressMap'; export default function TryingPage() { - const [address, setAddress] = useState(''); - const [town, setTown] = useState(''); - - const onNewPosition = async ([lon, lat]: [string, string]) => { - if (address !== '') { - return; - } - - const response = await fetch('/api/address', { - method: 'POST', - headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify({ - longitude: lon, - latitude: lat, - }), - }).then((res) => res.json()); - - setAddress(response.address); - setTown(response.town); + const onNewAddress = (addressAndTown: AddressAndTown) => { + console.log(addressAndTown); }; - return ( - <> - -
-
- {/* Town */} -
-
- - setTown(e.target.value)} - className="w-full p-2 border rounded focus:ring-2 focus:ring-green-500 focus:border-green-500" - /> -
-
- {/* Address */} -
-
- - setAddress(e.target.value)} - className="w-full p-2 border rounded focus:ring-2 focus:ring-green-500 focus:border-green-500" - /> -
-
-
-
- - ); + return ; } diff --git a/src/components/AddressMap.tsx b/src/components/AddressMap.tsx new file mode 100644 index 00000000..4680b468 --- /dev/null +++ b/src/components/AddressMap.tsx @@ -0,0 +1,72 @@ +'use client'; + +import GeoLocationMap, { LngLat } from '@/components/map/GeolocationMap'; +import { useState } from 'react'; + +export type AddressAndTown = { address: string; town: string }; +export type AddressAndTownCallback = (addressAndTown: AddressAndTown) => void; +export type AddressMapProps = { + onNewAddressCallback: AddressAndTownCallback; +}; + +export default function AddressMap({ onNewAddressCallback }: AddressMapProps) { + const [address, setAddress] = useState(''); + const [town, setTown] = useState(''); + + const onNewPosition = async (lngLat: LngLat) => { + if (address !== '') { + return; + } + + const response = await fetch('/api/address', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ + longitude: lngLat.lng, + latitude: lngLat.lat, + }), + }).then((res) => res.json()); + + setAddress(response.address); + setTown(response.town); + if (typeof onNewAddressCallback === 'function') { + onNewAddressCallback({ address: response.address, town: response.town }); + } + }; + + return ( + <> + +
+
+ {/* Town */} +
+
+ + setTown(e.target.value)} + className="w-full p-2 border rounded focus:ring-2 focus:ring-green-500 focus:border-green-500" + /> +
+
+ {/* Address */} +
+
+ + setAddress(e.target.value)} + className="w-full p-2 border rounded focus:ring-2 focus:ring-green-500 focus:border-green-500" + /> +
+
+
+
+ + ); +} diff --git a/src/components/map/geolocationMap.js b/src/components/map/GeolocationMap.tsx similarity index 72% rename from src/components/map/geolocationMap.js rename to src/components/map/GeolocationMap.tsx index cc7d0c80..a144c313 100644 --- a/src/components/map/geolocationMap.js +++ b/src/components/map/GeolocationMap.tsx @@ -8,11 +8,18 @@ const urgencyToColor = { baja: '#10b981', //text-emerald-500 }; -const PAIPORTA_LAT_LNG = [-0.41667, 39.42333]; +const PAIPORTA_LAT_LNG: [number, number] = [-0.41667, 39.42333]; -export default function GeoLocationMap({ onNewPositionCallback, zoom = 13 }) { - const mapContainerRef = useRef(null); - const mapRef = useRef(null); +export type LngLat = { lng: number; lat: number }; + +export type GeoLocationMapProps = { + onNewPositionCallback: (lngLat: LngLat) => void; + zoom?: number; +}; + +export default function GeoLocationMap({ onNewPositionCallback, zoom = 13 }: GeoLocationMapProps) { + const mapContainerRef = useRef(null); + const mapRef = useRef(null); // geolocate control const geolocateControl = new maplibregl.GeolocateControl({ @@ -21,11 +28,14 @@ export default function GeoLocationMap({ onNewPositionCallback, zoom = 13 }) { }, trackUserLocation: true, showAccuracyCircle: true, - showUserHeading: true, }); useEffect(() => { if (!mapRef.current) { + if (!mapContainerRef.current) { + return; + } + mapRef.current = new maplibregl.Map({ container: mapContainerRef.current, style: 'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json', @@ -34,20 +44,31 @@ export default function GeoLocationMap({ onNewPositionCallback, zoom = 13 }) { }); mapRef.current.on('moveend', () => { + if (!mapRef.current) { + return; + } + const center = mapRef.current.getCenter(); if (typeof onNewPositionCallback === 'function') { - onNewPositionCallback([center.lng, center.lat]); + onNewPositionCallback(center); } }); mapRef.current.on('move', () => { + if (!mapRef.current) { + return; + } + const center = mapRef.current.getCenter(); marker.setLngLat(center); }); geolocateControl.on('geolocate', (e) => { - const userLocation = [e.coords.longitude, e.coords.latitude]; + if (!mapRef.current) { + return; + } + const userLocation: [number, number] = [e.coords.longitude, e.coords.latitude]; // Center the map on the user's location mapRef.current.flyTo({ center: userLocation, @@ -56,7 +77,7 @@ export default function GeoLocationMap({ onNewPositionCallback, zoom = 13 }) { }); if (typeof onNewPositionCallback === 'function') { - onNewPositionCallback(userLocation); + onNewPositionCallback({ lng: userLocation[0], lat: userLocation[1] }); } });