Proyectos de Subversion LeadersLinked - SPA

Rev

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

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