Proyectos de Subversion LeadersLinked - Backend

Rev

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

Rev 7858 Rev 7878
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...
4 
let autoComplete;
 4 
let autoComplete;
- 
 
 5 
 
- 
 
 6 
const loadScript = (url, callback) => {
5 
 
 7 
    let script = document.createElement("script");
- 
 
 8 
    script.type = "text/javascript";
6 
function SearchLocationInput({ googleApiKey, setValue, value }) {
 9 
 
- 
 
 10 
    if (script.readyState) {
7
11 
        script.onreadystatechange = function () {
- 
 
 12 
            if (script.readyState === "loaded" || script.readyState === "complete") {
- 
 
 13 
                script.onreadystatechange = null;
- 
 
 14 
                callback();
- 
 
 15 
            }
- 
 
 16 
        };
- 
 
 17 
    } else {
Línea 8... Línea 18...
8 
    const autoCompleteRef = useRef(null);
 18 
        script.onload = () => callback();
9 
    const [locationObject, setLocationObject] = useState({})
 19 
    }
10 
 
 - 
 
- 
 
 20 
 
11 
    const loadScript = (url, callback) => {
 21 
    script.src = url;
12 
        let script = document.createElement("script");
 - 
 
13 
        script.type = "text/javascript";
 22 
    document.getElementsByTagName("head")[0].appendChild(script);
14
- 
 
15 
        if (script.readyState) {
 23 
};
16 
            script.onreadystatechange = function () {
 24 
 
17 
                if (script.readyState === "loaded" || script.readyState === "complete") {
 25 
function handleScriptLoad(updateQuery, autoCompleteRef, setData) {
18 
                    script.onreadystatechange = null;
 26 
    autoComplete = new window.google.maps.places.Autocomplete(
- 
 
 27 
        autoCompleteRef.current,
19 
                    callback();
 28 
        { types: ["(cities)"] }
20 
                }
 29 
    );
21 
            };
 30 
    autoComplete.setFields(["address_components", "formatted_address"]);
- 
 
 31 
    autoComplete.addListener("place_changed", () =>
22 
        } else {
 32 
        handlePlaceSelect(updateQuery, setData)
23 
            script.onload = () => callback();
 - 
 
24 
        }
 33 
    );
25
- 
 
26 
        script.src = url;
 34 
}
27 
        document.getElementsByTagName("head")[0].appendChild(script);
 35 
 
28 
    };
 36 
async function handlePlaceSelect(updateQuery, setData) {
- 
 
 37 
 
29
38 
    let locationObject = {
- 
 
 39 
        formatted_address: '',
30 
    function handleScriptLoad(updateQuery, autoCompleteRef) {
 40 
        address1: '',
31 
        autoComplete = new window.google.maps.places.Autocomplete(
 41 
        address2: '',
32 
            autoCompleteRef.current,
 42 
        country: '',
33 
            { types: ["(cities)"] }
 43 
        state: '',
34 
        );
 44 
        city1: '',
35 
        autoComplete.setFields(["address_components", "formatted_address"]);
 45 
        city2: '',
- 
 
 46 
        postal_code: '',
36 
        autoComplete.addListener("place_changed", () =>
 47 
        latitude: 0,
- 
 
 48 
        longitude: 0,
- 
 
 49 
        location_search: ''
Línea 37... Línea -...
37 
            handlePlaceSelect(updateQuery)
 - 
 
38 
        );
 - 
 
39 
    }
 - 
 
40 
 
 - 
 
41 
    async function handlePlaceSelect(updateQuery) {
 - 
 
42 
        let locationObject = {
 50 
    }
43 
            formatted_address: '',
 - 
 
44 
            address1: '',
 - 
 
45 
            address2: '',
 - 
 
46 
            country: '',
 - 
 
47 
            state: '',
 - 
 
48 
            city1: '',
 - 
 
49 
            city2: '',
 - 
 
50 
            postal_code: '',
 - 
 
51 
            latitude: 0,
 - 
 
52 
            longitude: 0,
 51 
    const place = await autoComplete.getPlace();
Línea 53... Línea -...
53 
            location_search: ''
 - 
 
54 
        }
 52 
    locationObject.formatted_address = place.formatted_address;
55 
        const place = await autoComplete.getPlace();
 53 
 
Línea 56... Línea 54...
56 
        const arrAddress = place.address_components;
 54 
    if (place.geometry) {
57 
 
 55 
        const arrAddress = place.address_components;
58 
        locationObject.formatted_address = place.formatted_address;
 56 
 
59 
        locationObject.latitude = place.geometry.location.lat();
 57 
        locationObject.latitude = place.geometry.location.lat();
60 
        locationObject.longitude = place.geometry.location.lng();
 58 
        locationObject.longitude = place.geometry.location.lng();
61 
 
 59 
 
Línea 81... Línea 79...
81 
            if (address_component.types[0] == "postal_code") {
 79 
            if (address_component.types[0] == "postal_code") {
82 
                locationObject.postal_code = address_component.long_name;
 80 
                locationObject.postal_code = address_component.long_name;
83 
            }
 81 
            }
84 
        })
 82 
        })
Línea 85... Línea -...
85 
 
 - 
 
86 
        console.log(locationObject)
 83 
 
- 
 
 84 
        updateQuery(locationObject.formatted_address);
87 
        updateQuery(locationObject.formatted_address);
 85 
        setData(addressObject);
Línea -... Línea 86...
- 
 
 86 
    }
- 
 
 87 
 
- 
 
 88 
}
- 
 
 89 
 
- 
 
 90 
function SearchLocationInput({ googleApiKey, setValue, value }) {
- 
 
 91 
 
- 
 
 92 
    const autoCompleteRef = useRef(null);
88 
    }
 93 
    const [data, setData] = useState({})
89 
 
 94 
 
90 
    useEffect(() => {
 95 
    useEffect(() => {
91 
        loadScript(
 96 
        loadScript(
92 
            `https://maps.googleapis.com/maps/api/js?key=${googleApiKey}&libraries=places`,
 97 
            `https://maps.googleapis.com/maps/api/js?key=${googleApiKey}&libraries=places`,
93 
            () => handleScriptLoad(setValue, autoCompleteRef)
 98 
            () => handleScriptLoad(setValue, autoCompleteRef, setData)
Línea 94... Línea 99...
94 
        );
 99 
        );
95 
    }, []);
 100 
    }, []);