Simplify verbose confirmation dialog components

Author: krokosik

src/components/Expense/DeleteExpense.tsx

@@ -1,19 +1,9 @@
-import React from 'react';
-import { Button } from '../ui/button';
 import { Trash2 } from 'lucide-react';
-import { api } from '~/utils/api';
 import { useRouter } from 'next/router';
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-  AlertDialogTrigger,
-} from '../ui/alert-dialog';
+import React from 'react';
+import { api } from '~/utils/api';
+import { Button } from '../ui/button';
+import { SimpleConfirmationDialog } from '../ui/SimpleConfirmationDialog';
 
 export const DeleteExpense: React.FC<{
   expenseId: string;
@@ -39,28 +29,17 @@ export const DeleteExpense: React.FC<{
   };
 
   return (
-    <div>
-      <AlertDialog>
-        <AlertDialogTrigger asChild>
-          <Button variant="ghost">
-            <Trash2 className="text-red-400" size={23} />
-          </Button>
-        </AlertDialogTrigger>
-        <AlertDialogContent className="max-w-xs rounded-lg">
-          <AlertDialogHeader>
-            <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
-            <AlertDialogDescription>
-              This action cannot be undone. This will permanently delete your expense.
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel>Cancel</AlertDialogCancel>
-            <AlertDialogAction size="sm" variant="destructive" onClick={onDeleteExpense}>
-              Delete
-            </AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
-    </div>
+    <SimpleConfirmationDialog
+      title="Are you absolutely sure?"
+      description="This action cannot be undone. This will permanently delete your expense."
+      hasPermission
+      onConfirm={onDeleteExpense}
+      loading={deleteExpenseMutation.isLoading}
+      variant="destructive"
+    >
+      <Button variant="ghost">
+        <Trash2 className="text-red-400" size={23} />
+      </Button>
+    </SimpleConfirmationDialog>
   );
 };

src/components/Friend/DeleteFriend.tsx

@@ -1,27 +1,16 @@
-import React, { useState } from 'react';
-import { Button } from '../ui/button';
 import { Trash2 } from 'lucide-react';
-import { api } from '~/utils/api';
 import { useRouter } from 'next/router';
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-  AlertDialogTrigger,
-} from '../ui/alert-dialog';
+import React from 'react';
 import { toast } from 'sonner';
+import { api } from '~/utils/api';
+import { Button } from '../ui/button';
+import { SimpleConfirmationDialog } from '../ui/SimpleConfirmationDialog';
 
 export const DeleteFriend: React.FC<{
   friendId: number;
   disabled: boolean;
 }> = ({ friendId, disabled }) => {
   const router = useRouter();
-  const [showTrigger, setShowTrigger] = useState(false);
 
   const deleteFriendMutation = api.user.deleteFriend.useMutation();
   const utils = api.useUtils();
@@ -33,48 +22,27 @@ export const DeleteFriend: React.FC<{
       toast.error('Failed to delete user');
       return;
     }
-    setShowTrigger(false);
     utils.user.getBalances.invalidate().catch(console.error);
 
     await router.replace(`/balances`);
   };
 
   return (
-    <div>
-      <AlertDialog
-        open={showTrigger}
-        onOpenChange={(status) => (status !== showTrigger ? setShowTrigger(status) : null)}
-      >
-        <AlertDialogTrigger asChild>
-          <Button variant="ghost" className="px-0">
-            <Trash2 className="text-red-500" size={20} />
-          </Button>
-        </AlertDialogTrigger>
-        <AlertDialogContent className="max-w-xs rounded-lg">
-          <AlertDialogHeader>
-            <AlertDialogTitle>{disabled ? '' : 'Are you absolutely sure?'} </AlertDialogTitle>
-            <AlertDialogDescription>
-              {disabled
-                ? "Can't remove friend with outstanding balances. Settle up first"
-                : 'Do you really want to continue'}
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel>Cancel</AlertDialogCancel>
-            {!disabled ? (
-              <Button
-                size="sm"
-                variant="destructive"
-                onClick={onDeleteFriend}
-                disabled={deleteFriendMutation.isLoading}
-                loading={deleteFriendMutation.isLoading}
-              >
-                Delete
-              </Button>
-            ) : null}
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
-    </div>
+    <SimpleConfirmationDialog
+      title={disabled ? '' : 'Are you absolutely sure?'}
+      description={
+        disabled
+          ? "Can't remove friend with outstanding balances. Settle up first"
+          : 'Do you really want to continue'
+      }
+      hasPermission={!disabled}
+      onConfirm={onDeleteFriend}
+      loading={deleteFriendMutation.isLoading}
+      variant="destructive"
+    >
+      <Button variant="ghost" className="px-0">
+        <Trash2 className="text-red-500" size={20} />
+      </Button>
+    </SimpleConfirmationDialog>
   );
 };

src/components/ui/SimpleConfirmationDialog.tsx

@@ -0,0 +1,60 @@
+import { type VariantProps } from 'class-variance-authority';
+import { useState } from 'react';
+import {
+  AlertDialog,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from './alert-dialog';
+import { Button, type buttonVariants } from './button';
+
+export const SimpleConfirmationDialog: React.FC<
+  {
+    title: string;
+    description: string;
+    hasPermission: boolean;
+    onConfirm: () => void | Promise<void>;
+    loading: boolean;
+    children: React.ReactNode;
+  } & VariantProps<typeof buttonVariants>
+> = ({ title, description, hasPermission, onConfirm, loading, variant, children }) => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <AlertDialog open={open} onOpenChange={setOpen}>
+      <AlertDialogTrigger asChild>{children}</AlertDialogTrigger>
+      <AlertDialogContent className="max-w-xs rounded-lg">
+        <AlertDialogHeader>
+          <AlertDialogTitle>{title}</AlertDialogTitle>
+          <AlertDialogDescription>{description}</AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>Cancel</AlertDialogCancel>
+          {hasPermission && (
+            <form
+              onSubmit={async (e) => {
+                e.preventDefault();
+                await onConfirm();
+                setOpen(false);
+              }}
+            >
+              <Button
+                type="submit"
+                size="sm"
+                variant={variant}
+                disabled={loading}
+                loading={loading}
+              >
+                Confirm
+              </Button>
+            </form>
+          )}
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+};