added removeEventListeners for useEffect

Author: eddypjr

app/src/components/left/HTMLPanel.tsx

@@ -149,7 +149,10 @@ const HTMLPanel = (props): JSX.Element => {
   }, []);
 
   useEffect(() => {
-    document.addEventListener("keydown", handleCreateElement);
+    document.addEventListener('keydown', handleCreateElement);
+    return () => {
+      document.removeEventListener('keydown', handleCreateElement)
+    }
   }, []);
 
 

app/src/components/login/SignIn.tsx

@@ -133,15 +133,18 @@ const SignIn: React.FC<LoginInt & RouteComponentProps> = props => {
     });
   };
 
-  const keybindSignIn = useCallback((e) => {
+  const keyBindSignIn = useCallback((e) => {
     if(e.key === 'Enter') {
       e.preventDefault();
       document.getElementById('SignIn').click();
     }
   }, []);
 
   useEffect(() => {
-    document.addEventListener("keydown", keybindSignIn);
+    document.addEventListener('keydown', keyBindSignIn);
+    return () => {
+      document.removeEventListener('keydown', keyBindSignIn)
+    }
   }, []);
 
   // for users not wanting to make an account and use as guest

app/src/components/right/ComponentPanel.tsx

@@ -116,7 +116,10 @@ const ComponentPanel = ({isThemeLight}): JSX.Element => {
   }, []);
 
   useEffect(() => {
-    document.addEventListener("keydown", keyBindCreateComponent);
+    document.addEventListener('keydown', keyBindCreateComponent);
+    return () => {
+      document.removeEventListener('keydown', keyBindCreateComponent)
+    }
   }, []);
 
   const isFocus = (targetId: Number) => {

app/src/components/right/DeleteProjects.tsx

@@ -94,21 +94,18 @@ export default function ProjectsFolder() {
     setOpen(false);
   };
 
-  const keybindDeleteProject = useCallback((e) => {
-    //Mac
-    if(e.key === 'Backspace' && e.metaKey) {
-      e.preventDefault();
-      handleClickOpen();
-    }
-    //Windows
-    if(e.key === 'Backspace' && e.ctrlKey) {
+  const keyBindDeleteProject = useCallback((e) => {
+    if(e.key === 'Backspace' && e.metaKey || e.key === 'Backspace' && e.ctrlKey) {
       e.preventDefault();
       handleClickOpen();
     }
   }, []);
 
   useEffect(() => {
-    document.addEventListener("keydown", keybindDeleteProject);
+    document.addEventListener('keydown', keyBindDeleteProject);
+    return () => {
+      document.removeEventListener('keydown', keyBindDeleteProject)
+    }
   }, []);
 
 

app/src/components/right/OpenProjects.tsx

@@ -86,19 +86,18 @@ export default function ProjectsFolder() {
     setOpen(false);
   };
 
-  const keybindOpenProject = useCallback((e) => {
-    if(e.key === 'o' && e.metaKey) {
-      e.preventDefault();
-      handleClickOpen();
-    }
-    if(e.key === 'o' && e.ctrlKey) {
+  const keyBindOpenProject = useCallback((e) => {
+    if(e.key === 'o' && e.metaKey || e.key === 'o' && e.ctrlKey) {
       e.preventDefault();
       handleClickOpen();
     }
   }, []);
 
   useEffect(() => {
-    document.addEventListener("keydown", keybindOpenProject);
+    document.addEventListener('keydown', keyBindOpenProject);
+    return () => {
+      document.removeEventListener('keydown', keyBindOpenProject)
+    }
   }, []);
 
   return (

app/src/components/right/SaveProjectButton.tsx

@@ -59,7 +59,10 @@ export default function FormDialog() {
   }, []);
 
   useEffect(() => {
-    document.addEventListener("keydown", saveKeyBind);
+    document.addEventListener('keydown', saveKeyBind);
+    return () => {
+      document.removeEventListener('keydown', saveKeyBind)
+    }
   }, []);
 
   return (

app/src/containers/RightContainer.tsx

@@ -304,7 +304,10 @@ const RightContainer = ({isThemeLight}): JSX.Element => {
   }, []);
 
   useEffect(() => {
-    document.addEventListener("keydown", keyBindedFunc);
+    document.addEventListener('keydown', keyBindedFunc);
+    return () => {
+      document.removeEventListener('keydown', keyBindedFunc)
+    }
   }, []);