chore: use swr in iframe page

app/(empty)/iframe/page.tsx

@@ -1,36 +1,40 @@
 "use client"
 import { GhUserUse } from "@/app/api/types"
-import { calParams } from "@/utils/svg"
+import { calParams } from "@/utils"
 import { Spinner } from "@nextui-org/react"
 import { useSearchParams } from "next/navigation"
 import { useEffect, useState } from "react"
+import useSWR from "swr"
 
 export default function Page() {
   const searchParams = useSearchParams()
-  const [users, setUsers] = useState<GhUserUse[]>([])
-  async function fetchUsers() {
-    try {
-      const resp = await fetch("/api/json?" + searchParams.toString())
-      setUsers(await resp.json())
-    } catch (e) {}
+  const { data, error, isLoading } = useSWR<GhUserUse[]>(
+    `/api/json?${searchParams.toString()}`
+  )
+
+  if (error) {
+    return (
+      <div className="h-full w-full flex justify-center items-center">
+        <p className="text-red-500">Error: {error?.message}</p>
+      </div>
+    )
   }
-  useEffect(() => {
-    fetchUsers()
-  }, [])
-  if (users.length === 0) {
+
+  if (isLoading) {
     return (
       <div className="h-full w-full flex justify-center items-center">
         <Spinner />
       </div>
     )
   }
+  const users = data!
   const params = calParams({
     cols: searchParams.get("cols"),
     radius: searchParams.get("radius"),
     space: searchParams.get("space"),
     total: users.length,
   })
-  const usersGroup = users.reduce((acc, user) => {
+  const usersGroup = users!.reduce((acc, user) => {
     const index = acc.findIndex((group) => group.length < params.cols)
     if (index === -1) {
       acc.push([user])

app/(main)/used_by/show.tsx

@@ -1,5 +1,6 @@
 "use client"
 import { UsedRepoInfo } from "@/types"
+import { fetcher } from "@/utils"
 import {
   Card,
   CardBody,
@@ -12,14 +13,7 @@ import {
 import { usePathname, useRouter, useSearchParams } from "next/navigation"
 import useSWR from "swr"
 
-function fetcher(
-  input: Parameters<typeof fetch>[0],
-  init?: Parameters<typeof fetch>[1]
-) {
-  return fetch(input, init).then((res) => res.json())
-}
-
-const host = "https://api.nn.ci/proxy/contrib.nn.ci"
+const host = ""
 
 export function Show() {
   const searchParams = useSearchParams()
@@ -33,7 +27,7 @@ export function Show() {
   if (error) {
     return (
       <div className="w-full h-24 flex justify-center items-center">
-        <p className="text-red-500">Error: {error.message}</p>
+        <p className="text-red-500">Error: {error?.message}</p>
       </div>
     )
   }

app/api/svg.ts

@@ -1,4 +1,4 @@
-import { calParams, calParamsArg, calParamsResult } from "@/utils/svg"
+import { calParams, calParamsArg, calParamsResult } from "@/utils"
 import { fetchAvatar, fetchRepos } from "./github"
 import { GhUser, GhUserUse } from "./types"
 

utils/fetch.ts

@@ -0,0 +1,6 @@
+export function fetcher(
+  input: Parameters<typeof fetch>[0],
+  init?: Parameters<typeof fetch>[1]
+) {
+  return fetch(input, init).then((res) => res.json())
+}

utils/index.ts

@@ -0,0 +1,2 @@
+export * from "./fetch"
+export * from "./svg"