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 { CardContent } from "@/components/ui/card";
import { import {
DialogDescription, DialogDescription,
@ -14,7 +15,9 @@ interface Props {
} }
export const AddManager = ({ serverId }: 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 ( return (
<> <>
@ -23,6 +26,7 @@ export const AddManager = ({ serverId }: Props) => {
<DialogTitle>Add a new manager</DialogTitle> <DialogTitle>Add a new manager</DialogTitle>
<DialogDescription>Add a new manager</DialogDescription> <DialogDescription>Add a new manager</DialogDescription>
</DialogHeader> </DialogHeader>
{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
{isLoading ? ( {isLoading ? (
<Loader2 className="w-full animate-spin text-muted-foreground" /> <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 { CardContent } from "@/components/ui/card";
import { import {
DialogDescription, DialogDescription,
@ -14,7 +15,9 @@ interface Props {
} }
export const AddWorker = ({ serverId }: 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 ( return (
<CardContent className="sm:max-w-4xl flex flex-col gap-4 px-0"> <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> <DialogTitle>Add a new worker</DialogTitle>
<DialogDescription>Add a new worker</DialogDescription> <DialogDescription>Add a new worker</DialogDescription>
</DialogHeader> </DialogHeader>
{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
{isLoading ? ( {isLoading ? (
<Loader2 className="w-full animate-spin text-muted-foreground" /> <Loader2 className="w-full animate-spin text-muted-foreground" />
) : ( ) : (