Replace Hotkey library

package.json

@@ -32,7 +32,7 @@
     "react-chartjs-2": "^5.2.0",
     "react-datepicker": "^4.25.0",
     "react-dom": "^17.0.2",
-    "react-hotkeys": "^2.0.0",
+    "react-hotkeys-hook": "^4.4.4",
     "react-i18next": "^14.0.1",
     "react-icons": "^5.2.1",
     "react-redux": "^7.2.9",

src/components/Header.tsx

@@ -6,7 +6,6 @@ import i18n from "../i18n/i18n";
 import languages from "../i18n/languages";
 // @ts-expect-error TS(2307): Cannot find module '../img/opencast-white.svg' or ... Remove this comment to see the full error message
 import opencastLogo from "../img/opencast-white.svg";
-import { GlobalHotKeys } from "react-hotkeys";
 import { setSpecificServiceFilter } from "../thunks/tableFilterThunks";
 import { loadServicesIntoTable } from "../thunks/tableThunks";
 import { getErrorCount, getHealthStatus } from "../selectors/healthSelectors";
@@ -20,6 +19,7 @@ import { getCurrentLanguageInformation, hasAccess } from "../utils/utils";
 import { overflowStyle } from "../utils/componentStyles";
 import RegistrationModal from "./shared/RegistrationModal";
 import HotKeyCheatSheet from "./shared/HotKeyCheatSheet";
+import { useHotkeys } from "react-hotkeys-hook";
 import { useAppDispatch, useAppSelector } from "../store";
 import { HealthStatus, fetchHealthStatus } from "../slices/healthSlice";
 import { UserInfoState } from "../slices/userInfoSlice";
@@ -100,10 +100,19 @@ const Header = ({
 		setHotKeyCheatSheet(false);
 	};
 
-	const hotKeyHandlers = {
-		HOTKEY_CHEATSHEET: showHotKeyCheatSheet,
+	const toggleHotKeyCheatSheet = () => {
+		setHotKeyCheatSheet(!displayHotKeyCheatSheet);
 	};
 
+	useHotkeys(
+    availableHotkeys.general.HOTKEY_CHEATSHEET.sequence,
+    () => toggleHotKeyCheatSheet(),
+		{
+			description: t(availableHotkeys.general.HOTKEY_CHEATSHEET.description) ?? undefined
+		},
+    [toggleHotKeyCheatSheet]
+  );
+
 	useEffect(() => {
 		// Function for handling clicks outside of an open dropdown menu
 		const handleClickOutside = (e: MouseEvent) => {
@@ -143,11 +152,6 @@ const Header = ({
 
 	return (
 		<>
-			<GlobalHotKeys
-// @ts-expect-error TS(2769): No overload matches this call.
-				keyMap={availableHotkeys.general}
-				handlers={hotKeyHandlers}
-			/>
 			<header className="primary-header">
 				{/* Opencast logo in upper left corner */}
 				<div className="header-branding">

src/components/events/Events.tsx

@@ -31,7 +31,7 @@ import Header from "../Header";
 import Footer from "../Footer";
 import { getUserInformation } from "../../selectors/userInfoSelectors";
 import { hasAccess } from "../../utils/utils";
-import { GlobalHotKeys } from "react-hotkeys";
+import { useHotkeys } from "react-hotkeys-hook";
 import { availableHotkeys } from "../../configs/hotkeysConfig";
 import { getCurrentFilterResource } from "../../selectors/tableFilterSelectors";
 import { fetchAssetUploadOptions } from "../../thunks/assetsThunks";
@@ -186,17 +186,17 @@ const Events = ({
 		setEditMetadataEventsModal(false);
 	};
 
-	const hotKeyHandlers = {
-		NEW_EVENT: showNewEventModal,
-	};
+	useHotkeys(
+    availableHotkeys.general.NEW_EVENT.sequence,
+    () => showNewEventModal(),
+		{
+			description: t(availableHotkeys.general.NEW_EVENT.description) ?? undefined
+		},
+    [showNewEventModal]
+  );
 
 	return (
 		<>
-			<GlobalHotKeys
-// @ts-expect-error TS(2769): No overload matches this call.
-				keyMap={availableHotkeys.general}
-				handlers={hotKeyHandlers}
-			/>
 			<Header />
 			<section className="action-nav-bar">
 				<div className="btn-group">

src/components/events/Series.tsx

@@ -24,8 +24,8 @@ import Footer from "../Footer";
 import { getUserInformation } from "../../selectors/userInfoSelectors";
 import { hasAccess } from "../../utils/utils";
 import { availableHotkeys } from "../../configs/hotkeysConfig";
-import { GlobalHotKeys } from "react-hotkeys";
 import { getCurrentFilterResource } from "../../selectors/tableFilterSelectors";
+import { useHotkeys } from "react-hotkeys-hook";
 import { useAppDispatch, useAppSelector } from "../../store";
 import { fetchEvents } from "../../slices/eventSlice";
 import {
@@ -158,17 +158,15 @@ const Series = ({
 		setDeleteSeriesModal(false);
 	};
 
-	const hotKeyHandlers = {
-		NEW_SERIES: showNewSeriesModal,
-	};
+	useHotkeys(
+    availableHotkeys.general.NEW_SERIES.sequence,
+    () => showNewSeriesModal(),
+		{ description: t(availableHotkeys.general.NEW_SERIES.description) ?? undefined },
+    [showNewSeriesModal]
+  );
 
 	return (
 		<>
-			<GlobalHotKeys
-// @ts-expect-error TS(2769): No overload matches this call.
-				keyMap={availableHotkeys.general}
-				handlers={hotKeyHandlers}
-			/>
 			<Header />
 			<section className="action-nav-bar">
 				<div className="btn-group">

src/components/shared/HotKeyCheatSheet.tsx

@@ -1,19 +1,37 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { availableHotkeys } from "../../configs/hotkeysConfig";
+import { useHotkeysContext } from "react-hotkeys-hook";
+import { Hotkey } from "react-hotkeys-hook/dist/types";
 
 /**
  * This component renders the hotkey cheat sheet showing all available hotkeys
  */
-const HotKeyCheatSheet = ({
-    close
-}: any) => {
+const HotKeyCheatSheet: React.FC<{
+	close: () => void,
+}> = ({
+	close
+}) => {
 	const { t } = useTranslation();
 
 	const handleClose = () => {
 		close();
 	};
 
+	const { hotkeys } = useHotkeysContext();
+
+	const checkHotkeys = (hotkeys: readonly Hotkey[], searchkeys: string[]) => {
+		for (const hotkey of hotkeys) {
+			if (!hotkey.keys) { continue; }
+			if (hotkey.keys.length !== searchkeys.length) { continue; }
+			if (hotkey.keys.every((element, index) => element === searchkeys[index])) {
+				return true;
+			}
+		}
+
+		return false;
+	}
+
 	return (
 		<>
 			<div className="modal-animation modal-overlay" />
@@ -38,21 +56,18 @@ const HotKeyCheatSheet = ({
 									<table className="main-tbl">
 										<tbody>
 											{/* Repeat row for each hotkey in group*/}
-{/* @ts-expect-error TS(7053): Element implicitly has an 'any' type because expre... Remove this comment to see the full error message */}
 											{Object.keys(availableHotkeys[hotkeyGroup]).map(
 												(hotkey, key) => (
-													<tr key={key}>
+													<tr key={key} style={{ opacity: !(hotkeys && checkHotkeys(hotkeys, availableHotkeys[hotkeyGroup][hotkey].sequence)) ? "50%" : "100%"}}>
 														<td className="hotkey">
 															<p className="combo">
 																<span className="chord">
 																	{/* repeat for each key in hotkey */}
-{/* @ts-expect-error TS(7053): Element implicitly has an 'any' type because expre... Remove this comment to see the full error message */}
 																	{availableHotkeys[hotkeyGroup][
 																		hotkey
-// @ts-expect-error TS(7006): Parameter 'comboKey' implicitly has an 'any' type.
-																	].combo.map((comboKey, key) => (
-																		<>
-																			<span key={key}>
+																	].sequence.map((comboKey, key) => (
+																		<span key={key}>
+																			<span>
 																				<span className="key">
 																					{t(
 																						"HOTKEYS.KEYS." +
@@ -62,23 +77,20 @@ const HotKeyCheatSheet = ({
 																				</span>
 																			</span>
 																			{comboKey ===
-// @ts-expect-error TS(7053): Element implicitly has an 'any' type because expre... Remove this comment to see the full error message
 																			availableHotkeys[hotkeyGroup][hotkey]
-																				.combo[
-// @ts-expect-error TS(7053): Element implicitly has an 'any' type because expre... Remove this comment to see the full error message
+																				.sequence[
 																				availableHotkeys[hotkeyGroup][hotkey]
-																					.combo.length - 1
+																					.sequence.length - 1
 																			]
 																				? ""
 																				: " + "}
-																		</>
+																		</span>
 																	))}
 																</span>
 															</p>
 														</td>
 														<td>
 															{t(
-// @ts-expect-error TS(7053): Element implicitly has an 'any' type because expre... Remove this comment to see the full error message
 																availableHotkeys[hotkeyGroup][hotkey]
 																	.description
 															)}

src/components/shared/MainNav.tsx

@@ -21,7 +21,7 @@ import { getUserInformation } from "../../selectors/userInfoSelectors";
 import { hasAccess } from "../../utils/utils";
 import { fetchServices } from "../../slices/serviceSlice";
 import { fetchGroups } from "../../slices/groupSlice";
-import { GlobalHotKeys } from "react-hotkeys";
+import { useHotkeys } from "react-hotkeys-hook";
 import { availableHotkeys } from "../../configs/hotkeysConfig";
 import { fetchAcls } from "../../slices/aclSlice";
 import { useAppDispatch, useAppSelector } from "../../store";
@@ -206,26 +206,29 @@ const MainNav = ({
 		loadingThemesIntoTable();
 	};
 
-	const hotkeyLoadEvents = () => {
-		navigate("/events/events");
-	};
-
-	const hotkeyLoadSeries = () => {
-		navigate("/events/series");
-	};
+	useHotkeys(
+    availableHotkeys.general.EVENT_VIEW.sequence,
+    () => navigate("/events/events"),
+		{ description: t(availableHotkeys.general.EVENT_VIEW.description) ?? undefined },
+    []
+  );
+
+	useHotkeys(
+    availableHotkeys.general.SERIES_VIEW.sequence,
+    () => navigate("/events/series"),
+		{ description: t(availableHotkeys.general.SERIES_VIEW.description) ?? undefined },
+    []
+  );
+
+	useHotkeys(
+    availableHotkeys.general.MAIN_MENU.sequence,
+    () => toggleMenu(),
+		{ description: t(availableHotkeys.general.MAIN_MENU.description) ?? undefined },
+    [toggleMenu]
+  );
 
-	const hotKeyHandlers = {
-		EVENT_VIEW: hotkeyLoadEvents,
-		SERIES_VIEW: hotkeyLoadSeries,
-		MAIN_MENU: toggleMenu,
-	};
 	return (
 		<>
-			<GlobalHotKeys
-// @ts-expect-error TS(2769): No overload matches this call.
-				keyMap={availableHotkeys.general}
-				handlers={hotKeyHandlers}
-			/>
 			<div className="menu-top" onClick={() => toggleMenu()}>
 				{isOpen && (
 					<nav id="roll-up-menu">

src/components/shared/TableFilters.tsx

@@ -21,10 +21,9 @@ import {
 } from "../../actions/tableFilterActions";
 import TableFilterProfiles from "./TableFilterProfiles";
 import { availableHotkeys } from "../../configs/hotkeysConfig";
-import { GlobalHotKeys } from "react-hotkeys";
 import { getResourceType } from "../../selectors/tableSelectors";
 import { fetchFilters } from "../../thunks/tableFilterThunks";
-import { parseISO } from "date-fns";
+import { useHotkeys } from "react-hotkeys-hook";
 import moment from "moment";
 
 /**
@@ -197,9 +196,12 @@ const TableFilters = ({
 		}
 	}
 
-	const hotKeyHandlers = {
-		REMOVE_FILTERS: removeFilters,
-	};
+	useHotkeys(
+    availableHotkeys.general.REMOVE_FILTERS.sequence,
+    () => removeFilters(),
+		{ description: t(availableHotkeys.general.REMOVE_FILTERS.description) ?? undefined },
+    [removeFilters]
+  );
 
 // @ts-expect-error TS(7006): Parameter 'filter' implicitly has an 'any' type.
 	const renderBlueBox = (filter) => {
@@ -218,11 +220,6 @@ const TableFilters = ({
 
 	return (
 		<>
-			<GlobalHotKeys
-// @ts-expect-error TS(2769): No overload matches this call.
-				keyMap={availableHotkeys.general}
-				handlers={hotKeyHandlers}
-			/>
 			<div className="filters-container">
 				{/* Text filter - Search Query */}
 				<input