fix: Panels not being destroyed properly on component unmount

Asha20 · Asha20 · commit 2cde9ebc04ad · 2023-11-29T09:45:51.000Z
diff --git a/example/App.tsx b/example/App.tsx
@@ -107,7 +107,7 @@ function App() {
   const [panelHeight, setPanelHeight] = useState(100);
   const [panelVisible, setPanelVisible] = useState(true);
 
-  const [panel, setPanel] = useState(false);
+  const [renderPanel, setPanel] = useState(false);
 
   if (typeof import.meta.env.VITE_APP_ID !== "string") {
     return (
@@ -156,7 +156,7 @@ function App() {
           {...(blur ? { onBlur } : {})}
           style={{ width: 500, height: 600 }}
         >
-          {panel && (
+          {renderPanel && (
             <HtmlPanel
               url="example/panel.html"
               height={panelHeight}
@@ -174,8 +174,13 @@ function App() {
         </Chatbox>
       </Session>
 
-      <button onClick={() => setPanel((x) => !x)}>
-        toggle panel to {String(!panel)}
+      <button
+        onClick={() => {
+          setPanel((x) => !x);
+          setPanelVisible(true);
+        }}
+      >
+        {renderPanel ? "Unmount" : "Mount"} HTML panel
       </button>
       <button onClick={otherMe}>switch user (new session)</button>
       <br />
diff --git a/example/main.tsx b/example/main.tsx
@@ -8,20 +8,3 @@ ReactDOM.createRoot(document.getElementById("root")!).render(
     <App />
   </React.StrictMode>,
 );
-
-// import Talk from "talkjs";
-
-// await Talk.ready;
-
-// const me = new Talk.User({ id: "alice", name: "Alice" });
-// const session = new Talk.Session({ appId: "Hku1c4Pt", me });
-// const chatbox = session.createChatbox();
-// const conversation = session.getOrCreateConversation("abc");
-// conversation.setParticipant(me);
-
-// chatbox.select(conversation);
-// chatbox.mount(document.getElementById("root")!);
-
-// chatbox.createHtmlPanel({ url: "./example/panel.html" });
-
-// document.getElementById("root")!.style.height = "100vh";
diff --git a/example/panel.html b/example/panel.html
@@ -15,7 +15,5 @@
       }
     </style>
   </head>
-  <body>
-    Default content here
-  </body>
+  <body></body>
 </html>
diff --git a/lib/HtmlPanel.tsx b/lib/HtmlPanel.tsx
@@ -1,4 +1,4 @@
-import { useContext, useEffect, useRef, useState } from "react";
+import { useContext, useEffect, useState } from "react";
 import { createPortal } from "react-dom";
 import Talk from "talkjs";
 import { BoxContext } from "./MountedBox";
@@ -31,47 +31,38 @@ export function HtmlPanel({
   conversationId,
   children,
 }: HtmlPanelProps) {
-  const panelPromise = useRef<undefined | Promise<Talk.HtmlPanel>>(undefined);
   const [panel, setPanel] = useState<undefined | Talk.HtmlPanel>(undefined);
   const box = useContext(BoxContext);
 
   useEffect(() => {
-    function run() {
-      console.log("@@trying");
-      if (!box || panelPromise.current) return;
-      console.log("@@initializing");
+    async function run() {
+      if (!box || panel) return Promise.resolve(panel);
 
-      // const old = await panelPromise;
-      // old?.destroy();
+      const newPanel = await box.createHtmlPanel({
+        url,
+        conversation: conversationId,
+        height,
+        show: false,
+      });
 
-      const panel = box
-        .createHtmlPanel({ url, conversation: conversationId, height, show })
-        .then(async (panel) => {
-          await panel.windowLoadedPromise;
-          console.log("@@window loaded");
-          // setPanel(panel);
-          return panel;
-        });
+      await newPanel.DOMContentLoadedPromise;
+      if (show) {
+        newPanel.show();
+      }
 
-      panelPromise.current = panel;
+      setPanel(newPanel);
+      return newPanel;
     }
 
-    run();
+    const panelPromise = run();
 
-    // return () => {
-    //   console.log("@@cleanup", panelPromise);
-    //   if (panelPromise) {
-    //     panelPromise.current?.then((panel) => {
-    //       panelPromise.current = undefined;
-    //       panel.destroy().then(() => {
-    //         console.log("@@deleted");
-    //         setPanel(undefined);
-    //       });
-    //     });
-    //   } else {
-    //     setPanel(undefined);
-    //   }
-    // };
+    return () => {
+      panelPromise.then((panel) => {
+        panel?.destroy().then(() => {
+          setPanel(undefined);
+        });
+      });
+    };
     // We intentionally exclude `height` and `show` from the dependency array so
     // that we update them later via methods instead of by re-creating the
     // entire panel from scratch each time.
@@ -91,6 +82,5 @@ export function HtmlPanel({
     }
   }, [panel, show]);
 
-  // return <>{panel && createPortal(children, panel.window.document.body)}</>;
-  return null;
+  return <>{panel && createPortal(children, panel.window.document.body)}</>;
 }
diff --git a/lib/hooks.tsx b/lib/hooks.tsx
@@ -84,14 +84,11 @@ export function useUIBox<
     if (session?.isAlive) {
       const uibox = session[create](options) as R;
       setBox(uibox);
-      (window as any).ui = uibox;
-      console.log("@@create");
       if (ref) {
         ref.current = uibox;
       }
 
       return () => {
-        console.log("@@destroy");
         uibox.destroy();
         setBox(undefined);
       };

Original file line number	Diff line number	Diff line change
`@@ -15,7 +15,5 @@`
`15`	`15`	`}`
`16`	`16`	`</style>`
`17`	`17`	`</head>`
`18`		`- <body>`
`19`		`- Default content here`
`20`		`- </body>`
	`18`	`+ <body></body>`
`21`	`19`	`</html>`