front: Implement caching mechanism for region geometries in RegionMap…

… component.

This commit introduces a caching strategy in the MapComponent of the RegionMap
module. The primary change involves the addition of a useRef hook to maintain a
cache of the last 10 fetched region geometries. This cache is an array stored
in regionGeometryCache.

The fetchSelectedRegionGeometry function is updated to first check if the
selected region's geometry is already available in the cache. If not found, it
fetches the geometry from the API, adds it to the cache, and ensures that the
cache size does not exceed 10 items by removing the oldest entry when
necessary.

Issue: #103

Signed-off-by: Nikolay Martyanov <[email protected]>

frontend/src/components/RegionMap.jsx

@@ -8,18 +8,36 @@ function MapComponent() {
   const mapContainer = useRef(null);
   const map = useRef(null);
   const { selectedRegion, selectedHierarchy } = useNavigation();
+  const regionGeometryCache = useRef([]);
 
   const fetchSelectedRegionGeometry = async () => {
+    const cacheIndex = regionGeometryCache.current.findIndex(
+      (item) => item.id === selectedRegion.id && item.hierarchyId === selectedHierarchy.hierarchyId,
+    );
+
+    // Check if the geometry for the selected region is already in the cache
+    if (cacheIndex !== -1) {
+      return regionGeometryCache.current[cacheIndex].geometry;
+    }
+
     if (selectedRegion.id !== null && selectedRegion.id !== 0) {
       const response = await fetchRegionGeometry(selectedRegion.id, selectedHierarchy.hierarchyId);
       if (response) {
+        // Add new geometry to the cache, managing the cache size
+        if (regionGeometryCache.current.length >= 10) {
+          regionGeometryCache.current.shift(); // Remove the oldest item
+        }
+        regionGeometryCache.current.push({
+          id: selectedRegion.id,
+          hierarchyId: selectedHierarchy.hierarchyId,
+          geometry: response.geometry,
+        });
         return response.geometry;
       }
       return null;
     }
     return null;
   };
-
   const initializeMap = async () => {
     if (!mapContainer.current) return; // wait for map container to load