feat: add ISP check

src/components/CheckItem.tsx

@@ -1,13 +1,10 @@
 "use client"
 import { CheckItemIconState, CheckItemType } from "@/types/CheckItem"
 import { Icon } from "@iconify/react/dist/iconify.js"
-import useSWRImmutable from "swr/immutable"
+import { useQuery } from "@tanstack/react-query"
 
 type CheckItemProps = CheckItemType
 
-const fetcher = (url: string | URL | Request) =>
-  fetch(url).then((r) => r.json())
-
 const icon = {
   ok: (
     <Icon
@@ -30,8 +27,16 @@ const icon = {
   ),
 }
 
-export default function CheckItem({ name, url, content }: CheckItemProps) {
-  const { data, error, isLoading } = useSWRImmutable<any, Error>(url, fetcher)
+export default function CheckItem({
+  id,
+  name,
+  fetcher,
+  content,
+}: CheckItemProps) {
+  const { data, error, isLoading } = useQuery({
+    queryKey: [id],
+    queryFn: fetcher,
+  })
 
   return (
     <>
@@ -41,11 +46,13 @@ export default function CheckItem({ name, url, content }: CheckItemProps) {
           : isLoading
           ? icon["loading"]
           : data != undefined
-          ? icon[content(data).state]
+          ? icon[content(data).state ?? "ok"]
           : null}
 
         <div>
-          <span className="mr-4"><b>{name}</b></span>
+          <span className='mr-4'>
+            <b>{name}</b>
+          </span>
 
           <span>
             {data != undefined

src/components/Checker.tsx

@@ -1,51 +1,94 @@
 "use client"
 import CheckItem from "./CheckItem"
 import { CheckItemType } from "@/types/CheckItem"
-
-const checkList: CheckItemType[] = [
-  {
-    name: "公网 IPv6 地址",
-    url: "https://6.ipv6test.online/ip/myip",
-    content: (data) => {
-      const success = data?.version == 6
-      return {
-        state: success ? "ok" : "error",
-        text: (success ? `${data?.address}` : "未检测到"),
-      }
-    },
-  },
-  {
-    name: "公网 IPv4 地址",
-    url: "https://4.ipv6test.online/ip/myip",
-    content: (data) => {
-      const success = data?.version == 4
-      return {
-        state: success ? "ok" : "error",
-        text: (success ? `${data?.address}` : "未检测到"),
-      }
-    },
-  },
-  {
-    name: "双协议栈测试",
-    url: "https://test.ipv6test.online/ip/myip",
-    content: (data) => {
-      const isIPv6 = data?.version == 6
-      const isIPv4 = data?.version == 4
-
-      return {
-        state: isIPv6 ? "ok" : "error",
-        text: isIPv6 ? "你的网络IPv6访问优先" : isIPv4 ? "你的网络IPv4访问优先" : "未检测到",
-      }
-    },
-  },
-]
+import { useRef } from "react"
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
 
 export default function Checker() {
+  const IPv4 = useRef("")
+  const IPv6 = useRef("")
+
+  const checkList: CheckItemType[] = [
+    {
+      id: "IPv6",
+      name: "公网 IPv6 地址",
+      fetcher: () => fetch("https://test.ipv6test.online/ip/myip").then((res) => res.json()),
+      content: (data) => {
+        const success = data?.version == 6
+        if (success && data.address != null) {
+          IPv6.current = data.address
+        }
+        return {
+          state: success ? "ok" : "error",
+          text: success ? `${data?.address}` : "未检测到",
+        }
+      },
+    },
+    {
+      id: "IPv4",
+      name: "公网 IPv4 地址",
+      fetcher: () => fetch("https://test.ipv6test.online/ip/myip").then((res) => res.json()),
+      content: (data) => {
+        const success = data?.version == 4
+
+        if (success && data.address != null) {
+          IPv4.current = data.address
+        }
+
+        return {
+          state: success ? "ok" : "error",
+          text: success ? `${data?.address}` : "未检测到",
+        }
+      },
+    },
+    {
+      id: "ipv4andipv6",
+      name: "双协议栈测试",
+      fetcher: () => fetch("https://test.ipv6test.online/ip/myip").then((res) => res.json()),
+      content: (data) => {
+        const isIPv6 = data?.version == 6
+        const isIPv4 = data?.version == 4
+
+        return {
+          state: isIPv6 ? "ok" : "error",
+          text: isIPv6 ? "IPv6访问优先" : isIPv4 ? "IPv4访问优先" : "未检测到",
+        }
+      },
+    },
+    {
+      id: "ISP",
+      name: "ISP",
+      fetcher: () =>
+        fetch("https://test.ipv6test.online/ip/isp", {
+          method: "POST",
+          body: JSON.stringify({
+            address: IPv6.current,
+          }),
+        }).then((res) => res.json()),
+      content: (data) => {
+        return {
+          text: data.isp,
+        }
+      },
+    },
+  ]
+
+  const queryClient = new QueryClient();
+
+
   return (
-    <>
+    <QueryClientProvider client={queryClient}>
       {checkList.map((item, i) => {
-        return <CheckItem key={i} name={item.name} url={item.url} content={item.content} />
+        return (
+          <CheckItem
+            key={i}
+            id={item.id}
+            name={item.name}
+            fetcher={item.fetcher}
+            content={item.content}
+          />
+        )
       })}
-    </>
+    </QueryClientProvider>
   )
 }

src/types/CheckItem.ts

@@ -1,7 +1,8 @@
 export interface CheckItemType {
+  id: string
   name: string
-  url: string
-  content: (data: any) => {state: CheckItemIconState, text: string}
+  fetcher: () => Promise<any>
+  content: (data: any) => {state?: CheckItemIconState, text: string}
 }
 
 export type CheckItemIconState = "ok" | "loading" | "info" | "error"

src/types/ISPResponse.ts

@@ -0,0 +1,3 @@
+export default interface ISPResponse {
+  isp: string
+}