From f44327306a33f62b35240d9f37fe0df7bf0ee8f9 Mon Sep 17 00:00:00 2001
From: Kritik Jiyaviya <kritikjiyaviya07@gmail.com>
Date: Wed, 18 Oct 2023 20:14:19 +0530
Subject: [PATCH] feat: add useKeyDown hook (#584)

Resolves: #568

---------

Co-authored-by: Amir Blum <amirgiraffe@gmail.com>
---
 .../create.connection.form.tsx                | 10 +++-------
 .../overview/sources/update.source.form.tsx   | 15 +++++----------
 frontend/webapp/hooks/index.tsx               |  1 +
 frontend/webapp/hooks/useKeyDown.ts           | 19 +++++++++++++++++++
 4 files changed, 28 insertions(+), 17 deletions(-)
 create mode 100644 frontend/webapp/hooks/useKeyDown.ts

diff --git a/frontend/webapp/components/setup/connection/create.connection.form/create.connection.form.tsx b/frontend/webapp/components/setup/connection/create.connection.form/create.connection.form.tsx
index fa8238d12..5dc0d3507 100644
--- a/frontend/webapp/components/setup/connection/create.connection.form/create.connection.form.tsx
+++ b/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();
     }
   }
diff --git a/frontend/webapp/containers/overview/sources/update.source.form.tsx b/frontend/webapp/containers/overview/sources/update.source.form.tsx
index 50f75201e..5bba4b1d0 100644
--- a/frontend/webapp/containers/overview/sources/update.source.form.tsx
+++ b/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) || '';
diff --git a/frontend/webapp/hooks/index.tsx b/frontend/webapp/hooks/index.tsx
index 0aa1529f1..1cfe3af1f 100644
--- a/frontend/webapp/hooks/index.tsx
+++ b/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";
diff --git a/frontend/webapp/hooks/useKeyDown.ts b/frontend/webapp/hooks/useKeyDown.ts
new file mode 100644
index 000000000..01591c6b5
--- /dev/null
+++ b/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;
+}