🎨 refactor device types & libhmk APIs

Author: peppapighs

src/api/use-get-keymap-with-advanced-keys.ts

@@ -14,8 +14,8 @@
  */
 
 import { useDevice } from "@/components/providers/device-provider"
-import { DeviceAdvancedKey, DeviceAKType } from "@/types/devices"
 import { Keycode } from "@/types/keycodes"
+import { HMKAdvancedKey, HMKAKType } from "@/types/libhmk"
 import { produce } from "immer"
 import { useGetAdvancedKeys } from "./use-get-advanced-keys"
 import { useGetKeymap } from "./use-get-keymap"
@@ -32,7 +32,7 @@ type GetKeymapWithAdvancedKeysReturnType =
       isSuccess: true
       keymap: number[][]
       normalKeymap: number[][]
-      advancedKeys: DeviceAdvancedKey[]
+      advancedKeys: HMKAdvancedKey[]
       akIndices: (number | null)[][]
     }
 
@@ -56,26 +56,26 @@ export function useGetKeymapWithAdvancedKeys(
     for (let i = 0; i < advancedKeys.length; i++) {
       const { layer, key, ak } = advancedKeys[i]
 
-      if (ak.type !== DeviceAKType.NONE) {
+      if (ak.type !== HMKAKType.NONE) {
         akIndices[layer][key] = i
       }
 
       switch (ak.type) {
-        case DeviceAKType.NULL_BIND:
+        case HMKAKType.NULL_BIND:
           draft[layer][key] = Keycode.AK_NULL_BIND_PRIMARY
           draft[layer][ak.secondaryKey] = Keycode.AK_NULL_BIND_SECONDARY
           akIndices[layer][ak.secondaryKey] = i
           break
 
-        case DeviceAKType.DYNAMIC_KEYSTROKE:
+        case HMKAKType.DYNAMIC_KEYSTROKE:
           draft[layer][key] = Keycode.AK_DYNAMIC_KEYSTROKE
           break
 
-        case DeviceAKType.TAP_HOLD:
+        case HMKAKType.TAP_HOLD:
           draft[layer][key] = Keycode.AK_TAP_HOLD
           break
 
-        case DeviceAKType.TOGGLE:
+        case HMKAKType.TOGGLE:
           draft[layer][key] = Keycode.AK_TOGGLE
           break
 

src/api/use-set-actuation-map.ts

@@ -14,13 +14,13 @@
  */
 
 import { useDevice } from "@/components/providers/device-provider"
-import { DeviceActuation } from "@/types/devices"
+import { HMKActuation } from "@/types/libhmk"
 import { useMutation, useQueryClient } from "@tanstack/react-query"
 import { produce } from "immer"
 
 type SetActuationMapParams = {
   start: number
-  actuationMap: DeviceActuation[]
+  actuationMap: HMKActuation[]
 }
 
 export function useSetActuationMap(profile: number) {
@@ -35,7 +35,7 @@ export function useSetActuationMap(profile: number) {
     onMutate: async ({ start, actuationMap }) => {
       await queryClient.cancelQueries({ queryKey })
       const previousActuationMap =
-        queryClient.getQueryData<DeviceActuation[]>(queryKey)
+        queryClient.getQueryData<HMKActuation[]>(queryKey)
       queryClient.setQueryData(
         queryKey,
         produce(previousActuationMap, (draft) => {

src/api/use-set-advanced-keys.ts

@@ -14,13 +14,13 @@
  */
 
 import { useDevice } from "@/components/providers/device-provider"
-import { DeviceAdvancedKey } from "@/types/devices"
+import { HMKAdvancedKey } from "@/types/libhmk"
 import { useMutation, useQueryClient } from "@tanstack/react-query"
 import { produce } from "immer"
 
 type SetAdvancedKeysParams = {
   start: number
-  advancedKeys: DeviceAdvancedKey[]
+  advancedKeys: HMKAdvancedKey[]
 }
 
 export function useSetAdvancedKeys(profile: number) {
@@ -35,7 +35,7 @@ export function useSetAdvancedKeys(profile: number) {
     onMutate: async ({ start, advancedKeys }) => {
       await queryClient.cancelQueries({ queryKey })
       const previousAdvancedKeys =
-        queryClient.getQueryData<DeviceAdvancedKey[]>(queryKey)
+        queryClient.getQueryData<HMKAdvancedKey[]>(queryKey)
       const tmp = produce(previousAdvancedKeys, (draft) => {
         if (draft) {
           for (let i = 0; i < advancedKeys.length; i++) {

src/api/use-set-calibration.ts

@@ -14,7 +14,7 @@
  */
 
 import { useDevice } from "@/components/providers/device-provider"
-import { DeviceCalibration } from "@/types/devices"
+import { HMKCalibration } from "@/types/libhmk"
 import { useMutation, useQueryClient } from "@tanstack/react-query"
 
 export function useSetCalibration() {
@@ -24,11 +24,11 @@ export function useSetCalibration() {
   const queryKey = [id, "calibration"]
 
   return useMutation({
-    mutationFn: (calibration: DeviceCalibration) => setCalibration(calibration),
+    mutationFn: (calibration: HMKCalibration) => setCalibration(calibration),
     onMutate: async (calibration) => {
       await queryClient.cancelQueries({ queryKey })
       const previousCalibration =
-        queryClient.getQueryData<DeviceCalibration>(queryKey)
+        queryClient.getQueryData<HMKCalibration>(queryKey)
       queryClient.setQueryData(queryKey, calibration)
 
       return { previousCalibration }

src/api/use-set-gamepad-options.ts

@@ -14,7 +14,7 @@
  */
 
 import { useDevice } from "@/components/providers/device-provider"
-import { DeviceGamepadOptions } from "@/types/devices"
+import { HMKGamepadOptions } from "@/types/libhmk"
 import { useMutation, useQueryClient } from "@tanstack/react-query"
 
 export function useSetGamepadOptions(profile: number) {
@@ -24,12 +24,12 @@ export function useSetGamepadOptions(profile: number) {
   const queryKey = [id, profile, "gamepadOptions"]
 
   return useMutation({
-    mutationFn: (options: DeviceGamepadOptions) =>
+    mutationFn: (options: HMKGamepadOptions) =>
       setGamepadOptions(profile, options),
     onMutate: async (options) => {
       await queryClient.cancelQueries({ queryKey })
       const previousOptions =
-        queryClient.getQueryData<DeviceGamepadOptions>(queryKey)
+        queryClient.getQueryData<HMKGamepadOptions>(queryKey)
       queryClient.setQueryData(queryKey, options)
 
       return { previousOptions }

src/api/use-set-options.ts

@@ -14,7 +14,7 @@
  */
 
 import { useDevice } from "@/components/providers/device-provider"
-import { DeviceOptions } from "@/types/devices"
+import { HMKOptions } from "@/types/libhmk"
 import { useMutation, useQueryClient } from "@tanstack/react-query"
 
 export function useSetOptions() {
@@ -24,10 +24,10 @@ export function useSetOptions() {
   const queryKey = [id, "options"]
 
   return useMutation({
-    mutationFn: (options: DeviceOptions) => setOptions(options),
+    mutationFn: (options: HMKOptions) => setOptions(options),
     onMutate: async (options) => {
       await queryClient.cancelQueries({ queryKey })
-      const previousOptions = queryClient.getQueryData<DeviceOptions>(queryKey)
+      const previousOptions = queryClient.getQueryData<HMKOptions>(queryKey)
       queryClient.setQueryData(queryKey, options)
 
       return { previousOptions }

src/components/app-configurator.tsx

@@ -19,7 +19,8 @@ import { useHMKDevice } from "@/hooks/use-hmk-device"
 import { createConfigurator } from "@/lib/create-configurator"
 import { isWebHIDSupported } from "@/lib/utils"
 import { useQueryClient } from "@tanstack/react-query"
-import { useEffect, useState } from "react"
+import { useCallback, useEffect, useState } from "react"
+import { toast } from "sonner"
 import { Configurator } from "./configurator/configurator"
 import { ConfiguratorLayout } from "./configurator/layout"
 import { ConfiguratorProvider } from "./providers/configurator-provider"
@@ -36,6 +37,18 @@ export function AppConfigurator() {
 
   const [webHIDSupported, setWebHIDSupported] = useState(false)
 
+  const connect = useCallback(async () => {
+    try {
+      await hmkDevice.connect()
+    } catch (error) {
+      if (error instanceof Error) {
+        toast.error(`Failed to connect: ${error.message}`)
+      } else {
+        console.error(error)
+      }
+    }
+  }, [hmkDevice])
+
   // Prevent SSR errors by only checking WebHID support on the client side
   useEffect(() => setWebHIDSupported(isWebHIDSupported()), [])
 
@@ -44,9 +57,9 @@ export function AppConfigurator() {
       queryClient.clear()
       reset()
     } else if (webHIDSupported) {
-      hmkDevice.connect()
+      connect()
     }
-  }, [hmkDevice, queryClient, reset, webHIDSupported])
+  }, [connect, hmkDevice.status, queryClient, reset, webHIDSupported])
 
   return (
     <ConfiguratorProvider configurator={useAppConfigurator()}>
@@ -58,7 +71,7 @@ export function AppConfigurator() {
         ) : (
           <div className="flex w-full flex-1 flex-col items-center justify-center p-12">
             {webHIDSupported ? (
-              <Button onClick={hmkDevice.connect}>Authorize Device</Button>
+              <Button onClick={connect}>Authorize Device</Button>
             ) : (
               <p>WebHID is not supported in this browser.</p>
             )}

src/components/configurator/advanced-keys/advanced-keys-create.tsx

@@ -20,7 +20,7 @@ import { useConfigurator } from "@/components/providers/configurator-provider"
 import { useDevice } from "@/components/providers/device-provider"
 import { Button } from "@/components/ui/button"
 import { AK_TYPE_TO_METADATA } from "@/constants/advanced-keys"
-import { DeviceAKType } from "@/types/devices"
+import { HMKAKType } from "@/types/libhmk"
 import { ToggleGroup, ToggleGroupItem } from "@radix-ui/react-toggle-group"
 import { KeyboardEditorLayout } from "../common/keyboard-editor"
 import { KeycodeButton } from "../common/keycode-button"
@@ -57,7 +57,7 @@ export const AdvancedKeysCreate = () => {
               variant="outline"
               size="sm"
               onClick={() => {
-                setNewAKType(DeviceAKType.NONE)
+                setNewAKType(HMKAKType.NONE)
                 setNewAKKeys([null, null])
                 setNewAKKeysIndex(null)
               }}
@@ -86,7 +86,7 @@ export const AdvancedKeysCreate = () => {
                     ),
                   ],
                 })
-                setNewAKType(DeviceAKType.NONE)
+                setNewAKType(HMKAKType.NONE)
                 setNewAKKeys([null, null])
                 setNewAKKeysIndex(null)
                 setAKIndex(null)

src/components/configurator/advanced-keys/advanced-keys-editor.tsx

@@ -20,7 +20,7 @@ import { useConfigurator } from "@/components/providers/configurator-provider"
 import { Button } from "@/components/ui/button"
 import { AK_TYPE_TO_METADATA } from "@/constants/advanced-keys"
 import { DeviceAdvancedKeyMetadata } from "@/types/advanced-keys"
-import { DeviceAdvancedKey, DeviceAKType } from "@/types/devices"
+import { HMKAdvancedKey, HMKAKType } from "@/types/libhmk"
 import { createContext, useContext, useLayoutEffect } from "react"
 import { KeyboardEditorLayout } from "../common/keyboard-editor"
 import { AKDeleteDialog } from "./ak-delete-dialog"
@@ -31,7 +31,7 @@ import { TapHoldEditor } from "./tap-hold-editor"
 import { ToggleEditor } from "./toggle-editor"
 
 type AdvancedKeysEditorState = {
-  advancedKeys: DeviceAdvancedKey[]
+  advancedKeys: HMKAdvancedKey[]
   akMetadata: DeviceAdvancedKeyMetadata
   akIndex: number
 }
@@ -54,8 +54,8 @@ export function AdvancedKeysEditor() {
     !isSuccess ||
     akIndex === null ||
     akIndex >=
-      advancedKeys.filter(({ ak }) => ak.type !== DeviceAKType.NONE).length ||
-    advancedKeys[akIndex].ak.type === DeviceAKType.NONE
+      advancedKeys.filter(({ ak }) => ak.type !== HMKAKType.NONE).length ||
+    advancedKeys[akIndex].ak.type === HMKAKType.NONE
 
   useLayoutEffect(() => {
     if (disabled) {
@@ -96,13 +96,13 @@ export function AdvancedKeysEditor() {
               akIndex,
             }}
           >
-            {akMetadata.type === DeviceAKType.NULL_BIND ? (
+            {akMetadata.type === HMKAKType.NULL_BIND ? (
               <NullBindEditor />
-            ) : akMetadata.type === DeviceAKType.DYNAMIC_KEYSTROKE ? (
+            ) : akMetadata.type === HMKAKType.DYNAMIC_KEYSTROKE ? (
               <DynamicKeystrokeEditor />
-            ) : akMetadata.type === DeviceAKType.TAP_HOLD ? (
+            ) : akMetadata.type === HMKAKType.TAP_HOLD ? (
               <TapHoldEditor />
-            ) : akMetadata.type === DeviceAKType.TOGGLE ? (
+            ) : akMetadata.type === HMKAKType.TOGGLE ? (
               <ToggleEditor />
             ) : (
               <></>

src/components/configurator/advanced-keys/advanced-keys-menu.tsx

@@ -25,7 +25,7 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu"
 import { AK_METADATA, AK_TYPE_TO_METADATA } from "@/constants/advanced-keys"
-import { DeviceAKType } from "@/types/devices"
+import { HMKAKType } from "@/types/libhmk"
 import { Edit, Plus, Trash } from "lucide-react"
 import { KeyboardEditorLayout } from "../common/keyboard-editor"
 import { useAdvancedKeys } from "./advanced-keys-tab"
@@ -89,7 +89,7 @@ export function AdvancedKeysMenu() {
         ) : (
           <div className="mt-4 grid w-full gap-4">
             {advancedKeys
-              .filter(({ ak }) => ak.type !== DeviceAKType.NONE)
+              .filter(({ ak }) => ak.type !== HMKAKType.NONE)
               .map((advancedKeys, i) => {
                 const akMetadata = AK_TYPE_TO_METADATA[advancedKeys.ak.type]
                 return (
@@ -105,7 +105,7 @@ export function AdvancedKeysMenu() {
                         variant="outline"
                         size="icon"
                         onClick={() => {
-                          setNewAKType(DeviceAKType.NONE)
+                          setNewAKType(HMKAKType.NONE)
                           setNewAKKeys([null, null])
                           setNewAKKeysIndex(null)
                           setLayer(advancedKeys.layer)