feat: add detail fetch

app/[locale]/(main)/ClientComponents/ServerDetailClient.tsx

@@ -0,0 +1,62 @@
+"use client";
+
+import useSWR from "swr";
+import { NezhaAPISafe } from "@/app/[locale]/types/nezha-api";
+import { nezhaFetcher } from "@/lib/utils";
+import getEnv from "@/lib/env-entry";
+import { useRouter } from "next/navigation";
+import { useLocale } from "next-intl";
+import { BackIcon } from "@/components/Icon";
+import { Card, CardContent } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+
+export default function ServerDetailClient({ server_id }: { server_id: number }) {
+    const router = useRouter();
+    const locale = useLocale();
+    const { data, error } = useSWR<NezhaAPISafe>(
+        `/api/detail?server_id=${server_id}`,
+        nezhaFetcher,
+        {
+            refreshInterval:
+                Number(getEnv("NEXT_PUBLIC_NezhaFetchInterval")) || 5000,
+        },
+    );
+    return (
+        <div className="mx-auto grid w-full max-w-5xl gap-1">
+            <div
+                onClick={() => {
+                    router.push(`/${locale}/`);
+                }}
+                className="flex flex-none cursor-pointer font-semibold leading-none items-center break-all tracking-tight gap-0.5 text-xl"
+            >
+                <BackIcon />
+                HomeDash
+            </div>
+            <section className="flex flex-wrap gap-4 mt-2">
+                <Card className="rounded-[10px] flex flex-col justify-center">
+                    <CardContent className="px-1.5 py-1">
+                        <section className="flex items-center gap-2">
+                            <p className="text-xs font-semibold">
+                                ID
+                            </p>
+                            <div className="text-xs w-fit"> {server_id} </div>
+                        </section>
+                    </CardContent>
+                </Card>
+                <Card className="rounded-[10px]">
+                    <CardContent className="px-1.5 py-1">
+                        <section className="flex items-center gap-2">
+                            <p className="text-xs font-semibold">
+                                Tag
+                            </p>
+                            <Badge className="text-xs rounded-[6px] w-fit px-1 py-0" variant="secondary"> {data?.tag} </Badge>
+                        </section>
+                    </CardContent>
+                </Card>
+            </section>
+        </div>
+    )
+
+
+
+}

app/[locale]/(main)/detail/[id]/page.tsx

@@ -1,25 +1,7 @@
-"use client";
+import ServerDetailClient from "@/app/[locale]/(main)/ClientComponents/ServerDetailClient";
-
-import { BackIcon } from "@/components/Icon";
-import { useLocale } from "next-intl";
-import { useRouter } from "next/navigation";
 
 export default function Page({ params }: { params: { id: string } }) {
-
-  const router = useRouter();
-  const locale = useLocale();
-
   return (
-    <div className="mx-auto grid w-full max-w-5xl gap-4 md:gap-6">
+    <ServerDetailClient server_id={Number(params.id)} />
-      <div
-        onClick={() => {
-          router.push(`/${locale}/`);
-        }}
-        className="flex flex-none cursor-pointer font-medium items-center break-all tracking-tight gap-0.5 text-2xl"
-      >
-        <BackIcon />
-        HomeDash
-      </div>
-    </div>
   );
 }

app/api/detail/route.ts

@@ -0,0 +1,30 @@
+import { NezhaAPISafe } from "@/app/[locale]/types/nezha-api";
+import { GetServerDetail } from "@/lib/serverFetch";
+import { NextResponse } from "next/server";
+
+export const dynamic = "force-dynamic";
+
+interface NezhaDataResponse {
+  error?: string;
+  data?: NezhaAPISafe;
+}
+
+export async function GET(req: Request) {
+    const { searchParams } = new URL(req.url);
+    const server_id = searchParams.get("server_id");
+    if (!server_id) {
+      return NextResponse.json(
+        { error: "server_id is required" },
+        { status: 400 },
+      );
+    }
+    const response = (await GetServerDetail({
+      server_id: parseInt(server_id),
+    })) as NezhaDataResponse;
+    if (response.error) {
+      console.log(response.error);
+      return NextResponse.json({ error: response.error }, { status: 400 });
+    }
+    return NextResponse.json(response, { status: 200 });
+  }
+  

bunfig.toml

@@ -0,0 +1,2 @@
+[install]
+registry = "https://registry.npmmirror.com/"

components/ServerCard.tsx

@@ -36,14 +36,6 @@ export default function ServerCard({
         "flex flex-col items-center justify-start gap-3 p-3 md:px-5 lg:flex-row"
       }
     >
-      {/* <Popover>
-        <PopoverTrigger asChild>
-          
-        </PopoverTrigger>
-        <PopoverContent side="top">
-          <ServerCardPopover status={props.status} host={props.host} />
-        </PopoverContent>
-      </Popover> */}
       <section
         className="grid items-center gap-2 lg:w-28 cursor-pointer"
         style={{ gridTemplateColumns: "auto 1fr auto" }}
@@ -71,7 +63,7 @@ export default function ServerCard({
       </section>
       <div
         onClick={() => {
-          router.push(`/${locale}/${id}`);
+          router.push(`/${locale}/network/${id}`);
         }}
         className="flex flex-col gap-2 cursor-pointer"
       >
@@ -113,7 +105,7 @@ export default function ServerCard({
         {showNetTransfer && (
           <section
             onClick={() => {
-              router.push(`/${locale}/${id}`);
+              router.push(`/${locale}/network/${id}`);
             }}
             className={"flex items-center justify-between gap-1"}
           >

lib/serverFetch.tsx

@@ -112,3 +112,53 @@ export async function GetServerMonitor({ server_id }: { server_id: number }) {
     return error;
   }
 }
+
+export async function GetServerDetail({ server_id }: { server_id: number }) {
+  var nezhaBaseUrl = getEnv("NezhaBaseUrl");
+  if (!nezhaBaseUrl) {
+    console.log("NezhaBaseUrl is not set");
+    return { error: "NezhaBaseUrl is not set" };
+  }
+
+  // Remove trailing slash
+  if (nezhaBaseUrl[nezhaBaseUrl.length - 1] === "/") {
+    nezhaBaseUrl = nezhaBaseUrl.slice(0, -1);
+  }
+
+  try {
+    const response = await fetch(
+      nezhaBaseUrl + `/api/v1/server/details?id=${server_id}`,
+      {
+        headers: {
+          Authorization: getEnv("NezhaAuth") as string,
+        },
+        next: {
+          revalidate: 0,
+        },
+      },
+    );
+    const resData = await response.json();
+    const detailDataList = resData.result;
+    if (!detailDataList) {
+      console.log(resData);
+      return { error: "MonitorData fetch failed" };
+    }
+
+    const timestamp = Date.now() / 1000;
+    const detailData = detailDataList.map((element: MakeOptional<NezhaAPI, "ipv4" | "ipv6" | "valid_ip">) => {
+      if (timestamp - element.last_active > 300) {
+        element.online_status = false;
+      } else {
+        element.online_status = true;
+      }
+      delete element.ipv4;
+      delete element.ipv6;
+      delete element.valid_ip;
+      return element;
+    })[0];
+
+    return detailData;
+  } catch (error) {
+    return error;
+  }
+}