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 ( <> {/* */} - - - + { formData.name ? : } 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(