fix(desktop): error when removing listener

Author: mayneyao

components/tabs.tsx

@@ -30,22 +30,28 @@ export const TabManager: React.FC = () => {
       setCurrentTab(tab)
     }
 
-    window.eidos.on("tabs-updated", (event, tabs: string[]) => {
-      console.log("tabs-updated", tabs)
-      handleTabsUpdated(tabs)
-    })
-    window.eidos.on("current-tab-updated", (event, tab: string) => {
-      console.log("current-tab-updated", tab)
-      handleCurrentTabUpdated(tab)
-    })
-
-    return () => {
-      window.eidos.off("tabs-updated", (event, tabs: string[]) =>
+    let listenerId1 = window.eidos.on(
+      "tabs-updated",
+      (event, tabs: string[]) => {
+        console.log("tabs-updated", tabs)
         handleTabsUpdated(tabs)
-      )
-      window.eidos.off("current-tab-updated", (event, tab: string) =>
+      }
+    )
+    let listenerId2 = window.eidos.on(
+      "current-tab-updated",
+      (event, tab: string) => {
+        console.log("current-tab-updated", tab)
         handleCurrentTabUpdated(tab)
-      )
+      }
+    )
+
+    return () => {
+      if (listenerId1) {
+        window.eidos.off("tabs-updated", listenerId1)
+      }
+      if (listenerId2) {
+        window.eidos.off("current-tab-updated", listenerId2)
+      }
     }
   }, [setTabs, setCurrentTab])
   const tabNodes = Array.from(openTabs)

electron/preload.ts

@@ -23,7 +23,7 @@ async function main() {
   contextBridge.exposeInMainWorld('eidos', {
     on(channel: string, listener: IpcListener) {
       if (typeof channel !== 'string' || typeof listener !== 'function') {
-        throw new Error('Invalid parameters');
+        throw new Error('Invalid parameters for add listener for channel: ' + channel);
       }
       if (!listenerMap.has(channel)) {
         listenerMap.set(channel, new Map());
@@ -48,7 +48,7 @@ async function main() {
 
     off(channel: string, listenerId: string) {
       if (typeof channel !== 'string' || typeof listenerId !== 'string') {
-        throw new Error('Invalid parameters');
+        throw new Error('Invalid parameters for remove listener for channel: ' + channel);
       }
 
       const channelListeners = listenerMap.get(channel);

hooks/use-update-status.ts

@@ -45,14 +45,14 @@ export const useUpdateStatus = () => {
             }
         };
 
-        window.eidos.on('update-status', (event, status: UpdateStatus, data?: any) => {
+        let listenerId = window.eidos.on('update-status', (event, status: UpdateStatus, data?: any) => {
             handleUpdateStatus(status, data);
         });
 
         return () => {
-            window.eidos.off('update-status', (event, status: UpdateStatus, data?: any) => {
-                handleUpdateStatus(status, data);
-            });
+            if (listenerId) {
+                window.eidos.off('update-status', listenerId);
+            }
         };
     }, []);
 

hooks/use-worker.ts

@@ -91,11 +91,12 @@ export const useWorker = () => {
       window.eidos.send(`response-${requestId}`, result);
     }
     let listenerId: string | undefined;
+    let listenerId2: string | undefined;
     if (isDesktopMode) {
       listenerId = window.eidos.on('request-from-main', requestHandler);
-      window.eidos.on(EidosMessageChannelName, async (event, arg) => {
+      listenerId2 = window.eidos.on(EidosMessageChannelName, async (event, arg) => {
         await handle(new MessageEvent('message', { data: arg }))
-      });
+      }) as unknown as string;
       setInitialized(true)
     } else {
       const worker = getWorker()
@@ -106,6 +107,9 @@ export const useWorker = () => {
         if (listenerId) {
           window.eidos.off('request-from-main', listenerId);
         }
+        if (listenerId2) {
+          window.eidos.off(EidosMessageChannelName, listenerId2);
+        }
       } else {
         const worker = getWorker()
         worker.removeEventListener("message", handle)