Proyectos de Subversion LeadersLinked - Backend

import React, { useEffect, useRef } from "react";
import { useState } from "react";

function SearchLocationInput({ googleApiKey, setValue, value }) {

    const autoCompleteRef = useRef(null);
    const [data, setData] = useState({})

    let autoComplete;

    const loadScript = (url, callback) => {
        let script = document.createElement("script");
        script.type = "text/javascript";

        if (script.readyState) {
            script.onreadystatechange = function () {
                if (script.readyState === "loaded" || script.readyState === "complete") {
                    script.onreadystatechange = null;
                    callback();
                }
            };
        } else {
            script.onload = () => callback();
        }

        script.src = url;
        document.getElementsByTagName("head")[0].appendChild(script);
    };

    function handleScriptLoad(updateQuery, autoCompleteRef, setData) {
        autoComplete = new window.google.maps.places.Autocomplete(
            autoCompleteRef.current,
            { types: ["(cities)"] }
        );
        autoComplete.setFields(["address_components", "formatted_address"]);
        autoComplete.addListener("place_changed", () =>
            handlePlaceSelect(updateQuery, setData)
        );
    }

    async function handlePlaceSelect(updateQuery, setData) {

        let locationObject = {
            formatted_address: '',
            address1: '',
            address2: '',
            country: '',
            state: '',
            city1: '',
            city2: '',
            postal_code: '',
            latitude: 0,
            longitude: 0,
            location_search: ''
        }
        const place = await autoComplete.getPlace();
        locationObject.formatted_address = place.formatted_address;

        if (place.geometry) {
            const arrAddress = place.address_components;

            locationObject.latitude = place.geometry.location.lat();
            locationObject.longitude = place.geometry.location.lng();

            arrAddress.forEach((address_component) => {
                if (address_component.types[0] == "route") {
                    locationObject.address1 = address_component.long_name;
                }
                if (address_component.types[0] == "sublocality") {
                    locationObject.address2 = address_component.long_name;
                }
                if (address_component.types[0] == "locality") {
                    locationObject.city1 = address_component.long_name;
                }
                if (address_component.types[0] == "administrative_area_level_2") {
                    locationObject.city2 = address_component.long_name;
                }
                if (address_component.types[0] == "administrative_area_level_1") {
                    locationObject.state = address_component.long_name;
                }
                if (address_component.types[0] == "country") {
                    locationObject.country = address_component.long_name;
                }
                if (address_component.types[0] == "postal_code") {
                    locationObject.postal_code = address_component.long_name;
                }
            })

            updateQuery(locationObject.formatted_address);
            setData(addressObject);
        }

    }


    useEffect(() => {
        loadScript(
            `https://maps.googleapis.com/maps/api/js?key=${googleApiKey}&libraries=places`,
            () => handleScriptLoad(setValue, autoCompleteRef, setData)
        );
    }, []);

    return (
        <div className="form-group">
            <input
                ref={autoCompleteRef}
                onChange={event => setValue(event.target.value)}
                placeholder="Enter a City"
                value={value}
                className="form-control"
            />
        </div>
    );
}

export default SearchLocationInput;