Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 6829 | | 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()
6830 stevensc 37 
 
6829 stevensc 38 
    const query = addressObject.formatted_address
39 
    if (query) {
40 
      setError('')
41 
      updateQuery(query)
42 
      setAddresObject({
43 
        ...addressObject,
44 
        address_components: [
45 
          ...addressObject.address_components,
46 
          {
47 
            latitude: addressObject.geometry.location.lat(),
48 
            longitude: addressObject.geometry.location.lng(),
49 
            types: ['geometry'],
50 
          },
51 
        ],
52 
      })
53 
    } else {
54 
      setError('$error_msg')
55 
    }
56 
  }
57 
 
1 www 58 
  useEffect(() => {
6551 stevensc 59 
    handleScriptLoad(setQuery, autoCompleteRef, setAddressObject, setError)
60 
  }, [])
4664 stevensc 61 
 
62 
  useEffect(() => {
6551 stevensc 63 
    onGetAddress(addresObject, query)
64 
  }, [addresObject])
1 www 65 
 
66 
  return (
67 
    <React.Fragment>
68 
      <input
69 
        type="text"
70 
        id="location_search"
71 
        name="location_search"
72 
        className="form-control"
1819 steven 73 
        placeholder={placeholder}
1 www 74 
        ref={autoCompleteRef}
75 
        onChange={(event) => {
6551 stevensc 76 
          setAddressObject({})
77 
          setQuery(event.target.value)
1 www 78 
        }}
6551 stevensc 79 
        value={settedQuery || query}
1 www 80 
      />
4675 stevensc 81 
      {error && <FormErrorFeedback>{error}</FormErrorFeedback>}
1 www 82 
    </React.Fragment>
6551 stevensc 83 
  )
84 
}
1 www 85 
 
6551 stevensc 86 
export default UbicationInput