🛂 Migrate to Chakra UI v3 (#1496)

Co-authored-by: github-actions <github-actions@github.com>
2025-02-17 19:33:00 +00:00
parent 74e2604faf
commit 55df823739
60 changed files with 4682 additions and 4399 deletions
--- a/frontend/src/components/Admin/DeleteUser.tsx
+++ b/frontend/src/components/Admin/DeleteUser.tsx
@@ -0,0 +1,103 @@
+import { Button, DialogTitle, Text } from "@chakra-ui/react"
+import { useMutation, useQueryClient } from "@tanstack/react-query"
+import { useState } from "react"
+import { useForm } from "react-hook-form"
+import { FiTrash2 } from "react-icons/fi"
+import { UsersService } from "../../client"
+import {
+  DialogActionTrigger,
+  DialogBody,
+  DialogCloseTrigger,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogRoot,
+  DialogTrigger,
+} from "../../components/ui/dialog"
+import useCustomToast from "../../hooks/useCustomToast"
+
+const DeleteUser = ({ id }: { id: string }) => {
+  const [isOpen, setIsOpen] = useState(false)
+  const queryClient = useQueryClient()
+  const { showSuccessToast, showErrorToast } = useCustomToast()
+  const {
+    handleSubmit,
+    formState: { isSubmitting },
+  } = useForm()
+
+  const deleteUser = async (id: string) => {
+    await UsersService.deleteUser({ userId: id })
+  }
+
+  const mutation = useMutation({
+    mutationFn: deleteUser,
+    onSuccess: () => {
+      showSuccessToast("The user was deleted successfully")
+      setIsOpen(false)
+    },
+    onError: () => {
+      showErrorToast("An error occurred while deleting the user")
+    },
+    onSettled: () => {
+      queryClient.invalidateQueries()
+    },
+  })
+
+  const onSubmit = async () => {
+    mutation.mutate(id)
+  }
+
+  return (
+    <DialogRoot
+      size={{ base: "xs", md: "md" }}
+      placement="center"
+      role="alertdialog"
+      open={isOpen}
+      onOpenChange={({ open }) => setIsOpen(open)}
+    >
+      <DialogTrigger asChild>
+        <Button variant="ghost" size="sm" colorPalette="red">
+          <FiTrash2 fontSize="16px" />
+          Delete User
+        </Button>
+      </DialogTrigger>
+      <DialogContent>
+        <form onSubmit={handleSubmit(onSubmit)}>
+          <DialogHeader>
+            <DialogTitle>Delete User</DialogTitle>
+          </DialogHeader>
+          <DialogBody>
+            <Text mb={4}>
+              All items associated with this user will also be{" "}
+              <strong>permanently deleted.</strong> Are you sure? You will not
+              be able to undo this action.
+            </Text>
+          </DialogBody>
+
+          <DialogFooter gap={2}>
+            <DialogActionTrigger asChild>
+              <Button
+                variant="subtle"
+                colorPalette="gray"
+                disabled={isSubmitting}
+              >
+                Cancel
+              </Button>
+            </DialogActionTrigger>
+            <Button
+              variant="solid"
+              colorPalette="red"
+              type="submit"
+              loading={isSubmitting}
+            >
+              Delete
+            </Button>
+          </DialogFooter>
+          <DialogCloseTrigger />
+        </form>
+      </DialogContent>
+    </DialogRoot>
+  )
+}
+
+export default DeleteUser