fix(autocomplete): 🐛 Fix bug of import multiple scripts

package.json

@@ -9,6 +9,7 @@
     "@capacitor/keyboard": "1.2.2",
     "@capacitor/status-bar": "1.0.8",
     "@craco/craco": "^6.4.5",
+    "@googlemaps/js-api-loader": "^1.14.3",
     "@hookform/error-message": "^2.0.0",
     "@ionic-selectable/core": "^5.0.0-alpha.13",
     "@ionic/react": "^6.2.5",

src/components/AutoCompleteInput.tsx

@@ -1,21 +1,9 @@
+import { Loader } from "@googlemaps/js-api-loader";
 import { InputHTMLAttributes, useEffect, useRef } from "react";
 
-const apiKey = process.env.REACT_APP_KEY_API;
-const mapApiJs = "https://maps.googleapis.com/maps/api/js";
-
-// load google map api js
-function loadAsyncScript(src: string) {
-  return new Promise((resolve) => {
-    const script = document.createElement("script");
-    Object.assign(script, {
-      type: "text/javascript",
-      async: true,
-      src,
-    });
-    script.addEventListener("load", () => resolve(script));
-    document.head.appendChild(script);
-  });
-}
+const apiKey = process.env.REACT_APP_KEY_API
+  ? process.env.REACT_APP_KEY_API
+  : "";
 
 const extractAddress = (place: any) => {
   const address = {
@@ -48,16 +36,7 @@ interface AutoCompleteInputProps extends InputHTMLAttributes<HTMLInputElement> {
 
 function AutoCompleteInput(props: AutoCompleteInputProps) {
   const searchInput = useRef(null);
-
-  // init gmap script
-  const initMapScript = () => {
-    // if script already loaded
-    if (window.google) {
-      return Promise.resolve();
-    }
-    const src = `${mapApiJs}?key=${apiKey}&libraries=places&language=pt-BR&v=weekly`;
-    return loadAsyncScript(src);
-  };
+  const { onAddressSelected, ...othersProps } = props;
 
   // do something on address change
   const onChangeAddress = (autocomplete: any) => {
@@ -82,14 +61,34 @@ function AutoCompleteInput(props: AutoCompleteInputProps) {
 
   // load map script after mounted
   useEffect(() => {
-    initMapScript().then(() => initAutocomplete());
+    const init = async () => {
+      try {
+        if (
+          !window.google ||
+          !window.google.maps ||
+          !window.google.maps.places
+        ) {
+          await new Loader({
+            apiKey,
+            version: "weekly",
+            libraries: ["places"],
+            language: "pt-BR",
+          }).load();
+        }
+        initAutocomplete();
+      } catch (error) {
+        console.log(error);
+      }
+    };
+
+    if (apiKey) init();
   }, []);
 
   return (
     <input
       ref={searchInput}
       type="text"
-      {...props}
+      {...othersProps}
       style={{
         textIndent: "0.5rem",
         width: "100%",

src/pages/CadastrarItinerario/CadastrarItinerario.tsx

@@ -243,17 +243,11 @@ export default function CadastrarItinerario() {
               </h1>
               <div className="flex items-center mb-3">
                 <IonIcon icon={locationOutline}></IonIcon>
-                {/* <GooglePlacesAutocomplete
-                  apiKey={process.env.REACT_APP_KEY_API}
-                  apiOptions={{ language: "pt-br", region: "br" }}
-                  selectProps={{
-                    className: "input-autocomplete",
-                    placeholder: "PUC Campinas",
-                    onChange: () => {
-                      addNeighborhoodToList();
-                    },
-                  }}
-                /> */}
+                <AutoCompleteInput
+                  placeholder="R. José Paulino, 1234"
+                  className="ml-2"
+                  onAddressSelected={(address: Address) => console.log(address)}
+                />
               </div>
               <div className="flex justify-end mb-3">
                 <IonButton>
@@ -300,17 +294,11 @@ export default function CadastrarItinerario() {
               </h1>
               <div className="flex items-center mb-3">
                 <IonIcon icon={locationOutline}></IonIcon>
-                {/* <GooglePlacesAutocomplete
-                  apiKey={process.env.REACT_APP_KEY_API}
-                  apiOptions={{ language: "pt-br", region: "br" }}
-                  selectProps={{
-                    className: "input-autocomplete",
-                    placeholder: "PUC Campinas",
-                    onChange: () => {
-                      nextButton2.current!.disabled = false;
-                    },
-                  }}
-                /> */}
+                <AutoCompleteInput
+                  placeholder="R. José Paulino, 1234"
+                  className="ml-2"
+                  onAddressSelected={(address: Address) => console.log(address)}
+                />
               </div>
               <div className="flex justify-between mb-3">
                 <IonButton onClick={() => onBtnClicked("prev")} color="primary">
@@ -345,14 +333,11 @@ export default function CadastrarItinerario() {
               </h1>
               <div className="flex items-center mb-3">
                 <IonIcon icon={locationOutline}></IonIcon>
-                {/* <GooglePlacesAutocomplete
-                  apiKey={process.env.REACT_APP_KEY_API}
-                  apiOptions={{ language: "pt-br", region: "br" }}
-                  selectProps={{
-                    className: "input-autocomplete",
-                    placeholder: "PUC Campinas",
-                  }}
-                /> */}
+                <AutoCompleteInput
+                  placeholder="R. José Paulino, 1234"
+                  className="ml-2"
+                  onAddressSelected={(address: Address) => console.log(address)}
+                />
               </div>
               <div className="flex justify-end mb-3">
                 <IonButton>

yarn.lock

@@ -1205,6 +1205,13 @@
   resolved "https://registry.yarnpkg.com/@gar/promisify/-/promisify-1.1.3.tgz#555193ab2e3bb3b6adc3d551c9c030d9e860daf6"
   integrity sha512-k2Ty1JcVojjJFwrg/ThKi2ujJ7XNLYaFGNB/bWT9wGR+oSMJHMa5w+CUq6p/pVrKeNNgA7pCqEcjSnHVoqJQFw==
 
+"@googlemaps/js-api-loader@^1.14.3":
+  version "1.14.3"
+  resolved "https://registry.yarnpkg.com/@googlemaps/js-api-loader/-/js-api-loader-1.14.3.tgz#d7a161cd547be04ad46a1cb176e6c2647f6d74a7"
+  integrity sha512-6iIb+qpGgQpgIHmIFO44WhE1rDUxPVHuezNFL30wRJnkvhwFm94tD291UvNg9L05hLDSoL16jd0lbqqmdy4C5g==
+  dependencies:
+    fast-deep-equal "^3.1.3"
+
 "@hapi/address@2.x.x":
   version "2.1.4"
   resolved "https://registry.yarnpkg.com/@hapi/address/-/address-2.1.4.tgz#5d67ed43f3fd41a69d4b9ff7b56e7c0d1d0a81e5"