feat: a custom hook to listen to key presses (#391)

* feat: a custom hook to listen to key presses

* chore: changed useKeyPress to a more aproprietade folder

* feat: add tests for useKeyPress

* refactor: reducing redundancies in code

src/hooks/useKeyPress/useKeyPress.spec.ts

@@ -0,0 +1,35 @@
+import { act, renderHook } from '@testing-library/react';
+
+import useKeyPress from './useKeyPress';
+
+describe('useKeyPress', () => {
+  let action: (event: KeyboardEvent) => void;
+  let targetKey: string;
+
+  beforeEach(() => {
+    action = vi.fn();
+    targetKey = 'Enter';
+  });
+
+  it('calls action function when target key is pressed', () => {
+    renderHook(() => useKeyPress(targetKey, action));
+
+    act(() => {
+      const event = new KeyboardEvent('keydown', { key: targetKey });
+      window.dispatchEvent(event);
+    });
+
+    expect(action).toHaveBeenCalled();
+  });
+
+  it('does not call action function when a different key is pressed', () => {
+    renderHook(() => useKeyPress(targetKey, action));
+
+    act(() => {
+      const event = new KeyboardEvent('keydown', { key: 'Escape' });
+      window.dispatchEvent(event);
+    });
+
+    expect(action).not.toHaveBeenCalled();
+  });
+});

src/hooks/useKeyPress/useKeyPress.ts

@@ -0,0 +1,19 @@
+import { useEffect } from 'react';
+
+function useKeyPress(
+  targetKey: string,
+  action: (event: KeyboardEvent) => void
+): void {
+  const downHandler = (event: KeyboardEvent) => {
+    if (event.key === targetKey) action(event);
+  };
+
+  useEffect(() => {
+    window.addEventListener('keydown', downHandler);
+    return () => {
+      window.removeEventListener('keydown', downHandler);
+    };
+  }, []);
+}
+
+export default useKeyPress;