fix: sheet destroy (#1705)

* fix: sheet destroy

* chore: unmount properly

* chore: check against fast cleanup

* chore: remove debug code

apis/nucleus/src/components/NebulaApp.jsx

@@ -87,7 +87,7 @@ export default function boot({ app, context }) {
   );
 
   const cells = {};
-  const cellsUnmount = {};
+  const componentsUnmount = [];
   const components = [];
 
   return [
@@ -98,19 +98,17 @@ export default function boot({ app, context }) {
         });
       },
       cells,
-      addCell(id, cell, unmount) {
+      addCell(id, cell) {
         cells[id] = cell;
-        cellsUnmount[id] = unmount;
       },
       removeCell(id) {
         delete cells[id];
-        cellsUnmount[id]();
-        delete cellsUnmount[id];
       },
-      add(component) {
+      add(component, unmount) {
         (async () => {
           await rendered;
           components.push(component);
+          componentsUnmount.push(unmount);
           appRef.current.setComps(components);
         })();
       },
@@ -119,9 +117,11 @@ export default function boot({ app, context }) {
           await rendered;
           const ix = components.indexOf(component);
           if (ix !== -1) {
+            componentsUnmount[ix]?.();
             components.splice(ix, 1);
+            componentsUnmount.splice(ix, 1);
           }
-          appRef.current.setComps(components);
+          appRef?.current?.setComps(components);
         })();
       },
       setMuiThemeName(themeName) {
@@ -141,10 +141,11 @@ export default function boot({ app, context }) {
         })();
       },
       destroy() {
-        Object.keys(cellsUnmount).forEach((c) => {
+        componentsUnmount.forEach((c) => {
-          cellsUnmount[c]();
+          c && c();
         });
         modelStore.destroy();
+        root.unmount();
       },
     },
     modelStore,

apis/nucleus/src/components/glue.jsx

@@ -42,9 +42,9 @@ export default function glue({
   };
   model.on('closed', unmount);
 
-  root.add(portal);
+  root.add(portal, unmount);
   // Cannot use model.id as it is not unique in a given mashup
-  root.addCell(currentId, cellRef, unmount);
+  root.addCell(currentId, cellRef);
 
   return [unmount, cellRef];
 }

apis/nucleus/src/components/listbox/hooks/useExistingModel.jsx

@@ -15,28 +15,35 @@ export default function useExistingModel({ app, qId, options = {} }) {
   }
 
   useEffect(() => {
-    function storeModel(m) {
+    let isCleaned = false;
-      if (modelStore.get(m.id)) {
+    let cleanupFn = () => {};
-        return;
-      }
-      // Nebula gets the model from this store in some of its
-      // core functions, so it must always be stored here.
-      modelStore.set(m.id, m);
-      m.once('closed', () => {
-        modelStore.clear(m.id);
-      });
-    }
-
     async function fetchObject(modelId) {
       const m = modelStore.get(modelId) || (await app.getObject(modelId));
       return m;
     }
 
-    const p = Promise.resolve(sessionModel || fetchObject(qId));
+    async function fetchModel() {
-    p.then((m) => {
+      const m = await Promise.resolve(sessionModel || fetchObject(qId));
-      storeModel(m);
+      if (isCleaned) {
+        return;
+      }
+      if (!modelStore.get(m.id)) {
+        modelStore.set(m.id, m);
+        const onClosed = () => {
+          modelStore.clear(m.id);
+        };
+        m.once('closed', onClosed);
+        cleanupFn = () => {
+          m.removeListener('closed', onClosed);
+        };
+      }
       setModel(m);
-    });
+    }
+    fetchModel();
+    return () => {
+      isCleaned = true;
+      cleanupFn();
+    };
   }, []);
 
   return model;

apis/nucleus/src/components/sheetGlue.jsx

@@ -37,6 +37,6 @@ export default function glue({
   );
   navigation.setSheetRef(sheetRef);
 
-  root.add(portal);
+  root.add(portal, unmount);
   return [unmount, sheetRef];
 }