Proyectos de Subversion LeadersLinked - Backend

Rev

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