From b4a7817c259b3e842c65a05ef1c5e9477f7e6a01 Mon Sep 17 00:00:00 2001
From: Rahul Yadav <rahulkyadav57@gmail.com>
Date: Fri, 19 Apr 2024 23:35:03 +0530
Subject: [PATCH] Fix event listener removal issue

---
 .../workspace/WorkSpace/WorkSpace.tsx         | 38 ++++++++++---------
 1 file changed, 21 insertions(+), 17 deletions(-)

diff --git a/src/components/workspace/WorkSpace/WorkSpace.tsx b/src/components/workspace/WorkSpace/WorkSpace.tsx
index a065728..0aed4c3 100644
--- a/src/components/workspace/WorkSpace/WorkSpace.tsx
+++ b/src/components/workspace/WorkSpace/WorkSpace.tsx
@@ -58,6 +58,23 @@ const WorkSpace: FC = () => {
     globalWorkspace.sandboxWallet = wallet;
   };
 
+  const interceptConsoleError = (e: any) => {
+    if (e?.detail?.data?.length === 0) return;
+    const _log = e.detail.data.join(', ');
+    // Some of the error aren't getting thrown by Tact compiler instead then are logged. So we need to check if the log contains '>' or 'compilation error'. This string is only present in the logs thrown by Tact compiler.
+    // console.error is not getting intercepted by the workspace because they stores reference to the original console.error method. So I have created global script(public/assets/js/log.js) which is getting loaded before any other script and it listens to the console.error and dispatches an event with the error message.
+    if (!(_log.includes('>') || _log.includes('compilation error'))) return;
+
+    createLog(_log, 'error', true, true);
+  };
+
+  const onKeydown = (e: KeyboardEvent) => {
+    if ((e.ctrlKey || e.metaKey) && e.key === 's') {
+      e.preventDefault();
+      EventEmitter.emit('SAVE_FILE', () => {});
+    }
+  };
+
   useEffect(() => {
     if (!activeProject) {
       return;
@@ -67,12 +84,7 @@ const WorkSpace: FC = () => {
   }, [activeProject]);
 
   useEffect(() => {
-    document.addEventListener('keydown', (e) => {
-      if ((e.ctrlKey || e.metaKey) && e.key === 's') {
-        e.preventDefault();
-        EventEmitter.emit('SAVE_FILE', () => {});
-      }
-    });
+    document.addEventListener('keydown', onKeydown);
     const originalConsoleLog = console.log;
 
     console.log = (...args) => {
@@ -93,21 +105,13 @@ const WorkSpace: FC = () => {
       type: 'TON-func',
     });
 
-    document.addEventListener('consoleError', (e: any) => {
-      if (e?.detail?.data?.length === 0) return;
-      const _log = e.detail.data.join(', ');
-      // Some of the error aren't getting thrown by Tact compiler instead then are logged. So we need to check if the log contains '>' or 'compilation error'. This string is only present in the logs thrown by Tact compiler.
-      // console.error is not getting intercepted by the workspace because they stores reference to the original console.error method. So I have created global script(public/assets/js/log.js) which is getting loaded before any other script and it listens to the console.error and dispatches an event with the error message.
-      if (!(_log.includes('>') || _log.includes('compilation error'))) return;
-
-      createLog(_log, 'error', true, true);
-    });
+    document.addEventListener('consoleError', interceptConsoleError);
 
     return () => {
       console.log = originalConsoleLog;
       try {
-        document.removeEventListener('keydown', () => {});
-        document.removeEventListener('consoleError', () => {});
+        document.removeEventListener('keydown', onKeydown);
+        document.removeEventListener('consoleError', interceptConsoleError);
 
         clearLog();
       } catch (error) {}