upates on the google map removal

src/pages/nearle/clients/createclient.js

@@ -11,13 +11,11 @@ import { MdPersonAddAlt1 } from 'react-icons/md';
 // project import
 import MainCard from 'components/MainCard';
 import axios from 'axios';
-import { usePlacesWidget } from 'react-google-autocomplete';
+import AddressAutocomplete, { geocodeAddress } from 'components/nearle_components/AddressAutocomplete';
 import Loader from 'components/Loader';
-import Geocode from 'react-geocode';
 import { enqueueSnackbar } from 'notistack';
 import { useNavigate } from 'react-router';
 import { DT, tint } from 'themes/dt/tokens';
-// import { setLocationType } from 'react-geocode';
 
 // const avatarImage = require.context('assets/images/users', true);
 
@@ -51,9 +49,6 @@ const Createclient = () => {
 
   const navigate = useNavigate();
 
-  Geocode.setApiKey(process.env.REACT_APP_GOOGLE_MAPS_API_KEY);
-  // Geocode.setApiKey('AIzaSyCF4KatYCI3vqz1_H3kiHeyS3yCMfYToh8');
-
   const [loading, setLoading] = useState(false);
 
   useEffect(() => {
@@ -65,25 +60,15 @@ const Createclient = () => {
   }, []);
 
   useEffect(() => {
-    try {
-      Geocode.fromAddress(address).then(
-        (response) => {
-          if (response.status == 'OK') {
-            const { lat, lng } = response.results[0].geometry.location;
-            setLatlong({
-              lat,
-              lng
-            });
-            console.log(response);
-          }
-        },
-        (error) => {
-          console.log(error);
-        }
-      );
-    } catch (err) {
-      console.log(err);
-    }
+    let active = true;
+    geocodeAddress(address).then((place) => {
+      if (active && place) {
+        setLatlong({ lat: place.geometry.location.lat(), lng: place.geometry.location.lng() });
+      }
+    });
+    return () => {
+      active = false;
+    };
   }, [address]);
 
   const opentoast = (message) => {
@@ -147,45 +132,33 @@ const Createclient = () => {
       });
   };
 
-  const { ref: materialRef } = usePlacesWidget({
-    apiKey: process.env.REACT_APP_GOOGLE_MAPS_API_KEY,
-    onPlaceSelected: (place) => {
-      console.log(place);
-
-      setAddress(place.formatted_address);
-      let city1, zipcode1, state1, suburb1;
-      for (let i = 0; i < place.address_components.length; i++) {
-        for (let j = 0; j < place.address_components[i].types.length; j++) {
-          switch (place.address_components[i].types[j]) {
-            case 'locality':
-              city1 = place.address_components[i].long_name;
-              break;
-            case 'administrative_area_level_1':
-              state1 = place.address_components[i].long_name;
-              break;
-            case 'postal_code':
-              zipcode1 = place.address_components[i].long_name;
-              break;
-            case 'sublocality':
-              suburb1 = place.address_components[i].long_name;
-              break;
-          }
+  const handleAddressPlaceSelected = (place) => {
+    setAddress(place.formatted_address);
+    let city1, zipcode1, state1, suburb1;
+    for (let i = 0; i < place.address_components.length; i++) {
+      for (let j = 0; j < place.address_components[i].types.length; j++) {
+        switch (place.address_components[i].types[j]) {
+          case 'locality':
+            city1 = place.address_components[i].long_name;
+            break;
+          case 'administrative_area_level_1':
+            state1 = place.address_components[i].long_name;
+            break;
+          case 'postal_code':
+            zipcode1 = place.address_components[i].long_name;
+            break;
+          case 'sublocality':
+          case 'sublocality_level_1':
+            suburb1 = place.address_components[i].long_name;
+            break;
         }
       }
-      setCity(city1 || '');
-      setState(state1 || '');
-      setZipcode(zipcode1 || '');
-      setSuburb(suburb1 || '');
-
-      // setAddress(place.formatted_address)
-    },
-    // inputAutocompleteValue: "country",
-    options: {
-      // componentRestrictions: 'us',
-      // types: ["establishment"]
-      types: ['address' || 'geocode']
     }
-  });
+    setCity(city1 || '');
+    setState(state1 || '');
+    setZipcode(zipcode1 || '');
+    setSuburb(suburb1 || '');
+  };
 
   const createprofile = async () => {
     console.log('res', businessname, businessno, mobilenumber, emailaddress, address, city, zipcode);
@@ -499,14 +472,13 @@ const Createclient = () => {
                 <Grid item xs={12}>
                   <Stack spacing={1.25}>
                     <InputLabel htmlFor="personal-address">Address</InputLabel>
-                    <TextField
-                      fullWidth
-                      // defaultValue="Street 110-B Kalians Bag, Dewan, M.P. New York"
+                    <AddressAutocomplete
                       id="personal-address"
+                      fullWidth
                       placeholder="Address"
                       value={address}
-                      onChange={(e) => setAddress(e.target.value)}
-                      inputRef={materialRef}
+                      onChange={setAddress}
+                      onPlaceSelected={handleAddressPlaceSelected}
                     />
                   </Stack>
                 </Grid>