Proyectos de Subversion LeadersLinked - Backend

Rev

Rev 7912 | Rev 7935 | 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 
 
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);
28 
    const [data, setData] = useState({
29 
        formatted_address: '',
30 
        address1: '',
31 
        address2: '',
32 
        country: '',
33 
        state: '',
34 
        city1: '',
35 
        city2: '',
36 
        postal_code: '',
37 
        latitude: 0,
38 
        longitude: 0,
39 
        location_search: ''
40 
    })
7878 stevensc 41 
 
7884 stevensc 42 
    function handleScriptLoad(updateQuery, autoCompleteRef, setData) {
43 
        autoComplete = new window.google.maps.places.Autocomplete(
44 
            autoCompleteRef.current,
45 
            { types: ["(cities)"] }
46 
        );
47 
        autoComplete.addListener("place_changed", () =>
7899 stevensc 48 
            handlePlaceSelect(updateQuery)
7884 stevensc 49 
        );
7878 stevensc 50 
    }
51 
 
7899 stevensc 52 
    async function handlePlaceSelect(updateQuery) {
6597 stevensc 53 
 
7899 stevensc 54 
        const place = await autoComplete.getPlace()
7912 stevensc 55 
        console.log(place)
6597 stevensc 56 
 
7912 stevensc 57 
        setData({
58 
            ...data,
7917 stevensc 59 
            formatted_address: place.address_components.formatted_address,
60 
            latitude: place.geometry?.location.lat(),
61 
            longitude: place.geometry?.location.lng()
7912 stevensc 62 
        })
63 
 
7917 stevensc 64 
        place.address_components?.map((address_component) => {
65 
            if (address_component.types[0] == "route") {
66 
                setData({
67 
                    ...data,
68 
                    address1: address_component.long_name
69 
                })
70 
            }
71 
            if (address_component.types[0] == "sublocality") {
72 
                setData({
73 
                    ...data,
74 
                    address2: address_component.long_name
75 
                })
76 
            }
77 
            if (address_component.types[0] == "locality") {
78 
                setData({
79 
                    ...data,
80 
                    city1: address_component.long_name
81 
                })
82 
            }
83 
            if (address_component.types[0] == "administrative_area_level_2") {
84 
                setData({
85 
                    ...data,
86 
                    city2: address_component.long_name
87 
                })
88 
            }
89 
            if (address_component.types[0] == "administrative_area_level_1") {
90 
                setData({
91 
                    ...data,
92 
                    state: address_component.long_name
93 
                })
94 
            }
95 
            if (address_component.types[0] == "country") {
96 
                setData({
97 
                    ...data,
98 
                    country: address_component.long_name
99 
                })
100 
            }
101 
            if (address_component.types[0] == "postal_code") {
102 
                setData({
103 
                    ...data,
104 
                    postal_code: address_component.long_name
105 
                })
106 
            }
107 
        })
7911 stevensc 108 
 
7899 stevensc 109 
        updateQuery(place.formatted_address)
7884 stevensc 110 
    }
7878 stevensc 111 
 
7884 stevensc 112 
 
6597 stevensc 113 
    useEffect(() => {
114 
        loadScript(
115 
            `https://maps.googleapis.com/maps/api/js?key=${googleApiKey}&libraries=places`,
7878 stevensc 116 
            () => handleScriptLoad(setValue, autoCompleteRef, setData)
6597 stevensc 117 
        );
118 
    }, []);
119 
 
7917 stevensc 120 
    useEffect(() => {
121 
        updateData(data)
122 
    }, [data]);
123 
 
6597 stevensc 124 
    return (
7124 stevensc 125 
        <div className="form-group">
6597 stevensc 126 
            <input
127 
                ref={autoCompleteRef}
7122 stevensc 128 
                onChange={event => setValue(event.target.value)}
6597 stevensc 129 
                placeholder="Enter a City"
7122 stevensc 130 
                value={value}
7124 stevensc 131 
                className="form-control"
6597 stevensc 132 
            />
133 
        </div>
134 
    );
135 
}
136 
 
137 
export default SearchLocationInput;