Merge pull request #161 from hotosm/feat/update-task-locking-flow

Fix: map crash issue on rerender
hotosm · Aug 21, 2024 · 7cdf2e3 · 7cdf2e3
2 parents 0aa774a + fb2aa09
commit 7cdf2e3
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 12 deletions.
diff --git a/src/frontend/src/components/IndividualProject/MapSection/index.tsx b/src/frontend/src/components/IndividualProject/MapSection/index.tsx
@@ -154,12 +154,12 @@ const MapSection = () => {
     >
       {taskStatusObj &&
         tasksData &&
-        tasksData?.map((task: Record<string, any>, index: number) => {
+        tasksData?.map((task: Record<string, any>) => {
           return (
             <VectorLayer
               key={task?.id}
               map={map as Map}
-              id={`tasks-layer-${task?.id}-${taskStatusObj?.[task?.id]}-${index}`}
+              id={`tasks-layer-${task?.id}-${taskStatusObj?.[task?.id]}`}
               visibleOnMap={task?.id && taskStatusObj}
               geojson={task.outline_geojson as GeojsonType}
               interactions={['feature']}

diff --git a/src/frontend/src/components/common/MapLibreComponents/Layers/VectorLayer.ts b/src/frontend/src/components/common/MapLibreComponents/Layers/VectorLayer.ts
@@ -1,7 +1,7 @@
 /* eslint-disable no-param-reassign */
 import { useEffect, useMemo, useRef } from 'react';
 import { MapMouseEvent } from 'maplibre-gl';
-import { v4 as uuidv4 } from 'uuid';
+// import { v4 as uuidv4 } from 'uuid';
 import { IVectorLayer } from '../types';
 
 export default function VectorLayer({
@@ -21,36 +21,41 @@ export default function VectorLayer({
 }: IVectorLayer) {
   const sourceId = useMemo(() => id.toString(), [id]);
   const hasInteractions = useRef(false);
+  const imageId = `${sourceId}-image/logo`;
 
   useEffect(() => {
     hasInteractions.current = !!interactions.length;
   }, [interactions]);
 
   useEffect(() => {
     if (!map || !isMapLoaded || !geojson) return;
-    if (map.getSource(sourceId)) {
-      map?.removeLayer(sourceId);
+
+    if (map?.getSource(sourceId)) {
+      if (map?.getLayer(sourceId)) map?.removeLayer(sourceId);
+      if (map?.getLayer(imageId)) map?.removeLayer(imageId);
+      if (map?.getLayer(`${sourceId}-layer`))
+        map?.removeLayer(`${sourceId}-layer`);
       map?.removeSource(sourceId);
     }
+
     map.addSource(sourceId, {
       type: 'geojson',
       data: geojson,
     });
-  }, [sourceId, isMapLoaded, map, geojson]);
+  }, [sourceId, isMapLoaded, map, geojson, imageId]);
 
   useEffect(() => {
     if (!map || !isMapLoaded) return;
     if (visibleOnMap) {
       map.addLayer({
-        id: sourceId,
+        id: `${sourceId}-layer`,
         type: 'line',
         source: sourceId,
         layout: {},
         ...layerOptions,
       });
 
       if (hasImage) {
-        const imageId = uuidv4();
         map.loadImage(image, (error, img: any) => {
           if (error) throw error;
           // Add the loaded image to the style's sprite with the ID 'kitten'.
@@ -114,11 +119,14 @@ export default function VectorLayer({
   useEffect(
     () => () => {
       if (map?.getSource(sourceId)) {
-        map?.removeLayer(sourceId);
+        if (map?.getLayer(sourceId)) map?.removeLayer(sourceId);
+        if (map?.getLayer(imageId)) map?.removeLayer(imageId);
+        if (map?.getLayer(`${sourceId}-layer`))
+          map?.removeLayer(`${sourceId}-layer`);
         map?.removeSource(sourceId);
       }
     },
-    [map, sourceId],
+    [map, sourceId, imageId],
   );
 
   return null;

diff --git a/src/frontend/src/views/Projects/index.tsx b/src/frontend/src/views/Projects/index.tsx
@@ -49,10 +49,10 @@ const Projects = () => {
                   <ProjectCard
                     key={singleproject.id}
                     id={singleproject.id}
-                    containerId={`map-libre-map-${singleproject.id}`}
+                    // containerId={`map-libre-map-${singleproject.id}`}
                     title={singleproject.name}
                     description={singleproject.description}
-                    geojson={singleproject.outline_geojson}
+                    // geojson={singleproject.outline_geojson}
                   />
                 ),
               )