fix: refactor wizard edit mode to use lazy state init instead of effect setState

2026-04-28 09:51:26 +08:00
parent d8d0e8f826
commit d6a9601591
8 changed files with 868 additions and 97 deletions
@@ -1,6 +1,6 @@
 "use client"

-import { useState, useCallback } from "react"
+import { useState, useCallback, useEffect } from "react"
 import { useRouter } from "next/navigation"
 import { motion, AnimatePresence } from "motion/react"
 import { StepIndicator } from "@/components/wizard/step-indicator"
@@ -10,6 +10,7 @@ import { SettingsStep } from "@/components/wizard/steps/settings-step"
 import { EnvironmentStep, type EnvironmentData } from "@/components/wizard/steps/environment-step"
 import { ReviewStep } from "@/components/wizard/steps/review-step"
 import type { SettingCategory } from "@/components/wizard/settings-editor"
+import { performanceEntries } from "@/lib/db/schema"

 const STEPS = [
  { label: "Hardware", tooltip: "Choose the hardware you tested this game on" },
@@ -22,9 +23,10 @@ const STEPS = [
 interface GameEntryWizardProps {
  gameId: string
  gameVersionId: string
+  editEntry?: typeof performanceEntries.$inferSelect | null
 }

-export function GameEntryWizard({ gameId, gameVersionId }: GameEntryWizardProps) {
+export function GameEntryWizard({ gameId, gameVersionId, editEntry }: GameEntryWizardProps) {
  const router = useRouter()
  const [currentStep, setCurrentStep] = useState(0)
  const [isSubmitting, setIsSubmitting] = useState(false)
@@ -32,23 +34,48 @@ export function GameEntryWizard({ gameId, gameVersionId }: GameEntryWizardProps)
  const [success, setSuccess] = useState(false)

  // Step 1: Hardware
-  const [hardwareSlug, setHardwareSlug] = useState("")
+  const [hardwareSlug, setHardwareSlug] = useState(editEntry?.hardwareSlug ?? "")
  const [hardwareName, setHardwareName] = useState("")

  // Step 2: Performance
-  const [performance, setPerformance] = useState<PerformanceData>({})
+  const [performance, setPerformance] = useState<PerformanceData>(
+    editEntry
+      ? {
+          fpsAvg: editEntry.fpsAvg,
+          fpsLow: editEntry.fpsLow ?? undefined,
+          fpsHigh: editEntry.fpsHigh ?? undefined,
+          loadTimeSsd: editEntry.loadTimeSsd ?? undefined,
+          loadTimeSd: editEntry.loadTimeSd ?? undefined,
+        }
+      : {},
+  )

  // Step 3: Settings
-  const [settingsJson, setSettingsJson] = useState<SettingCategory[]>([])
+  const [settingsJson, setSettingsJson] = useState<SettingCategory[]>(
+    editEntry?.settingsJson ?? [],
+  )

  // Step 4: Environment
-  const [environment, setEnvironment] = useState<EnvironmentData>({
-    upscalerType: "none",
-    frameGenMethod: "none",
-  })
+  const [environment, setEnvironment] = useState<EnvironmentData>(
+    editEntry
+      ? {
+          protonVersion: editEntry.protonVersion ?? undefined,
+          osVersion: editEntry.osVersion ?? undefined,
+          upscalerType: editEntry.upscalerType ?? "none",
+          upscalerVersion: editEntry.upscalerVersion ?? undefined,
+          frameGenMethod: editEntry.frameGenMethod ?? "none",
+          launchOptions: editEntry.launchOptions ?? undefined,
+          estimatedBatteryMin: editEntry.estimatedBatteryMin ?? undefined,
+          customSystem: editEntry.customSystem ?? false,
+        }
+      : {
+          upscalerType: "none",
+          frameGenMethod: "none",
+        },
+  )

  // Step 5: Notes
-  const [userNotes, setUserNotes] = useState("")
+  const [userNotes, setUserNotes] = useState(editEntry?.userNotes ?? "")

  // Fetch hardware name when slug changes
  const handleHardwareChange = useCallback(async (slug: string) => {
@@ -69,6 +96,26 @@ export function GameEntryWizard({ gameId, gameVersionId }: GameEntryWizardProps)
    }
  }, [])

+  // Fetch hardware name when in edit mode
+  useEffect(() => {
+    if (!editEntry || !hardwareSlug) return
+    let cancelled = false
+    async function fetchName() {
+      try {
+        const res = await fetch("/api/performance/hardware")
+        if (res.ok && !cancelled) {
+          const data = await res.json() as { data: Array<{ slug: string; name: string }> }
+          const device = data.data.find((d) => d.slug === hardwareSlug)
+          if (device && !cancelled) setHardwareName(device.name)
+        }
+      } catch {
+        // ignore
+      }
+    }
+    fetchName()
+    return () => { cancelled = true }
+  }, [editEntry, hardwareSlug])
+
  const canProceed = () => {
    switch (currentStep) {
      case 0:
@@ -109,33 +156,40 @@ export function GameEntryWizard({ gameId, gameVersionId }: GameEntryWizardProps)
    setError(null)

    try {
-      const res = await fetch("/api/performance/submit", {
-        method: "POST",
+      const payload = {
+        versionId: gameVersionId,
+        hardwareSlug,
+        fpsAvg: Number(performance.fpsAvg),
+        fpsLow: performance.fpsLow !== undefined ? Number(performance.fpsLow) : null,
+        fpsHigh: performance.fpsHigh !== undefined ? Number(performance.fpsHigh) : null,
+        loadTimeSsd: performance.loadTimeSsd !== undefined ? Number(performance.loadTimeSsd) : null,
+        loadTimeSd: performance.loadTimeSd !== undefined ? Number(performance.loadTimeSd) : null,
+        protonVersion: environment.protonVersion || null,
+        osVersion: environment.osVersion || null,
+        upscalerType: environment.upscalerType ?? "none",
+        upscalerVersion: environment.upscalerVersion || null,
+        frameGenMethod: environment.frameGenMethod ?? "none",
+        launchOptions: environment.launchOptions || null,
+        estimatedBatteryMin: environment.estimatedBatteryMin ?? null,
+        customSystem: environment.customSystem ?? false,
+        settingsJson: settingsJson.length > 0 ? settingsJson : null,
+        userNotes: userNotes || null,
+      }
+
+      const url = editEntry
+        ? `/api/performance/${editEntry.id}/edit`
+        : "/api/performance/submit"
+      const method = editEntry ? "PATCH" : "POST"
+
+      const res = await fetch(url, {
+        method,
        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-          versionId: gameVersionId,
-          hardwareSlug,
-          fpsAvg: Number(performance.fpsAvg),
-          fpsLow: performance.fpsLow !== undefined ? Number(performance.fpsLow) : null,
-          fpsHigh: performance.fpsHigh !== undefined ? Number(performance.fpsHigh) : null,
-          loadTimeSsd: performance.loadTimeSsd !== undefined ? Number(performance.loadTimeSsd) : null,
-          loadTimeSd: performance.loadTimeSd !== undefined ? Number(performance.loadTimeSd) : null,
-          protonVersion: environment.protonVersion || null,
-          osVersion: environment.osVersion || null,
-          upscalerType: environment.upscalerType ?? "none",
-          upscalerVersion: environment.upscalerVersion || null,
-          frameGenMethod: environment.frameGenMethod ?? "none",
-          launchOptions: environment.launchOptions || null,
-          estimatedBatteryMin: environment.estimatedBatteryMin ?? null,
-          customSystem: environment.customSystem ?? false,
-          settingsJson: settingsJson.length > 0 ? settingsJson : null,
-          userNotes: userNotes || null,
-        }),
+        body: JSON.stringify(payload),
      })

      if (!res.ok) {
        const data = await res.json()
-        throw new Error(data.error || "Failed to submit entry")
+        throw new Error(data.error || `Failed to ${editEntry ? "update" : "submit"} entry`)
      }

      setSuccess(true)
@@ -42,6 +42,12 @@ const DEFAULT_CATEGORIES: SettingCategory[] = [
  },
 ]

+const typeOptions = [
+  { value: "text", label: "Abc" },
+  { value: "number", label: "123" },
+  { value: "boolean", label: "\u2713/\u2717" },
+] as const
+
 interface SettingsEditorProps {
  value: SettingCategory[]
  onChange: (categories: SettingCategory[]) => void
@@ -59,6 +65,7 @@ export function SettingsEditor({
  const [newCategoryName, setNewCategoryName] = useState("")
  const [newSettingNames, setNewSettingNames] = useState<Record<string, string>>({})
  const [newSettingTypes, setNewSettingTypes] = useState<Record<string, string>>({})
+  const addSettingInputRefs = useRef<Record<string, HTMLInputElement | null>>({})

  const toggleCategory = (category: string) => {
    setCollapsedCategories((prev) => {
@@ -106,6 +113,8 @@ export function SettingsEditor({
      })
    )
    setNewSettingNames((prev) => ({ ...prev, [category]: "" }))
+    // Refocus after React re-renders
+    setTimeout(() => addSettingInputRefs.current[category]?.focus(), 0)
  }

  const moveCategoryUp = (category: string) => {
@@ -326,6 +335,59 @@ export function SettingsEditor({
                    className="overflow-hidden"
                  >
                    <div className="px-4 pb-4 pt-2 space-y-3">
+                      {/* Add setting row at the top */}
+                      <div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-2">
+                        <div className="flex items-center gap-1">
+                          {typeOptions.map((opt) => (
+                            <button
+                              key={opt.value}
+                              type="button"
+                              onClick={() =>
+                                setNewSettingTypes((prev) => ({
+                                  ...prev,
+                                  [cat.category]: opt.value,
+                                }))
+                              }
+                              className={`px-2 py-1.5 rounded-md text-xs font-medium border transition-colors cursor-pointer ${
+                                (newSettingTypes[cat.category] || "text") === opt.value
+                                  ? "bg-primary text-white border-primary"
+                                  : "border-border text-text/60 hover:bg-text/5"
+                              }`}
+                            >
+                              {opt.label}
+                            </button>
+                          ))}
+                        </div>
+                        <input
+                          ref={(el) => {
+                            addSettingInputRefs.current[cat.category] = el
+                          }}
+                          type="text"
+                          value={newSettingNames[cat.category] || ""}
+                          onChange={(e) =>
+                            setNewSettingNames((prev) => ({
+                              ...prev,
+                              [cat.category]: e.target.value,
+                            }))
+                          }
+                          onKeyDown={(e) => {
+                            if (e.key === "Enter") {
+                              e.preventDefault()
+                              addSetting(cat.category)
+                            }
+                          }}
+                          placeholder="Add setting..."
+                          className="flex-1 px-3 py-1.5 rounded-md border border-border bg-text/5 text-text text-sm placeholder:text-text/40 outline-none focus:border-primary focus:ring-2 focus:ring-primary/50 transition-colors"
+                        />
+                        <button
+                          onClick={() => addSetting(cat.category)}
+                          className="p-1.5 rounded-md bg-primary text-white hover:bg-primary/90 transition-colors cursor-pointer flex-shrink-0"
+                          title="Add setting"
+                        >
+                          <Plus className="h-4 w-4" />
+                        </button>
+                      </div>
+
                      <AnimatePresence initial={false}>
                        {cat.settings.map((setting) => (
                          <motion.div
@@ -408,48 +470,6 @@ export function SettingsEditor({
                          </motion.div>
                        ))}
                      </AnimatePresence>
-
-                      <div className="flex items-center gap-2 pt-1">
-                        <select
-                          value={newSettingTypes[cat.category] || "text"}
-                          onChange={(e) =>
-                            setNewSettingTypes((prev) => ({
-                              ...prev,
-                              [cat.category]: e.target.value,
-                            }))
-                          }
-                          className="text-xs px-2 py-1.5 rounded-md border border-border bg-text/5 text-text/60 outline-none focus:border-primary"
-                        >
-                          <option value="text">Text</option>
-                          <option value="number">Number</option>
-                          <option value="boolean">Boolean</option>
-                        </select>
-                        <input
-                          type="text"
-                          value={newSettingNames[cat.category] || ""}
-                          onChange={(e) =>
-                            setNewSettingNames((prev) => ({
-                              ...prev,
-                              [cat.category]: e.target.value,
-                            }))
-                          }
-                          onKeyDown={(e) => {
-                            if (e.key === "Enter") {
-                              e.preventDefault()
-                              addSetting(cat.category)
-                            }
-                          }}
-                          placeholder="Add setting..."
-                          className="flex-1 px-3 py-1.5 rounded-md border border-border bg-text/5 text-text text-sm placeholder:text-text/40 outline-none focus:border-primary focus:ring-2 focus:ring-primary/50 transition-colors"
-                        />
-                        <button
-                          onClick={() => addSetting(cat.category)}
-                          className="p-1.5 rounded-md bg-primary text-white hover:bg-primary/90 transition-colors cursor-pointer"
-                          title="Add setting"
-                        >
-                          <Plus className="h-4 w-4" />
-                        </button>
-                      </div>
                    </div>
                  </motion.div>
                )}
@@ -18,14 +18,18 @@ interface PerformanceStepProps {

 export function PerformanceStep({ value, onChange }: PerformanceStepProps) {
  const error = useMemo(() => {
-    if (value.fpsAvg !== undefined && value.fpsAvg !== null && value.fpsAvg <= 0) {
+    if (value.fpsAvg !== undefined && value.fpsAvg !== null && (isNaN(value.fpsAvg) || value.fpsAvg <= 0)) {
      return "FPS Average must be greater than 0"
    }
    return null
  }, [value.fpsAvg])

  const update = (field: keyof PerformanceData, val: string) => {
-    const num = val === "" ? undefined : Number(val)
+    const isDecimalField = field === "loadTimeSsd" || field === "loadTimeSd"
+    const cleaned = isDecimalField
+      ? val.replace(/[^0-9.]/g, "").replace(/(\..*)\./g, "$1")
+      : val.replace(/[^0-9]/g, "")
+    const num = cleaned === "" || cleaned === "." ? undefined : Number(cleaned)
    onChange({ ...value, [field]: num })
  }

@@ -44,9 +48,9 @@ export function PerformanceStep({ value, onChange }: PerformanceStepProps) {
              FPS Average <span className="text-red-400">*</span>
            </label>
            <input
-              type="number"
-              min={1}
-              step={1}
+              type="text"
+              inputMode="numeric"
+              pattern="[0-9]*"
              value={value.fpsAvg ?? ""}
              onChange={(e) => update("fpsAvg", e.target.value)}
              placeholder="e.g. 45"
@@ -58,9 +62,9 @@ export function PerformanceStep({ value, onChange }: PerformanceStepProps) {
          <div className="space-y-1.5">
            <label className="text-xs font-medium text-text/60">FPS Low</label>
            <input
-              type="number"
-              min={1}
-              step={1}
+              type="text"
+              inputMode="numeric"
+              pattern="[0-9]*"
              value={value.fpsLow ?? ""}
              onChange={(e) => update("fpsLow", e.target.value)}
              placeholder="e.g. 30"
@@ -71,9 +75,9 @@ export function PerformanceStep({ value, onChange }: PerformanceStepProps) {
          <div className="space-y-1.5">
            <label className="text-xs font-medium text-text/60">FPS High</label>
            <input
-              type="number"
-              min={1}
-              step={1}
+              type="text"
+              inputMode="numeric"
+              pattern="[0-9]*"
              value={value.fpsHigh ?? ""}
              onChange={(e) => update("fpsHigh", e.target.value)}
              placeholder="e.g. 60"
@@ -98,9 +102,9 @@ export function PerformanceStep({ value, onChange }: PerformanceStepProps) {
          <div className="space-y-1.5">
            <label className="text-xs font-medium text-text/60">Load Time SSD (seconds)</label>
            <input
-              type="number"
-              min={0}
-              step={0.1}
+              type="text"
+              inputMode="numeric"
+              pattern="[0-9]*"
              value={value.loadTimeSsd ?? ""}
              onChange={(e) => update("loadTimeSsd", e.target.value)}
              placeholder="e.g. 12.5"
@@ -111,9 +115,9 @@ export function PerformanceStep({ value, onChange }: PerformanceStepProps) {
          <div className="space-y-1.5">
            <label className="text-xs font-medium text-text/60">Load Time SD Card (seconds)</label>
            <input
-              type="number"
-              min={0}
-              step={0.1}
+              type="text"
+              inputMode="numeric"
+              pattern="[0-9]*"
              value={value.loadTimeSd ?? ""}
              onChange={(e) => update("loadTimeSd", e.target.value)}
              placeholder="e.g. 35.0"