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

Closes #439 (closed)

apps/blog/components/comment-delete-dialog.tsx

@@ -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>