Files
desktop-app/components/delete-dialog.tsx
T

84 lines
2.1 KiB
TypeScript

"use client";
import { useRef } from "react";
import { Button } from "@/components/ui/button";
import { ConfirmButton } from "./confirm-button";
import {
Dialog,
DialogClose,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
} from "@/components/ui/dialog";
import { invoke } from "@tauri-apps/api/core";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import { toast } from "sonner";
type DeleteDialogProps = {
id: string;
open: boolean;
onOpenChange: (open: boolean) => void;
};
export default function DeleteDialog({
id,
open,
onOpenChange,
}: DeleteDialogProps) {
const formRef = useRef<HTMLFormElement>(null);
const queryClient = useQueryClient();
const delete_app = async (id: string) => {
await invoke("delete_apps", { id });
};
const { mutate: deleteApp } = useMutation({
mutationKey: ["delete_app"],
mutationFn: delete_app,
onSuccess: () => {
console.log("App deleted successfully");
queryClient.invalidateQueries({ queryKey: ["apps"] });
},
onError: (error) => {
toast.error("Error deleting app");
console.error("Error deleting app:", error);
},
});
const handleDelete = async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
deleteApp(id);
onOpenChange(false);
};
const handleHoldComplete = () => {
if (formRef.current) {
formRef.current.requestSubmit();
}
};
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<form ref={formRef} onSubmit={handleDelete}>
<DialogContent className="sm:max-w-sm">
<DialogHeader>
<DialogTitle>Delete App</DialogTitle>
<DialogDescription>
Are you sure you want to delete this app? This action cannot be
undone.
</DialogDescription>
</DialogHeader>
<DialogFooter>
<DialogClose asChild>
<Button variant="outline">Cancel</Button>
</DialogClose>
<ConfirmButton text="Confirm" onConfirm={handleHoldComplete} />
</DialogFooter>
</DialogContent>
</form>
</Dialog>
);
}