Fix: Error: React Hook "useEffect" is called conditionally.

llaoj · May 24, 2024 · 456a8ae · 456a8ae
1 parent ac8ddfc
commit 456a8ae
Showing 1 changed file with 16 additions and 15 deletions.
diff --git a/frontend/lib/use-shortcut.ts b/frontend/lib/use-shortcut.ts
@@ -2,21 +2,22 @@ import { useEffect } from "react";
 import { isDesktop, isMacOs } from "react-device-detect";
 
 export function useShortcut({ eventHandler }: { eventHandler: () => void }) {
-  if (isDesktop) {
-    useEffect(() => {
+  useEffect(() => {
+    function keyDownHandler(e: globalThis.KeyboardEvent) {
+      if (!isDesktop) {
+        return;
+      }
       // refer: https://support.google.com/chrome/answer/157179
-      function keyDownHandler(e: globalThis.KeyboardEvent) {
-        if (
-          e.key === "Enter" ||
-          (isMacOs && e.metaKey && e.key == "1") ||
-          (!isMacOs && e.ctrlKey && e.key == "1")
-        ) {
-          e.preventDefault();
-          eventHandler();
-        }
+      if (
+        e.key === "Enter" ||
+        (isMacOs && e.metaKey && e.key == "1") ||
+        (!isMacOs && e.ctrlKey && e.key == "1")
+      ) {
+        e.preventDefault();
+        eventHandler();
       }
-      document.addEventListener("keydown", keyDownHandler);
-      return () => document.removeEventListener("keydown", keyDownHandler);
-    });
-  }
+    }
+    document.addEventListener("keydown", keyDownHandler);
+    return () => document.removeEventListener("keydown", keyDownHandler);
+  });
 }