refactor

Author: Nicell

src/keyboard/Keyboard.tsx

@@ -29,7 +29,7 @@ import { BehaviorBindingPicker } from "../behaviors/BehaviorBindingPicker";
 import { produce } from "immer";
 import { LockStateContext } from "../rpc/LockStateContext";
 import { LockState } from "@zmkfirmware/zmk-studio-ts-client/core";
-import { LayoutZoom } from "./PhysicalLayout";
+import { deserializeLayoutZoom, LayoutZoom } from "./PhysicalLayout";
 import { useLocalStorageState } from "../misc/useLocalStorageState";
 
 type BehaviorMap = Record<number, GetBehaviorDetailsResponse>;
@@ -175,12 +175,7 @@ export default function Keyboard() {
   );
 
   const [keymapScale, setKeymapScale] = useLocalStorageState<LayoutZoom>("keymapScale", "auto", {
-    deserialize: (value) => {
-      if (value === "auto") {
-        return "auto";
-      }
-      return parseFloat(value) || "auto";
-    }
+    deserialize: deserializeLayoutZoom,
   });
 
   const [selectedLayerIndex, setSelectedLayerIndex] = useState<number>(0);
@@ -539,12 +534,8 @@ export default function Keyboard() {
             className="absolute top-2 right-2 h-8 rounded px-2"
             value={keymapScale}
             onChange={(e) => {
-              const value = e.target.value;
-              if (value === "auto") {
-                setKeymapScale("auto");
-              } else {
-                setKeymapScale(parseFloat(value));
-              }
+              const value = deserializeLayoutZoom(e.target.value);
+              setKeymapScale(value);
             }}
           >
             <option value="auto">Auto</option>

src/keyboard/PhysicalLayout.tsx

@@ -20,6 +20,13 @@ export type KeyPosition = PropsWithChildren<{
 
 export type LayoutZoom = number | "auto";
 
+export function deserializeLayoutZoom(value: string): LayoutZoom {
+  if (value === "auto") {
+    return "auto";
+  }
+  return parseFloat(value) || "auto";
+}
+
 interface PhysicalLayoutProps {
   positions: Array<KeyPosition>;
   selectedPosition?: number;

src/misc/useLocalStorageState.ts

@@ -1,6 +1,20 @@
 import { useEffect, useState } from "react";
 
-export function useLocalStorageState<T>(key: string, defaultValue: T, options?: { serialize?: (value: T) => string; deserialize?: (value: string) => T; }) {
+function basicSerialize<T>(value: T): string {
+  if (typeof value === "object") {
+    return JSON.stringify(value);
+  }
+  return String(value);
+}
+
+export function useLocalStorageState<T>(
+  key: string,
+  defaultValue: T,
+  options?: {
+    serialize?: (value: T) => string;
+    deserialize?: (value: string) => T;
+  },
+) {
   const reactState = useState<T>(() => {
     const savedValue = localStorage.getItem(key);
     if (savedValue !== null) {
@@ -10,17 +24,15 @@ export function useLocalStorageState<T>(key: string, defaultValue: T, options?:
       return savedValue as T; // Assuming T is a string
     }
     return defaultValue;
-  })
+  });
 
   const [state] = reactState;
 
   useEffect(() => {
-    const serializedState = options?.serialize?(state) || 
-      ((typeof state === 'object' && state !== null)
-        ? JSON.stringify(state) // Fallback for objects
-        : String(state)); // Fallback for other types
+    const serializedState =
+      options?.serialize?.(state) || basicSerialize(state);
     localStorage.setItem(key, serializedState);
   }, [state, key, options]);
 
   return reactState;
-}
+}