small stuff

src/app/api/server/route.ts

@@ -0,0 +1,33 @@
+import { HttpStatusCode } from "axios";
+import { NextResponse } from "next/server";
+import { servers } from "../servers/route";
+import { validate } from "../auth/route";
+
+/*
+  Vision: This will be 
+*/
+export function GET(request: Request) {
+  const { searchParams } = new URL(request.url);
+
+  if (!validate(searchParams.get("sessionId")))
+    return NextResponse.json(
+      { message: "Invalid session" },
+      { status: HttpStatusCode.Unauthorized }
+    );
+
+  const index = searchParams.get("index");
+
+  if (!index)
+    return NextResponse.json(
+      {
+        message: "The index is invalid",
+      },
+      {
+        status: HttpStatusCode.BadRequest,
+      }
+    );
+
+  return NextResponse.json({
+    message: "ok",
+  });
+}

src/app/api/servers/route.ts

@@ -4,11 +4,19 @@ import Server, { ServerAPI } from "@/types/server";
 import { HttpStatusCode } from "axios";
 import { validate } from "../auth/route";
 
-const servers = new Data<ServerAPI[]>("sentryx/servers.json", []);
+export const servers = new Data<ServerAPI[]>("sentryx/servers.json", []);
 
 export async function GET(request: Request) {
   const { searchParams } = new URL(request.url);
   const query = searchParams.get("s");
+  const sessionId = searchParams.get("sessionId");
+
+  if (!validate(sessionId))
+    return NextResponse.json(
+      { message: "Invalid session" },
+      { status: HttpStatusCode.Unauthorized }
+    );
+
   const currentServers = servers.data.map(
     (s) =>
       ({

src/app/dashboard/page.tsx

@@ -192,23 +192,7 @@ export default function Dashboard() {
 
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
         {searchedServers.map((s, i) => (
-          <ServerComponent
+          <ServerComponent server={s} key={i} index={i} session={session} />
-            server={s}
-            key={i}
-            onDelete={() =>
-              session
-                ?.removeServer(i)
-                .then(() => {
-                  toast.info("Server successfully deleted");
-                })
-                .catch((e) => {
-                  console.log(e.response.data.message);
-                  toast.error(
-                    `Error deleting server: ` + e.response.data.message
-                  );
-                })
-            }
-          />
         ))}
       </div>
     </div>

src/app/dashboard/server.tsx

@@ -23,6 +23,7 @@ import {
 } from "@/components/ui/context-menu";
 import { Label } from "@/components/ui/label";
 import { Progress } from "@/components/ui/progress";
+import Session from "@/lib/session";
 import Server from "@/types/server";
 import {
   Cpu,
@@ -35,7 +36,9 @@ import {
   Trash,
   Wifi,
 } from "lucide-react";
+import { redirect } from "next/navigation";
 import { useState } from "react";
+import { toast } from "sonner";
 
 export function UsageBar({
   value,
@@ -63,10 +66,12 @@ export function UsageBar({
 
 export default function ServerComponent({
   server,
-  onDelete,
+  index,
+  session,
 }: {
   server: Server;
-  onDelete: () => void;
+  index: number;
+  session: Session | null;
 }) {
   const [deleteAlert, setDeleteAlert] = useState(false);
 
@@ -74,7 +79,12 @@ export default function ServerComponent({
     <>
       <ContextMenu>
         <ContextMenuTrigger>
-          <Card className="w-full transition-transform duration-500 hover:scale-102 hover:cursor-pointer !select-none">
+          <Card
+            className="w-full transition-transform duration-500 hover:scale-102 hover:cursor-pointer !select-none"
+            onClick={() => {
+              redirect(`/servers/${index}`);
+            }}
+          >
             <CardHeader>
               <div className="flex items-center gap-2">
                 <div className="bg-muted text-muted-foreground p-1.5 rounded-md">
@@ -154,7 +164,18 @@ export default function ServerComponent({
             <AlertDialogCancel>Cancel</AlertDialogCancel>
             <AlertDialogAction
               className="text-destructive-foreground bg-destructive"
-              onClick={onDelete}
+              onClick={() =>
+                session
+                  ?.removeServer(index)
+                  .then(() => {
+                    toast.info("Server successfully deleted");
+                  })
+                  .catch((e) => {
+                    toast.error(
+                      `Error deleting server: ` + e.response.data.message
+                    );
+                  })
+              }
             >
               Delete
             </AlertDialogAction>

src/app/servers/[server]/page.tsx

@@ -0,0 +1,17 @@
+"use client";
+import useSession from "@/hooks/useSession";
+import Server from "@/types/server";
+import { useEffect, useState } from "react";
+
+export default function ServerPage() {
+  const session = useSession();
+  const [server, setServer] = useState<Server | undefined>();
+
+  useEffect(() => {
+    session?.getServerIndex(0).then((s) => {
+      setServer(s.data);
+    });
+  }, [session]);
+
+  return <h1>{JSON.stringify(server)}</h1>;
+}

src/app/servers/page.tsx

@@ -60,23 +60,7 @@ export default function Servers() {
 
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
             {searchedServers.map((s, i) => (
-              <ServerComponent
+              <ServerComponent server={s} key={i} index={i} session={session} />
-                server={s}
-                key={i}
-                onDelete={() =>
-                  session
-                    ?.removeServer(i)
-                    .then(() => {
-                      toast.info("Server successfully deleted");
-                    })
-                    .catch((e) => {
-                      console.log(e.response.data.message);
-                      toast.error(
-                        `Error deleting server: ` + e.response.data.message
-                      );
-                    })
-                }
-              />
             ))}
           </div>
         </TabsContent>

src/lib/session.ts

@@ -31,4 +31,10 @@ export default class Session {
       params: { index, sessionId: this.id },
     });
   }
+
+  public async getServerIndex(index: number) {
+    return await axios.get("/api/server", {
+      params: { index, sessionId: this.id },
+    });
+  }
 }