From c2277e14f248bbd9a11ddc3fbe46ddb784f19f4f Mon Sep 17 00:00:00 2001
From: ccbikai <ccbikai@gmail.com>
Date: Fri, 11 Oct 2024 20:32:33 +0800
Subject: [PATCH] feat: enhance DNS form initialization and UI components

Refactor DNS form to initialize fields from URL search params dynamically, improving user experience by retaining form state across page reloads. Simplify DNS panel by removing unnecessary Suspense wrapper. Update UI components to use client-side rendering directives and refine input styles for better clarity.
---
 components/dns/dns-form.jsx  | 21 ++++++++++++++-------
 components/dns/dns-panel.jsx |  6 ++----
 components/ui/form.tsx       |  2 ++
 components/ui/input.tsx      |  2 +-
 components/ui/label.tsx      |  2 ++
 components/ui/select.tsx     |  2 ++
 6 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/components/dns/dns-form.jsx b/components/dns/dns-form.jsx
index 48634c7..3ef4a44 100644
--- a/components/dns/dns-form.jsx
+++ b/components/dns/dns-form.jsx
@@ -21,9 +21,7 @@ import { zodResolver } from '@hookform/resolvers/zod'
 
 import isValidDomain from 'is-valid-domain'
 
-import { useSearchParams } from 'next/navigation'
-
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import { useForm } from 'react-hook-form'
 import * as z from 'zod'
 import { DNSTypes } from './dns-type'
@@ -50,17 +48,26 @@ const formSchema = z.object({
 })
 
 export function DNSForm({ onSearch }) {
-  const searchParams = useSearchParams()
   const form = useForm({
     resolver: zodResolver(formSchema),
     defaultValues: {
-      name: searchParams.get('name') || '',
-      type: searchParams.get('type') || 'A',
-      resolver: searchParams.get('resolver') || 'cloudflare',
+      name: '',
+      type: 'A',
+      resolver: 'cloudflare',
     },
   })
   const [loading, setLoading] = useState(false)
 
+  useEffect(() => {
+    const values = form.getValues()
+
+    for (const key in values) {
+      const searchParams = new URL(document.location).searchParams
+      const queryValue = searchParams.get(key)
+      form.setValue(key, queryValue)
+    }
+  })
+
   function changeName(e) {
     const urlParser = z.string().url()
     const result = urlParser.safeParse(e.target.value)
diff --git a/components/dns/dns-panel.jsx b/components/dns/dns-panel.jsx
index 155b822..e702067 100644
--- a/components/dns/dns-panel.jsx
+++ b/components/dns/dns-panel.jsx
@@ -1,5 +1,5 @@
 'use client'
-import { Suspense, useState } from 'react'
+import { useState } from 'react'
 import { DNSFeature } from './dns-feature'
 import { DNSForm } from './dns-form'
 import { DNSTable } from './dns-table'
@@ -23,9 +23,7 @@ export default function DNSPanel() {
   return (
     <>
       {/* <DNSHero/> */}
-      <Suspense>
-        <DNSForm onSearch={onSearch} />
-      </Suspense>
+      <DNSForm onSearch={onSearch} />
       {
         formData.name ? <DNSTable formData={formData} /> : <DNSFeature />
       }
diff --git a/components/ui/form.tsx b/components/ui/form.tsx
index 4603f8b..ce264ae 100644
--- a/components/ui/form.tsx
+++ b/components/ui/form.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react"
 import * as LabelPrimitive from "@radix-ui/react-label"
 import { Slot } from "@radix-ui/react-slot"
diff --git a/components/ui/input.tsx b/components/ui/input.tsx
index 677d05f..a921025 100644
--- a/components/ui/input.tsx
+++ b/components/ui/input.tsx
@@ -11,7 +11,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input
         type={type}
         className={cn(
-          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
           className
         )}
         ref={ref}
diff --git a/components/ui/label.tsx b/components/ui/label.tsx
index 683faa7..5341821 100644
--- a/components/ui/label.tsx
+++ b/components/ui/label.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react"
 import * as LabelPrimitive from "@radix-ui/react-label"
 import { cva, type VariantProps } from "class-variance-authority"
diff --git a/components/ui/select.tsx b/components/ui/select.tsx
index fe56d4d..cbe5a36 100644
--- a/components/ui/select.tsx
+++ b/components/ui/select.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react"
 import * as SelectPrimitive from "@radix-ui/react-select"
 import { Check, ChevronDown, ChevronUp } from "lucide-react"