Proyectos de Subversion LeadersLinked - Backend

Rev

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

Rev Autor Línea Nro. Línea
7122 stevensc 1 
import React, { useEffect, useRef } from "react";
7853 stevensc 2 
import { useState } from "react";
6597 stevensc 3 
 
4 
let autoComplete;
5 
 
7878 stevensc 6 
const loadScript = (url, callback) => {
7 
    let script = document.createElement("script");
8 
    script.type = "text/javascript";
6597 stevensc 9 
 
7878 stevensc 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 {
18 
        script.onload = () => callback();
6597 stevensc 19 
    }
20 
 
7878 stevensc 21 
    script.src = url;
22 
    document.getElementsByTagName("head")[0].appendChild(script);
23 
};
24 
 
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: ''
50 
    }
51 
    const place = await autoComplete.getPlace();
52 
    locationObject.formatted_address = place.formatted_address;
53 
 
54 
    if (place.geometry) {
7858 stevensc 55 
        const arrAddress = place.address_components;
6597 stevensc 56 
 
7853 stevensc 57 
        locationObject.latitude = place.geometry.location.lat();
58 
        locationObject.longitude = place.geometry.location.lng();
6597 stevensc 59 
 
7878 stevensc 60 
        arrAddress.forEach((address_component) => {
7853 stevensc 61 
            if (address_component.types[0] == "route") {
62 
                locationObject.address1 = address_component.long_name;
63 
            }
64 
            if (address_component.types[0] == "sublocality") {
65 
                locationObject.address2 = address_component.long_name;
66 
            }
67 
            if (address_component.types[0] == "locality") {
68 
                locationObject.city1 = address_component.long_name;
69 
            }
70 
            if (address_component.types[0] == "administrative_area_level_2") {
71 
                locationObject.city2 = address_component.long_name;
72 
            }
73 
            if (address_component.types[0] == "administrative_area_level_1") {
74 
                locationObject.state = address_component.long_name;
75 
            }
76 
            if (address_component.types[0] == "country") {
77 
                locationObject.country = address_component.long_name;
78 
            }
79 
            if (address_component.types[0] == "postal_code") {
80 
                locationObject.postal_code = address_component.long_name;
81 
            }
82 
        })
6597 stevensc 83 
 
7853 stevensc 84 
        updateQuery(locationObject.formatted_address);
7878 stevensc 85 
        setData(addressObject);
7853 stevensc 86 
    }
7826 stevensc 87 
 
7878 stevensc 88 
}
89 
 
90 
function SearchLocationInput({ googleApiKey, setValue, value }) {
91 
 
92 
    const autoCompleteRef = useRef(null);
93 
    const [data, setData] = useState({})
94 
 
6597 stevensc 95 
    useEffect(() => {
96 
        loadScript(
97 
            `https://maps.googleapis.com/maps/api/js?key=${googleApiKey}&libraries=places`,
7878 stevensc 98 
            () => handleScriptLoad(setValue, autoCompleteRef, setData)
6597 stevensc 99 
        );
100 
    }, []);
101 
 
102 
    return (
7124 stevensc 103 
        <div className="form-group">
6597 stevensc 104 
            <input
105 
                ref={autoCompleteRef}
7122 stevensc 106 
                onChange={event => setValue(event.target.value)}
6597 stevensc 107 
                placeholder="Enter a City"
7122 stevensc 108 
                value={value}
7124 stevensc 109 
                className="form-control"
6597 stevensc 110 
            />
111 
        </div>
112 
    );
113 
}
114 
 
115 
export default SearchLocationInput;