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

Closes #439 (closed)

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

@@ -11,23 +11,19 @@ import {
 } from '@ui/components/alert-dialog';
 import { useUser } from '@smart-signer/lib/auth/use-user';
 import { ReactNode, useState } from 'react';
-import { useDeleteCommentMutation } from './hooks/use-comment-mutations';
-import { handleError } from '@ui/lib/utils';
-import { CircleSpinner } from 'react-spinners-kit';
 
-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 [open, setOpen] = useState(false);
 
-  const deleteComment = async ()=> {
-    try {
-      await deleteCommentMutation.mutateAsync({ permlink });
-    } catch (error) {
-      handleError(error, { method: 'deleteComment', params: { permlink } });
-    }
-  };
-
   return (
     <AlertDialog open={open} onOpenChange={setOpen}>
       <AlertDialogTrigger asChild>{children}</AlertDialogTrigger>
@@ -36,7 +32,6 @@ export function AlertDialogDelete({ children, permlink }: { children: ReactNode;
           <div className="flex items-center justify-between">
             <AlertDialogTitle data-testid="flag-dialog-header">Confirm Delete Comment</AlertDialogTitle>
             <AlertDialogCancel
-              disabled={deleteCommentMutation.isLoading}
               className="border-none hover:text-red-800"
               data-testid="flag-dialog-close"
             >
@@ -47,7 +42,6 @@ export function AlertDialogDelete({ children, permlink }: { children: ReactNode;
         </AlertDialogHeader>
         <AlertDialogFooter className="gap-2 sm:flex-row-reverse">
           <AlertDialogCancel
-            disabled={deleteCommentMutation.isLoading}
             className="hover:text-red-800"
             data-testid="flag-dialog-cancel"
           >
@@ -55,21 +49,16 @@ export function AlertDialogDelete({ children, permlink }: { children: ReactNode;
           </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={async (e) => {
+              onClick={(e) => {
                 e.preventDefault();
-                await deleteComment();
+                action(permlink);
                 setOpen(false);
               }}
             >
-              {deleteCommentMutation.isLoading
-              ?
-                <CircleSpinner loading={deleteCommentMutation.isLoading}
-                                size={18} color="#dc2626" />
-              :
-                'OK'
-              }
+              OK
             </AlertDialogAction>
           ) : null}
         </AlertDialogFooter>