From e77c67bc24f1831bb6de80a4335c51e5b84009ed Mon Sep 17 00:00:00 2001
From: MAZE <remvze@proton.me>
Date: Sun, 13 Oct 2024 21:32:58 +0330
Subject: [PATCH] fix: better implement shortcuts

---
 src/components/buttons/play/play.tsx         | 13 ++-----------
 src/components/buttons/unselect/unselect.tsx | 15 +++------------
 2 files changed, 5 insertions(+), 23 deletions(-)

diff --git a/src/components/buttons/play/play.tsx b/src/components/buttons/play/play.tsx
index f407668..cd4afa9 100644
--- a/src/components/buttons/play/play.tsx
+++ b/src/components/buttons/play/play.tsx
@@ -1,5 +1,6 @@
 import { useCallback, useEffect } from 'react';
 import { BiPause, BiPlay } from 'react-icons/bi/index';
+import { useHotkeys } from 'react-hotkeys-hook';
 
 import { useSoundStore } from '@/stores/sound';
 import { useSnackbar } from '@/contexts/snackbar';
@@ -28,17 +29,7 @@ export function PlayButton() {
     if (isPlaying && noSelected) pause();
   }, [isPlaying, pause, noSelected]);
 
-  useEffect(() => {
-    const listener = (e: KeyboardEvent) => {
-      if (e.shiftKey && e.key === ' ') {
-        handleToggle();
-      }
-    };
-
-    document.addEventListener('keydown', listener);
-
-    return () => document.removeEventListener('keydown', listener);
-  }, [handleToggle]);
+  useHotkeys('shift+space', handleToggle, {}, [handleToggle]);
 
   return (
     <button
diff --git a/src/components/buttons/unselect/unselect.tsx b/src/components/buttons/unselect/unselect.tsx
index 3c1d88c..8934128 100644
--- a/src/components/buttons/unselect/unselect.tsx
+++ b/src/components/buttons/unselect/unselect.tsx
@@ -1,6 +1,7 @@
-import { useEffect, useCallback } from 'react';
+import { useCallback } from 'react';
 import { BiUndo, BiTrash } from 'react-icons/bi/index';
 import { AnimatePresence, motion } from 'framer-motion';
+import { useHotkeys } from 'react-hotkeys-hook';
 
 import { Tooltip } from '@/components/tooltip';
 
@@ -28,17 +29,7 @@ export function UnselectButton() {
     else if (!noSelected) unselectAll(true);
   }, [hasHistory, noSelected, unselectAll, restoreHistory, locked]);
 
-  useEffect(() => {
-    const listener = (e: KeyboardEvent) => {
-      if (e.shiftKey && e.key === 'R') {
-        handleToggle();
-      }
-    };
-
-    document.addEventListener('keydown', listener);
-
-    return () => document.removeEventListener('keydown', listener);
-  }, [handleToggle]);
+  useHotkeys('shift+r', handleToggle, {}, [handleToggle]);
 
   return (
     <>