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,127 +1,110 @@
 "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";
 
-export default function App() {
+const DEFAULT_NEW_ROW: Budgetable = {
-	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);
 
-	useEffect(() => {
+const ENDPOINT = "/pocketbase";
-		async function fetchData() {
+
-			setLoading(true);
+export default function App() {
+  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);
+
+  const fetchData = useCallback(async () => {
     try {
-				const res = await fetch("/pocketbase");
+      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("Error fetching data:", err);
+      console.error(err);
-			} finally {
-				setLoading(false);
     }
-		}
-
-		fetchData();
   }, []);
 
-	const handleSave = async (
+  useEffect(() => {
-		updatedRow: Budgetable,
+    fetchData();
-		originalRow: Budgetable,
+  }, [fetchData]);
-	) => {
+
-		if (areRowsEqual(updatedRow, originalRow)) {
+  const handleSave = useCallback(async (updatedRow: Budgetable, originalRow: Budgetable) => {
-			return;
+    if (areRowsEqual(updatedRow, originalRow)) return;
-		}
 
     try {
-			const res = await fetch(`/pocketbase/${updatedRow.id}`, {
+      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");
+
       const updatedData = await res.json();
-			setData((prev) =>
+      setData((prev) => prev.map((row) => (row.id === updatedRow.id ? updatedData : row)));
-				prev.map((row) => (row.id === updatedRow.id ? updatedData : 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);
+      console.error(err);
     }
-	};
+  }, []);
 
-	const handleAddRow = async () => {
+  const handleAddRow = useCallback(async () => {
     if (!newRow.title || newRow.price <= 0) {
-			toast("Title and price are required.");
+      toast.error("Title and price are required.");
       return;
     }
 
     try {
-			const res = await fetch("/pocketbase", {
+      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 record: Budgetable = await res.json();
       setData((prev) => [...prev, record]);
-			setNewRow({
+      setNewRow(DEFAULT_NEW_ROW);
-				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);
+      console.error(err);
     }
-	};
+  }, [newRow]);
 
-	const handleDeleteRow = async (id: string) => {
+  const handleDeleteRow = useCallback(async (id: string) => {
     try {
-			const res = await fetch(`/pocketbase/${id}`, { method: "DELETE" });
+      const res = await fetch(`${ENDPOINT}/${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);
+      console.error(err);
     }
-	};
+  }, []);
 
-	const toggleStatus = async (row: Budgetable) => {
+  const toggleStatus = useCallback(async (row: Budgetable) => {
-		const updatedStatus: "Paid" | "Unpaid" =
+    const updatedStatus = row.status === "Paid" ? "Unpaid" : "Paid";
-			row.status === "Paid" ? "Unpaid" : "Paid";
+    const updatedRow: Budgetable = { ...row, status: updatedStatus as "Paid" | "Unpaid" };
-		const updatedRow: Budgetable = { ...row, status: updatedStatus };
     await handleSave(updatedRow, row);
-		setData((prev) =>
+  }, [handleSave]);
-			prev.map((item) => (item.id === row.id ? updatedRow : item)),
-		);
-	};
 
   const total = data.reduce(
     (sum, item) => sum + (item.status === "Unpaid" ? item.price : 0),
@@ -129,8 +112,7 @@ export default function App() {
   );
 
   return (
-		<main className="container mx-auto p-4 max-w-5xl">
+    <main className="container mx-auto p-4 max-w-7xl">
-			{loading}
       <Header isEditing={isEditing} setIsEditing={setIsEditing} />
       <TotalDisplay total={total} />
       <TableWrapper

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

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

src/app/pocketbase/route.ts

@@ -1,8 +1,12 @@
 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() {
+async function authenticateSuperuser(): Promise<void> {
   if (!EMAIL || !PASSWORD) {
     throw new Error("Environment variables EMAIL and PASSWORD must be set");
   }
@@ -11,51 +15,34 @@ async function authenticateSuperuser() {
   }
 }
 
-export async function GET() {
+export async function GET(): Promise<Response> {
   try {
     await authenticateSuperuser();
-		const records = await pb.collection(COLLECTION).getFullList();
+
-		return Response.json(records, {
+    const records: Budgetable[] = await pb
-			status: 200,
+      .collection<Budgetable>(COLLECTION)
-			headers: { "Content-Type": "application/json" },
+      .getFullList();
-		});
+
+    return ResponseHelper.success<Budgetable[]>(records);
   } catch (error) {
     console.error("Error fetching data:", error);
-		return Response.json(
+    return ResponseHelper.error(INTERNAL_SERVER_ERROR, error);
-			{
-				error: {
-					message: "Failed to fetch data",
-				},
-			},
-			{
-				status: 500,
-				headers: { "Content-Type": "application/json" },
-			},
-		);
   }
 }
 
-export async function POST(req: Request) {
+export async function POST(req: Request): Promise<Response> {
   try {
     await authenticateSuperuser();
-		const data = await req.json();
+
-		const record = await pb.collection(COLLECTION).create(data);
+    const data: Omit<Budgetable, "id"> = await req.json();
-		return Response.json(record, {
+
-			status: 201,
+    const record: Budgetable = await pb
-			headers: { "Content-Type": "application/json" },
+      .collection<Budgetable>(COLLECTION)
-		});
+      .create(data);
+
+    return ResponseHelper.success<Budgetable>(record);
   } catch (error) {
     console.error("Error adding data:", error);
-		return Response.json(
+    return ResponseHelper.error(INTERNAL_SERVER_ERROR, error);
-			{
-				error: {
-					message: "Failed to add data",
-				},
-			},
-			{
-				status: 500,
-				headers: { "Content-Type": "application/json" },
-			},
-		);
   }
 }

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)}>
+		<Button variant="ghost" onClick={() => setIsEditing(!isEditing)} size="lg">
-			{isEditing ? "Lock" : "Unlock"} Editing
+			<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,
+    });
+  }
+}