DeleteUserModal.tsx59 lines · main

1	import { useParams } from 'common'
2	import { toast } from 'sonner'
3	import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
4
5	import { useUserDeleteMutation } from '@/data/auth/user-delete-mutation'
6	import { User } from '@/data/auth/users-infinite-query'
7
8	interface DeleteUserModalProps {
9	visible: boolean
10	selectedUser?: User
11	onClose: () => void
12	onDeleteSuccess?: () => void
13	}
14
15	export const DeleteUserModal = ({
16	visible,
17	selectedUser,
18	onClose,
19	onDeleteSuccess,
20	}: DeleteUserModalProps) => {
21	const { ref: projectRef } = useParams()
22
23	const { mutate: deleteUser, isPending: isDeleting } = useUserDeleteMutation({
24	onSuccess: () => {
25	toast.success(`Successfully deleted ${selectedUser?.email}`)
26	onDeleteSuccess?.()
27	},
28	})
29
30	const handleDeleteUser = async () => {
31	if (!projectRef) return console.error('Project ref is required')
32	if (selectedUser?.id === undefined) {
33	return toast.error(`Failed to delete user: User ID not found`)
34	}
35	deleteUser({ projectRef, userId: selectedUser.id })
36	}
37
38	return (
39	<ConfirmationModal
40	visible={visible}
41	variant="destructive"
42	title="Confirm to delete user"
43	loading={isDeleting}
44	confirmLabel="Delete"
45	onCancel={() => onClose()}
46	onConfirm={() => handleDeleteUser()}
47	alert={{
48	title: 'Deleting a user is irreversible',
49	description:
50	'This will remove the selected the user from the project and all associated data.',
51	}}
52	>
53	<p className="text-sm text-foreground-light">
54	This is permanent! Are you sure you want to delete the user{' '}
55	{selectedUser?.email ?? selectedUser?.phone ?? 'this user'}?
56	</p>
57	</ConfirmationModal>
58	)
59	}