From 737378ac74e617b208b292a81cf92dc1a617e002 Mon Sep 17 00:00:00 2001
From: kunish <kunish.butt@gmail.com>
Date: Sun, 3 Sep 2023 02:22:38 +0800
Subject: [PATCH] refactor: dns query button

---
 src/components/Button.tsx |  4 +---
 src/pages/Config.tsx      | 31 +++++++++++++++++--------------
 2 files changed, 18 insertions(+), 17 deletions(-)

diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 028b90e..a0b02dd 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -2,9 +2,7 @@ import { JSX, ParentComponent, Show, splitProps } from 'solid-js'
 import { twMerge } from 'tailwind-merge'
 
 export const Button: ParentComponent<
-  JSX.HTMLAttributes<HTMLButtonElement> & {
-    loading?: boolean
-  }
+  JSX.ButtonHTMLAttributes<HTMLButtonElement> & { loading?: boolean }
 > = (props) => {
   const [local, others] = splitProps(props, ['class', 'loading'])
 
diff --git a/src/pages/Config.tsx b/src/pages/Config.tsx
index ca84e9d..3d2f641 100644
--- a/src/pages/Config.tsx
+++ b/src/pages/Config.tsx
@@ -35,19 +35,21 @@ const DNSQueryForm = () => {
   const [t] = useI18n()
   const request = useRequest()
 
-  const { form } = createForm<z.infer<typeof dnsQueryFormSchema>>({
-    extend: validator({ schema: dnsQueryFormSchema }),
-    onSubmit: async (values) => {
-      request
-        .get('dns/query', {
-          searchParams: { name: values.name, type: values.type },
-        })
-        .json<DNSQuery>()
-        .then(({ Answer }) =>
-          setDNSQueryResult(Answer?.map(({ data }) => data) || []),
-        )
+  const { form, isSubmitting } = createForm<z.infer<typeof dnsQueryFormSchema>>(
+    {
+      extend: validator({ schema: dnsQueryFormSchema }),
+      onSubmit: async (values) => {
+        request
+          .get('dns/query', {
+            searchParams: { name: values.name, type: values.type },
+          })
+          .json<DNSQuery>()
+          .then(({ Answer }) =>
+            setDNSQueryResult(Answer?.map(({ data }) => data) || []),
+          )
+      },
     },
-  })
+  )
 
   const [DNSQueryResult, setDNSQueryResult] = createSignal<string[]>([])
 
@@ -64,9 +66,10 @@ const DNSQueryForm = () => {
             <option>AAAA</option>
             <option>MX</option>
           </select>
-          <button type="submit" class="btn btn-primary">
+
+          <Button type="submit" class="btn-primary" loading={isSubmitting()}>
             {t('dnsQuery')}
-          </button>
+          </Button>
         </div>
       </form>