From 0f528291d018f12b91def966e33cdc1371361d07 Mon Sep 17 00:00:00 2001
From: Myzel394 <50424412+Myzel394@users.noreply.github.com>
Date: Sat, 6 May 2023 22:55:43 +0200
Subject: [PATCH] fix: Migrate `useKeyboardPress`

---
 .../SettingsAPIKeysRoute/APIKeyListItem.tsx   |  6 ++--
 src/routes/AliasesRoute.tsx                   | 33 ++++++++++++++-----
 2 files changed, 29 insertions(+), 10 deletions(-)

diff --git a/src/route-widgets/SettingsAPIKeysRoute/APIKeyListItem.tsx b/src/route-widgets/SettingsAPIKeysRoute/APIKeyListItem.tsx
index 760346a..b1cf51f 100644
--- a/src/route-widgets/SettingsAPIKeysRoute/APIKeyListItem.tsx
+++ b/src/route-widgets/SettingsAPIKeysRoute/APIKeyListItem.tsx
@@ -1,9 +1,11 @@
 import {ReactElement} from "react"
-import {APIKey} from "~/server-types"
-import {Alert, IconButton, ListItem, ListItemSecondaryAction, ListItemText} from "@mui/material"
 import {useTranslation} from "react-i18next"
 import {MdContentCopy, MdDelete} from "react-icons/md"
 import {useCopyToClipboard} from "react-use"
+
+import {Alert, IconButton, ListItem, ListItemSecondaryAction, ListItemText} from "@mui/material"
+
+import {APIKey} from "~/server-types"
 import {DeleteButton, ErrorSnack, SuccessSnack} from "~/components"
 import {deleteAPIKey} from "~/apis"
 import {queryClient} from "~/constants/react-query"
diff --git a/src/routes/AliasesRoute.tsx b/src/routes/AliasesRoute.tsx
index dd1fec4..653b5cb 100644
--- a/src/routes/AliasesRoute.tsx
+++ b/src/routes/AliasesRoute.tsx
@@ -2,9 +2,9 @@ import {ReactElement, useCallback, useState, useTransition} from "react"
 import {AxiosError} from "axios"
 import {MdSearch} from "react-icons/md"
 import {useTranslation} from "react-i18next"
-import {useMountEffect, useUpdateEffect} from "@react-hookz/web"
-import {useCopyToClipboard, useKeyPress} from "react-use"
+import {useCopyToClipboard} from "react-use"
 
+import {useKeyboardEvent, useMountEffect, useUpdateEffect} from "@react-hookz/web"
 import {useQuery} from "@tanstack/react-query"
 import {Alert, Chip, Grid, InputAdornment, List, Snackbar, TextField} from "@mui/material"
 
@@ -47,10 +47,10 @@ export default function AliasesRoute(): ReactElement {
 	const [typeFilter, setTypeFilter] = useState<TypeFilter>(TypeFilter.All)
 
 	const [{value, error}, copyToClipboard] = useCopyToClipboard()
-	const [isPressingControl] = useKeyPress("Shift")
+	const [isPressingShift, setIsPressingShift] = useState<boolean>(false)
 	const isAnyInputFocused = useIsAnyInputFocused()
 	const [lockDisabledCopyMode, setLockDisabledCopyMode] = useState<boolean>(false)
-	const isInCopyAddressMode = !isAnyInputFocused && !lockDisabledCopyMode && isPressingControl
+	const isInCopyAddressMode = !isAnyInputFocused && !lockDisabledCopyMode && isPressingShift
 	const [latestAliasId, setLatestAliasId] = useState<string | null>()
 
 	const query = useQuery<PaginationResult<AliasList>, AxiosError>(
@@ -101,11 +101,28 @@ export default function AliasesRoute(): ReactElement {
 		onRefetchAliases: query.refetch,
 	})
 
-	useUpdateEffect(() => {
-		if (!isPressingControl) {
+	useKeyboardEvent(
+		"Shift",
+		() => {
+			setIsPressingShift(true)
+		},
+		[],
+		{
+			event: "keydown",
+		},
+	)
+
+	useKeyboardEvent(
+		"Shift",
+		() => {
+			setIsPressingShift(false)
 			setLockDisabledCopyMode(false)
-		}
-	}, [isPressingControl])
+		},
+		[],
+		{
+			event: "keyup",
+		},
+	)
 
 	useUpdateEffect(() => {
 		if (!query.data) {