game-master/src/app/_components/lobby/delete-lobby-dialog.tsx

58 lines
1.6 KiB
TypeScript

"use client";
import React from "react";
import { Button } from "@/components/ui/button";
import {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
AlertDialogTrigger,
} from "@/components/ui/alert-dialog";
import { api } from "@/trpc/react";
import { toast } from "sonner";
import { useRouter } from "next/navigation";
function DeleteLobbyDialog({ lobbyId }: { lobbyId: string }) {
const [loading, setLoading] = React.useState(false);
const { mutateAsync } = api.lobby.delete.useMutation();
const router = useRouter();
const handleConfirm = async () => {
setLoading(true);
const result = await mutateAsync({ lobbyId });
if (result) {
router.push("/");
} else toast.error("Something went wrong");
setLoading(false);
};
return (
<AlertDialog>
<Button asChild variant={"destructive"}>
<AlertDialogTrigger>Remove Lobby</AlertDialogTrigger>
</Button>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
<AlertDialogDescription>
This action cannot be undone. You will permanently delete this
lobby!
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>Cancel</AlertDialogCancel>
<AlertDialogAction onClick={handleConfirm} disabled={loading}>
Delete Lobby
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
);
}
export default DeleteLobbyDialog;