Proyectos de Subversion LeadersLinked - Backend

Rev

Rev 7853 | Rev 7878 | 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 
 
7853 stevensc 6 
function SearchLocationInput({ googleApiKey, setValue, value }) {
7 
 
8 
    const autoCompleteRef = useRef(null);
7858 stevensc 9 
    const [locationObject, setLocationObject] = useState({})
6597 stevensc 10 
 
7853 stevensc 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) {
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)
38 
        );
6597 stevensc 39 
    }
40 
 
7853 stevensc 41 
    async function handlePlaceSelect(updateQuery) {
42 
        let locationObject = {
43 
            formatted_address: '',
44 
            address1: '',
45 
            address2: '',
46 
            country: '',
47 
            state: '',
48 
            city1: '',
49 
            city2: '',
50 
            postal_code: '',
51 
            latitude: 0,
52 
            longitude: 0,
53 
            location_search: ''
54 
        }
7858 stevensc 55 
        const place = await autoComplete.getPlace();
56 
        const arrAddress = place.address_components;
6597 stevensc 57 
 
7853 stevensc 58 
        locationObject.formatted_address = place.formatted_address;
59 
        locationObject.latitude = place.geometry.location.lat();
60 
        locationObject.longitude = place.geometry.location.lng();
6597 stevensc 61 
 
7858 stevensc 62 
        await arrAddress.forEach((address_component) => {
7853 stevensc 63 
            if (address_component.types[0] == "route") {
64 
                locationObject.address1 = address_component.long_name;
65 
            }
66 
            if (address_component.types[0] == "sublocality") {
67 
                locationObject.address2 = address_component.long_name;
68 
            }
69 
            if (address_component.types[0] == "locality") {
70 
                locationObject.city1 = address_component.long_name;
71 
            }
72 
            if (address_component.types[0] == "administrative_area_level_2") {
73 
                locationObject.city2 = address_component.long_name;
74 
            }
75 
            if (address_component.types[0] == "administrative_area_level_1") {
76 
                locationObject.state = address_component.long_name;
77 
            }
78 
            if (address_component.types[0] == "country") {
79 
                locationObject.country = address_component.long_name;
80 
            }
81 
            if (address_component.types[0] == "postal_code") {
82 
                locationObject.postal_code = address_component.long_name;
83 
            }
84 
        })
6597 stevensc 85 
 
7858 stevensc 86 
        console.log(locationObject)
7853 stevensc 87 
        updateQuery(locationObject.formatted_address);
88 
    }
7826 stevensc 89 
 
6597 stevensc 90 
    useEffect(() => {
91 
        loadScript(
92 
            `https://maps.googleapis.com/maps/api/js?key=${googleApiKey}&libraries=places`,
7122 stevensc 93 
            () => handleScriptLoad(setValue, autoCompleteRef)
6597 stevensc 94 
        );
95 
    }, []);
96 
 
97 
    return (
7124 stevensc 98 
        <div className="form-group">
6597 stevensc 99 
            <input
100 
                ref={autoCompleteRef}
7122 stevensc 101 
                onChange={event => setValue(event.target.value)}
6597 stevensc 102 
                placeholder="Enter a City"
7122 stevensc 103 
                value={value}
7124 stevensc 104 
                className="form-control"
6597 stevensc 105 
            />
106 
        </div>
107 
    );
108 
}
109 
 
110 
export default SearchLocationInput;