fix: The command callback is not refreshed

Author: santigp258

src/context/KeyBindContext.tsx

@@ -11,7 +11,7 @@ import {
   KeyBindProviderPropsI,
   ShortcutType,
 } from '../types';
-import { findFirstPlatformMatch, isDuplicate } from '../utils';
+import { findFirstPlatformMatch, isDuplicate, logMsg } from '../utils';
 import { useShortcuts } from '../hooks';
 
 export const KeyBindContext = createContext({} as KeyBindContextState);
@@ -23,12 +23,19 @@ const KeyBindProvider: FC<KeyBindProviderPropsI> = ({
   const [storeShortcuts, setStoreCommands] = useState(shortcuts);
 
   const registerShortcut = useCallback(
-    (command: ShortcutType) => {
-      if (isDuplicate(storeShortcuts, command)) {
-        console.warn('Command already registered', { storeShortcuts, command });
-        return;
-      }
-      setStoreCommands(prev => [...prev, command]);
+    (shortcut: ShortcutType) => {
+      setStoreCommands(prev => {
+        return [
+          ...(prev?.filter(s => {
+            const isDuplicated = isDuplicate(prev, s);
+            if (isDuplicated) {
+              console.warn(logMsg(s, shortcut));
+            }
+            return !isDuplicated;
+          }) ?? []),
+          shortcut,
+        ];
+      });
     },
     [storeShortcuts]
   );

src/hooks/useRegisterShortcut.ts

@@ -7,5 +7,5 @@ export const useRegisterShortcut = (shortcut: ShortcutType) => {
 
   useEffect(() => {
     registerShortcut(shortcut);
-  }, []);
+  }, [shortcut]);
 };

src/utils/index.ts

@@ -79,3 +79,10 @@ export const isDuplicate = (
 ) => {
   return !!findShortcut(shortcuts, getShortcutKeys(shortcut));
 };
+
+export const logMsg = (short: ShortcutType, short2: ShortcutType) =>
+  `Shortcut is duplicated: label: "${short.label}", keys: "${JSON.stringify(
+    short.keys
+  )}" ,replacing for: label: "${short2.label}", keys: "${JSON.stringify(
+    short2.keys
+  )}"...`;