refactor: enhance error handling and add pagination to device queries

actions/payment.ts

@@ -1,7 +1,12 @@
 "use server";
 
 import { authOptions } from "@/app/auth";
-import type { ApiResponse, NewPayment, Payment } from "@/lib/backend-types";
+import type {
+	ApiError,
+	ApiResponse,
+	NewPayment,
+	Payment,
+} from "@/lib/backend-types";
 import type { User } from "@/lib/types/user";
 import { tryCatch } from "@/utils/tryCatch";
 import { getServerSession } from "next-auth";
@@ -25,9 +30,12 @@ export async function createPayment(data: NewPayment) {
 		},
 	);
 	if (!response.ok) {
-		const errorData = await response.json();
-		// Throw an error with the message from the API
-		throw new Error(errorData.message || "Something went wrong.");
+		const errorData = (await response.json()) as ApiError;
+		const errorMessage =
+			errorData.message || errorData.detail || "An error occurred.";
+		const error = new Error(errorMessage);
+		(error as ApiError & { details?: ApiError }).details = errorData; // Attach the errorData to the error object
+		throw error;
 	}
 	const payment = (await response.json()) as Payment;
 	revalidatePath("/devices");
@@ -47,18 +55,16 @@ export async function getPayment({ id }: { id: string }) {
 		},
 	);
 
-	if (response.status === 404) {
-		throw new Error("Payment not found");
-	}
-
 	if (!response.ok) {
-		const errorData = await response.json();
-		console.log(errorData);
-		// Throw an error with the message from the API
-		throw new Error(errorData.message || "Something went wrong.");
+		const errorData = (await response.json()) as ApiError;
+		const errorMessage =
+			errorData.message || errorData.detail || "An error occurred.";
+		const error = new Error(errorMessage);
+		(error as ApiError & { details?: ApiError }).details = errorData; // Attach the errorData to the error object
+		throw error;
 	}
-	const payment = (await response.json()) as Payment;
-	return payment;
+	const data = (await response.json()) as Payment;
+	return data;
 }
 
 export async function getPayments() {
@@ -73,10 +79,13 @@ export async function getPayments() {
 			},
 		},
 	);
-	console.log("response statys", response.status);
-	if (response.status === 401) {
-		// Redirect to the signin page if the user is unauthorized
-		throw new Error("Unauthorized; redirect to /auth/signin");
+	if (!response.ok) {
+		const errorData = (await response.json()) as ApiError;
+		const errorMessage =
+			errorData.message || errorData.detail || "An error occurred.";
+		const error = new Error(errorMessage);
+		(error as ApiError & { details?: ApiError }).details = errorData; // Attach the errorData to the error object
+		throw error;
 	}
 	const data = (await response.json()) as ApiResponse<Payment>;
 	return data;
@@ -94,11 +103,14 @@ export async function cancelPayment({ id }: { id: string }) {
 			},
 		},
 	);
-	if (response.status === 401) {
-		// Redirect to the signin page if the user is unauthorized
-		throw new Error("Unauthorized; redirect to /auth/signin");
+	if (!response.ok) {
+		const errorData = (await response.json()) as ApiError;
+		const errorMessage =
+			errorData.message || errorData.detail || "An error occurred.";
+		const error = new Error(errorMessage);
+		(error as ApiError & { details?: ApiError }).details = errorData; // Attach the errorData to the error object
+		throw error;
 	}
-	// Since the response is 204 No Content, there's no JSON to parse
 	return { message: "Payment successfully canceled." };
 }
 
@@ -132,9 +144,12 @@ export async function updatePayment({
 	);
 
 	if (!response.ok) {
-		const errorData = await response.json();
-		// Throw an error with the message from the API
-		throw new Error(errorData.message || "Something went wrong.");
+		const errorData = (await response.json()) as ApiError;
+		const errorMessage =
+			errorData.message || errorData.detail || "An error occurred.";
+		const error = new Error(errorMessage);
+		(error as ApiError & { details?: ApiError }).details = errorData; // Attach the errorData to the error object
+		throw error;
 	}
 	const payment = (await response.json()) as Payment;
 	return payment;
@@ -162,9 +177,12 @@ export async function updateWalletBalance({
 	);
 
 	if (!response.ok) {
-		const errorData = await response.json();
-		// Throw an error with the message from the API
-		throw new Error(errorData.message || "Something went wrong.");
+		const errorData = (await response.json()) as ApiError;
+		const errorMessage =
+			errorData.message || errorData.detail || "An error occurred.";
+		const error = new Error(errorMessage);
+		(error as ApiError & { details?: ApiError }).details = errorData; // Attach the errorData to the error object
+		throw error;
 	}
 	const message = (await response.json()) as {
 		message: "Wallet balance updated successfully.";

app/(dashboard)/payments/[paymentId]/page.tsx

@@ -1,10 +1,12 @@
 import { getPayment } from "@/actions/payment";
 import { authOptions } from "@/app/auth";
 import CancelPaymentButton from "@/components/billing/cancel-payment-button";
+import ClientErrorMessage from "@/components/client-error-message";
 import DevicesToPay from "@/components/devices-to-pay";
 import { cn } from "@/lib/utils";
 import { tryCatch } from "@/utils/tryCatch";
 import { getServerSession } from "next-auth";
+import { redirect } from "next/navigation";
 export default async function PaymentPage({
 	params,
 }: {
@@ -15,7 +17,8 @@ export default async function PaymentPage({
 	const paymentId = (await params).paymentId;
 	const [error, payment] = await tryCatch(getPayment({ id: paymentId }));
 	if (error) {
-		return <span>Error getting payment: {error.message}</span>;
+		if (error.message === "Invalid token.") redirect("/auth/signin");
+		return <ClientErrorMessage message={error.message} />;
 	}
 	return (
 		<div>

components/clickable-row.tsx

@@ -21,7 +21,7 @@ export default function ClickableRow({
 			className={cn(
 				(parentalControl === false && device.blocked) || device.is_active
 					? "cursor-not-allowed bg-accent-foreground/10 hover:bg-accent-foreground/10"
-					: "cursor-pointer hover:bg-muted",
+					: "cursor-pointer hover:bg-muted-foreground/10",
 			)}
 			onClick={() => {
 				if (device.blocked) return;
@@ -66,7 +66,7 @@ export default function ClickableRow({
 					)}
 					{device.has_a_pending_payment && (
 						<Link href={`/payments/${device.pending_payment_id}`}>
-							<span className="flex hover:underline items-center justify-center gap-2 text-muted-foreground text-yellow-600">
+							<span className="bg-muted rounded px-2 p-1 mt-2 flex hover:underline items-center justify-center gap-2 text-muted-foreground text-yellow-600">
 								Payment Pending <Hourglass size={14} />
 							</span>
 						</Link>

components/client-error-message.tsx

@@ -0,0 +1,22 @@
+import { Phone, TriangleAlert } from "lucide-react";
+import Link from "next/link";
+import { Button } from "./ui/button";
+
+export default function ClientErrorMessage({ message }: { message: string }) {
+	return (
+		<div className="error-bg dark:error-bg-dark rounded-lg p-4 h-full flex flex-col gap-4 items-center justify-center">
+			<div className="bg-white dark:bg-transparent p-6 rounded flex flex-col items-center justify-center gap-4">
+				<TriangleAlert color="red" />
+				<h6 className="text-red-500 text-sm font-semibold">{message}</h6>
+				<span className="text-muted-foreground">
+					Please contact the administrator to give you permissions.
+				</span>
+				<Link href="tel:9198026">
+					<Button>
+						<Phone /> 919-8026
+					</Button>
+				</Link>
+			</div>
+		</div>
+	);
+}

components/device-card.tsx

@@ -3,7 +3,7 @@ import { deviceCartAtom } from "@/lib/atoms";
 import type { Device } from "@/lib/backend-types";
 import { cn } from "@/lib/utils";
 import { useAtom } from "jotai";
-import { Hourglass } from "lucide-react";
+import { HandCoins, Hourglass } from "lucide-react";
 import Link from "next/link";
 import AddDevicesToCartButton from "./add-devices-to-cart-button";
 import BlockDeviceDialog from "./block-device-dialog";
@@ -39,7 +39,7 @@ export default function DeviceCard({
 					isChecked ? "bg-accent" : "bg-",
 					device.is_active
 						? "cursor-not-allowed bg-accent-foreground/10 hover:bg-accent-foreground/10"
-						: "cursor-pointer hover:bg-muted",
+						: "cursor-pointer hover:bg-muted-foreground/10",
 				)}
 			>
 				<div className="">
@@ -50,7 +50,7 @@ export default function DeviceCard({
 						>
 							{device.name}
 						</Link>
-						<Badge variant={"secondary"}>
+						<Badge variant={"outline"}>
 							<span className="font-medium">{device.mac}</span>
 						</Badge>
 					</div>
@@ -74,8 +74,9 @@ export default function DeviceCard({
 					)}
 					{device.has_a_pending_payment && (
 						<Link href={`/payments/${device.pending_payment_id}`}>
-							<span className="flex hover:underline items-center justify-center gap-2 text-muted-foreground text-yellow-600">
-								Payment Pending <Hourglass size={14} />
+							<span className="bg-muted rounded px-2 p-1 mt-2 flex hover:underline items-center justify-center gap-2 text-muted-foreground text-yellow-600">
+								Payment Pending{" "}
+								<HandCoins className="animate-pulse" size={14} />
 							</span>
 						</Link>
 					)}

components/devices-table.tsx

@@ -12,7 +12,9 @@ import {
 import { getDevices } from "@/queries/devices";
 import { tryCatch } from "@/utils/tryCatch";
 import { getServerSession } from "next-auth";
+import { redirect } from "next/navigation";
 import ClickableRow from "./clickable-row";
+import ClientErrorMessage from "./client-error-message";
 import DeviceCard from "./device-card";
 import Pagination from "./pagination";
 
@@ -30,15 +32,22 @@ export async function DevicesTable({
 	const session = await getServerSession(authOptions);
 	const isAdmin = session?.user?.is_superuser;
 	const query = (await searchParams)?.query || "";
+	const page = (await searchParams)?.page || 1;
 
-	const [error, devices] = await tryCatch(getDevices({ query: query }));
+	const limit = 10; // Items per page
+	const offset = (page - 1) * limit; // Calculate offset based on page
+
+	const [error, devices] = await tryCatch(
+		getDevices({ query: query, limit: limit, offset: offset }),
+	);
 	if (error) {
-		return <pre>{JSON.stringify(error, null, 2)}</pre>;
+		if (error.message === "Invalid token.") redirect("/auth/signin");
+		return <ClientErrorMessage message={error.message} />;
 	}
-	const { meta, data } = devices;
+	const { meta, data, links } = devices;
 	return (
 		<div>
-			{data.length === 0 ? (
+			{data?.length === 0 ? (
 				<div className="h-[calc(100svh-400px)] flex flex-col items-center justify-center my-4">
 					<h3>No devices yet.</h3>
 				</div>
@@ -55,7 +64,7 @@ export async function DevicesTable({
 								</TableRow>
 							</TableHeader>
 							<TableBody className="overflow-scroll">
-								{data.map((device) => (
+								{data?.map((device) => (
 									<ClickableRow
 										admin={isAdmin}
 										key={device.id}
@@ -67,27 +76,26 @@ export async function DevicesTable({
 							<TableFooter>
 								<TableRow>
 									<TableCell colSpan={2}>
-										{query.length > 0 && (
+										{query?.length > 0 && (
 											<p className="text-sm text-muted-foreground">
-												Showing {meta.total} locations for &quot;{query}
+												Showing {meta?.total} locations for &quot;{query}
 												&quot;
 											</p>
 										)}
 									</TableCell>
 									<TableCell className="text-muted-foreground">
-										{meta.total} devices
+										{meta?.total} devices
 									</TableCell>
 								</TableRow>
 							</TableFooter>
 						</Table>
 						<Pagination
-							totalPages={meta.total / meta.per_page}
-							currentPage={meta.current_page}
+							totalPages={meta?.last_page}
+							currentPage={meta?.current_page}
 						/>
-						<pre>{JSON.stringify(meta, null, 2)}</pre>
 					</div>
 					<div className="sm:hidden my-4">
-						{data.map((device) => (
+						{data?.map((device) => (
 							<DeviceCard
 								parentalControl={parentalControl}
 								key={device.id}

lib/backend-types.ts

@@ -47,10 +47,9 @@ export interface Device {
 	user: number;
 }
 
-export interface Api400Error {
-	data: {
-		message: string;
-	};
+export interface ApiError {
+	message?: string;
+	detail?: string;
 }
 
 export interface Payment {

queries/devices.ts

@@ -1,22 +1,23 @@
 "use server";
 
 import { authOptions } from "@/app/auth";
-import type { Api400Error, ApiResponse, Device } from "@/lib/backend-types";
-import { AxiosClient } from "@/utils/axios-client";
+import type { ApiError, ApiResponse, Device } from "@/lib/backend-types";
 import { checkSession } from "@/utils/session";
 import { getServerSession } from "next-auth";
 import { revalidatePath } from "next/cache";
 
 type GetDevicesProps = {
 	query?: string;
+	offset?: number;
+	limit?: number;
 	page?: number;
 	sortBy?: string;
 	status?: string;
 };
-export async function getDevices({ query }: GetDevicesProps) {
+export async function getDevices({ query, offset, limit }: GetDevicesProps) {
 	const session = await checkSession();
 	const response = await fetch(
-		`${process.env.SARLINK_API_BASE_URL}/api/devices/?name=${query}`,
+		`${process.env.SARLINK_API_BASE_URL}/api/devices/?name=${query}&offset=${offset}&limit=${limit}`,
 		{
 			method: "GET",
 			headers: {
@@ -25,16 +26,23 @@ export async function getDevices({ query }: GetDevicesProps) {
 			},
 		},
 	);
-	if (response.status === 401) {
-		throw new Error("Unauthorized; redirect to /auth/signin");
+
+	if (!response.ok) {
+		const errorData = (await response.json()) as ApiError;
+		const errorMessage =
+			errorData.message || errorData.detail || "An error occurred.";
+		const error = new Error(errorMessage);
+		(error as ApiError & { details?: ApiError }).details = errorData; // Attach the errorData to the error object
+		throw error;
 	}
+
 	const data = (await response.json()) as ApiResponse<Device>;
 	return data;
 }
 
 export async function getDevice({ deviceId }: { deviceId: string }) {
 	const session = await checkSession();
-	const respose = await fetch(
+	const response = await fetch(
 		`${process.env.SARLINK_API_BASE_URL}/api/devices/${deviceId}/`,
 		{
 			method: "GET",
@@ -44,7 +52,15 @@ export async function getDevice({ deviceId }: { deviceId: string }) {
 			},
 		},
 	);
-	const device = (await respose.json()) as Device;
+	if (!response.ok) {
+		const errorData = (await response.json()) as ApiError;
+		const errorMessage =
+			errorData.message || errorData.detail || "An error occurred.";
+		const error = new Error(errorMessage);
+		(error as ApiError & { details?: ApiError }).details = errorData; // Attach the errorData to the error object
+		throw error;
+	}
+	const device = (await response.json()) as Device;
 	return device;
 }
 
@@ -68,13 +84,17 @@ export async function addDevice({
 			body: JSON.stringify({
 				name: name,
 				mac: mac,
+				registered: true,
 			}),
 		},
 	);
 	if (!response.ok) {
-		const errorData = await response.json();
-		// Throw an error with the message from the API
-		throw new Error(errorData.message || "Something went wrong.");
+		const errorData = (await response.json()) as ApiError;
+		const errorMessage =
+			errorData.message || errorData.detail || "An error occurred.";
+		const error = new Error(errorMessage);
+		(error as ApiError & { details?: ApiError }).details = errorData; // Attach the errorData to the error object
+		throw error;
 	}
 	const data = (await response.json()) as SingleDevice;
 	revalidatePath("/devices");