Improve fetchUnits to increase search radius when necessary

By default, fetch units within 100 meters but if there are less than 50
units, fetch units within 500 meters. 50 units is the maximum amount
that is currently wanted to be shown in the map.

src/views/AddressView/AddressView.js

@@ -99,17 +99,23 @@ const AddressView = ({ embed = false }) => {
         setIsFetchingDistricts(false);
       });
   };
-
-  const fetchUnits = (lnglat) => {
+
+  const fetchUnits = (lnglat, distance = 100) => {
+    // By default, fetch units within 100 meters but if there are less than 50 units,
+    // fetch units within 500 meters
     setIsFetchingUnits(true);
-    fetchAddressUnits(lnglat)
+    fetchAddressUnits(lnglat, distance)
       .then(data => {
         const units = data?.results || [];
         units.forEach((unit) => {
           unit.object_type = 'unit';
         });
         dispatch(setAddressUnits(units));
         setIsFetchingUnits(false);
+
+        if (units.length < 50 && distance === 100) {
+          fetchUnits(lnglat, 500);
+        }
       });
   };
 

src/views/AddressView/utils/fetchAddressUnits.js

@@ -1,14 +1,15 @@
 import { unitsFetch } from '../../../utils/fetch';
 
-const fetchAddressUnits = async (lnglat) => {
+const fetchAddressUnits = async (lnglat, distance) => {
+  console.log('fetchAddressUnits');
   const options = {
     lat: `${lnglat[1]}`,
     lon: `${lnglat[0]}`,
-    distance: 500,
+    distance: distance,
     only: 'name,location,accessibility_shortcoming_count,',
     geometry: false,
     page: 1,
-    page_size: 200,
+    page_size: 50,
   };
 
   const unitData = await unitsFetch(options);