Convert enabling webhooks to RQ mutation

studio/data/database/hooks-enable-mutation.ts

@@ -0,0 +1,45 @@
+import { useMutation, UseMutationOptions } from '@tanstack/react-query'
+import { toast } from 'react-hot-toast'
+
+import { post } from 'data/fetchers'
+import { ResponseError } from 'types'
+
+export type HooksEnableVariables = {
+  ref: string
+}
+
+export async function enableDatabaseWebhooks({ ref }: HooksEnableVariables) {
+  const { data, error } = await post('/platform/database/{ref}/hook-enable', {
+    params: { path: { ref } },
+  })
+  if (error) throw error
+  return data
+}
+
+type HooksEnableData = Awaited<ReturnType<typeof enableDatabaseWebhooks>>
+
+export const useHooksEnableMutation = ({
+  onSuccess,
+  onError,
+  ...options
+}: Omit<
+  UseMutationOptions<HooksEnableData, ResponseError, HooksEnableVariables>,
+  'mutationFn'
+> = {}) => {
+  return useMutation<HooksEnableData, ResponseError, HooksEnableVariables>(
+    (vars) => enableDatabaseWebhooks(vars),
+    {
+      async onSuccess(data, variables, context) {
+        await onSuccess?.(data, variables, context)
+      },
+      async onError(data, variables, context) {
+        if (onError === undefined) {
+          toast.error(`Failed to enable webhooks: ${data.message}`)
+        } else {
+          onError(data, variables, context)
+        }
+      },
+      ...options,
+    }
+  )
+}

studio/pages/project/[ref]/database/hooks/index.tsx

@@ -1,25 +1,22 @@
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 import clsx from 'clsx'
+import { useParams } from 'common'
 import { observer } from 'mobx-react-lite'
 import { useEffect, useState } from 'react'
+import { IconLoader } from 'ui'
 
-import { useParams } from 'common'
 import DeleteHookModal from 'components/interfaces/Database/Hooks/DeleteHookModal'
 import EditHookPanel from 'components/interfaces/Database/Hooks/EditHookPanel'
 import HooksList from 'components/interfaces/Database/Hooks/HooksList/HooksList'
 import { DatabaseLayout } from 'components/layouts'
-import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
 import ProductEmptyState from 'components/to-be-cleaned/ProductEmptyState'
 import NoPermission from 'components/ui/NoPermission'
+import { useHooksEnableMutation } from 'data/database/hooks-enable-mutation'
 import { useCheckPermissions, useStore } from 'hooks'
-import { post } from 'lib/common/fetch'
-import { API_URL } from 'lib/constants'
 import { NextPageWithLayout } from 'types'
-import { IconLoader } from 'ui'
 
 const HooksPage: NextPageWithLayout = () => {
   const { meta, ui } = useStore()
-  const { project } = useProjectContext()
 
   const { ref } = useParams()
   const schemas = meta.schemas.list()
@@ -33,24 +30,23 @@ const HooksPage: NextPageWithLayout = () => {
   const canReadWebhooks = useCheckPermissions(PermissionAction.TENANT_SQL_ADMIN_READ, 'triggers')
   const canCreateWebhooks = useCheckPermissions(PermissionAction.TENANT_SQL_ADMIN_WRITE, 'triggers')
 
-  useEffect(() => {
-    if (ui.selectedProjectRef) meta.hooks.load()
-  }, [ui.selectedProjectRef])
-
-  const enableHooksForProject = async () => {
-    const res = await post(`${API_URL}/database/${ref}/hook-enable`, {})
-    if (res.error) {
-      ui.setNotification({
-        category: 'error',
-        message: `Failed to enable webhooks: ${res.error.message}`,
-      })
-    } else {
+  const { mutate: enableHooks } = useHooksEnableMutation({
+    onSuccess: () => {
       meta.schemas.load()
       ui.setNotification({
         category: 'success',
         message: `Successfully enabled webhooks`,
       })
-    }
+    },
+  })
+
+  useEffect(() => {
+    if (ui.selectedProjectRef) meta.hooks.load()
+  }, [ui.selectedProjectRef])
+
+  const enableHooksForProject = async () => {
+    if (!ref) return console.error('Project ref is required')
+    enableHooks({ ref })
   }
 
   const createHook = () => {