Proyectos de Subversion LeadersLinked - Antes de SPA

import React, { useState, useEffect, useRef } from 'react'
import FormErrorFeedback from '../form-error-feedback/FormErrorFeedback'

const UbicationInput = ({
  onGetAddress,
  settedQuery,
  placeholder = 'Ubicación',
}) => {
  const [addresObject, setAddressObject] = useState({})
  const [query, setQuery] = useState('')
  const [error, setError] = useState('')
  const autoCompleteRef = useRef(null)
  let autoComplete

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

  async function handlePlaceSelect(updateQuery, setAddresObject, setError) {
    const addressObject = autoComplete.getPlace()

    const query = addressObject.formatted_address
    if (query) {
      setError('')
      updateQuery(query)
      setAddresObject({
        ...addressObject,
        address_components: [
          ...addressObject.address_components,
          {
            latitude: addressObject.geometry.location.lat(),
            longitude: addressObject.geometry.location.lng(),
            types: ['geometry'],
          },
        ],
      })
    } else {
      setError('$error_msg')
    }
  }

  useEffect(() => {
    handleScriptLoad(setQuery, autoCompleteRef, setAddressObject, setError)
  }, [])

  useEffect(() => {
    onGetAddress(addresObject, query)
  }, [addresObject])

  return (
    <React.Fragment>
      <input
        type="text"
        id="location_search"
        name="location_search"
        className="form-control"
        placeholder={placeholder}
        ref={autoCompleteRef}
        onChange={(event) => {
          setAddressObject({})
          setQuery(event.target.value)
        }}
        value={settedQuery || query}
      />
      {error && <FormErrorFeedback>{error}</FormErrorFeedback>}
    </React.Fragment>
  )
}

export default UbicationInput