fix: use unified shortcuts variable

Author: imguoguo

browser/src/components/menu/keyboard/shortcuts-menu.tsx

@@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next';
 import { ShortcutProps } from '@/libs/device/keyboard.ts';
 import { Shortcut } from './shortcut.tsx';
 import { KeyboardShortcutCustom } from './shortcut-custom.tsx';
+import { getShortcuts, setShortcuts } from '@/libs/storage';
 
 export const KeyboardShortcutsMenu = () => {
   const { t } = useTranslation();
@@ -30,35 +31,28 @@ export const KeyboardShortcutsMenu = () => {
 
   const addShortcut = (shortcut: ShortcutProps) => {
     if (shortcut == null) return;
-
-    let shortcuts = localStorage.getItem("shortcuts");
-    if (shortcuts === null) {
-      shortcuts = "[]";
-    }
-
-    const shortcutsObject: ShortcutProps[] = JSON.parse(shortcuts);
-    shortcutsObject.push(shortcut);
-    localStorage.setItem("shortcuts", JSON.stringify(shortcutsObject));
-    setStoredShortcuts(shortcutsObject);
+    const shortcuts = getShortcuts();
+    shortcuts.push(shortcut);
+    setStoredShortcuts(shortcuts);
+    setShortcuts(shortcuts);
   }
 
   const removeShortcut = (indexToRemove: number) => {
     const newShortcuts = storedShortcuts.filter(
       (_, index) => index !== indexToRemove
     );
-    localStorage.setItem("shortcuts", JSON.stringify(newShortcuts));
     setStoredShortcuts(newShortcuts);
+    setShortcuts(newShortcuts);
   }
 
   useEffect(() => {
-    const shortcuts = localStorage.getItem("shortcuts");
-    if (shortcuts === null) {
+    const shortcuts = getShortcuts();
+    if (shortcuts.length === 0) {
       predefinedShortcuts.forEach(shortcut => {
         addShortcut(shortcut);
       })
     } else {
-      const shortcutsObject: ShortcutProps[] = JSON.parse(shortcuts);
-      setStoredShortcuts(shortcutsObject);
+      setStoredShortcuts(shortcuts);
     }
   }, []);
 

browser/src/libs/storage/index.ts

@@ -1,4 +1,5 @@
 import type { Resolution } from '@/types';
+import { ShortcutProps } from '@/libs/device/keyboard.ts';
 
 const LANGUAGE_KEY = 'nanokvm-usb-language';
 const VIDEO_DEVICE_ID_KEY = 'nanokvm-usb-video-device-id';
@@ -11,6 +12,7 @@ const MOUSE_MODE_KEY = 'nanokvm-usb-mouse-mode';
 const MOUSE_SCROLL_DIRECTION_KEY = 'nanokvm-usb-mouse-scroll-direction';
 const MOUSE_SCROLL_INTERVAL_KEY = 'nanokvm-usb-mouse-scroll-interval';
 const MOUSE_JIGGLER_MODE_KEY = 'nanokvm-usb-mouse-jiggler-mode';
+const SHORTCUTS_KEY = 'nanokvm-usb-shortcuts';
 
 export function getLanguage() {
   return localStorage.getItem(LANGUAGE_KEY);
@@ -130,3 +132,13 @@ export function getMouseJigglerMode(): string {
 export function setMouseJigglerMode(jiggler: string): void {
   localStorage.setItem(MOUSE_JIGGLER_MODE_KEY, jiggler);
 }
+
+export function getShortcuts(): ShortcutProps[] {
+  const shortcuts = localStorage.getItem(SHORTCUTS_KEY);
+  if (!shortcuts) return [];
+  return window.JSON.parse(shortcuts);
+}
+
+export function setShortcuts(shortcuts: ShortcutProps[]): void {
+  localStorage.setItem(SHORTCUTS_KEY, window.JSON.stringify(shortcuts));
+}

desktop/src/renderer/src/components/menu/keyboard/shortcuts-menu.tsx

@@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next';
 import { ShortcutProps } from '@renderer/libs/device/keyboard';
 import { Shortcut } from './shortcut';
 import { KeyboardShortcutCustom } from './shortcut-custom';
+import { getShortcuts, setShortcuts } from '@renderer/libs/storage';
 
 export const KeyboardShortcutsMenu = () => {
   const { t } = useTranslation();
@@ -30,35 +31,28 @@ export const KeyboardShortcutsMenu = () => {
 
   const addShortcut = (shortcut: ShortcutProps) => {
     if (shortcut == null) return;
-
-    let shortcuts = localStorage.getItem("shortcuts");
-    if (shortcuts === null) {
-      shortcuts = "[]";
-    }
-
-    const shortcutsObject: ShortcutProps[] = JSON.parse(shortcuts);
-    shortcutsObject.push(shortcut);
-    localStorage.setItem("shortcuts", JSON.stringify(shortcutsObject));
-    setStoredShortcuts(shortcutsObject);
+    const shortcuts = getShortcuts();
+    shortcuts.push(shortcut);
+    setStoredShortcuts(shortcuts);
+    setShortcuts(shortcuts);
   }
 
   const removeShortcut = (indexToRemove: number) => {
     const newShortcuts = storedShortcuts.filter(
       (_, index) => index !== indexToRemove
     );
-    localStorage.setItem("shortcuts", JSON.stringify(newShortcuts));
     setStoredShortcuts(newShortcuts);
+    setShortcuts(newShortcuts);
   }
 
   useEffect(() => {
-    const shortcuts = localStorage.getItem("shortcuts");
-    if (shortcuts === null) {
+    const shortcuts = getShortcuts();
+    if (shortcuts.length === 0) {
       predefinedShortcuts.forEach(shortcut => {
         addShortcut(shortcut);
       })
     } else {
-      const shortcutsObject: ShortcutProps[] = JSON.parse(shortcuts);
-      setStoredShortcuts(shortcutsObject);
+      setStoredShortcuts(shortcuts);
     }
   }, []);
 

desktop/src/renderer/src/libs/storage/index.ts

@@ -1,5 +1,5 @@
 import type { Resolution } from '@renderer/types'
-
+import { ShortcutProps } from '@renderer/libs/device/keyboard'
 import { getWithExpiry, setWithExpiry } from './expiry'
 
 const LANGUAGE_KEY = 'nanokvm-usb-language'
@@ -16,6 +16,7 @@ const SKIP_UPDATE_KEY = 'nano-kvm-check-update'
 const MOUSE_SCROLL_INTERVAL_KEY = 'nanokvm-usb-mouse-scroll-interval'
 const BAUD_RATE_KEY = 'nanokvm-usb-baud-rate'
 const MOUSE_JIGGLER_MODE_KEY = 'nanokvm-usb-mouse-jiggler-mode'
+const SHORTCUTS_KEY = 'nanokvm-usb-shortcuts';
 
 export function getLanguage(): string | null {
   return localStorage.getItem(LANGUAGE_KEY)
@@ -183,3 +184,13 @@ export function getMouseJigglerMode(): 'enable' | 'disable' {
 export function setMouseJigglerMode(jiggler: 'enable' | 'disable'): void {
   localStorage.setItem(MOUSE_JIGGLER_MODE_KEY, jiggler)
 }
+
+export function getShortcuts(): ShortcutProps[] {
+  const shortcuts = localStorage.getItem(SHORTCUTS_KEY);
+  if (!shortcuts) return [];
+  return window.JSON.parse(shortcuts);
+}
+
+export function setShortcuts(shortcuts: ShortcutProps[]): void {
+  localStorage.setItem(SHORTCUTS_KEY, window.JSON.stringify(shortcuts));
+}