fix remove after first bug

theopensystemslab · Sep 6, 2024 · 600d650 · 600d650
1 parent 0e59f17
commit 600d650
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 9 deletions.
diff --git a/editor.planx.uk/src/@planx/components/MapAndLabel/Public/Context.tsx b/editor.planx.uk/src/@planx/components/MapAndLabel/Public/Context.tsx
@@ -26,7 +26,7 @@ export const MAP_ID = "map-and-label-map";
 interface MapAndLabelContextValue {
   schema: Schema;
   features?: Feature[];
-  updateMap: boolean;
+  updateMapKey: number;
   activeIndex: number;
   editFeature: (index: number) => void;
   formik: FormikProps<SchemaUserData>;
@@ -118,7 +118,7 @@ export const MapAndLabelProvider: React.FC<MapAndLabelProviderProps> = (
 
   const [features, setFeatures] = useGeoJSONChange(MAP_ID, handleGeoJSONChange);
 
-  const [updateMap, setUpdateMap] = useState<boolean>(false);
+  const [updateMapKey, setUpdateMapKey] = useState<number>(0);
 
   const resetErrors = () => {
     setMinError(false);
@@ -183,9 +183,14 @@ export const MapAndLabelProvider: React.FC<MapAndLabelProviderProps> = (
   };
 
   const removeFeatureFromMap = (index: number) => {
-    setFeatures(features?.filter((_, i) => i !== index));
-    // `updateMap` is set as the `key` prop on the map container to force a re-render of its children (aka <my-map />) on change
-    setUpdateMap(true);
+    // Order of features varies by change/modification, filter on label not array position
+    const filteredFeatures = features?.filter(
+      (feature) => feature.properties?.label !== `${index + 1}`,
+    );
+    // TODO: shift labels so they remain incremental
+    setFeatures(filteredFeatures);
+    // `updateMapKey` is set as a unique `key` prop on the map container to force a re-render of its children (aka <my-map />) on change
+    setUpdateMapKey(updateMapKey + 1);
   };
 
   const removeFeature = (index: number) => {
@@ -199,7 +204,7 @@ export const MapAndLabelProvider: React.FC<MapAndLabelProviderProps> = (
     <MapAndLabelContext.Provider
       value={{
         features,
-        updateMap,
+        updateMapKey,
         activeIndex,
         schema,
         mapAndLabelProps: props,

diff --git a/editor.planx.uk/src/@planx/components/MapAndLabel/Public/index.tsx b/editor.planx.uk/src/@planx/components/MapAndLabel/Public/index.tsx
@@ -201,7 +201,7 @@ const Root = () => {
     features,
     mapAndLabelProps,
     schema,
-    updateMap,
+    updateMapKey,
     validateAndSubmitForm,
   } = useMapAndLabelContext();
   const {
@@ -236,12 +236,12 @@ const Root = () => {
         howMeasured={howMeasured}
       />
       <FullWidthWrapper>
-        <ErrorWrapper error={rootError} key={updateMap ? 1 : 0}>
+        <ErrorWrapper error={rootError} key={updateMapKey}>
           <MapContainer environment="standalone">
             {/* @ts-ignore */}
             <my-map
               id={MAP_ID}
-              data-testid="map-and-label-map"
+              data-testid={MAP_ID}
               basemap={basemap}
               ariaLabelOlFixedOverlay={`An interactive map for plotting and describing individual ${schemaName.toLocaleLowerCase()}`}
               drawMode