Site view

app/api/sites/get/route.ts

@@ -6,11 +6,19 @@ interface QueryParams {
 }
 
 export async function GET(request: NextRequest) {
-    const { siteId } = request.nextUrl.searchParams as unknown as QueryParams;
-    const site = await prisma.site.findUnique({
-        where: {
-            id: Number(siteId),
-        },
-    });
-    return NextResponse.json(site);
+    const searchParams = request.nextUrl.searchParams;
+    const siteId = searchParams.get("siteId");
+    
+    try {
+        const site = await prisma.site.findUnique({
+            where: {
+                id: Number(siteId),
+            },
+        });
+        
+        return NextResponse.json({ site });
+    } catch (error) {
+        console.error("Error fetching site:", error);
+        return NextResponse.json({ error: "Failed to fetch site" }, { status: 500 });
+    }
 }

app/dashboard/sites/[siteId]/SitePage.tsx

@@ -1,5 +1,7 @@
 "use client"
 import Sidebar from "@/components/Sidebar";
+import useSite from "@/hooks/useSite";
+import { useEffect } from "react";
 
 interface SitesPageProps {
     username: string;
@@ -8,6 +10,13 @@ interface SitesPageProps {
 }
 
 export default function SitesPage({ username, name, siteId }: SitesPageProps) {
+    const { site, loadSite, setSiteId } = useSite();
+    useEffect(() => {
+        console.log(siteId);
+        if (siteId) {
+            setSiteId(siteId);
+        }
+    }, [siteId, setSiteId]);
     return (
         <Sidebar 
             username={username} 
@@ -17,10 +26,9 @@ export default function SitesPage({ username, name, siteId }: SitesPageProps) {
             <main>
                 <div className="flex gap-4 items-center">
                     <div className="flex-1">
-                        <h1 className="text-2xl font-bold">Site</h1>
+                        <h1 className="text-2xl font-bold">Site - {site.name}</h1>
                         <p className="text-sm opacity-70">
-                            Manage your sites. Sites are real-world locations where you can 
-                            monitor your assets & add networks.
+                            Description: {site.description}
                         </p>
                     </div>
                 </div>

hooks/useSite.ts

@@ -0,0 +1,40 @@
+import { useState, useEffect, useCallback } from "react";
+import axios from "axios";
+
+interface Site {
+    id: number;
+    name: string;
+    description: string;
+    networks: string[];
+}
+
+const useSite = () => {
+    const [site, setSite] = useState<Site>({
+        id: 0,
+        name: "",
+        description: "",
+        networks: []
+    });
+    const [siteId, setSiteId] = useState("");
+
+    const loadSite = useCallback(() => {
+        if (!siteId) return;
+        axios.get('/api/sites/get', {
+            params: { siteId }
+        }).then((response) => {
+            setSite(response.data.site);
+        });
+    }, [siteId]);
+
+    useEffect(() => {
+        loadSite();
+    }, [loadSite]);
+
+    return {
+        site,
+        loadSite,
+        setSiteId,
+    };
+};
+
+export default useSite;