86 lines
2.8 KiB
TypeScript
86 lines
2.8 KiB
TypeScript
'use client';
|
|
|
|
import { deleteArticleByExternalId } from '@/lib/feature/article/article.external';
|
|
import {
|
|
AlertDialog,
|
|
AlertDialogAction,
|
|
AlertDialogCancel,
|
|
AlertDialogContent,
|
|
AlertDialogDescription,
|
|
AlertDialogFooter,
|
|
AlertDialogHeader,
|
|
AlertDialogTitle,
|
|
AlertDialogTrigger,
|
|
} from '@/ui/components/shadcn/alert-dialog';
|
|
import { Button } from '@/ui/components/shadcn/button';
|
|
import { UUIDv4 } from '@/utils/types/uuid';
|
|
import { Trash2Icon } from 'lucide-react';
|
|
import { useTransition } from 'react';
|
|
import { toast } from 'sonner';
|
|
|
|
interface DeleteArticleButtonProps {
|
|
externalID: UUIDv4;
|
|
title: string;
|
|
}
|
|
|
|
export const DeleteArticleButton = ({
|
|
externalID,
|
|
title,
|
|
}: DeleteArticleButtonProps) => {
|
|
const [isPending, startTransition] = useTransition();
|
|
|
|
const handleDelete = () => {
|
|
startTransition(async () => {
|
|
const result = await deleteArticleByExternalId(externalID);
|
|
if (!result.ok) {
|
|
toast.error('Failed to delete article', {
|
|
description: result.error.message,
|
|
position: 'bottom-right',
|
|
});
|
|
return;
|
|
}
|
|
toast.success('Article deleted', {
|
|
description: `"${title}" has been removed.`,
|
|
position: 'bottom-right',
|
|
});
|
|
});
|
|
};
|
|
|
|
return (
|
|
<AlertDialog>
|
|
<AlertDialogTrigger asChild>
|
|
<Button variant='destructive' size='sm' disabled={isPending}>
|
|
<Trash2Icon className='size-4' />
|
|
Delete
|
|
</Button>
|
|
</AlertDialogTrigger>
|
|
<AlertDialogContent>
|
|
<AlertDialogHeader>
|
|
<AlertDialogTitle>Delete article?</AlertDialogTitle>
|
|
<AlertDialogDescription>
|
|
This will permanently delete “{title}
|
|
”. This action cannot be undone.
|
|
</AlertDialogDescription>
|
|
</AlertDialogHeader>
|
|
<AlertDialogFooter>
|
|
<AlertDialogCancel asChild>
|
|
<Button variant='outline' size='sm'>
|
|
Cancel
|
|
</Button>
|
|
</AlertDialogCancel>
|
|
<AlertDialogAction asChild>
|
|
<Button
|
|
variant='destructive'
|
|
size='sm'
|
|
disabled={isPending}
|
|
onClick={handleDelete}
|
|
>
|
|
{isPending ? 'Deleting…' : 'Delete'}
|
|
</Button>
|
|
</AlertDialogAction>
|
|
</AlertDialogFooter>
|
|
</AlertDialogContent>
|
|
</AlertDialog>
|
|
);
|
|
};
|