Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3046 | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

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