Proyectos de Subversion LeadersLinked - Backend

Rev

Rev 7878 | Rev 7899 | 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 
 
7884 stevensc 4 
function SearchLocationInput({ googleApiKey, setValue, value }) {
6597 stevensc 5 
 
7884 stevensc 6 
    const autoCompleteRef = useRef(null);
7 
    const [data, setData] = useState({})
6597 stevensc 8 
 
7884 stevensc 9 
    let autoComplete;
6597 stevensc 10 
 
7884 stevensc 11 
    const loadScript = (url, callback) => {
12 
        let script = document.createElement("script");
13 
        script.type = "text/javascript";
7878 stevensc 14 
 
7884 stevensc 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 
        }
7878 stevensc 25 
 
7884 stevensc 26 
        script.src = url;
27 
        document.getElementsByTagName("head")[0].appendChild(script);
28 
    };
7878 stevensc 29 
 
7884 stevensc 30 
    function handleScriptLoad(updateQuery, autoCompleteRef, setData) {
31 
        autoComplete = new window.google.maps.places.Autocomplete(
32 
            autoCompleteRef.current,
33 
            { types: ["(cities)"] }
34 
        );
35 
        autoComplete.setFields(["address_components", "formatted_address"]);
36 
        autoComplete.addListener("place_changed", () =>
37 
            handlePlaceSelect(updateQuery, setData)
38 
        );
7878 stevensc 39 
    }
40 
 
7884 stevensc 41 
    async function handlePlaceSelect(updateQuery, setData) {
6597 stevensc 42 
 
7884 stevensc 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;
6597 stevensc 58 
 
7884 stevensc 59 
        if (place.geometry) {
60 
            const arrAddress = place.address_components;
6597 stevensc 61 
 
7884 stevensc 62 
            locationObject.latitude = place.geometry.location.lat();
63 
            locationObject.longitude = place.geometry.location.lng();
7826 stevensc 64 
 
7884 stevensc 65 
            arrAddress.forEach((address_component) => {
66 
                if (address_component.types[0] == "route") {
67 
                    locationObject.address1 = address_component.long_name;
68 
                }
69 
                if (address_component.types[0] == "sublocality") {
70 
                    locationObject.address2 = address_component.long_name;
71 
                }
72 
                if (address_component.types[0] == "locality") {
73 
                    locationObject.city1 = address_component.long_name;
74 
                }
75 
                if (address_component.types[0] == "administrative_area_level_2") {
76 
                    locationObject.city2 = address_component.long_name;
77 
                }
78 
                if (address_component.types[0] == "administrative_area_level_1") {
79 
                    locationObject.state = address_component.long_name;
80 
                }
81 
                if (address_component.types[0] == "country") {
82 
                    locationObject.country = address_component.long_name;
83 
                }
84 
                if (address_component.types[0] == "postal_code") {
85 
                    locationObject.postal_code = address_component.long_name;
86 
                }
87 
            })
7878 stevensc 88 
 
7884 stevensc 89 
            updateQuery(locationObject.formatted_address);
90 
            setData(addressObject);
91 
        }
7878 stevensc 92 
 
7884 stevensc 93 
    }
7878 stevensc 94 
 
7884 stevensc 95 
 
6597 stevensc 96 
    useEffect(() => {
97 
        loadScript(
98 
            `https://maps.googleapis.com/maps/api/js?key=${googleApiKey}&libraries=places`,
7878 stevensc 99 
            () => handleScriptLoad(setValue, autoCompleteRef, setData)
6597 stevensc 100 
        );
101 
    }, []);
102 
 
103 
    return (
7124 stevensc 104 
        <div className="form-group">
6597 stevensc 105 
            <input
106 
                ref={autoCompleteRef}
7122 stevensc 107 
                onChange={event => setValue(event.target.value)}
6597 stevensc 108 
                placeholder="Enter a City"
7122 stevensc 109 
                value={value}
7124 stevensc 110 
                className="form-control"
6597 stevensc 111 
            />
112 
        </div>
113 
    );
114 
}
115 
 
116 
export default SearchLocationInput;