konnosDashboard
DeleteHookModal.tsx75 lines · main
1import { parseAsString, useQueryState } from 'nuqs'
2import { useEffect } from 'react'
3import { toast } from 'sonner'
4
5import { TextConfirmModal } from '@/components/ui/TextConfirmModalWrapper'
6import { useDatabaseTriggerDeleteMutation } from '@/data/database-triggers/database-trigger-delete-mutation'
7import { useDatabaseHooksQuery } from '@/data/database-triggers/database-triggers-query'
8import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
9
10export const DeleteHookModal = () => {
11 const { data: project } = useSelectedProjectQuery()
12
13 const { data: hooks = [], isSuccess } = useDatabaseHooksQuery({
14 projectRef: project?.ref,
15 connectionString: project?.connectionString,
16 })
17
18 const [selectedHookIdToDelete, setSelectedHookIdToDelete] = useQueryState(
19 'delete',
20 parseAsString.withDefault('')
21 )
22 const selectedHook = hooks.find((hook) => hook.id.toString() === selectedHookIdToDelete)
23 const { name, schema } = selectedHook ?? {}
24
25 const {
26 mutate: deleteDatabaseTrigger,
27 isPending: isDeleting,
28 isSuccess: isSuccessDelete,
29 } = useDatabaseTriggerDeleteMutation({
30 onSuccess: () => {
31 toast.success(`Successfully deleted ${name}`)
32 setSelectedHookIdToDelete(null)
33 },
34 })
35
36 async function handleDelete() {
37 if (!project) return console.error('Project ref is required')
38 if (!selectedHook) return toast.error('Unable to find selected hook')
39
40 deleteDatabaseTrigger({
41 trigger: selectedHook,
42 projectRef: project.ref,
43 connectionString: project.connectionString,
44 })
45 }
46
47 useEffect(() => {
48 if (isSuccess && !!selectedHookIdToDelete && !selectedHook && !isSuccessDelete) {
49 toast('Webhook not found')
50 setSelectedHookIdToDelete(null)
51 }
52 }, [isSuccess, isSuccessDelete, selectedHook, selectedHookIdToDelete, setSelectedHookIdToDelete])
53
54 return (
55 <TextConfirmModal
56 variant="destructive"
57 visible={!!selectedHook}
58 size="small"
59 onCancel={() => setSelectedHookIdToDelete(null)}
60 onConfirm={handleDelete}
61 title="Delete database webhook"
62 loading={isDeleting}
63 confirmLabel={`Delete ${name}`}
64 confirmPlaceholder="Type in name of webhook"
65 confirmString={name || ''}
66 text={
67 <>
68 This will delete the webhook <span className="text-bold text-foreground">{name}</span>{' '}
69 from the schema <span className="text-bold text-foreground">{schema}</span>
70 </>
71 }
72 alert={{ title: 'You cannot recover this webhook once deleted.' }}
73 />
74 )
75}