front: fix nge component for reactive properties

Signed-off-by: Benoit Simard <[email protected]>

front/src/applications/operationalStudies/components/NGE/NGE.tsx

@@ -55,14 +55,6 @@ const NGE = ({ dto, onOperation }: NGEProps) => {
       const ngeRoot = frame.contentDocument!.createElement('sbb-root') as NGEElement;
       frame.contentDocument!.body.appendChild(ngeRoot);
       setNgeRootElement(ngeRoot);
-
-      // listens to create, update and delete operations
-      ngeRoot.addEventListener('operation', (event: Event) => {
-        const customEvent = event as CustomEvent;
-        const op = customEvent.detail as NGEEvent;
-
-        if (onOperation) onOperation(op, ngeRoot.netzgrafikDto);
-      });
     };
 
     frame.addEventListener('load', handleFrameLoad);
@@ -84,6 +76,21 @@ const NGE = ({ dto, onOperation }: NGEProps) => {
     }
   }, [dto, ngeRootElement]);
 
+  useEffect(() => {
+    if (ngeRootElement && onOperation) {
+      const fnOpListener = (event: Event) => {
+        const customEvent = event as CustomEvent;
+        const op = customEvent.detail as NGEEvent;
+        if (onOperation) onOperation(op, ngeRootElement.netzgrafikDto);
+      };
+      ngeRootElement.addEventListener('operation', fnOpListener);
+      return () => {
+        ngeRootElement.removeEventListener('operation', fnOpListener);
+      };
+    }
+    return () => {};
+  }, [onOperation, ngeRootElement]);
+
   return <iframe ref={frameRef} srcDoc={frameSrc} title="NGE" className="nge-iframe-container" />;
 };