Proyectos de Subversion LeadersLinked - SPA

Rev

| Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
5 stevensc 1 
import React, { useState, useEffect, useRef } from "react";
401 stevensc 2 
import PlaceIcon from "@mui/icons-material/Place";
3 
 
5 stevensc 4 
import FormErrorFeedback from "./FormErrorFeedback";
401 stevensc 5 
import Input from "./Input";
5 stevensc 6 
 
7 
const UbicationInput = ({
8 
  onGetAddress,
9 
  settedQuery,
10 
  placeholder = "Ubicación",
11 
}) => {
12 
  const [addresObject, setAddressObject] = useState({});
13 
  const [query, setQuery] = useState("");
14 
  const [error, setError] = useState("");
15 
  const autoCompleteRef = useRef(null);
16 
  let autoComplete;
17 
 
18 
  function handleScriptLoad(
19 
    updateQuery,
20 
    autoCompleteRef,
21 
    setAddresObject,
22 
    setError
23 
  ) {
24 
    autoComplete = new window.google.maps.places.Autocomplete(
25 
      autoCompleteRef.current,
399 stevensc 26 
      { types: ["(regions)"],
27 
      componentRestrictions: {country: "cl"}
28 
     }
5 stevensc 29 
    );
30 
    autoComplete.setFields([
31 
      "address_components",
32 
      "formatted_address",
33 
      "geometry",
34 
    ]);
35 
    autoComplete.addListener("place_changed", () =>
36 
      handlePlaceSelect(updateQuery, setAddresObject, setError)
37 
    );
38 
  }
39 
 
40 
  async function handlePlaceSelect(updateQuery, setAddresObject, setError) {
41 
    const addressObject = autoComplete.getPlace();
42 
 
43 
    const query = addressObject.formatted_address;
44 
    if (query) {
45 
      setError("");
46 
      updateQuery(query);
47 
      setAddresObject({
48 
        ...addressObject,
49 
        address_components: [
50 
          ...addressObject.address_components,
51 
          {
52 
            latitude: addressObject.geometry.location.lat(),
53 
            longitude: addressObject.geometry.location.lng(),
54 
            types: ["geometry"],
55 
          },
56 
        ],
57 
      });
58 
    } else {
59 
      setError("$error_msg");
60 
    }
61 
  }
62 
 
63 
  useEffect(() => {
64 
    handleScriptLoad(setQuery, autoCompleteRef, setAddressObject, setError);
65 
  }, []);
66 
 
67 
  useEffect(() => {
68 
    onGetAddress(addresObject, query);
69 
  }, [addresObject]);
70 
 
71 
  return (
401 stevensc 72 
    <>
73 
      <Input
5 stevensc 74 
        type="text"
75 
        id="location_search"
76 
        name="location_search"
77 
        className="form-control"
78 
        placeholder={placeholder}
79 
        ref={autoCompleteRef}
80 
        onChange={(event) => {
81 
          setAddressObject({});
82 
          setQuery(event.target.value);
83 
        }}
84 
        value={settedQuery || query}
401 stevensc 85 
        icon={PlaceIcon}
5 stevensc 86 
      />
87 
      {error && <FormErrorFeedback>{error}</FormErrorFeedback>}
401 stevensc 88 
    </>
5 stevensc 89 
  );
90 
};
91 
 
92 
export default UbicationInput;