From 29797829b45472af94056960a7b08787f72f0b1c Mon Sep 17 00:00:00 2001
From: Hongbo Wu <hongbo@omnivore.app>
Date: Thu, 2 Jun 2022 12:32:13 +0800
Subject: [PATCH] Add enabled input field in form

---
 .../web/components/patterns/FormModal.tsx     | 14 ++++--
 .../mutations/setWebhookMutation.ts           | 17 +++++--
 .../networking/queries/useGetWebhookQuery.tsx |  4 ++
 packages/web/pages/settings/webhooks.tsx      | 47 +++++++++++++++----
 4 files changed, 65 insertions(+), 17 deletions(-)

diff --git a/packages/web/components/patterns/FormModal.tsx b/packages/web/components/patterns/FormModal.tsx
index 1631c709c..7989114c0 100644
--- a/packages/web/components/patterns/FormModal.tsx
+++ b/packages/web/components/patterns/FormModal.tsx
@@ -11,12 +11,13 @@ import { FormInput } from '../elements/FormElements'
 export interface FormInputProps {
   name: string
   label: string
-  value?: string
-  onChange: (value: string) => void
+  value?: any
+  onChange?: (value: any) => void
   type?: string
   placeholder?: string
   disabled?: boolean
   hidden?: boolean
+  required?: boolean
 }
 
 export interface FormModalProps {
@@ -50,9 +51,16 @@ export function FormModal(props: FormModalProps): JSX.Element {
                     type={input.type || 'text'}
                     value={input.value}
                     placeholder={input.placeholder}
-                    onChange={(event) => input.onChange(event.target.value)}
+                    onChange={(event) => {
+                      input.onChange &&
+                        input.onChange(
+                          event.target.value || event.target.checked
+                        )
+                    }}
                     disabled={input.disabled}
                     hidden={input.hidden}
+                    required={input.required}
+                    checked={input.value}
                   />
                 </HStack>
               ))}
diff --git a/packages/web/lib/networking/mutations/setWebhookMutation.ts b/packages/web/lib/networking/mutations/setWebhookMutation.ts
index f957dca14..e291cdc37 100644
--- a/packages/web/lib/networking/mutations/setWebhookMutation.ts
+++ b/packages/web/lib/networking/mutations/setWebhookMutation.ts
@@ -2,6 +2,15 @@ import { gql } from 'graphql-request'
 import { gqlFetcher } from '../networkHelpers'
 import { Webhook, WebhookEvent } from '../queries/useGetWebhooksQuery'
 
+export interface SetWebhookInput {
+  contentType?: string[]
+  enabled?: boolean
+  eventTypes: WebhookEvent[]
+  id?: string
+  method?: string
+  url: string
+}
+
 interface SetWebhookResult {
   setWebhook: SetWebhook
   errorCodes?: unknown[]
@@ -12,10 +21,8 @@ type SetWebhook = {
 }
 
 export async function setWebhookMutation(
-  id: string,
-  url: string,
-  eventTypes: WebhookEvent[]
-): Promise<any | undefined> {
+  input: SetWebhookInput
+): Promise<string | undefined> {
   const mutation = gql`
     mutation SetWebhook($input: SetWebhookInput!) {
       setWebhook(input: $input) {
@@ -33,7 +40,7 @@ export async function setWebhookMutation(
 
   try {
     const data = (await gqlFetcher(mutation, {
-      input: { id, url, eventTypes },
+      input,
     })) as SetWebhookResult
     return data.errorCodes ? undefined : data.setWebhook.webhook.id
   } catch (error) {
diff --git a/packages/web/lib/networking/queries/useGetWebhookQuery.tsx b/packages/web/lib/networking/queries/useGetWebhookQuery.tsx
index e5e05a6d2..b04a76934 100644
--- a/packages/web/lib/networking/queries/useGetWebhookQuery.tsx
+++ b/packages/web/lib/networking/queries/useGetWebhookQuery.tsx
@@ -18,6 +18,10 @@ interface WebhookData {
 }
 
 export function useGetWebhookQuery(id: string): WebhookQueryResponse {
+  if (!id) {
+    return {}
+  }
+
   const query = gql`
     query GetWebhook($id: ID!) {
       webhook(id: $id) {
diff --git a/packages/web/pages/settings/webhooks.tsx b/packages/web/pages/settings/webhooks.tsx
index 495aa42f5..0c4fa1128 100644
--- a/packages/web/pages/settings/webhooks.tsx
+++ b/packages/web/pages/settings/webhooks.tsx
@@ -20,13 +20,30 @@ export default function Webhooks(): JSX.Element {
   const [addModelOpen, setAddModelOpen] = useState(false)
   const [onEditId, setOnEditId] = useState<string>('')
   const [url, setUrl] = useState('')
-  const [eventTypes, setEventTypes] = useState<WebhookEvent[]>([])
+  const [eventTypes, setEventTypes] = useState<WebhookEvent[]>([
+    'PAGE_CREATED',
+    'HIGHLIGHT_CREATED',
+  ])
+  const [enabled, setEnabled] = useState(true)
   const [formInputs, setFormInputs] = useState<FormInputProps[]>([
     {
       label: 'URL',
       onChange: setUrl,
       name: 'url',
       placeholder: 'https://example.com/webhook',
+      required: true,
+    },
+    {
+      label: 'Event Types',
+      name: 'eventTypes',
+      disabled: true,
+      value: eventTypes.join(', '),
+    },
+    {
+      label: 'Enabled',
+      name: 'enabled',
+      type: 'checkbox',
+      onChange: setEnabled,
     },
   ])
   const { webhook } = useGetWebhookQuery(onEditId)
@@ -40,6 +57,19 @@ export default function Webhooks(): JSX.Element {
           name: 'url',
           value: webhook.url,
         },
+        {
+          label: 'Event Types',
+          name: 'eventTypes',
+          disabled: true,
+          value: eventTypes.join(', '),
+        },
+        {
+          label: 'Enabled',
+          name: 'enabled',
+          type: 'checkbox',
+          onChange: setEnabled,
+          value: webhook.enabled,
+        },
       ])
     }
   }, [webhook])
@@ -57,10 +87,7 @@ export default function Webhooks(): JSX.Element {
   }
 
   async function onAdd(): Promise<void> {
-    const result = await setWebhookMutation('', url, [
-      'PAGE_CREATED',
-      'HIGHLIGHT_CREATED',
-    ])
+    const result = await setWebhookMutation({ url, eventTypes, enabled })
     if (result) {
       showSuccessToast('Added', { position: 'bottom-right' })
     } else {
@@ -71,10 +98,12 @@ export default function Webhooks(): JSX.Element {
   }
 
   async function onUpdate(): Promise<void> {
-    const result = await setWebhookMutation(onEditId, url, [
-      'PAGE_CREATED',
-      'HIGHLIGHT_CREATED',
-    ])
+    const result = await setWebhookMutation({
+      id: onEditId,
+      url,
+      eventTypes,
+      enabled: enabled || false,
+    })
     if (result) {
       showSuccessToast('Updated', { position: 'bottom-right' })
     } else {