Proyectos de Subversion LeadersLinked - Backend

Rev

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

Rev 7878 Rev 7884
Línea 1... Línea 1...
1 
import React, { useEffect, useRef } from "react";
 1 
import React, { useEffect, useRef } from "react";
2 
import { useState } from "react";
 2 
import { useState } from "react";
Línea 3... Línea 3...
3 
 
 3 
 
Línea 4... Línea -...
4 
let autoComplete;
 - 
 
5 
 
 4 
function SearchLocationInput({ googleApiKey, setValue, value }) {
6 
const loadScript = (url, callback) => {
 - 
 
7 
    let script = document.createElement("script");
 - 
 
8 
    script.type = "text/javascript";
 - 
 
9 
 
 5 
 
10 
    if (script.readyState) {
 - 
 
11 
        script.onreadystatechange = function () {
 - 
 
12 
            if (script.readyState === "loaded" || script.readyState === "complete") {
 - 
 
13 
                script.onreadystatechange = null;
 - 
 
14 
                callback();
 - 
 
15 
            }
 - 
 
16 
        };
 - 
 
17 
    } else {
 - 
 
Línea 18... Línea -...
18 
        script.onload = () => callback();
 - 
 
19 
    }
 - 
 
20 
 
 - 
 
21 
    script.src = url;
 - 
 
22 
    document.getElementsByTagName("head")[0].appendChild(script);
 - 
 
23 
};
 - 
 
24 
 
 6 
    const autoCompleteRef = useRef(null);
25 
function handleScriptLoad(updateQuery, autoCompleteRef, setData) {
 - 
 
26 
    autoComplete = new window.google.maps.places.Autocomplete(
 - 
 
27 
        autoCompleteRef.current,
 - 
 
28 
        { types: ["(cities)"] }
 - 
 
29 
    );
 - 
 
30 
    autoComplete.setFields(["address_components", "formatted_address"]);
 - 
 
31 
    autoComplete.addListener("place_changed", () =>
 - 
 
32 
        handlePlaceSelect(updateQuery, setData)
 - 
 
33 
    );
 - 
 
34 
}
 - 
 
35 
 
 - 
 
36 
async function handlePlaceSelect(updateQuery, setData) {
 - 
 
37 
 
 - 
 
38 
    let locationObject = {
 - 
 
39 
        formatted_address: '',
 - 
 
40 
        address1: '',
 - 
 
41 
        address2: '',
 - 
 
42 
        country: '',
 - 
 
43 
        state: '',
 - 
 
44 
        city1: '',
 - 
 
45 
        city2: '',
 - 
 
46 
        postal_code: '',
 - 
 
47 
        latitude: 0,
 - 
 
48 
        longitude: 0,
 - 
 
49 
        location_search: ''
 - 
 
Línea -... Línea 7...
- 
 
 7 
    const [data, setData] = useState({})
- 
 
 8 
 
- 
 
 9 
    let autoComplete;
- 
 
 10 
 
50 
    }
 11 
    const loadScript = (url, callback) => {
- 
 
 12 
        let script = document.createElement("script");
- 
 
 13 
        script.type = "text/javascript";
- 
 
 14 
 
- 
 
 15 
        if (script.readyState) {
- 
 
 16 
            script.onreadystatechange = function () {
- 
 
 17 
                if (script.readyState === "loaded" || script.readyState === "complete") {
- 
 
 18 
                    script.onreadystatechange = null;
- 
 
 19 
                    callback();
- 
 
 20 
                }
- 
 
 21 
            };
- 
 
 22 
        } else {
- 
 
 23 
            script.onload = () => callback();
- 
 
 24 
        }
- 
 
 25 
 
- 
 
 26 
        script.src = url;
- 
 
 27 
        document.getElementsByTagName("head")[0].appendChild(script);
- 
 
 28 
    };
- 
 
 29 
 
- 
 
 30 
    function handleScriptLoad(updateQuery, autoCompleteRef, setData) {
51 
    const place = await autoComplete.getPlace();
 31 
        autoComplete = new window.google.maps.places.Autocomplete(
- 
 
 32 
            autoCompleteRef.current,
- 
 
 33 
            { types: ["(cities)"] }
- 
 
 34 
        );
- 
 
 35 
        autoComplete.setFields(["address_components", "formatted_address"]);
Línea 52... Línea 36...
52 
    locationObject.formatted_address = place.formatted_address;
 36 
        autoComplete.addListener("place_changed", () =>
53 
 
 - 
 
Línea -... Línea 37...
- 
 
 37 
            handlePlaceSelect(updateQuery, setData)
- 
 
 38 
        );
- 
 
 39 
    }
- 
 
 40 
 
- 
 
 41 
    async function handlePlaceSelect(updateQuery, setData) {
- 
 
 42 
 
- 
 
 43 
        let locationObject = {
- 
 
 44 
            formatted_address: '',
- 
 
 45 
            address1: '',
- 
 
 46 
            address2: '',
- 
 
 47 
            country: '',
- 
 
 48 
            state: '',
- 
 
 49 
            city1: '',
- 
 
 50 
            city2: '',
- 
 
 51 
            postal_code: '',
- 
 
 52 
            latitude: 0,
- 
 
 53 
            longitude: 0,
- 
 
 54 
            location_search: ''
- 
 
 55 
        }
- 
 
 56 
        const place = await autoComplete.getPlace();
- 
 
 57 
        locationObject.formatted_address = place.formatted_address;
- 
 
 58 
 
54 
    if (place.geometry) {
 59 
        if (place.geometry) {
55 
        const arrAddress = place.address_components;
 60 
            const arrAddress = place.address_components;
56 
 
 61 
 
57 
        locationObject.latitude = place.geometry.location.lat();
 62 
            locationObject.latitude = place.geometry.location.lat();
58 
        locationObject.longitude = place.geometry.location.lng();
 63 
            locationObject.longitude = place.geometry.location.lng();
59 
 
 64 
 
60 
        arrAddress.forEach((address_component) => {
 65 
            arrAddress.forEach((address_component) => {
61 
            if (address_component.types[0] == "route") {
 66 
                if (address_component.types[0] == "route") {
62 
                locationObject.address1 = address_component.long_name;
 67 
                    locationObject.address1 = address_component.long_name;
63 
            }
 68 
                }
64 
            if (address_component.types[0] == "sublocality") {
 69 
                if (address_component.types[0] == "sublocality") {
65 
                locationObject.address2 = address_component.long_name;
 70 
                    locationObject.address2 = address_component.long_name;
66 
            }
 71 
                }
67 
            if (address_component.types[0] == "locality") {
 72 
                if (address_component.types[0] == "locality") {
68 
                locationObject.city1 = address_component.long_name;
 73 
                    locationObject.city1 = address_component.long_name;
69 
            }
 74 
                }
70 
            if (address_component.types[0] == "administrative_area_level_2") {
 75 
                if (address_component.types[0] == "administrative_area_level_2") {
71 
                locationObject.city2 = address_component.long_name;
 76 
                    locationObject.city2 = address_component.long_name;
72 
            }
 77 
                }
73 
            if (address_component.types[0] == "administrative_area_level_1") {
 78 
                if (address_component.types[0] == "administrative_area_level_1") {
74 
                locationObject.state = address_component.long_name;
 79 
                    locationObject.state = address_component.long_name;
- 
 
 80 
                }
75 
            }
 81 
                if (address_component.types[0] == "country") {
- 
 
 82 
                    locationObject.country = address_component.long_name;
- 
 
 83 
                }
- 
 
 84 
                if (address_component.types[0] == "postal_code") {
76 
            if (address_component.types[0] == "country") {
 85 
                    locationObject.postal_code = address_component.long_name;
Línea 77... Línea -...
77 
                locationObject.country = address_component.long_name;
 - 
 
78 
            }
 - 
 
79 
            if (address_component.types[0] == "postal_code") {
 86 
                }
Línea 80... Línea -...
80 
                locationObject.postal_code = address_component.long_name;
 - 
 
81 
            }
 - 
 
82 
        })
 - 
 
83 
 
 - 
 
84 
        updateQuery(locationObject.formatted_address);
 - 
 
85 
        setData(addressObject);
 - 
 
Línea 86... Línea 87...
86 
    }
 87 
            })
87 
 
 88 
 
88 
}
 89 
            updateQuery(locationObject.formatted_address);
89 
 
 90 
            setData(addressObject);