feat: add useKeyDown hook (#584)

Resolves: #568

---------

Co-authored-by: Amir Blum <amirgiraffe@gmail.com>

frontend/webapp/components/setup/connection/create.connection.form/create.connection.form.tsx

@@ -17,6 +17,7 @@ import { SETUP } from '@/utils/constants';
 import { DestinationBody } from '@/containers/setup/connection/connection.section';
 import { Field } from '@/types/destinations';
 import theme from '@/styles/palette';
+import { useKeyDown } from '@/hooks';
 
 interface CreateConnectionFormProps {
   fields: Field[];
@@ -64,15 +65,10 @@ export function CreateConnectionForm({
     filterSupportedMonitors();
   }, [supportedSignals]);
 
-  useEffect(() => {
-    window.addEventListener('keypress', handleKeyPress);
-    return () => {
-      window.removeEventListener('keypress', handleKeyPress);
-    };
-  }, []);
+  useKeyDown('Enter', handleKeyPress);
 
   function handleKeyPress(e: any) {
-    if (e.key === 'Enter' && !isCreateButtonDisabled) {
+    if (!isCreateButtonDisabled) {
       onCreateClick();
     }
   }

frontend/webapp/containers/overview/sources/update.source.form.tsx

@@ -26,7 +26,7 @@ import {
 } from '@/design.system';
 import { DeleteSource } from '@/components/overview';
 import { deleteSource, getSource, patchSources } from '@/services/sources';
-import { useNotification } from '@/hooks';
+import { useKeyDown, useNotification } from '@/hooks';
 import theme from '@/styles/palette';
 import { ManagedSource } from '@/types/sources';
 
@@ -65,18 +65,13 @@ export function UpdateSourceForm() {
   useEffect(() => {
     setInputValue(currentSource?.reported_name || '');
   }, [currentSource]);
-  useEffect(() => {
-    window.addEventListener('keypress', handleKeyPress);
-    return () => {
-      window.removeEventListener('keypress', handleKeyPress);
-    };
-  }, []);
+
+  useKeyDown('Enter', handleKeyPress);
 
   function handleKeyPress(e: any) {
-    if (e.key === 'Enter') {
-      onSaveClick();
-    }
+    onSaveClick();
   }
+
   async function onPageLoad() {
     const name = searchParams.get(NAME) || '';
     const kind = searchParams.get(KIND) || '';

frontend/webapp/hooks/index.tsx

@@ -1,3 +1,4 @@
 export { useSectionData } from "./useSectionData";
 export { useNotification } from "./useNotification";
 export { useOnClickOutside } from "./useOnClickOutside";
+export { useKeyDown } from "./useKeyDown";

frontend/webapp/hooks/useKeyDown.ts

@@ -0,0 +1,19 @@
+import { useEffect } from "react";
+
+export function useKeyDown(key, callback) {
+  const handleKeyDown = (event) => {
+    if (key === event.key) {
+      callback(event);
+    }
+  };
+
+  useEffect(() => {
+    window.addEventListener("keydown", handleKeyDown);
+
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [key, callback]);
+
+  return handleKeyDown;
+}