feat(cluster): add error handling in AddManager and AddWorker components

- Integrated error handling in AddManager and AddWorker components to display error messages using AlertBlock when data fetching fails.
- Updated API query hooks to include error and isError states for improved user feedback during data operations.
This commit is contained in:
Mauricio Siu 2025-03-18 21:17:11 -06:00
parent 891dc840f5
commit 7123b9b109
2 changed files with 10 additions and 2 deletions

View File

@ -1,3 +1,4 @@
import { AlertBlock } from "@/components/shared/alert-block";
import { CardContent } from "@/components/ui/card";
import {
DialogDescription,
@ -14,7 +15,9 @@ interface Props {
}
export const AddManager = ({ serverId }: Props) => {
const { data, isLoading } = api.cluster.addManager.useQuery({ serverId });
const { data, isLoading, error, isError } = api.cluster.addManager.useQuery({
serverId,
});
return (
<>
@ -23,6 +26,7 @@ export const AddManager = ({ serverId }: Props) => {
<DialogTitle>Add a new manager</DialogTitle>
<DialogDescription>Add a new manager</DialogDescription>
</DialogHeader>
{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
{isLoading ? (
<Loader2 className="w-full animate-spin text-muted-foreground" />
) : (

View File

@ -1,3 +1,4 @@
import { AlertBlock } from "@/components/shared/alert-block";
import { CardContent } from "@/components/ui/card";
import {
DialogDescription,
@ -14,7 +15,9 @@ interface Props {
}
export const AddWorker = ({ serverId }: Props) => {
const { data, isLoading } = api.cluster.addWorker.useQuery({ serverId });
const { data, isLoading, error, isError } = api.cluster.addWorker.useQuery({
serverId,
});
return (
<CardContent className="sm:max-w-4xl flex flex-col gap-4 px-0">
@ -22,6 +25,7 @@ export const AddWorker = ({ serverId }: Props) => {
<DialogTitle>Add a new worker</DialogTitle>
<DialogDescription>Add a new worker</DialogDescription>
</DialogHeader>
{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
{isLoading ? (
<Loader2 className="w-full animate-spin text-muted-foreground" />
) : (