67 lines
1.9 KiB
TypeScript
Executable File
67 lines
1.9 KiB
TypeScript
Executable File
import {useDeleteComments} from '@common/comments/requests/use-delete-comments';
|
|
import {DialogTrigger} from '@common/ui/overlays/dialog/dialog-trigger';
|
|
import {queryClient} from '@common/http/query-client';
|
|
import {Button} from '@common/ui/buttons/button';
|
|
import {Trans} from '@common/i18n/trans';
|
|
import {ConfirmationDialog} from '@common/ui/overlays/dialog/confirmation-dialog';
|
|
import React from 'react';
|
|
import {ButtonVariant} from '@common/ui/buttons/get-shared-button-style';
|
|
import {ButtonSize} from '@common/ui/buttons/button-size';
|
|
|
|
interface DeleteCommentsButtonProps {
|
|
commentIds: number[];
|
|
variant?: ButtonVariant;
|
|
size?: ButtonSize;
|
|
}
|
|
export function DeleteCommentsButton({
|
|
commentIds,
|
|
variant = 'outline',
|
|
size = 'xs',
|
|
}: DeleteCommentsButtonProps) {
|
|
const deleteComments = useDeleteComments();
|
|
return (
|
|
<DialogTrigger
|
|
type="modal"
|
|
onClose={isConfirmed => {
|
|
if (isConfirmed) {
|
|
deleteComments.mutate(
|
|
{commentIds},
|
|
{
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries({queryKey: ['comment']});
|
|
},
|
|
},
|
|
);
|
|
}
|
|
}}
|
|
>
|
|
<Button
|
|
variant={variant}
|
|
size={size}
|
|
color="danger"
|
|
className="mr-10"
|
|
disabled={deleteComments.isPending}
|
|
>
|
|
<Trans message="Delete" />
|
|
</Button>
|
|
<ConfirmationDialog
|
|
isDanger
|
|
title={
|
|
<Trans
|
|
message="Delete [one comment|other :count comments]"
|
|
values={{count: commentIds.length}}
|
|
/>
|
|
}
|
|
body={
|
|
commentIds.length > 1 ? (
|
|
<Trans message="Are you sure you want to delete selected comments?" />
|
|
) : (
|
|
<Trans message="Are you sure you want to delete this comment?" />
|
|
)
|
|
}
|
|
confirm={<Trans message="Delete" />}
|
|
/>
|
|
</DialogTrigger>
|
|
);
|
|
}
|