feat: enhance ui components and response handling

next.config.ts

@@ -48,6 +48,7 @@ const nextConfig: NextConfig = {
 			},
 		];
 	},
+	poweredByHeader: false,
 	reactStrictMode: true,
 	output: "standalone",
 };

src/app/page.tsx

@@ -1,150 +1,132 @@
 "use client";
 
-import { useState, useEffect } from "react";
+import { useState, useEffect, useCallback } from "react";
 import TableWrapper from "@/components/table-wrapper";
 import Header from "@/components/header";
 import TotalDisplay from "@/components/total-display";
 import { toast } from "sonner";
 import { type Budgetable, areRowsEqual } from "@/lib/utils";
 
+const DEFAULT_NEW_ROW: Budgetable = {
+  id: "",
+  title: "",
+  price: 0,
+  link: "",
+  note: "",
+  status: "Unpaid",
+};
+
+const ENDPOINT = "/pocketbase";
+
 export default function App() {
-	const [data, setData] = useState<Budgetable[]>(() => []);
-	const [isEditing, setIsEditing] = useState(false);
-	const [loading, setLoading] = useState(false);
-	const [newRow, setNewRow] = useState<Budgetable>({
-		id: "",
-		title: "",
-		price: 0,
-		link: "",
-		note: "",
-		status: "Unpaid",
-	});
-	const [recentlyUpdatedRowId, setRecentlyUpdatedRowId] = useState<
-		string | null
-	>(null);
+  const [data, setData] = useState<Budgetable[]>([]);
+  const [isEditing, setIsEditing] = useState(false);
+  const [newRow, setNewRow] = useState<Budgetable>(DEFAULT_NEW_ROW);
+  const [recentlyUpdatedRowId, setRecentlyUpdatedRowId] = useState<string | null>(null);
 
-	useEffect(() => {
-		async function fetchData() {
-			setLoading(true);
-			try {
-				const res = await fetch("/pocketbase");
-				if (!res.ok) throw new Error("Failed to fetch data");
-				const records: Budgetable[] = await res.json();
-				setData(records);
-			} catch (err) {
-				toast.error("Error fetching data. Please try again later.");
-				console.error("Error fetching data:", err);
-			} finally {
-				setLoading(false);
-			}
-		}
+  const fetchData = useCallback(async () => {
+    try {
+      const res = await fetch(ENDPOINT);
+      if (!res.ok) throw new Error("Failed to fetch data");
+      const records: Budgetable[] = await res.json();
+      setData(records);
+    } catch (err) {
+      toast.error("Error fetching data. Please try again later.");
+      console.error(err);
+    }
+  }, []);
 
-		fetchData();
-	}, []);
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
 
-	const handleSave = async (
-		updatedRow: Budgetable,
-		originalRow: Budgetable,
-	) => {
-		if (areRowsEqual(updatedRow, originalRow)) {
-			return;
-		}
+  const handleSave = useCallback(async (updatedRow: Budgetable, originalRow: Budgetable) => {
+    if (areRowsEqual(updatedRow, originalRow)) return;
 
-		try {
-			const res = await fetch(`/pocketbase/${updatedRow.id}`, {
-				method: "PUT",
-				headers: { "Content-Type": "application/json" },
-				body: JSON.stringify(updatedRow),
-			});
-			if (!res.ok) throw new Error("Failed to update row");
-			const updatedData = await res.json();
-			setData((prev) =>
-				prev.map((row) => (row.id === updatedRow.id ? updatedData : row)),
-			);
+    try {
+      const res = await fetch(`${ENDPOINT}/${updatedRow.id}`, {
+        method: "PUT",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(updatedRow),
+      });
+      if (!res.ok) throw new Error("Failed to update row");
 
-			setRecentlyUpdatedRowId(updatedRow.id);
-			setTimeout(() => setRecentlyUpdatedRowId(null), 500);
-			toast.success("Row updated successfully!");
-		} catch (err) {
-			toast.error("Error updating row. Please try again.");
-			console.error("Error updating row:", err);
-		}
-	};
+      const updatedData = await res.json();
+      setData((prev) => prev.map((row) => (row.id === updatedRow.id ? updatedData : row)));
 
-	const handleAddRow = async () => {
-		if (!newRow.title || newRow.price <= 0) {
-			toast("Title and price are required.");
-			return;
-		}
+      setRecentlyUpdatedRowId(updatedRow.id);
+      setTimeout(() => setRecentlyUpdatedRowId(null), 500);
+      toast.success("Row updated successfully!");
+    } catch (err) {
+      toast.error("Error updating row. Please try again.");
+      console.error(err);
+    }
+  }, []);
 
-		try {
-			const res = await fetch("/pocketbase", {
-				method: "POST",
-				headers: { "Content-Type": "application/json" },
-				body: JSON.stringify(newRow),
-			});
-			if (!res.ok) throw new Error("Failed to add row");
-			const record: Budgetable = await res.json();
-			setData((prev) => [...prev, record]);
-			setNewRow({
-				id: "",
-				title: "",
-				price: 0,
-				link: "",
-				note: "",
-				status: "Unpaid",
-			});
-			toast.success("Row added successfully!");
-		} catch (err) {
-			toast.error("Error adding row. Please try again.");
-			console.error("Error adding row:", err);
-		}
-	};
+  const handleAddRow = useCallback(async () => {
+    if (!newRow.title || newRow.price <= 0) {
+      toast.error("Title and price are required.");
+      return;
+    }
 
-	const handleDeleteRow = async (id: string) => {
-		try {
-			const res = await fetch(`/pocketbase/${id}`, { method: "DELETE" });
-			if (!res.ok) throw new Error("Failed to delete row");
-			setData((prev) => prev.filter((row) => row.id !== id));
-			toast.success("Row deleted successfully!");
-		} catch (err) {
-			toast.error("Error deleting row. Please try again.");
-			console.error("Error deleting row:", err);
-		}
-	};
+    try {
+      const res = await fetch(ENDPOINT, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(newRow),
+      });
+      if (!res.ok) throw new Error("Failed to add row");
 
-	const toggleStatus = async (row: Budgetable) => {
-		const updatedStatus: "Paid" | "Unpaid" =
-			row.status === "Paid" ? "Unpaid" : "Paid";
-		const updatedRow: Budgetable = { ...row, status: updatedStatus };
-		await handleSave(updatedRow, row);
-		setData((prev) =>
-			prev.map((item) => (item.id === row.id ? updatedRow : item)),
-		);
-	};
+      const record: Budgetable = await res.json();
+      setData((prev) => [...prev, record]);
+      setNewRow(DEFAULT_NEW_ROW);
+      toast.success("Row added successfully!");
+    } catch (err) {
+      toast.error("Error adding row. Please try again.");
+      console.error(err);
+    }
+  }, [newRow]);
 
-	const total = data.reduce(
-		(sum, item) => sum + (item.status === "Unpaid" ? item.price : 0),
-		0,
-	);
+  const handleDeleteRow = useCallback(async (id: string) => {
+    try {
+      const res = await fetch(`${ENDPOINT}/${id}`, { method: "DELETE" });
+      if (!res.ok) throw new Error("Failed to delete row");
 
-	return (
-		<main className="container mx-auto p-4 max-w-5xl">
-			{loading}
-			<Header isEditing={isEditing} setIsEditing={setIsEditing} />
-			<TotalDisplay total={total} />
-			<TableWrapper
-				data={data}
-				isEditing={isEditing}
-				setData={setData}
-				newRow={newRow}
-				setNewRow={setNewRow}
-				recentlyUpdatedRowId={recentlyUpdatedRowId}
-				handleSave={handleSave}
-				handleAddRow={handleAddRow}
-				handleDeleteRow={handleDeleteRow}
-				toggleStatus={toggleStatus}
-			/>
-		</main>
-	);
+      setData((prev) => prev.filter((row) => row.id !== id));
+      toast.success("Row deleted successfully!");
+    } catch (err) {
+      toast.error("Error deleting row. Please try again.");
+      console.error(err);
+    }
+  }, []);
+
+  const toggleStatus = useCallback(async (row: Budgetable) => {
+    const updatedStatus = row.status === "Paid" ? "Unpaid" : "Paid";
+    const updatedRow: Budgetable = { ...row, status: updatedStatus as "Paid" | "Unpaid" };
+    await handleSave(updatedRow, row);
+  }, [handleSave]);
+
+  const total = data.reduce(
+    (sum, item) => sum + (item.status === "Unpaid" ? item.price : 0),
+    0,
+  );
+
+  return (
+    <main className="container mx-auto p-4 max-w-7xl">
+      <Header isEditing={isEditing} setIsEditing={setIsEditing} />
+      <TotalDisplay total={total} />
+      <TableWrapper
+        data={data}
+        isEditing={isEditing}
+        setData={setData}
+        newRow={newRow}
+        setNewRow={setNewRow}
+        recentlyUpdatedRowId={recentlyUpdatedRowId}
+        handleSave={handleSave}
+        handleAddRow={handleAddRow}
+        handleDeleteRow={handleDeleteRow}
+        toggleStatus={toggleStatus}
+      />
+    </main>
+  );
 }

src/app/pocketbase/[id]/route.ts

@@ -1,161 +1,84 @@
 import pb from "@/lib/pocketbase";
+import { ResponseHelper } from "@/lib/helper";
+import { RESPONSE } from "@/lib/const";
+import { Budgetable } from "@/lib/utils";
 
+const { INTERNAL_SERVER_ERROR, MISSING_ID, FAILED_TO_DELETE_DATA, FAILED_TO_UPDATE_DATA, INVALID_DATA, SUCCESS, CREATED } = RESPONSE;
 const { EMAIL, PASSWORD, COLLECTION = "budgetable" } = process.env;
 
-async function authenticateSuperuser() {
-	if (!EMAIL || !PASSWORD) {
-		throw new Error("Environment variables EMAIL and PASSWORD must be set");
-	}
-	if (!pb.authStore.isValid) {
-		await pb.collection("_superusers").authWithPassword(EMAIL, PASSWORD);
-	}
+async function authenticateSuperuser(): Promise<void> {
+  if (!EMAIL || !PASSWORD) {
+    throw new Error("Environment variables EMAIL and PASSWORD must be set");
+  }
+  if (!pb.authStore.isValid) {
+    await pb.collection("_superusers").authWithPassword(EMAIL, PASSWORD);
+  }
 }
 
 export async function GET(
-	_req: Request,
-	context: { params: Promise<{ id: string }> },
-) {
-	try {
-		await authenticateSuperuser();
+  _req: Request,
+  context: { params: Promise<{ id: string }> }
+): Promise<Response> {
+  try {
+    await authenticateSuperuser();
 
-		const id = (await context.params)?.id;
-		if (!id) {
-			return Response.json(
-				{
-					error: {
-						message: "Missing ID in request",
-					},
-				},
-				{
-					status: 400,
-					headers: { "Content-Type": "application/json" },
-				},
-			);
-		}
+    const id = (await context.params)?.id;
+    if (!id) {
+      return ResponseHelper.error(MISSING_ID);
+    }
 
-		const record = await pb.collection(COLLECTION).getOne(id);
-		return Response.json(record, {
-			status: 200,
-			headers: { "Content-Type": "application/json" },
-		});
-	} catch (error) {
-		console.error("Error fetching data:", error);
-		return Response.json(
-			{
-				error: {
-					message: "Failed to fetch data",
-				},
-			},
-			{
-				status: 500,
-				headers: { "Content-Type": "application/json" },
-			},
-		);
-	}
+    const record: Budgetable = await pb.collection<Budgetable>(COLLECTION).getOne(id);
+    return ResponseHelper.success<Budgetable>(record, CREATED.STATUS);
+  } catch (error) {
+    console.error("Error fetching data:", error);
+    return ResponseHelper.error(INTERNAL_SERVER_ERROR, error);
+  }
 }
 
 export async function DELETE(
-	_req: Request,
-	context: { params: Promise<{ id: string }> },
-) {
-	try {
-		await authenticateSuperuser();
+  _req: Request,
+  context: { params: Promise<{ id: string }> }
+): Promise<Response> {
+  try {
+    await authenticateSuperuser();
 
-		const id = (await context.params)?.id;
-		if (!id) {
-			return Response.json(
-				{
-					error: {
-						message: "Missing ID in request",
-					},
-				},
-				{
-					status: 400,
-					headers: { "Content-Type": "application/json" },
-				},
-			);
-		}
+    const id = (await context.params)?.id;
+    if (!id) {
+      return ResponseHelper.error(MISSING_ID);
+    }
 
-		await pb.collection(COLLECTION).delete(id);
-		return Response.json(
-			{
-				success: true,
-			},
-			{
-				status: 200,
-				headers: { "Content-Type": "application/json" },
-			},
-		);
-	} catch (error) {
-		console.error("Error deleting data:", error);
-		return Response.json(
-			{
-				error: {
-					message: "Failed to delete data",
-				},
-			},
-			{
-				status: 500,
-				headers: { "Content-Type": "application/json" },
-			},
-		);
-	}
+    await pb.collection(COLLECTION).delete(id);
+    return ResponseHelper.success(SUCCESS.MESSAGE);
+  } catch (error) {
+    console.error("Error deleting data:", error);
+    return ResponseHelper.error(FAILED_TO_DELETE_DATA, error);
+  }
 }
 
 export async function PUT(
-	req: Request,
-	context: { params: Promise<{ id: string }> },
-) {
-	try {
-		await authenticateSuperuser();
+  req: Request,
+  context: { params: Promise<{ id: string }> }
+): Promise<Response> {
+  try {
+    await authenticateSuperuser();
 
-		const id = (await context.params)?.id;
-		if (!id) {
-			return Response.json(
-				{
-					error: {
-						message: "Missing ID in request",
-					},
-				},
-				{
-					status: 400,
-					headers: { "Content-Type": "application/json" },
-				},
-			);
-		}
+    const id = (await context.params)?.id;
+    if (!id) {
+      return ResponseHelper.error(MISSING_ID);
+    }
 
-		const body = await req.json();
-		if (!body.title || typeof body.price !== "number") {
-			return Response.json(
-				{
-					error: {
-						message: "Invalid data provided",
-					},
-				},
-				{
-					status: 400,
-					headers: { "Content-Type": "application/json" },
-				},
-			);
-		}
+    const body: Partial<Budgetable> = await req.json();
+    if (!body.title || typeof body.price !== "number") {
+      return ResponseHelper.error(INVALID_DATA);
+    }
 
-		const updatedRecord = await pb.collection(COLLECTION).update(id, body);
-		return Response.json(updatedRecord, {
-			status: 200,
-			headers: { "Content-Type": "application/json" },
-		});
-	} catch (error) {
-		console.error("Error updating data:", error);
-		return Response.json(
-			{
-				error: {
-					message: "Failed to update data",
-				},
-			},
-			{
-				status: 500,
-				headers: { "Content-Type": "application/json" },
-			},
-		);
-	}
+    const updatedRecord: Budgetable = await pb
+      .collection<Budgetable>(COLLECTION)
+      .update(id, body);
+
+    return ResponseHelper.success<Budgetable>(updatedRecord);
+  } catch (error) {
+    console.error("Error updating data:", error);
+    return ResponseHelper.error(FAILED_TO_UPDATE_DATA, error);
+  }
 }

src/app/pocketbase/route.ts

@@ -1,61 +1,48 @@
 import pb from "@/lib/pocketbase";
+import { ResponseHelper } from "@/lib/helper";
+import { RESPONSE } from "@/lib/const";
+import { Budgetable } from "@/lib/utils";
 
+const { INTERNAL_SERVER_ERROR } = RESPONSE;
 const { EMAIL, PASSWORD, COLLECTION = "budgetable" } = process.env;
 
-async function authenticateSuperuser() {
-	if (!EMAIL || !PASSWORD) {
-		throw new Error("Environment variables EMAIL and PASSWORD must be set");
-	}
-	if (!pb.authStore.isValid) {
-		await pb.collection("_superusers").authWithPassword(EMAIL, PASSWORD);
-	}
+async function authenticateSuperuser(): Promise<void> {
+  if (!EMAIL || !PASSWORD) {
+    throw new Error("Environment variables EMAIL and PASSWORD must be set");
+  }
+  if (!pb.authStore.isValid) {
+    await pb.collection("_superusers").authWithPassword(EMAIL, PASSWORD);
+  }
 }
 
-export async function GET() {
-	try {
-		await authenticateSuperuser();
-		const records = await pb.collection(COLLECTION).getFullList();
-		return Response.json(records, {
-			status: 200,
-			headers: { "Content-Type": "application/json" },
-		});
-	} catch (error) {
-		console.error("Error fetching data:", error);
-		return Response.json(
-			{
-				error: {
-					message: "Failed to fetch data",
-				},
-			},
-			{
-				status: 500,
-				headers: { "Content-Type": "application/json" },
-			},
-		);
-	}
+export async function GET(): Promise<Response> {
+  try {
+    await authenticateSuperuser();
+
+    const records: Budgetable[] = await pb
+      .collection<Budgetable>(COLLECTION)
+      .getFullList();
+
+    return ResponseHelper.success<Budgetable[]>(records);
+  } catch (error) {
+    console.error("Error fetching data:", error);
+    return ResponseHelper.error(INTERNAL_SERVER_ERROR, error);
+  }
 }
 
-export async function POST(req: Request) {
-	try {
-		await authenticateSuperuser();
-		const data = await req.json();
-		const record = await pb.collection(COLLECTION).create(data);
-		return Response.json(record, {
-			status: 201,
-			headers: { "Content-Type": "application/json" },
-		});
-	} catch (error) {
-		console.error("Error adding data:", error);
-		return Response.json(
-			{
-				error: {
-					message: "Failed to add data",
-				},
-			},
-			{
-				status: 500,
-				headers: { "Content-Type": "application/json" },
-			},
-		);
-	}
+export async function POST(req: Request): Promise<Response> {
+  try {
+    await authenticateSuperuser();
+
+    const data: Omit<Budgetable, "id"> = await req.json();
+
+    const record: Budgetable = await pb
+      .collection<Budgetable>(COLLECTION)
+      .create(data);
+
+    return ResponseHelper.success<Budgetable>(record);
+  } catch (error) {
+    console.error("Error adding data:", error);
+    return ResponseHelper.error(INTERNAL_SERVER_ERROR, error);
+  }
 }

src/components/header.tsx

@@ -8,7 +8,7 @@ interface AppHeaderProps {
 
 const Header = ({ isEditing, setIsEditing }: AppHeaderProps) => (
 	<div className="flex justify-between items-center mb-6">
-		<h1 className="text-3xl font-bold">
+		<h1 className="text-4xl font-bold">
 			<Link
 				href="/"
 				className="text-blue-500 hover:text-blue-600 transition-colors"
@@ -17,8 +17,8 @@ const Header = ({ isEditing, setIsEditing }: AppHeaderProps) => (
 				Budgetable
 			</Link>
 		</h1>
-		<Button variant="ghost" onClick={() => setIsEditing(!isEditing)}>
-			{isEditing ? "Lock" : "Unlock"} Editing
+		<Button variant="ghost" onClick={() => setIsEditing(!isEditing)} size="lg">
+			<span className='text-lg'>{isEditing ? "Lock" : "Unlock"} Editing</span>
 		</Button>
 	</div>
 );

src/components/status-badge.tsx

@@ -8,7 +8,7 @@ interface StatusBadgeProps {
 const StatusBadge = ({ status, toggleStatus }: StatusBadgeProps) => (
 	<Badge
 		variant={status === "Paid" ? "paid" : "unpaid"}
-		className="cursor-pointer"
+		className="cursor-pointer text-[16px]"
 		onClick={toggleStatus}
 	>
 		{status}

src/components/table-row.tsx

@@ -84,7 +84,7 @@ const TRow = ({
 						onBlur={() => handleSave(row, originalRow)}
 					/>
 				) : (
-					<span>{row.price.toLocaleString()} HUF</span>
+					<span>{row.price.toLocaleString()}</span>
 				)}
 			</TableCell>
 			<TableCell>

src/components/table-wrapper.tsx

@@ -37,7 +37,7 @@ const TWrapper = ({
 	handleDeleteRow,
 	toggleStatus,
 }: TWrapperProps) => (
-	<Table>
+	<Table className="text-lg">
 		<TableHeader>
 			<TableRow>
 				<TableHead>Title</TableHead>

src/components/total-display.tsx

@@ -5,7 +5,7 @@ interface TotalDisplayProps {
 }
 
 const TotalDisplay = ({ total }: TotalDisplayProps) => (
-	<div className="mx-2 text-left font-bold text-lg">
+	<div className="mx-2 text-left font-bold text-2xl">
 		Total: <NumberFlow value={total} />
 	</div>
 );

src/lib/const.ts

@@ -0,0 +1,29 @@
+type ResponseConstant = {
+	STATUS: number;
+	MESSAGE: string;
+  };
+
+  type ResponseMap = {
+	[key: string]: ResponseConstant;
+  };
+
+  export enum HttpStatus {
+	OK = 200,
+	CREATED = 201,
+	BAD_REQUEST = 400,
+	INTERNAL_SERVER_ERROR = 500,
+  }
+
+  function createResponse(status: number, message: string): ResponseConstant {
+	return { STATUS: status, MESSAGE: message };
+  }
+
+  export const RESPONSE: ResponseMap = {
+	INTERNAL_SERVER_ERROR: createResponse(HttpStatus.INTERNAL_SERVER_ERROR, "Internal server error."),
+	MISSING_ID: createResponse(HttpStatus.BAD_REQUEST, "Missing ID in request."),
+	FAILED_TO_DELETE_DATA: createResponse(HttpStatus.INTERNAL_SERVER_ERROR, "Failed to delete data."),
+	FAILED_TO_UPDATE_DATA: createResponse(HttpStatus.INTERNAL_SERVER_ERROR, "Failed to update data."),
+	INVALID_DATA: createResponse(HttpStatus.BAD_REQUEST, "Invalid data provided."),
+	SUCCESS: createResponse(HttpStatus.OK, "Operation completed successfully."),
+	CREATED: createResponse(HttpStatus.CREATED, "Resource created successfully."),
+  };

src/lib/helper.ts

@@ -0,0 +1,46 @@
+import { RESPONSE } from "@/lib/const";
+
+interface ErrorResponse {
+  error: {
+    message: string;
+    details?: unknown;
+  };
+}
+
+type SuccessResponse<T> = T;
+
+type ResponseData<T> = SuccessResponse<T> | ErrorResponse;
+
+interface ResponseOptions {
+  status?: number;
+}
+
+export class ResponseHelper<T = unknown> {
+  private data: ResponseData<T>;
+  private status: number;
+
+  constructor(data: ResponseData<T>, options: ResponseOptions = {}) {
+    this.data = data;
+    this.status = options.status || 200;
+  }
+
+  static success<T>(data: T, status = RESPONSE.SUCCESS.STATUS): Response {
+    return new ResponseHelper<T>(data, { status }).toResponse();
+  }
+
+  static error(
+    constant: (typeof RESPONSE)[keyof typeof RESPONSE],
+    details?: unknown
+  ): Response {
+    return new ResponseHelper<ErrorResponse>(
+      { error: { message: constant.MESSAGE, details } },
+      { status: constant.STATUS }
+    ).toResponse();
+  }
+
+  toResponse(): Response {
+    return Response.json(this.data, {
+      status: this.status,
+    });
+  }
+}