Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 6551 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
6551 stevensc 1 
import React, { useState, useEffect, useRef } from 'react'
2 
import FormErrorFeedback from '../form-error-feedback/FormErrorFeedback'
4675 stevensc 3 
 
6551 stevensc 4 
const UbicationInput = ({
5 
  onGetAddress,
6 
  settedQuery,
7 
  placeholder = 'Ubicación',
8 
}) => {
9 
  const [addresObject, setAddressObject] = useState({})
10 
  const [query, setQuery] = useState('')
11 
  const [error, setError] = useState('')
12 
  const autoCompleteRef = useRef(null)
6829 stevensc 13 
  let autoComplete
1 www 14 
 
6829 stevensc 15 
  function handleScriptLoad(
16 
    updateQuery,
17 
    autoCompleteRef,
18 
    setAddresObject,
19 
    setError
20 
  ) {
21 
    autoComplete = new window.google.maps.places.Autocomplete(
22 
      autoCompleteRef.current,
23 
      { types: ['(cities)'] }
24 
    )
25 
    autoComplete.setFields([
26 
      'address_components',
27 
      'formatted_address',
28 
      'geometry',
29 
    ])
30 
    autoComplete.addListener('place_changed', () =>
31 
      handlePlaceSelect(updateQuery, setAddresObject, setError)
32 
    )
33 
  }
34 
 
35 
  async function handlePlaceSelect(updateQuery, setAddresObject, setError) {
36 
    const addressObject = autoComplete.getPlace()
37 
    const query = addressObject.formatted_address
38 
    if (query) {
39 
      setError('')
40 
      updateQuery(query)
41 
      setAddresObject({
42 
        ...addressObject,
43 
        address_components: [
44 
          ...addressObject.address_components,
45 
          {
46 
            latitude: addressObject.geometry.location.lat(),
47 
            longitude: addressObject.geometry.location.lng(),
48 
            types: ['geometry'],
49 
          },
50 
        ],
51 
      })
52 
    } else {
53 
      setError('$error_msg')
54 
    }
55 
  }
56 
 
1 www 57 
  useEffect(() => {
6551 stevensc 58 
    handleScriptLoad(setQuery, autoCompleteRef, setAddressObject, setError)
59 
  }, [])
4664 stevensc 60 
 
61 
  useEffect(() => {
6551 stevensc 62 
    onGetAddress(addresObject, query)
63 
  }, [addresObject])
1 www 64 
 
65 
  return (
66 
    <React.Fragment>
67 
      <input
68 
        type="text"
69 
        id="location_search"
70 
        name="location_search"
71 
        className="form-control"
1819 steven 72 
        placeholder={placeholder}
1 www 73 
        ref={autoCompleteRef}
74 
        onChange={(event) => {
6551 stevensc 75 
          setAddressObject({})
76 
          setQuery(event.target.value)
1 www 77 
        }}
6551 stevensc 78 
        value={settedQuery || query}
1 www 79 
      />
4675 stevensc 80 
      {error && <FormErrorFeedback>{error}</FormErrorFeedback>}
1 www 81 
    </React.Fragment>
6551 stevensc 82 
  )
83 
}
1 www 84 
 
6551 stevensc 85 
export default UbicationInput