♻️ Refactor DeleteAccount components

Author: alejsdev

frontend/src/components/UserSettings/DeleteAccount.tsx

@@ -1,19 +1,15 @@
-import { Container, Heading, Text } from "@chakra-ui/react"
-
 import DeleteConfirmation from "./DeleteConfirmation"
 
 const DeleteAccount = () => {
   return (
-    <Container maxW="full">
-      <Heading size="sm" py={4}>
-        Delete Account
-      </Heading>
-      <Text>
-        Permanently delete your data and everything associated with your
-        account.
-      </Text>
+    <div className="max-w-md mt-4 rounded-lg border border-destructive/50 p-4">
+      <h3 className="font-semibold text-destructive">Delete Account</h3>
+      <p className="mt-1 text-sm text-muted-foreground">
+        Permanently delete your account and all associated data.
+      </p>
       <DeleteConfirmation />
-    </Container>
+    </div>
   )
 }
+
 export default DeleteAccount

frontend/src/components/UserSettings/DeleteConfirmation.tsx

@@ -1,28 +1,26 @@
-import { Button, ButtonGroup, Text } from "@chakra-ui/react"
 import { useMutation, useQueryClient } from "@tanstack/react-query"
-import { useState } from "react"
 import { useForm } from "react-hook-form"
 
-import { type ApiError, UsersService } from "@/client"
+import { UsersService } from "@/client"
+import { Button } from "@/components/ui/button"
 import {
-  DialogActionTrigger,
-  DialogBody,
-  DialogCloseTrigger,
+  Dialog,
+  DialogClose,
   DialogContent,
+  DialogDescription,
   DialogFooter,
   DialogHeader,
-  DialogRoot,
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog"
+import { LoadingButton } from "@/components/ui/loading-button"
 import useAuth from "@/hooks/useAuth"
 import useCustomToast from "@/hooks/useCustomToast"
 import { handleError } from "@/utils"
 
 const DeleteConfirmation = () => {
-  const [isOpen, setIsOpen] = useState(false)
   const queryClient = useQueryClient()
-  const { showSuccessToast } = useCustomToast()
+  const { showSuccessToast, showErrorToast } = useCustomToast()
   const {
     handleSubmit,
     formState: { isSubmitting },
@@ -33,12 +31,9 @@ const DeleteConfirmation = () => {
     mutationFn: () => UsersService.deleteUserMe(),
     onSuccess: () => {
       showSuccessToast("Your account has been successfully deleted")
-      setIsOpen(false)
       logout()
     },
-    onError: (err: ApiError) => {
-      handleError(err)
-    },
+    onError: handleError.bind(showErrorToast),
     onSettled: () => {
       queryClient.invalidateQueries({ queryKey: ["currentUser"] })
     },
@@ -49,58 +44,41 @@ const DeleteConfirmation = () => {
   }
 
   return (
-    <DialogRoot
-      size={{ base: "xs", md: "md" }}
-      role="alertdialog"
-      placement="center"
-      open={isOpen}
-      onOpenChange={({ open }) => setIsOpen(open)}
-    >
+    <Dialog>
       <DialogTrigger asChild>
-        <Button variant="solid" colorPalette="red" mt={4}>
-          Delete
+        <Button variant="destructive" className="mt-3">
+          Delete Account
         </Button>
       </DialogTrigger>
-
       <DialogContent>
         <form onSubmit={handleSubmit(onSubmit)}>
-          <DialogCloseTrigger />
           <DialogHeader>
             <DialogTitle>Confirmation Required</DialogTitle>
-          </DialogHeader>
-          <DialogBody>
-            <Text mb={4}>
+            <DialogDescription>
               All your account data will be{" "}
               <strong>permanently deleted.</strong> If you are sure, please
               click <strong>"Confirm"</strong> to proceed. This action cannot be
               undone.
-            </Text>
-          </DialogBody>
+            </DialogDescription>
+          </DialogHeader>
 
-          <DialogFooter gap={2}>
-            <ButtonGroup>
-              <DialogActionTrigger asChild>
-                <Button
-                  variant="subtle"
-                  colorPalette="gray"
-                  disabled={isSubmitting}
-                >
-                  Cancel
-                </Button>
-              </DialogActionTrigger>
-              <Button
-                variant="solid"
-                colorPalette="red"
-                type="submit"
-                loading={isSubmitting}
-              >
-                Delete
+          <DialogFooter className="mt-4">
+            <DialogClose asChild>
+              <Button variant="outline" disabled={isSubmitting}>
+                Cancel
               </Button>
-            </ButtonGroup>
+            </DialogClose>
+            <LoadingButton
+              variant="destructive"
+              type="submit"
+              loading={isSubmitting}
+            >
+              Delete
+            </LoadingButton>
           </DialogFooter>
         </form>
       </DialogContent>
-    </DialogRoot>
+    </Dialog>
   )
 }