fix shortcut changing

franciscoBSalgueiro · Nov 29, 2023 · a3bca7f · a3bca7f
1 parent 21d538f
commit a3bca7f
Show file tree

Hide file tree

Showing 9 changed files with 64 additions and 85 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "en-croissant",
   "private": true,
-  "version": "0.7.0",
+  "version": "0.7.1",
   "type": "module",
   "scripts": {
     "start": "vite",

diff --git a/src-tauri/Cargo.lock b/src-tauri/Cargo.lock
diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "en-croissant"
-version = "0.7.0"
+version = "0.7.1"
 description = "A Modern Chess Database"
 authors = ["Francisco Salgueiro <[email protected]>"]
 license = "GPL-3.0-only"

diff --git a/src/components/TopBar.tsx b/src/components/TopBar.tsx
@@ -19,8 +19,9 @@ import { useAtom, useAtomValue } from "jotai";
 import { useNavigate } from "react-router-dom";
 import AboutModal from "./About";
 import { useState } from "react";
+import { useHotkeys } from "react-hotkeys-hook";
 import { createTab } from "@/utils/tabs";
-import { useHotkeys } from "@mantine/hooks";
+
 import { keyMapAtom } from "@/atoms/keybinds";
 
 function IconMinimize() {
@@ -198,10 +199,8 @@ function TopBar() {
   const { classes } = useStyles();
   const [opened, setOpened] = useState(false);
 
-  useHotkeys([
-    [keyMap.NEW_TAB.keys, createNewTab],
-    [keyMap.OPEN_FILE.keys, openNewFile],
-  ]);
+  useHotkeys(keyMap.NEW_TAB.keys, createNewTab);
+  useHotkeys(keyMap.OPEN_FILE.keys, openNewFile);
 
   const theme = useMantineTheme();
 

diff --git a/src/components/boards/Board.tsx b/src/components/boards/Board.tsx
@@ -38,7 +38,7 @@ import {
   Input,
   Tooltip,
 } from "@mantine/core";
-import { useHotkeys } from "@mantine/hooks";
+import { useHotkeys } from "react-hotkeys-hook";
 import {
   IconChessBishopFilled,
   IconChessFilled,
@@ -152,7 +152,7 @@ function Board({
     });
 
   const keyMap = useAtomValue(keyMapAtom);
-  useHotkeys([[keyMap.SWAP_ORIENTATION.keys, () => toggleOrientation()]]);
+  useHotkeys(keyMap.SWAP_ORIENTATION.keys, () => toggleOrientation());
   const [currentTab, setCurrentTab] = useAtom(currentTabAtom);
   const practicing = useAtomValue(currentPracticingAtom);
 

diff --git a/src/components/common/MoveControls.tsx b/src/components/common/MoveControls.tsx
@@ -1,5 +1,5 @@
 import { ActionIcon, Group } from "@mantine/core";
-import { useHotkeys } from "@mantine/hooks";
+import { useHotkeys } from "react-hotkeys-hook";
 import {
   IconChevronLeft,
   IconChevronRight,
@@ -30,13 +30,11 @@ function MoveControls({
     goToPrevious ?? (() => dispatch({ type: "GO_TO_PREVIOUS" }));
   const handleGoToNext = goToNext ?? (() => dispatch({ type: "GO_TO_NEXT" }));
   const keyMap = useAtomValue(keyMapAtom);
-  useHotkeys([
-    [keyMap.PREVIOUS_MOVE.keys, handleGoToPrevious],
-    [keyMap.NEXT_MOVE.keys, handleGoToNext],
-    [keyMap.GO_TO_START.keys, handleGoToStart],
-    [keyMap.GO_TO_END.keys, handleGoToEnd],
-    [keyMap.DELETE_MOVE.keys, () => dispatch({ type: "DELETE_MOVE" })],
-  ]);
+  useHotkeys(keyMap.PREVIOUS_MOVE.keys, handleGoToPrevious);
+  useHotkeys(keyMap.NEXT_MOVE.keys, handleGoToNext);
+  useHotkeys(keyMap.GO_TO_START.keys, handleGoToStart);
+  useHotkeys(keyMap.GO_TO_END.keys, handleGoToEnd);
+  useHotkeys(keyMap.DELETE_MOVE.keys, () => dispatch({ type: "DELETE_MOVE" }));
   return (
     <Group grow>
       <ActionIcon variant="default" size="xl" onClick={handleGoToStart}>

diff --git a/src/components/databases/GamePreview.tsx b/src/components/databases/GamePreview.tsx
@@ -1,5 +1,5 @@
 import { Box, Group, Stack, Text } from "@mantine/core";
-import { useHotkeys } from "@mantine/hooks";
+import { useHotkeys } from "react-hotkeys-hook";
 import { useContext } from "react";
 import { Chessground } from "@/chessground/Chessground";
 import MoveControls from "../common/MoveControls";
@@ -63,10 +63,8 @@ function GamePreview({
   const [treeState, dispatch] = useImmerReducer(treeReducer, game);
 
   const keyMap = useAtomValue(keyMapAtom);
-  useHotkeys([
-    [keyMap.PREVIOUS_MOVE.keys, () => dispatch({ type: "GO_TO_PREVIOUS" })],
-    [keyMap.NEXT_MOVE.keys, () => dispatch({ type: "GO_TO_NEXT" })],
-  ]);
+  useHotkeys(keyMap.PREVIOUS_MOVE.keys, () => dispatch({ type: "GO_TO_PREVIOUS" }));
+  useHotkeys(keyMap.NEXT_MOVE.keys, () => dispatch({ type: "GO_TO_NEXT" }));
 
   return (
     <TreeStateContext.Provider value={treeState}>

diff --git a/src/components/databases/PlayerTable.tsx b/src/components/databases/PlayerTable.tsx
@@ -8,7 +8,7 @@ import {
   Text,
   TextInput,
 } from "@mantine/core";
-import { useHotkeys } from "@mantine/hooks";
+import { useHotkeys } from "react-hotkeys-hook";
 import { IconDotsVertical, IconSearch } from "@tabler/icons-react";
 import { DataTable, DataTableSortStatus } from "mantine-datatable";
 import { useEffect, useState } from "react";
@@ -70,36 +70,28 @@ function PlayerTable({ database }: { database: DatabaseInfo }) {
     });
   }, [activePage, sort]);
 
-  useHotkeys([
-    [
-      "ArrowUp",
-      () => {
-        setSelectedPlayer((prev) => {
-          if (prev === null) {
-            return null;
-          }
-          if (prev === 0) {
-            return 0;
-          }
-          return prev - 1;
-        });
-      },
-    ],
-    [
-      "ArrowDown",
-      () => {
-        setSelectedPlayer((prev) => {
-          if (prev === null) {
-            return 0;
-          }
-          if (prev === players.length - 1) {
-            return players.length - 1;
-          }
-          return prev + 1;
-        });
-      },
-    ],
-  ]);
+  useHotkeys("ArrowUp", () => {
+    setSelectedPlayer((prev) => {
+      if (prev === null) {
+        return null;
+      }
+      if (prev === 0) {
+        return 0;
+      }
+      return prev - 1;
+    });
+  });
+  useHotkeys("ArrowDown", () => {
+    setSelectedPlayer((prev) => {
+      if (prev === null) {
+        return 0;
+      }
+      if (prev === players.length - 1) {
+        return players.length - 1;
+      }
+      return prev + 1;
+    });
+  });
 
   return (
     <GridLayout

diff --git a/src/components/databases/TournamentTable.tsx b/src/components/databases/TournamentTable.tsx
@@ -1,5 +1,5 @@
 import { Center, Flex, Text, TextInput } from "@mantine/core";
-import { useHotkeys } from "@mantine/hooks";
+import { useHotkeys } from "react-hotkeys-hook";
 import { IconSearch } from "@tabler/icons-react";
 import { DataTable, DataTableSortStatus } from "mantine-datatable";
 import { useEffect, useState } from "react";
@@ -57,36 +57,28 @@ function TournamentTable({ database }: { database: DatabaseInfo }) {
     });
   }, [activePage, sort]);
 
-  useHotkeys([
-    [
-      "ArrowUp",
-      () => {
-        setSelected((prev) => {
-          if (prev === null) {
-            return null;
-          }
-          if (prev === 0) {
-            return 0;
-          }
-          return prev - 1;
-        });
-      },
-    ],
-    [
-      "ArrowDown",
-      () => {
-        setSelected((prev) => {
-          if (prev === null) {
-            return 0;
-          }
-          if (prev === tournaments.length - 1) {
-            return tournaments.length - 1;
-          }
-          return prev + 1;
-        });
-      },
-    ],
-  ]);
+  useHotkeys("ArrowUp", () => {
+    setSelected((prev) => {
+      if (prev === null) {
+        return null;
+      }
+      if (prev === 0) {
+        return 0;
+      }
+      return prev - 1;
+    });
+  });
+  useHotkeys("ArrowDown", () => {
+    setSelected((prev) => {
+      if (prev === null) {
+        return 0;
+      }
+      if (prev === tournaments.length - 1) {
+        return tournaments.length - 1;
+      }
+      return prev + 1;
+    });
+  });
 
   return (
     <GridLayout