Skip to content
Snippets Groups Projects

Resolve "Update UI: creating comment and nested comments in the post"

Files
3
@@ -10,44 +10,53 @@ import {
AlertDialogTrigger
} from '@ui/components/alert-dialog';
import { useUser } from '@smart-signer/lib/auth/use-user';
import { ReactNode } from 'react';
import { useDeleteCommentMutation } from './hooks/use-comment-mutations';
import { handleError } from '@ui/lib/utils';
import { ReactNode, useState } from 'react';
export function AlertDialogDelete({ children, permlink }: { children: ReactNode; permlink: string }) {
export function CommentDeleteDialog({
children,
permlink,
action
}: {
children: ReactNode;
permlink: string,
action: (permlink: string) => void;
}) {
const { user } = useUser();
const deleteCommentMutation = useDeleteCommentMutation();
const deleteComment = async () => {
try {
await deleteCommentMutation.mutateAsync({ permlink });
} catch (error) {
handleError(error, { method: 'deleteComment', params: { permlink } });
}
};
const [open, setOpen] = useState(false);
return (
<AlertDialog>
<AlertDialog open={open} onOpenChange={setOpen}>
<AlertDialogTrigger asChild>{children}</AlertDialogTrigger>
<AlertDialogContent className="flex flex-col gap-8 sm:rounded-r-xl ">
<AlertDialogHeader className="gap-2">
<div className="flex items-center justify-between">
<AlertDialogTitle data-testid="flag-dialog-header">Confirm Delete Comment</AlertDialogTitle>
<AlertDialogCancel className="border-none hover:text-red-800" data-testid="flag-dialog-close">
<AlertDialogCancel
className="border-none hover:text-red-800"
data-testid="flag-dialog-close"
>
X
</AlertDialogCancel>
</div>
<AlertDialogDescription data-testid="flag-dialog-description">Are you sure?</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter className="gap-2 sm:flex-row-reverse">
<AlertDialogCancel className="hover:text-red-800" data-testid="flag-dialog-cancel">
<AlertDialogCancel
className="hover:text-red-800"
data-testid="flag-dialog-cancel"
>
Cancel
</AlertDialogCancel>
{user && user.isLoggedIn ? (
<AlertDialogAction
autoFocus
className="rounded-none bg-gray-800 text-base text-white shadow-lg shadow-red-600 hover:bg-red-600 hover:shadow-gray-800 disabled:bg-gray-400 disabled:shadow-none"
data-testid="flag-dialog-ok"
onClick={deleteComment}
onClick={(e) => {
e.preventDefault();
action(permlink);
setOpen(false);
}}
>
OK
</AlertDialogAction>
Loading