Proyectos de Subversion LeadersLinked - SPA

import { useState, useEffect, useRef } from 'react';

export function useLocationAutocomplete() {
  const [address, setAddress] = useState({});
  const [error, setError] = useState(null);
  const inputRef = useRef(null);
  let autoComplete;

  function handleScriptLoad(autoCompleteRef) {
    autoComplete = new window.google.maps.places.Autocomplete(autoCompleteRef.current, {
      types: ['(cities)']
    });
    autoComplete.setFields(['address_components', 'formatted_address', 'geometry']);
    autoComplete.addListener('place_changed', handlePlaceSelect);
  }

  function handlePlaceSelect() {
    setAddress({});
    const addressPlace = autoComplete.getPlace();
    const formattedAddress = addressPlace.formatted_address;
    const addressComponents = [
      ...addressPlace.address_components,
      {
        latitude: addressPlace.geometry.location.lat(),
        longitude: addressPlace.geometry.location.lng(),
        types: ['geometry']
      }
    ];
    const address = {};

    if (formattedAddress) {
      setError(null);
      addressComponents?.forEach((address_component) => {
        const address_component_name = address_component.long_name;
        const address_component_type = address_component.types[0];

        switch (address_component_type) {
          case 'route':
            address.address1 = address_component_name;
            break;
          case 'sublocality':
            address.address2 = address_component_name;
            break;
          case 'locality':
            address.city1 = address_component_name;
            break;
          case 'administrative_area_level_2':
            address.city2 = address_component_name;
            break;
          case 'administrative_area_level_1':
            address.state = address_component_name;
            break;
          case 'country':
            address.country = address_component_name;
            break;
          case 'postal_code':
            address.postal_code = address_component_name;
            break;
          case 'geometry':
            address.latitude = address_component.latitude;
            address.longitude = address_component.longitude;
            break;
          default:
            break;
        }
      });

      setAddress({ ...address, formatted_address: formattedAddress });
    } else {
      setError('Ha ocurrido un error');
    }
  }

  useEffect(() => {
    handleScriptLoad(inputRef);
  }, []);

  return { address, error, ref: inputRef };
}