59 lines
1.6 KiB
TypeScript
59 lines
1.6 KiB
TypeScript
"use client";
|
|
|
|
import { api } from "~/trpc/react";
|
|
import { useBoard } from "~/app/providers/board";
|
|
import { useModal } from "~/app/providers/modal";
|
|
|
|
interface DeleteListConfirmationProps {
|
|
listPublicId: string;
|
|
}
|
|
|
|
export function DeleteListConfirmation({
|
|
listPublicId,
|
|
}: DeleteListConfirmationProps) {
|
|
const utils = api.useUtils();
|
|
const { boardData } = useBoard();
|
|
const { closeModal } = useModal();
|
|
|
|
const refetchBoard = () =>
|
|
utils.board.byId.refetch({ id: boardData.publicId });
|
|
|
|
const deleteList = api.list.delete.useMutation({
|
|
onSuccess: async () => {
|
|
closeModal();
|
|
await refetchBoard();
|
|
},
|
|
});
|
|
|
|
return (
|
|
<>
|
|
<div className="flex w-full flex-col justify-between pb-4">
|
|
<h2 className="text-md pb-4 font-medium text-dark-1000">
|
|
Are you sure you want to delete this list?
|
|
</h2>
|
|
<p className="text-sm font-medium text-dark-900">
|
|
{"This action can't be undone."}
|
|
</p>
|
|
</div>
|
|
<div className="mt-5 flex justify-end sm:mt-6">
|
|
<button
|
|
className="mr-4 inline-flex justify-center rounded-md border-[1px] border-dark-600 bg-dark-300 px-3 py-2 text-sm font-semibold text-dark-1000 shadow-sm focus-visible:outline-none"
|
|
onClick={() => closeModal()}
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
onClick={() =>
|
|
deleteList.mutate({
|
|
listPublicId,
|
|
})
|
|
}
|
|
className="inline-flex justify-center rounded-md bg-dark-1000 px-3 py-2 text-sm font-semibold text-dark-50 shadow-sm focus-visible:outline-none"
|
|
>
|
|
Delete
|
|
</button>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|