Proyectos de Subversion LeadersLinked - SPA

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

const UbicationInput = ({
  onGetAddress,
  settedQuery,
  placeholder = "Ubicación",
}) => {
  const [addresObject, setAddressObject] = useState({});
  const [query, setQuery] = useState("");
  const [error, setError] = useState("");
  const autoCompleteRef = useRef(null);
  let autoComplete;

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

  async function handlePlaceSelect(updateQuery, setAddresObject, setError) {
    const addressObject = autoComplete.getPlace();

    const query = addressObject.formatted_address;
    if (query) {
      setError("");
      updateQuery(query);
      setAddresObject({
        ...addressObject,
        address_components: [
          ...addressObject.address_components,
          {
            latitude: addressObject.geometry.location.lat(),
            longitude: addressObject.geometry.location.lng(),
            types: ["geometry"],
          },
        ],
      });
    } else {
      setError("$error_msg");
    }
  }

  useEffect(() => {
    handleScriptLoad(setQuery, autoCompleteRef, setAddressObject, setError);
  }, []);

  useEffect(() => {
    onGetAddress(addresObject, query);
  }, [addresObject]);

  return (
    <React.Fragment>
      <input
        type="text"
        id="location_search"
        name="location_search"
        className="form-control"
        placeholder={placeholder}
        ref={autoCompleteRef}
        onChange={(event) => {
          setAddressObject({});
          setQuery(event.target.value);
        }}
        value={settedQuery || query}
      />
      {error && <FormErrorFeedback>{error}</FormErrorFeedback>}
    </React.Fragment>
  );
};

export default UbicationInput;