Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 593 | Rev 1798 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 593 Rev 1727
Línea 1... Línea 1...
1 
import { useState, useEffect, useRef } from 'react'
 1 
import { useState, useEffect, useRef } from 'react'
Línea 2... Línea 2...
2 
 
 2 
 
3 
const useLocationAutocomplete = () => {
 3 
const useLocationAutocomplete = () => {
4 
    const [addresObject, setAddressObject] = useState({})
 4 
  const [address, setAddress] = useState({})
5 
    const [error, setError] = useState(null)
 5 
  const [error, setError] = useState(null)
6 
    const inputRef = useRef(null)
 6 
  const inputRef = useRef(null)
7 
    let autoComplete
 7 
  let autoComplete
8 
 
 8 
 
9 
    function handleScriptLoad(autoCompleteRef) {
 9 
  function handleScriptLoad(autoCompleteRef) {
10 
        autoComplete = new window.google.maps.places.Autocomplete(
 10 
    autoComplete = new window.google.maps.places.Autocomplete(
11 
            autoCompleteRef.current,
 11 
      autoCompleteRef.current,
12 
            { types: ['(cities)'] }
 12 
      { types: ['(cities)'] }
13 
        )
 13 
    )
14 
        autoComplete.setFields([
 14 
    autoComplete.setFields([
15 
            'address_components',
 15 
      'address_components',
16 
            'formatted_address',
 16 
      'formatted_address',
17 
            'geometry',
 17 
      'geometry'
18 
        ])
 18 
    ])
19 
        autoComplete.addListener('place_changed', () => handlePlaceSelect())
 19 
    autoComplete.addListener('place_changed', () => handlePlaceSelect())
20 
    }
 20 
  }
21 
 
 21 
 
22 
    function handlePlaceSelect() {
 22 
  function handlePlaceSelect() {
23 
        setAddressObject({})
 23 
    setAddress({})
24 
        const addressPlace = autoComplete.getPlace()
 24 
    const addressPlace = autoComplete.getPlace()
25 
        const formattedAddress = addressPlace.formatted_address
 25 
    const formattedAddress = addressPlace.formatted_address
26 
        const addressComponents = [
 26 
    const addressComponents = [
27 
            ...addressPlace.address_components,
 27 
      ...addressPlace.address_components,
28 
            {
 28 
      {
29 
                latitude: addressPlace.geometry.location.lat(),
 29 
        latitude: addressPlace.geometry.location.lat(),
30 
                longitude: addressPlace.geometry.location.lng(),
 30 
        longitude: addressPlace.geometry.location.lng(),
31 
                types: ['geometry'],
 31 
        types: ['geometry']
32 
            },
 32 
      }
33 
        ]
 33 
    ]
34 
        const address = {}
 34 
    const address = {}
35 
 
 35 
 
36 
        if (formattedAddress) {
 36 
    if (formattedAddress) {
37 
            setError(null)
 37 
      setError(null)
38 
            addressComponents?.map((address_component) => {
 38 
      addressComponents?.map((address_component) => {
39 
                const address_component_name = address_component.long_name
 39 
        const address_component_name = address_component.long_name
40 
                const address_component_type = address_component.types[0]
 40 
        const address_component_type = address_component.types[0]
41 
 
 41 
 
42 
                switch (address_component_type) {
 42 
        switch (address_component_type) {
43 
                    case 'route':
 43 
          case 'route':
44 
                        address['address1'] = address_component_name
 44 
            address.address1 = address_component_name
45 
                        break
 45 
            break
46 
                    case 'sublocality':
 46 
          case 'sublocality':
47 
                        address['address2'] = address_component_name
 47 
            address.address2 = address_component_name
48 
                        break
 48 
            break
49 
                    case 'locality':
 49 
          case 'locality':
50 
                        address['city1'] = address_component_name
 50 
            address.city1 = address_component_name
51 
                        break
 51 
            break
52 
                    case 'administrative_area_level_2':
 52 
          case 'administrative_area_level_2':
53 
                        address['city2'] = address_component_name
 53 
            address.city2 = address_component_name
54 
                        break
 54 
            break
55 
                    case 'administrative_area_level_1':
 55 
          case 'administrative_area_level_1':
56 
                        address['state'] = address_component_name
 56 
            address.state = address_component_name
57 
                        break
 57 
            break
58 
                    case 'country':
 58 
          case 'country':
59 
                        address['country'] = address_component_name
 59 
            address.country = address_component_name
60 
                        break
 60 
            break
61 
                    case 'postal_code':
 61 
          case 'postal_code':
62 
                        address['postal_code'] = address_component_name
 62 
            address.postal_code = address_component_name
63 
                        break
 63 
            break
64 
                    case 'geometry':
 64 
          case 'geometry':
65 
                        address['latitude'] = address_component.latitude
 65 
            address.latitude = address_component.latitude
66 
                        address['longitude'] = address_component.longitude
 - 
 
67 
                        break
 - 
 
68 
                    default:
 - 
 
69 
                        break
 66 
            address.longitude = address_component.longitude
70 
                }
 67 
            break
71 
            })
 - 
 
72 
 
 - 
 
73 
            setAddressObject({ ...address, formatted_address: formattedAddress })
 68 
          default:
74 
        } else {
 - 
 
75 
            setError('Ha ocurrido un error')
 69 
            break
- 
 
 70 
        }
- 
 
 71 
      })
- 
 
 72 
 
- 
 
 73 
      setAddress({ ...address, formatted_address: formattedAddress })
- 
 
 74 
    } else {
76 
        }
 75 
      setError('Ha ocurrido un error')
- 
 
 76 
    }
Línea 77... Línea 77...
77 
    }
 77 
  }
78 
 
 78 
 
79 
    useEffect(() => {
 79 
  useEffect(() => {
Línea 80... Línea 80...
80 
        handleScriptLoad(inputRef)
 80 
    handleScriptLoad(inputRef)
81 
    }, [])
 81 
  }, [])
Línea 82... Línea 82...
82 
 
 82