From d75021c52d56d4bd5a2dc0d793cf05d8dd3c2dca Mon Sep 17 00:00:00 2001
From: Andy Hsu <i@nn.ci>
Date: Tue, 17 Oct 2023 14:57:07 +0800
Subject: [PATCH] feat: improve used by page UI

---
 app/(main)/used_by/show.tsx | 79 +++++++++++++++++++++++++++----------
 app/api/used_by/route.ts    |  2 +-
 package.json                |  1 +
 pnpm-lock.yaml              | 21 ++++++++++
 4 files changed, 81 insertions(+), 22 deletions(-)

diff --git a/app/(main)/used_by/show.tsx b/app/(main)/used_by/show.tsx
index 70eab07..301eb41 100644
--- a/app/(main)/used_by/show.tsx
+++ b/app/(main)/used_by/show.tsx
@@ -7,43 +7,80 @@ import {
   Image,
   Link,
   Pagination,
+  Spinner,
 } from "@nextui-org/react"
-import { useSearchParams } from "next/navigation"
-import { useEffect, useState } from "react"
+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"
 
 export function Show() {
   const searchParams = useSearchParams()
-  const [data, setData] = useState<UsedRepoInfo[]>([])
-  const [total, setTotal] = useState(0)
-  async function refetch() {
-    const resp = await fetch("/api/used_by?" + searchParams.toString())
-    const { data, total } = await resp.json()
-    setData(data)
-    setTotal(total)
+  const pathname = usePathname()
+  const router = useRouter()
+  const perPage = 24
+  const { data, error, isLoading } = useSWR<{
+    data: UsedRepoInfo[]
+    total: number
+  }>(`${host}/api/used_by?` + searchParams.toString(), fetcher)
+  if (error) {
+    return (
+      <div className="w-full h-24 flex justify-center items-center">
+        <p className="text-red-500">Error: {error.message}</p>
+      </div>
+    )
   }
-  useEffect(() => {
-    refetch()
-  }, [searchParams])
+  if (isLoading) {
+    return (
+      <div className="w-full h-24 flex justify-center items-center">
+        <Spinner />
+      </div>
+    )
+  }
+  if (!data?.total) {
+    return (
+      <Card>
+        <CardBody>
+          <p className="text-center text-xl">No Used</p>
+        </CardBody>
+      </Card>
+    )
+  }
+  const pages = Math.ceil(data.total / perPage)
   return (
     <div className="w-full pt-4 md:px-10 lg:px-[14%] flex gap-2 flex-col">
-      <div className="grid grid-cols-1 md:grid-cols-[repeat(auto-fill,minmax(400px,1fr))]">
-        {data.map((repo) => (
+      <div className="grid grid-cols-1 md:grid-cols-[repeat(auto-fill,minmax(400px,1fr))] gap-4">
+        {data!.data.map((repo) => (
           <Card isPressable key={repo.name}>
             <CardHeader className="pb-0">{repo.name}</CardHeader>
             <CardBody className="p-3">
               <Link href={`/api?repo=${repo.name}`}>
-                <Image src={`/api?repo=${repo.name}`} />
+                <Image src={`${host}/api?repo=${repo.name}`} />
               </Link>
             </CardBody>
           </Card>
         ))}
       </div>
-      <div className="flex justify-center">
-        <Pagination
-          total={total}
-          page={parseInt(searchParams.get("page") ?? "1")}
-        />
-      </div>
+      {pages > 1 && (
+        <div className="flex justify-center">
+          <Pagination
+            total={Math.ceil(data!.total / perPage)}
+            page={parseInt(searchParams.get("page") ?? "1")}
+            onChange={(page) => {
+              const params = new URLSearchParams(searchParams)
+              params.set("page", page.toString())
+              router.push(pathname + "?" + params.toString())
+            }}
+          />
+        </div>
+      )}
     </div>
   )
 }
diff --git a/app/api/used_by/route.ts b/app/api/used_by/route.ts
index 8e4798a..36fac23 100644
--- a/app/api/used_by/route.ts
+++ b/app/api/used_by/route.ts
@@ -4,7 +4,7 @@ import { usedBy } from "../github"
 export async function GET(req: NextRequest) {
   try {
     const searchParams = req.nextUrl.searchParams
-    const per_page = parseInt(searchParams.get("per_page") || "20")
+    const per_page = parseInt(searchParams.get("per_page") || "24")
     const page = parseInt(searchParams.get("page") || "1")
     const users = usedBy(per_page, page)
     return NextResponse.json(users)
diff --git a/package.json b/package.json
index 87a3963..9ef19c4 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
     "postcss": "8.4.29",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "swr": "^2.2.4",
     "tailwind-variants": "^0.1.13",
     "tailwindcss": "3.3.3",
     "typescript": "5.0.4"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f81a613..a4ed37a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -59,6 +59,9 @@ dependencies:
   react-dom:
     specifier: 18.2.0
     version: 18.2.0(react@18.2.0)
+  swr:
+    specifier: ^2.2.4
+    version: 2.2.4(react@18.2.0)
   tailwind-variants:
     specifier: ^0.1.13
     version: 0.1.13(tailwindcss@3.3.3)
@@ -4626,6 +4629,16 @@ packages:
     engines: {node: '>= 0.4'}
     dev: false
 
+  /swr@2.2.4(react@18.2.0):
+    resolution: {integrity: sha512-njiZ/4RiIhoOlAaLYDqwz5qH/KZXVilRLvomrx83HjzCWTfa+InyfAjv05PSFxnmLzZkNO9ZfvgoqzAaEI4sGQ==}
+    peerDependencies:
+      react: ^16.11.0 || ^17.0.0 || ^18.0.0
+    dependencies:
+      client-only: 0.0.1
+      react: 18.2.0
+      use-sync-external-store: 1.2.0(react@18.2.0)
+    dev: false
+
   /tailwind-merge@1.14.0:
     resolution: {integrity: sha512-3mFKyCo/MBcgyOTlrY8T7odzZFx+w+qKSMAmdFzRvqBfLlSigU6TZnlFHK0lkMwj9Bj8OYU+9yW9lmGuS0QEnQ==}
     dev: false
@@ -4888,6 +4901,14 @@ packages:
       tslib: 2.6.2
     dev: false
 
+  /use-sync-external-store@1.2.0(react@18.2.0):
+    resolution: {integrity: sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    dependencies:
+      react: 18.2.0
+    dev: false
+
   /util-deprecate@1.0.2:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
     dev: false