Commit e61263a0 authored by Omar Luna Hernández's avatar Omar Luna Hernández
Browse files

Se cambia el nombre del componente a GeocodingGoogle

parent 3b319e49

web/src/components/admin_panel_places/admin_panel_place_register/admin_panel_place_register.tsx

+2 −2
Original line number Diff line number Diff line
@@ -14,7 +14,7 @@ import { 
  Place,

} from "../../../infraestructure/entities/place";

import { Category } from "../../../infraestructure/entities/category";

import { Geocoding } from "../../geocoding/geocoding";

import { GeocodingGoogle } from "../../geocoding/geocoding_google";

import { APIProvider } from "@vis.gl/react-google-maps";

import { REACT_APP_GOOGLE_API_KEY } from "../../../constants/api_keys";

import { LoadingSpinner } from "../../loading_spinner/loading_spinner";
@@ -350,7 +350,7 @@ export const AdminPanelPlaceRegister = ({ 
            <div className="map_container">

              <div className="google_map">

                <APIProvider apiKey={REACT_APP_GOOGLE_API_KEY}>

                  <Geocoding

                  <GeocodingGoogle

                    getValues={getValues}

                    register={register}

                    errors={errors}

web/src/components/geocoding/geocoding.tsx→web/src/components/geocoding/geocoding_google.tsx

+79 −0
Original line number Diff line number Diff line 
import { useMapsLibrary } from "@vis.gl/react-google-maps";

import { useState, useEffect, Dispatch, SetStateAction, useRef } from "react";

import { UseFormGetValues, UseFormRegister, FieldErrors } from "react-hook-form";

import {

  UseFormGetValues,

  UseFormRegister,

  FieldErrors,

} from "react-hook-form";

import { Place } from "../../infraestructure/entities/place";

import { Position } from "../map/map";

import './assets/css/styles.css';

import { Position } from "../map/map_google";

import "./assets/css/styles.css";



interface props {

  getValues: UseFormGetValues<Place>;

  register: UseFormRegister<Place>;

  errors: FieldErrors<Place>;

  setPosition: Dispatch<SetStateAction<Position | null>>

  setLoading: Dispatch<SetStateAction<boolean>>

  setPosition: Dispatch<SetStateAction<Position | null>>;

  setLoading: Dispatch<SetStateAction<boolean>>;

}



export const Geocoding = ({ getValues, register, errors, setPosition, setLoading}: props) => {

  const geocodingApiLoaded = useMapsLibrary('geocoding');

  const [geocodingService, setGeocodingService] = useState<google.maps.Geocoder>();

  const [geocodingResult, setGeocodingResult] = useState<google.maps.GeocoderResult>();

export const GeocodingGoogle = ({

  getValues,

  register,

  errors,

  setPosition,

  setLoading,

}: props) => {

  const geocodingApiLoaded = useMapsLibrary("geocoding");

  const [geocodingService, setGeocodingService] =

    useState<google.maps.Geocoder>();

  const [geocodingResult, setGeocodingResult] =

    useState<google.maps.GeocoderResult>();



  const getPositionByAddress = () => {

    const address = getValues('address');

    const address = getValues("address");

    if (!geocodingService || !address) return;

    setLoading(true);

    geocodingService?.geocode({ address }, (results, status) => {
@@ -28,27 +40,34 @@ export const Geocoding = ({ getValues, register, errors, setPosition, setLoading 
      }

    });

    setLoading(false);

  }



  };



  useEffect(() => {

    if (!geocodingApiLoaded) return;

    setGeocodingService(new window.google.maps.Geocoder());

  },[geocodingApiLoaded])

  }, [geocodingApiLoaded]);



  useEffect(() => {

    if (!geocodingResult) return;

    setPosition({latitude: geocodingResult.geometry.location.lat(), longitude: geocodingResult.geometry.location.lng()})

  }, [geocodingResult])

    setPosition({

      latitude: geocodingResult.geometry.location.lat(),

      longitude: geocodingResult.geometry.location.lng(),

    });

  }, [geocodingResult]);



  return (

    <div className="address_input_cnt">

      <label>Dirección</label>

      <div className="address_locate_cnt">

        <button type="button" onClick={getPositionByAddress}> Ubicar</button>

        <input type="text" {...register('address')} 

        <button type="button" onClick={getPositionByAddress}>

          {" "}

          Ubicar

        </button>

        <input

          type="text"

          {...register("address")}

          onKeyDown={(event) => {

          if(event.key === 'Enter'){

            if (event.key === "Enter") {

              getPositionByAddress();

            }

          }}
@@ -56,5 +75,5 @@ export const Geocoding = ({ getValues, register, errors, setPosition, setLoading 
      </div>

      <p className="error">{errors.address?.message}</p>

    </div>

  )

}
 
 No newline at end of file
 
  );

};