refactor: implement session checking utility, enhance device queries with session validation, and improve UI interactions for device management

2025-04-20 03:50:20 +00:00 · 2025-04-06 22:43:12 +05:00 · 2025-04-06 22:43:12 +05:00 · daab793592
commit daab793592
parent 9e2a2f430e
7 changed files with 256 additions and 192 deletions
--- a/actions/omada-actions.ts
+++ b/actions/omada-actions.ts
@ -123,11 +123,7 @@ export async function blockDevice({
 	if (!macAddress) {
 		throw new Error("macAddress is a required parameter");
 	}
-	// const device = await prisma.device.findFirst({
-	// 	where: {
-	// 		mac: macAddress,
-	// 	},
-	// });
+
 	try {
 		const baseUrl: string = process.env.OMADA_BASE_URL || "";
 		const url: string = `${baseUrl}/api/v2/sites/${process.env.OMADA_SITE_ID}/cmd/clients/${formatMacAddress(macAddress)}/${type}`;
--- a/app/(dashboard)/devices/[deviceId]/page.tsx
+++ b/app/(dashboard)/devices/[deviceId]/page.tsx
@ -1,3 +1,8 @@
+import BlockDeviceDialog from "@/components/block-device-dialog";
+import Search from "@/components/search";
+import { Badge } from "@/components/ui/badge";
+import { getDevice } from "@/queries/devices";
+import { tryCatch } from "@/utils/tryCatch";
 import React from "react";

 export default async function DeviceDetails({
@ -6,20 +11,46 @@ export default async function DeviceDetails({
 	params: Promise<{ deviceId: string }>;
 }) {
 	const deviceId = (await params)?.deviceId;
+	const [error, device] = await tryCatch(getDevice({ deviceId: deviceId }));
+	if (error) return <div>{error.message}</div>;
+	if (!device) return null;

-	return null;
 	return (
 		<div>
-			<div className="flex flex-col justify-between items-start text-gray-500 title-bg py-4 px-2 mb-4">
-				<h3 className="text-2xl font-bold">{device?.name}</h3>
-				<span>{device?.mac}</span>
+			<div className="flex items-center justify-between title-bg title-bg ring-2 ring-sarLinkOrange/50 rounded-lg p-2">
+				<div className="flex flex-col justify-between items-start">
+					<h3 className="text-2xl text-sarLinkOrange font-bold">
+						{device?.name}
+					</h3>
+					<Badge variant={"secondary"}>{device?.mac}</Badge>
+					<p className="text-muted-foreground text-sm mt-2">
+						Device active until{" "}
+						{new Date(device?.expiry_date || "").toLocaleDateString("en-US", {
+							month: "short",
+							day: "2-digit",
+							year: "numeric",
+						})}
+					</p>
+				</div>
+				<div className="flex items-center gap-2 flex-col">
+					{device?.expiry_date && new Date() < new Date(device.expiry_date) && (
+						<p className="text-base font-semibold font-mono w-full text-center px-2 p-1 rounded-md bg-green-500/10 text-green-900 dark:text-green-400">
+							ACTIVE
+						</p>
+					)}
+					<BlockDeviceDialog
+						device={device}
+						type={device.blocked ? "unblock" : "block"}
+					/>
+					<pre>{JSON.stringify(device.blocked, null, 2)}</pre>
+				</div>
 			</div>

 			<div
 				id="user-filters"
-				className=" pb-4 gap-4 flex sm:flex-row flex-col items-start justify-start"
+				className=" py-4 gap-4 flex sm:flex-row flex-col items-start justify-start"
 			>
-				{/* <Search /> */}
+				<Search />
 				{/* <Filter
        options={sortfilterOptions}
        defaultOption="asc"
--- a/components/add-devices-to-cart-button.tsx
+++ b/components/add-devices-to-cart-button.tsx
@ -1,25 +1,28 @@
-'use client'
-import { deviceCartAtom } from '@/lib/atoms'
-import type { Device } from '@prisma/client'
-import { useAtomValue, useSetAtom } from 'jotai'
-import React from 'react'
+"use client";
+import { deviceCartAtom } from "@/lib/atoms";
+import type { Device } from "@/lib/backend-types";
+import { useAtomValue, useSetAtom } from "jotai";
+import React from "react";

 export default function AddDevicesToCartButton({ device }: { device: Device }) {
-  const setDeviceCart = useSetAtom(deviceCartAtom)
-  const devices = useAtomValue(deviceCartAtom)
+	const setDeviceCart = useSetAtom(deviceCartAtom);
+	const devices = useAtomValue(deviceCartAtom);

-  const isChecked = devices.some((d) => d.id === device.id);
+	const isChecked = devices.some((d) => d.id === device.id);

-  return (
-    <input
-      type="checkbox"
-      className='peer accent-[#f49d1b] size-4'
-      checked={isChecked}
-      onChange={() => setDeviceCart((prev) =>
-        isChecked
-          ? prev.filter((d) => d.id !== device.id)
-          : [...prev, device]
-      )}
-    />
-  )
+	return (
+		<input
+			type="checkbox"
+			disabled={device.blocked || device.is_active}
+			className="peer accent-[#f49d1b] size-4"
+			checked={isChecked}
+			onChange={() =>
+				setDeviceCart((prev) =>
+					isChecked
+						? prev.filter((d) => d.id !== device.id)
+						: [...prev, device],
+				)
+			}
+		/>
+	);
 }
--- a/components/block-device-dialog.tsx
+++ b/components/block-device-dialog.tsx
@ -3,17 +3,17 @@
 import { blockDevice } from "@/actions/omada-actions";
 import { Button } from "@/components/ui/button";
 import {
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
+	Dialog,
+	DialogContent,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
 } from "@/components/ui/dialog";
 import { Label } from "@/components/ui/label";
+import type { Device } from "@/lib/backend-types";
 import { cn } from "@/lib/utils";
 import { zodResolver } from "@hookform/resolvers/zod";
-import type { Device } from "@prisma/client";
 import { OctagonX } from "lucide-react";
 import { useState } from "react";
 import { type SubmitHandler, useForm } from "react-hook-form";
@ -23,160 +23,159 @@ import { TextShimmer } from "./ui/text-shimmer";
 import { Textarea } from "./ui/textarea";

 const validationSchema = z.object({
-  reasonForBlocking: z.string().min(5, { message: "Reason is required" }),
+	reasonForBlocking: z.string().min(5, { message: "Reason is required" }),
 });

 export default function BlockDeviceDialog({
-  device,
-  type,
-  admin,
+	device,
+	type,
+	admin,
 }: { device: Device; type: "block" | "unblock"; admin?: boolean }) {
-  const [disabled, setDisabled] = useState(false);
-  const [open, setOpen] = useState(false);
-  const {
-    register,
-    handleSubmit,
-    formState: { errors },
-  } = useForm<z.infer<typeof validationSchema>>({
-    resolver: zodResolver(validationSchema),
-  });
+	const [disabled, setDisabled] = useState(false);
+	const [open, setOpen] = useState(false);
+	const {
+		register,
+		handleSubmit,
+		formState: { errors },
+	} = useForm<z.infer<typeof validationSchema>>({
+		resolver: zodResolver(validationSchema),
+	});

-  const onSubmit: SubmitHandler<z.infer<typeof validationSchema>> = (data) => {
-    setDisabled(true);
-    console.log(data);
-    toast.promise(
-      blockDevice({
-        macAddress: device.mac,
-        type: type,
-        reason: data.reasonForBlocking,
-        blockedBy: "ADMIN",
-        // reason: data.reasonForBlocking,
-      }),
-      {
-        loading: "Blocking...",
-        success: () => {
-          setDisabled(false);
-          setOpen((prev) => !prev);
-          return "Blocked!";
-        },
-        error: (error) => {
-          setDisabled(false);
-          return error || "Something went wrong";
-        },
-      },
-    );
-    setDisabled(false);
-  };
+	const onSubmit: SubmitHandler<z.infer<typeof validationSchema>> = (data) => {
+		setDisabled(true);
+		console.log(data);
+		toast.promise(
+			blockDevice({
+				macAddress: device.mac,
+				type: type,
+				reason: data.reasonForBlocking,
+				blockedBy: "ADMIN",
+				// reason: data.reasonForBlocking,
+			}),
+			{
+				loading: "Blocking...",
+				success: () => {
+					setDisabled(false);
+					setOpen((prev) => !prev);
+					return "Blocked!";
+				},
+				error: (error) => {
+					setDisabled(false);
+					return error || "Something went wrong";
+				},
+			},
+		);
+		setDisabled(false);
+	};

-  return (
-    <div>
-      {device.blocked ? (
-        <Button
-          onClick={() => {
-            setDisabled(true);
-            toast.promise(
-              blockDevice({
-                macAddress: device.mac,
-                type: "unblock",
-                reason: "",
-              }),
-              {
-                loading: "unblockinig...",
-                success: () => {
-                  setDisabled(false);
-                  return "Unblocked!";
-                },
-                error: () => {
-                  setDisabled(false);
-                  return "Something went wrong";
-                },
-              },
-            );
-          }}
-        >
-
-          {disabled ? <TextShimmer>Unblocking</TextShimmer> : "Unblock"}
-        </Button>
-      ) : (
-        <>
-          {!admin ? (
-            <Button
-              variant={"destructive"}
-              onClick={() => {
-                setDisabled(true);
-                toast.promise(
-                  blockDevice({
-                    macAddress: device.mac,
-                    type: "block",
-                    reason: "",
-                    blockedBy: "PARENT",
-                  }),
-                  {
-                    loading: "blocking...",
-                    success: () => {
-                      setDisabled(false);
-                      return "blocked!";
-                    },
-                    error: () => {
-                      setDisabled(false);
-                      return "Something went wrong";
-                    },
-                  },
-                );
-              }}
-            >
-              <OctagonX />
-              {disabled ? <TextShimmer>Blocking</TextShimmer> : "Block"}
-            </Button>
-          ) : (
-            <Dialog open={open} onOpenChange={setOpen}>
-              <DialogTrigger asChild>
-                <Button disabled={disabled} variant="destructive">
-                  <OctagonX />
-                  Block
-                </Button>
-              </DialogTrigger>
-              <DialogContent className="sm:max-w-[425px]">
-                <DialogHeader>
-                  <DialogTitle>
-                    Please provide a reason for blocking this device.
-                  </DialogTitle>
-                </DialogHeader>
-                <form onSubmit={handleSubmit(onSubmit)}>
-                  <div className="grid gap-4 py-4">
-                    <div className="flex flex-col items-start gap-1">
-                      <Label htmlFor="reason" className="text-right">
-                        Reason for blocking
-                      </Label>
-                      <Textarea
-                        rows={10}
-                        {...register("reasonForBlocking")}
-                        id="reasonForBlocking"
-                        className={cn(
-                          "col-span-5",
-                          errors.reasonForBlocking && "ring-2 ring-red-500",
-                        )}
-                      />
-                      <span className="text-sm text-red-500">
-                        {errors.reasonForBlocking?.message}
-                      </span>
-                    </div>
-                  </div>
-                  <DialogFooter>
-                    <Button
-                      variant={"destructive"}
-                      disabled={disabled}
-                      type="submit"
-                    >
-                      Block
-                    </Button>
-                  </DialogFooter>
-                </form>
-              </DialogContent>
-            </Dialog>
-          )}
-        </>
-      )}
-    </div>
-  );
+	return (
+		<div>
+			{device.blocked ? (
+				<Button
+					onClick={() => {
+						setDisabled(true);
+						toast.promise(
+							blockDevice({
+								macAddress: device.mac,
+								type: "unblock",
+								reason: "",
+							}),
+							{
+								loading: "unblockinig...",
+								success: () => {
+									setDisabled(false);
+									return "Unblocked!";
+								},
+								error: () => {
+									setDisabled(false);
+									return "Something went wrong";
+								},
+							},
+						);
+					}}
+				>
+					{disabled ? <TextShimmer>Unblocking</TextShimmer> : "Unblock"}
+				</Button>
+			) : (
+				<>
+					{!admin ? (
+						<Button
+							variant={"destructive"}
+							onClick={() => {
+								setDisabled(true);
+								toast.promise(
+									blockDevice({
+										macAddress: device.mac,
+										type: "block",
+										reason: "",
+										blockedBy: "PARENT",
+									}),
+									{
+										loading: "blocking...",
+										success: () => {
+											setDisabled(false);
+											return "blocked!";
+										},
+										error: () => {
+											setDisabled(false);
+											return "Something went wrong";
+										},
+									},
+								);
+							}}
+						>
+							<OctagonX />
+							{disabled ? <TextShimmer>Blocking</TextShimmer> : "Block"}
+						</Button>
+					) : (
+						<Dialog open={open} onOpenChange={setOpen}>
+							<DialogTrigger asChild>
+								<Button disabled={disabled} variant="destructive">
+									<OctagonX />
+									Block
+								</Button>
+							</DialogTrigger>
+							<DialogContent className="sm:max-w-[425px]">
+								<DialogHeader>
+									<DialogTitle>
+										Please provide a reason for blocking this device.
+									</DialogTitle>
+								</DialogHeader>
+								<form onSubmit={handleSubmit(onSubmit)}>
+									<div className="grid gap-4 py-4">
+										<div className="flex flex-col items-start gap-1">
+											<Label htmlFor="reason" className="text-right">
+												Reason for blocking
+											</Label>
+											<Textarea
+												rows={10}
+												{...register("reasonForBlocking")}
+												id="reasonForBlocking"
+												className={cn(
+													"col-span-5",
+													errors.reasonForBlocking && "ring-2 ring-red-500",
+												)}
+											/>
+											<span className="text-sm text-red-500">
+												{errors.reasonForBlocking?.message}
+											</span>
+										</div>
+									</div>
+									<DialogFooter>
+										<Button
+											variant={"destructive"}
+											disabled={disabled}
+											type="submit"
+										>
+											Block
+										</Button>
+									</DialogFooter>
+								</form>
+							</DialogContent>
+						</Dialog>
+					)}
+				</>
+			)}
+		</div>
+	);
 }
--- a/components/clickable-row.tsx
+++ b/components/clickable-row.tsx
@ -19,9 +19,13 @@ export default function ClickableRow({
 		<TableRow
 			key={device.id}
 			className={cn(
-				parentalControl === false && "cursor-pointer hover:bg-muted",
+				(parentalControl === false && device.blocked) || device.is_active
+					? "cursor-not-allowed title-bg"
+					: "cursor-pointer hover:bg-muted",
 			)}
 			onClick={() => {
+				if (device.blocked) return;
+				if (device.is_active === true) return;
 				if (parentalControl === true) return;
 				setDeviceCart((prev) =>
 					devices.some((d) => d.id === device.id)
@ -33,7 +37,10 @@ export default function ClickableRow({
 			<TableCell>
 				<div className="flex flex-col items-start">
 					<Link
-						className="font-medium hover:underline"
+						className={cn(
+							"hover:underline font-semibold",
+							device.is_active ? "text-green-600" : "",
+						)}
 						href={`/devices/${device.id}`}
 						onClick={(e) => e.stopPropagation()}
 					>
@ -49,7 +56,7 @@ export default function ClickableRow({
 							})}
 						</span>
 					) : (
-						<p>Inactive</p>
+						<p className="text-muted-foreground">Device Inactive</p>
 					)}

 					{device.blocked_by === "ADMIN" && device.blocked && (
--- a/queries/devices.ts
+++ b/queries/devices.ts
@ -2,6 +2,7 @@

 import { authOptions } from "@/app/auth";
 import type { Api400Error, ApiResponse, Device } from "@/lib/backend-types";
+import { checkSession } from "@/utils/session";
 import { getServerSession } from "next-auth";
 import { revalidatePath } from "next/cache";

@ -12,7 +13,7 @@ type GetDevicesProps = {
 	status?: string;
 };
 export async function getDevices({ query }: GetDevicesProps) {
-	const session = await getServerSession(authOptions);
+	const session = await checkSession();
 	const respose = await fetch(
 		`${process.env.SARLINK_API_BASE_URL}/api/devices/?name=${query}`,
 		{
@ -27,6 +28,22 @@ export async function getDevices({ query }: GetDevicesProps) {
 	return data;
 }

+export async function getDevice({ deviceId }: { deviceId: string }) {
+	const session = await checkSession();
+	const respose = await fetch(
+		`${process.env.SARLINK_API_BASE_URL}/api/devices/${deviceId}/`,
+		{
+			method: "GET",
+			headers: {
+				"Content-Type": "application/json",
+				Authorization: `Token ${session?.apiToken}`,
+			},
+		},
+	);
+	const device = (await respose.json()) as Device;
+	return device;
+}
+
 export async function addDevice({
 	name,
 	mac,
--- a/utils/session.ts
+++ b/utils/session.ts
@ -0,0 +1,11 @@
+"use server";
+
+import { authOptions } from "@/app/auth";
+import { getServerSession } from "next-auth";
+import { redirect } from "next/navigation";
+
+export async function checkSession() {
+	const session = await getServerSession(authOptions);
+	if (!session) return redirect("/auth/signin");
+	return session;
+}