Added RPC wrapper function

apps/backend/src/index.ts

@@ -13,6 +13,7 @@ import rolesRoute from "./routes/roles/route";
 import { logger } from "hono/logger";
 import DashboardError from "./errors/DashboardError";
 import HonoEnv from "./types/HonoEnv";
+import devRoutes from "./routes/dev/route";
 
 configDotenv();
 
@@ -75,6 +76,7 @@ const routes = app
 	.route("/permissions", permissionRoutes)
 	.route("/dashboard", dashboardRoutes)
 	.route("/roles", rolesRoute)
+	.route("/dev", devRoutes)
 	.onError((err, c) => {
 		if (err instanceof DashboardError) {
 			return c.json(

apps/backend/src/routes/dev/route.ts

@@ -0,0 +1,16 @@
+import { Hono } from "hono";
+import DashboardError from "../../errors/DashboardError";
+
+const devRoutes = new Hono().get("/error", async () => {
+	throw new DashboardError({
+		errorCode: "TEST_ERROR",
+		message: "Test error",
+		severity: "LOW",
+		statusCode: 400,
+		formErrors: {
+			someField: "error",
+		},
+	});
+});
+
+export default devRoutes;

apps/frontend/src/modules/usersManagement/modals/UserDeleteModal.tsx

@@ -4,6 +4,7 @@ import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { getRouteApi, useSearch } from "@tanstack/react-router";
 import { deleteUser } from "../queries/userQueries";
 import { notifications } from "@mantine/notifications";
+import fetchRPC from "@/utils/fetchRPC";
 
 const routeApi = getRouteApi("/_dashboardLayout/users/");
 
@@ -21,19 +22,14 @@ export default function UserDeleteModal() {
 		queryKey: ["users", userId],
 		queryFn: async () => {
 			if (!userId) return null;
-			const res = await client.users[":id"].$get({
-				param: {
-					id: userId,
-				},
-				query: {},
-			});
-
-			if (res.ok) {
-				console.log("ok");
-				return await res.json();
-			}
-			console.log("not ok");
-			throw new Error(await res.text());
+			return await fetchRPC(
+				client.users[":id"].$get({
+					param: {
+						id: userId,
+					},
+					query: {},
+				})
+			);
 		},
 	});
 

apps/frontend/src/modules/usersManagement/modals/UserFormModal.tsx

@@ -133,6 +133,7 @@ export default function UserFormModal() {
 		});
 
 		form.setErrors({});
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [userQuery.data]);
 
 	const handleSubmit = async (values: typeof form.values) => {

apps/frontend/src/modules/usersManagement/queries/userQueries.ts

@@ -1,4 +1,5 @@
 import client from "@/honoClient";
+import fetchRPC from "@/utils/fetchRPC";
 import { queryOptions } from "@tanstack/react-query";
 import { InferRequestType } from "hono";
 
@@ -8,31 +9,21 @@ export const userQueryOptions = queryOptions({
 });
 
 export const fetchUsers = async () => {
-	const res = await client.users.$get({
-		query: {},
-	});
-
-	if (res.ok) {
-		return await res.json();
-	}
-
-	//TODO: Handle error
-	throw new Error(res.statusText);
+	return await fetchRPC(
+		client.users.$get({
+			query: {},
+		})
+	);
 };
 
 export const createUser = async (
 	form: InferRequestType<typeof client.users.$post>["form"]
 ) => {
-	const res = await client.users.$post({
-		form,
-	});
-
-	if (res.ok) {
-		return await res.json();
-	}
-
-	//TODO: Handle error
-	throw Error(await res.text());
+	return await fetchRPC(
+		client.users.$post({
+			form,
+		})
+	);
 };
 
 export const updateUser = async (
@@ -40,34 +31,19 @@ export const updateUser = async (
 		id: string;
 	}
 ) => {
-	form;
-	const res = await client.users[":id"].$patch({
-		param: {
-			id: form.id,
-		},
-		form,
-	});
-
-	if (res.ok) {
-		return await res.json();
-	}
-
-	//TODO: Handle error
-	throw new Error(await res.text());
+	return await fetchRPC(
+		client.users[":id"].$patch({
+			param: {
+				id: form.id,
+			},
+			form,
+		})
+	);
 };
 
 export const deleteUser = async (id: string) => {
-	const res = await client.users[":id"].$delete({
-		param: {
-			id,
-		},
+	return await client.users[":id"].$delete({
+		param: { id },
 		form: {},
 	});
-
-	if (res.ok) {
-		return await res.json();
-	}
-
-	//TODO: Handle error
-	throw new Error(await res.text());
 };

apps/frontend/src/utils/fetchRPC.ts

@@ -0,0 +1,29 @@
+import { ClientResponse } from "hono/client";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type BlankRecordToNever<T> = T extends any
+	? T extends null
+		? null
+		: keyof T extends never
+			? never
+			: T
+	: never;
+
+async function fetchRPC<T>(
+	endpoint: Promise<ClientResponse<T>>
+): Promise<BlankRecordToNever<T>> {
+	const res = await endpoint;
+
+	if (res.ok) {
+		const data = await res.json();
+		return data;
+	}
+
+	//TODO: Add error reporting
+
+	const data = (await res.json()) as unknown as { message?: string };
+
+	throw new Error(data.message ?? "Something is gone wrong");
+}
+
+export default fetchRPC;