From 48bd56be826ad91665954cb2508b2f2b371f2202 Mon Sep 17 00:00:00 2001 From: Hongbo Wu Date: Wed, 1 Jun 2022 18:43:03 +0800 Subject: [PATCH 01/35] Update Table component to read rows as a map --- packages/web/components/elements/Table.tsx | 65 +++++++++++++++++----- 1 file changed, 50 insertions(+), 15 deletions(-) diff --git a/packages/web/components/elements/Table.tsx b/packages/web/components/elements/Table.tsx index 38ba1587f..e19bf9595 100644 --- a/packages/web/components/elements/Table.tsx +++ b/packages/web/components/elements/Table.tsx @@ -3,7 +3,7 @@ import { styled } from '../tokens/stitches.config' import { StyledText } from './StyledText' import { InfoLink } from './InfoLink' import { Button } from './Button' -import { Plus, Trash } from 'phosphor-react' +import { PencilSimple, Plus, Trash } from 'phosphor-react' import { isDarkTheme } from '../../lib/themeUpdater' interface TableProps { @@ -11,8 +11,9 @@ interface TableProps { infoLink?: string onAdd?: () => void headers: string[] - rows: string[][] + rows: Map onDelete?: (id: string) => void + onEdit?: (id: string) => void } const HeaderWrapper = styled(Box, { @@ -164,7 +165,7 @@ export function Table(props: TableProps): JSX.Element { ))} - {props.rows.map((row, index) => ( + {Array.from(props.rows.keys()).map((key, index) => ( @@ -191,7 +191,7 @@ export function Table(props: TableProps): JSX.Element { }, }} > - {row.map((cell, index) => ( + {props.rows.get(key)?.map((cell, index) => ( ))} - {props.onDelete && ( - { - props.onDelete && props.onDelete(row[0]) + {props.onEdit && ( + + )} + {props.onDelete && ( + )} From 2094ffe6b2aac588a24ce5348a6c386d1b5c2b82 Mon Sep 17 00:00:00 2001 From: Hongbo Wu Date: Wed, 1 Jun 2022 18:43:26 +0800 Subject: [PATCH 02/35] Adjust subscriptions to adapt to the new Table component --- packages/web/pages/settings/subscriptions.tsx | 32 ++++++++++++------- 1 file changed, 20 insertions(+), 12 deletions(-) diff --git a/packages/web/pages/settings/subscriptions.tsx b/packages/web/pages/settings/subscriptions.tsx index fba1a7b43..e09d12a89 100644 --- a/packages/web/pages/settings/subscriptions.tsx +++ b/packages/web/pages/settings/subscriptions.tsx @@ -27,11 +27,14 @@ export default function SubscriptionsPage(): JSX.Element { } const headers = ['Name', 'Email', 'Updated Time'] - const rows = subscriptions.map((subscription) => [ - subscription.name, - subscription.newsletterEmail, - subscription.updatedAt.toString(), - ]) + const rows = new Map() + subscriptions.forEach((subscription) => + rows.set(subscription.name, [ + subscription.name, + subscription.newsletterEmail, + subscription.updatedAt.toString(), + ]) + ) return ( @@ -64,13 +67,18 @@ export default function SubscriptionsPage(): JSX.Element { ) From 545d944ffdb40a5532c6d4a9f74d6411d1102a1a Mon Sep 17 00:00:00 2001 From: Hongbo Wu Date: Wed, 1 Jun 2022 18:43:43 +0800 Subject: [PATCH 03/35] Add get webhooks query --- .../mutations/deleteWebhookMutation.ts | 39 +++++++++ .../queries/useGetWebhooksQuery.tsx | 85 +++++++++++++++++++ 2 files changed, 124 insertions(+) create mode 100644 packages/web/lib/networking/mutations/deleteWebhookMutation.ts create mode 100644 packages/web/lib/networking/queries/useGetWebhooksQuery.tsx diff --git a/packages/web/lib/networking/mutations/deleteWebhookMutation.ts b/packages/web/lib/networking/mutations/deleteWebhookMutation.ts new file mode 100644 index 000000000..0533c6b77 --- /dev/null +++ b/packages/web/lib/networking/mutations/deleteWebhookMutation.ts @@ -0,0 +1,39 @@ +import { gql } from 'graphql-request' +import { gqlFetcher } from '../networkHelpers' +import { Webhook } from '../queries/useGetWebhooksQuery' + +interface DeleteWebhookResult { + deleteWebhook: DeleteWebhook + errorCodes?: unknown[] +} + +type DeleteWebhook = { + webhook: Webhook +} + +export async function deleteWebhookMutation( + id: string +): Promise { + const mutation = gql` + mutation { + deleteWebhook(id: "${id}") { + ... on DeleteWebhookSuccess { + webhook { + id + } + } + ... on DeleteWebhookError { + errorCodes + } + } + } + ` + + try { + const data = (await gqlFetcher(mutation)) as DeleteWebhookResult + return data.errorCodes ? undefined : data.deleteWebhook.webhook.id + } catch (error) { + console.log('deleteWebhookMutation error', error) + return undefined + } +} diff --git a/packages/web/lib/networking/queries/useGetWebhooksQuery.tsx b/packages/web/lib/networking/queries/useGetWebhooksQuery.tsx new file mode 100644 index 000000000..dedd16ceb --- /dev/null +++ b/packages/web/lib/networking/queries/useGetWebhooksQuery.tsx @@ -0,0 +1,85 @@ +import { gql } from 'graphql-request' +import useSWR from 'swr' +import { publicGqlFetcher } from '../networkHelpers' + +export type WebhookEvent = + | 'PAGE_CREATED' + | 'PAGE_UPDATED' + | 'PAGE_DELETED' + | 'HIGHLIGHT_CREATED' + | 'HIGHLIGHT_UPDATED' + | 'HIGHLIGHT_DELETED' + +export interface Webhook { + id: string + url: string + eventTypes: WebhookEvent[] + contentType: string + method: string + enabled: boolean + createdAt: Date + updatedAt: Date +} + +interface WebhooksQueryResponse { + isValidating: boolean + webhooks: Webhook[] + revalidate: () => void +} + +interface WebhooksQueryResponseData { + webhooks: WebhooksData +} + +interface WebhooksData { + webhooks: unknown +} + +export function useGetWebhooksQuery(): WebhooksQueryResponse { + const query = gql` + query GetWebhooks { + webhooks { + ... on WebhooksSuccess { + webhooks { + id + url + eventTypes + contentType + method + enabled + createdAt + updatedAt + } + } + ... on WebhooksError { + errorCodes + } + } + } + ` + + const { data, mutate, error, isValidating } = useSWR(query, publicGqlFetcher) + console.log('webhooks data', data) + + try { + if (data) { + const result = data as WebhooksQueryResponseData + const webhooks = result.webhooks.webhooks as Webhook[] + return { + isValidating, + webhooks, + revalidate: () => { + mutate() + }, + } + } + } catch (error) { + console.log('error', error) + } + return { + isValidating: false, + webhooks: [], + // eslint-disable-next-line @typescript-eslint/no-empty-function + revalidate: () => {}, + } +} From 4b4783b9b56f15fcce18b3f74b995db090e0a959 Mon Sep 17 00:00:00 2001 From: Hongbo Wu Date: Wed, 1 Jun 2022 18:44:10 +0800 Subject: [PATCH 04/35] Add Webhook component --- packages/web/pages/settings/webhooks.tsx | 65 ++++++++++++++++++++++++ 1 file changed, 65 insertions(+) create mode 100644 packages/web/pages/settings/webhooks.tsx diff --git a/packages/web/pages/settings/webhooks.tsx b/packages/web/pages/settings/webhooks.tsx new file mode 100644 index 000000000..0a029f336 --- /dev/null +++ b/packages/web/pages/settings/webhooks.tsx @@ -0,0 +1,65 @@ +import { PrimaryLayout } from '../../components/templates/PrimaryLayout' +import { Toaster } from 'react-hot-toast' +import { Table } from '../../components/elements/Table' +import { applyStoredTheme } from '../../lib/themeUpdater' +import { useGetWebhooksQuery } from '../../lib/networking/queries/useGetWebhooksQuery' +import { useState } from 'react' +import { showErrorToast, showSuccessToast } from '../../lib/toastHelpers' +import { ConfirmationModal } from '../../components/patterns/ConfirmationModal' +import { deleteWebhookMutation } from '../../lib/networking/mutations/deleteWebhookMutation' + +export default function Webhooks(): JSX.Element { + const { webhooks, revalidate } = useGetWebhooksQuery() + const [deleteId, setDeleteId] = useState(null) + + applyStoredTheme(false) + + async function onDelete(id: string): Promise { + const result = await deleteWebhookMutation(id) + if (result) { + showSuccessToast('Deleted', { position: 'bottom-right' }) + } else { + showErrorToast('Failed to delete', { position: 'bottom-right' }) + } + revalidate() + } + + const headers = ['URL', 'Event Types', 'Enabled'] + const rows = new Map() + webhooks.forEach((webhook) => + rows.set(webhook.id, [ + webhook.url, + webhook.eventTypes.join(', '), + webhook.enabled ? 'Yes' : 'No', + ]) + ) + + return ( + + + + {deleteId ? ( + { + await onDelete(deleteId) + setDeleteId(null) + }} + onOpenChange={() => setDeleteId(null)} + /> + ) : null} +
+ + ) +} From c83f9290e693c4e2eb0eedb1f6e2ebd2493c4b13 Mon Sep 17 00:00:00 2001 From: Hongbo Wu Date: Wed, 1 Jun 2022 21:08:13 +0800 Subject: [PATCH 05/35] Add setWebhook mutation --- .../mutations/setWebhookMutation.ts | 43 +++++++++++++++++++ 1 file changed, 43 insertions(+) create mode 100644 packages/web/lib/networking/mutations/setWebhookMutation.ts diff --git a/packages/web/lib/networking/mutations/setWebhookMutation.ts b/packages/web/lib/networking/mutations/setWebhookMutation.ts new file mode 100644 index 000000000..f957dca14 --- /dev/null +++ b/packages/web/lib/networking/mutations/setWebhookMutation.ts @@ -0,0 +1,43 @@ +import { gql } from 'graphql-request' +import { gqlFetcher } from '../networkHelpers' +import { Webhook, WebhookEvent } from '../queries/useGetWebhooksQuery' + +interface SetWebhookResult { + setWebhook: SetWebhook + errorCodes?: unknown[] +} + +type SetWebhook = { + webhook: Webhook +} + +export async function setWebhookMutation( + id: string, + url: string, + eventTypes: WebhookEvent[] +): Promise { + const mutation = gql` + mutation SetWebhook($input: SetWebhookInput!) { + setWebhook(input: $input) { + ... on SetWebhookSuccess { + webhook { + id + } + } + ... on SetWebhookError { + errorCodes + } + } + } + ` + + try { + const data = (await gqlFetcher(mutation, { + input: { id, url, eventTypes }, + })) as SetWebhookResult + return data.errorCodes ? undefined : data.setWebhook.webhook.id + } catch (error) { + console.log('setWebhookMutation error', error) + return undefined + } +} From 56c4f5f2ded3221e861b16c0779366a81a86d310 Mon Sep 17 00:00:00 2001 From: Hongbo Wu Date: Wed, 1 Jun 2022 22:04:58 +0800 Subject: [PATCH 06/35] Add formModal --- .../web/components/patterns/FormModal.tsx | 70 +++++++++++++++++++ 1 file changed, 70 insertions(+) create mode 100644 packages/web/components/patterns/FormModal.tsx diff --git a/packages/web/components/patterns/FormModal.tsx b/packages/web/components/patterns/FormModal.tsx new file mode 100644 index 000000000..ab7f5b6d4 --- /dev/null +++ b/packages/web/components/patterns/FormModal.tsx @@ -0,0 +1,70 @@ +import { + ModalContent, + ModalOverlay, + ModalRoot, +} from '../elements/ModalPrimitives' +import { Box, HStack, VStack } from '../elements/LayoutPrimitives' +import { Button } from '../elements/Button' +import { StyledText } from '../elements/StyledText' +import { FormInput } from '../elements/FormElements' + +interface FormInputProps { + name: string + label: string + value?: string + onChange: (value: string) => void + type?: string + placeholder?: string + disabled?: boolean + hidden?: boolean +} + +interface FormModalProps { + inputs?: FormInputProps[] + title: string + acceptButtonLabel?: string + onSubmit: () => void + onOpenChange: (open: boolean) => void +} + +export function FormModal(props: FormModalProps): JSX.Element { + return ( + + + + + {props.title} + +
+ {props.inputs?.map((input) => ( + + {input.label} + input.onChange(event.target.value)} + disabled={input.disabled} + hidden={input.hidden} + /> + + ))} + + + + + + + + + + ) +} From 7c926f4ae431ea92731f961cc484144521d61067 Mon Sep 17 00:00:00 2001 From: Hongbo Wu Date: Wed, 1 Jun 2022 22:28:46 +0800 Subject: [PATCH 07/35] Add webhook adding modal --- .../web/components/patterns/FormModal.tsx | 14 ++++-- packages/web/pages/settings/webhooks.tsx | 49 +++++++++++++++++-- 2 files changed, 56 insertions(+), 7 deletions(-) diff --git a/packages/web/components/patterns/FormModal.tsx b/packages/web/components/patterns/FormModal.tsx index ab7f5b6d4..114f68869 100644 --- a/packages/web/components/patterns/FormModal.tsx +++ b/packages/web/components/patterns/FormModal.tsx @@ -8,7 +8,7 @@ import { Button } from '../elements/Button' import { StyledText } from '../elements/StyledText' import { FormInput } from '../elements/FormElements' -interface FormInputProps { +export interface FormInputProps { name: string label: string value?: string @@ -19,7 +19,7 @@ interface FormInputProps { hidden?: boolean } -interface FormModalProps { +export interface FormModalProps { inputs?: FormInputProps[] title: string acceptButtonLabel?: string @@ -35,7 +35,13 @@ export function FormModal(props: FormModalProps): JSX.Element { {props.title} -
+ { + event.preventDefault() + props.onSubmit() + props.onOpenChange(false) + }} + > {props.inputs?.map((input) => ( {input.label} @@ -57,7 +63,7 @@ export function FormModal(props: FormModalProps): JSX.Element { > Cancel - diff --git a/packages/web/pages/settings/webhooks.tsx b/packages/web/pages/settings/webhooks.tsx index 0a029f336..f7093cfc7 100644 --- a/packages/web/pages/settings/webhooks.tsx +++ b/packages/web/pages/settings/webhooks.tsx @@ -2,15 +2,25 @@ import { PrimaryLayout } from '../../components/templates/PrimaryLayout' import { Toaster } from 'react-hot-toast' import { Table } from '../../components/elements/Table' import { applyStoredTheme } from '../../lib/themeUpdater' -import { useGetWebhooksQuery } from '../../lib/networking/queries/useGetWebhooksQuery' +import { + useGetWebhooksQuery, + WebhookEvent, +} from '../../lib/networking/queries/useGetWebhooksQuery' import { useState } from 'react' import { showErrorToast, showSuccessToast } from '../../lib/toastHelpers' import { ConfirmationModal } from '../../components/patterns/ConfirmationModal' import { deleteWebhookMutation } from '../../lib/networking/mutations/deleteWebhookMutation' +import { FormInputProps, FormModal } from '../../components/patterns/FormModal' +import { setWebhookMutation } from '../../lib/networking/mutations/setWebhookMutation' export default function Webhooks(): JSX.Element { const { webhooks, revalidate } = useGetWebhooksQuery() const [deleteId, setDeleteId] = useState(null) + const [addModelOpen, setAddModelOpen] = useState(false) + const [editModelOpen, setEditModelOpen] = useState(false) + const [id, setId] = useState('') + const [url, setUrl] = useState('') + const [eventTypes, setEventTypes] = useState([]) applyStoredTheme(false) @@ -24,6 +34,20 @@ export default function Webhooks(): JSX.Element { revalidate() } + async function onAdd(): Promise { + const result = await setWebhookMutation('', url, [ + 'PAGE_CREATED', + 'HIGHLIGHT_CREATED', + ]) + if (result) { + showSuccessToast('Added', { position: 'bottom-right' }) + } else { + showErrorToast('Failed to add', { position: 'bottom-right' }) + } + setUrl('') + revalidate() + } + const headers = ['URL', 'Event Types', 'Enabled'] const rows = new Map() webhooks.forEach((webhook) => @@ -33,6 +57,14 @@ export default function Webhooks(): JSX.Element { webhook.enabled ? 'Yes' : 'No', ]) ) + const addFormInputs: FormInputProps[] = [ + { + label: 'URL', + onChange: setUrl, + name: 'url', + placeholder: 'https://example.com/webhook', + }, + ] return ( @@ -42,7 +74,17 @@ export default function Webhooks(): JSX.Element { }} /> - {deleteId ? ( + {addModelOpen && ( + + )} + + {deleteId && ( setDeleteId(null)} /> - ) : null} + )}
setAddModelOpen(true)} /> ) From 36c5a548d19158b42878084e2ef6a15840ce4d33 Mon Sep 17 00:00:00 2001 From: Hongbo Wu Date: Thu, 2 Jun 2022 10:59:05 +0800 Subject: [PATCH 08/35] Update Table's edit & delete button style --- packages/web/components/elements/Table.tsx | 54 ++++++---------------- 1 file changed, 15 insertions(+), 39 deletions(-) diff --git a/packages/web/components/elements/Table.tsx b/packages/web/components/elements/Table.tsx index e19bf9595..d473d3ceb 100644 --- a/packages/web/components/elements/Table.tsx +++ b/packages/web/components/elements/Table.tsx @@ -13,7 +13,7 @@ interface TableProps { headers: string[] rows: Map onDelete?: (id: string) => void - onEdit?: (id: string) => void + onUpdate?: (id: string) => void } const HeaderWrapper = styled(Box, { @@ -210,51 +210,27 @@ export function Table(props: TableProps): JSX.Element { > ))} - {props.onEdit && ( - + )} {props.onDelete && ( - + + )} From 1b024214fefaa6d02b96dcaee76044f0356fedef Mon Sep 17 00:00:00 2001 From: Hongbo Wu Date: Thu, 2 Jun 2022 11:02:57 +0800 Subject: [PATCH 09/35] Add get webhook query in web --- .../networking/queries/useGetWebhookQuery.tsx | 62 +++++++++++++++++++ 1 file changed, 62 insertions(+) create mode 100644 packages/web/lib/networking/queries/useGetWebhookQuery.tsx diff --git a/packages/web/lib/networking/queries/useGetWebhookQuery.tsx b/packages/web/lib/networking/queries/useGetWebhookQuery.tsx new file mode 100644 index 000000000..e5e05a6d2 --- /dev/null +++ b/packages/web/lib/networking/queries/useGetWebhookQuery.tsx @@ -0,0 +1,62 @@ +import { gql } from 'graphql-request' +import useSWR from 'swr' +import { makeGqlFetcher } from '../networkHelpers' +import { Webhook } from './useGetWebhooksQuery' + +interface WebhookQueryResponse { + isValidating?: boolean + webhook?: Webhook + revalidate?: () => void +} + +interface WebhookQueryResponseData { + webhook: WebhookData +} + +interface WebhookData { + webhook: unknown +} + +export function useGetWebhookQuery(id: string): WebhookQueryResponse { + const query = gql` + query GetWebhook($id: ID!) { + webhook(id: $id) { + ... on WebhookSuccess { + webhook { + id + url + eventTypes + contentType + method + enabled + createdAt + updatedAt + } + } + ... on WebhookError { + errorCodes + } + } + } + ` + + const { data, mutate, isValidating } = useSWR(query, makeGqlFetcher({ id })) + console.log('webhook data', data) + + try { + if (data) { + const result = data as WebhookQueryResponseData + const webhook = result.webhook.webhook as Webhook + return { + isValidating, + webhook, + revalidate: () => { + mutate() + }, + } + } + } catch (error) { + console.log('error', error) + } + return {} +} From 353aa6256f659b58fea48afd29d9c379cec94c52 Mon Sep 17 00:00:00 2001 From: Hongbo Wu Date: Thu, 2 Jun 2022 11:03:38 +0800 Subject: [PATCH 10/35] Update FormModal style --- packages/web/components/patterns/FormModal.tsx | 11 +++-------- 1 file changed, 3 insertions(+), 8 deletions(-) diff --git a/packages/web/components/patterns/FormModal.tsx b/packages/web/components/patterns/FormModal.tsx index 114f68869..1631c709c 100644 --- a/packages/web/components/patterns/FormModal.tsx +++ b/packages/web/components/patterns/FormModal.tsx @@ -44,7 +44,7 @@ export function FormModal(props: FormModalProps): JSX.Element { > {props.inputs?.map((input) => ( - {input.label} + {input.label} ))} - - + From 5ebb0d939a15ffc92cac54017e02c2964e4cb0c7 Mon Sep 17 00:00:00 2001 From: Hongbo Wu Date: Thu, 2 Jun 2022 11:04:17 +0800 Subject: [PATCH 11/35] Add edit webhook modal --- packages/web/pages/settings/webhooks.tsx | 75 ++++++++++++++++++------ 1 file changed, 57 insertions(+), 18 deletions(-) diff --git a/packages/web/pages/settings/webhooks.tsx b/packages/web/pages/settings/webhooks.tsx index f7093cfc7..495aa42f5 100644 --- a/packages/web/pages/settings/webhooks.tsx +++ b/packages/web/pages/settings/webhooks.tsx @@ -6,21 +6,43 @@ import { useGetWebhooksQuery, WebhookEvent, } from '../../lib/networking/queries/useGetWebhooksQuery' -import { useState } from 'react' +import { useEffect, useState } from 'react' import { showErrorToast, showSuccessToast } from '../../lib/toastHelpers' import { ConfirmationModal } from '../../components/patterns/ConfirmationModal' import { deleteWebhookMutation } from '../../lib/networking/mutations/deleteWebhookMutation' import { FormInputProps, FormModal } from '../../components/patterns/FormModal' import { setWebhookMutation } from '../../lib/networking/mutations/setWebhookMutation' +import { useGetWebhookQuery } from '../../lib/networking/queries/useGetWebhookQuery' export default function Webhooks(): JSX.Element { const { webhooks, revalidate } = useGetWebhooksQuery() - const [deleteId, setDeleteId] = useState(null) + const [onDeleteId, setOnDeleteId] = useState(null) const [addModelOpen, setAddModelOpen] = useState(false) - const [editModelOpen, setEditModelOpen] = useState(false) - const [id, setId] = useState('') + const [onEditId, setOnEditId] = useState('') const [url, setUrl] = useState('') const [eventTypes, setEventTypes] = useState([]) + const [formInputs, setFormInputs] = useState([ + { + label: 'URL', + onChange: setUrl, + name: 'url', + placeholder: 'https://example.com/webhook', + }, + ]) + const { webhook } = useGetWebhookQuery(onEditId) + + useEffect(() => { + if (webhook) { + setFormInputs([ + { + label: 'URL', + onChange: setUrl, + name: 'url', + value: webhook.url, + }, + ]) + } + }, [webhook]) applyStoredTheme(false) @@ -48,6 +70,20 @@ export default function Webhooks(): JSX.Element { revalidate() } + async function onUpdate(): Promise { + const result = await setWebhookMutation(onEditId, url, [ + 'PAGE_CREATED', + 'HIGHLIGHT_CREATED', + ]) + if (result) { + showSuccessToast('Updated', { position: 'bottom-right' }) + } else { + showErrorToast('Failed to update', { position: 'bottom-right' }) + } + setUrl('') + revalidate() + } + const headers = ['URL', 'Event Types', 'Enabled'] const rows = new Map() webhooks.forEach((webhook) => @@ -57,14 +93,6 @@ export default function Webhooks(): JSX.Element { webhook.enabled ? 'Yes' : 'No', ]) ) - const addFormInputs: FormInputProps[] = [ - { - label: 'URL', - onChange: setUrl, - name: 'url', - placeholder: 'https://example.com/webhook', - }, - ] return ( @@ -79,29 +107,40 @@ export default function Webhooks(): JSX.Element { title={'Add webhook'} onSubmit={onAdd} onOpenChange={setAddModelOpen} - inputs={addFormInputs} + inputs={formInputs} acceptButtonLabel={'Add'} /> )} - {deleteId && ( + {onEditId && ( + setOnEditId('')} + inputs={formInputs} + acceptButtonLabel={'Update'} + /> + )} + + {onDeleteId && ( { - await onDelete(deleteId) - setDeleteId(null) + await onDelete(onDeleteId) + setOnDeleteId(null) }} - onOpenChange={() => setDeleteId(null)} + onOpenChange={() => setOnDeleteId(null)} /> )}
setAddModelOpen(true)} + onUpdate={setOnEditId} /> ) From 29797829b45472af94056960a7b08787f72f0b1c Mon Sep 17 00:00:00 2001 From: Hongbo Wu Date: Thu, 2 Jun 2022 12:32:13 +0800 Subject: [PATCH 12/35] 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} /> ))} 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 { + input: SetWebhookInput +): Promise { 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('') const [url, setUrl] = useState('') - const [eventTypes, setEventTypes] = useState([]) + const [eventTypes, setEventTypes] = useState([ + 'PAGE_CREATED', + 'HIGHLIGHT_CREATED', + ]) + const [enabled, setEnabled] = useState(true) const [formInputs, setFormInputs] = useState([ { 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 { - 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 { - 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 { From c18b41f184403cb8290d0d42beedcb99e8148340 Mon Sep 17 00:00:00 2001 From: Hongbo Wu Date: Thu, 2 Jun 2022 12:46:31 +0800 Subject: [PATCH 13/35] Set default enabled=false --- packages/web/lib/networking/queries/useGetWebhookQuery.tsx | 4 ---- packages/web/pages/settings/webhooks.tsx | 6 +++--- 2 files changed, 3 insertions(+), 7 deletions(-) diff --git a/packages/web/lib/networking/queries/useGetWebhookQuery.tsx b/packages/web/lib/networking/queries/useGetWebhookQuery.tsx index b04a76934..e5e05a6d2 100644 --- a/packages/web/lib/networking/queries/useGetWebhookQuery.tsx +++ b/packages/web/lib/networking/queries/useGetWebhookQuery.tsx @@ -18,10 +18,6 @@ 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 0c4fa1128..986a10754 100644 --- a/packages/web/pages/settings/webhooks.tsx +++ b/packages/web/pages/settings/webhooks.tsx @@ -24,7 +24,7 @@ export default function Webhooks(): JSX.Element { 'PAGE_CREATED', 'HIGHLIGHT_CREATED', ]) - const [enabled, setEnabled] = useState(true) + const [enabled, setEnabled] = useState(false) const [formInputs, setFormInputs] = useState([ { label: 'URL', @@ -61,7 +61,7 @@ export default function Webhooks(): JSX.Element { label: 'Event Types', name: 'eventTypes', disabled: true, - value: eventTypes.join(', '), + value: webhook.eventTypes.join(', '), }, { label: 'Enabled', @@ -102,7 +102,7 @@ export default function Webhooks(): JSX.Element { id: onEditId, url, eventTypes, - enabled: enabled || false, + enabled: enabled, }) if (result) { showSuccessToast('Updated', { position: 'bottom-right' }) From 56f28bcd1451f4bad881efd480b536bba58dcee7 Mon Sep 17 00:00:00 2001 From: Hongbo Wu Date: Thu, 2 Jun 2022 18:40:26 +0800 Subject: [PATCH 14/35] Replace FormInput with input component --- packages/web/components/patterns/FormModal.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/web/components/patterns/FormModal.tsx b/packages/web/components/patterns/FormModal.tsx index 7989114c0..86a968184 100644 --- a/packages/web/components/patterns/FormModal.tsx +++ b/packages/web/components/patterns/FormModal.tsx @@ -6,7 +6,6 @@ import { import { Box, HStack, VStack } from '../elements/LayoutPrimitives' import { Button } from '../elements/Button' import { StyledText } from '../elements/StyledText' -import { FormInput } from '../elements/FormElements' export interface FormInputProps { name: string @@ -46,7 +45,7 @@ export function FormModal(props: FormModalProps): JSX.Element { {props.inputs?.map((input) => ( {input.label} - Date: Thu, 2 Jun 2022 18:41:26 +0800 Subject: [PATCH 15/35] Use Record type in rows in TableProps --- packages/web/components/elements/Table.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/web/components/elements/Table.tsx b/packages/web/components/elements/Table.tsx index d473d3ceb..4d51ada28 100644 --- a/packages/web/components/elements/Table.tsx +++ b/packages/web/components/elements/Table.tsx @@ -11,7 +11,7 @@ interface TableProps { infoLink?: string onAdd?: () => void headers: string[] - rows: Map + rows: Map> onDelete?: (id: string) => void onUpdate?: (id: string) => void } From f5780bd4e67fbf5574ccb12c27f8437fd7b0ec3f Mon Sep 17 00:00:00 2001 From: Hongbo Wu Date: Thu, 2 Jun 2022 18:41:54 +0800 Subject: [PATCH 16/35] Use Record type in rows in TableProps --- packages/web/components/elements/Table.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/web/components/elements/Table.tsx b/packages/web/components/elements/Table.tsx index 4d51ada28..211cd821d 100644 --- a/packages/web/components/elements/Table.tsx +++ b/packages/web/components/elements/Table.tsx @@ -191,7 +191,7 @@ export function Table(props: TableProps): JSX.Element { }, }} > - {props.rows.get(key)?.map((cell, index) => ( + {Object.values(props.rows.get(key) || {}).map((cell, index) => ( Date: Thu, 2 Jun 2022 18:42:19 +0800 Subject: [PATCH 17/35] Replace onUpdate with onEdit callback --- packages/web/components/elements/Table.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/web/components/elements/Table.tsx b/packages/web/components/elements/Table.tsx index 211cd821d..bd918da2a 100644 --- a/packages/web/components/elements/Table.tsx +++ b/packages/web/components/elements/Table.tsx @@ -13,7 +13,7 @@ interface TableProps { headers: string[] rows: Map> onDelete?: (id: string) => void - onUpdate?: (id: string) => void + onEdit?: (obj: any) => void } const HeaderWrapper = styled(Box, { @@ -210,12 +210,12 @@ export function Table(props: TableProps): JSX.Element { > ))} - {props.onUpdate && ( + {props.onEdit && ( { - props.onUpdate && props.onUpdate(key) + props.onEdit && props.onEdit(props.rows.get(key)) }} > From b7bb5a258b7b668ffa2bd307240c65a6579a382b Mon Sep 17 00:00:00 2001 From: Hongbo Wu Date: Thu, 2 Jun 2022 18:43:17 +0800 Subject: [PATCH 18/35] Replace onUpdate with onEdit --- packages/web/pages/settings/webhooks.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/web/pages/settings/webhooks.tsx b/packages/web/pages/settings/webhooks.tsx index 986a10754..f76109fec 100644 --- a/packages/web/pages/settings/webhooks.tsx +++ b/packages/web/pages/settings/webhooks.tsx @@ -169,7 +169,7 @@ export default function Webhooks(): JSX.Element { rows={rows} onDelete={setOnDeleteId} onAdd={() => setAddModelOpen(true)} - onUpdate={setOnEditId} + onEdit={setOnEditWebhook} /> ) From 0eeb005c14aa4d1dd261487f57ff68d6547b5ec0 Mon Sep 17 00:00:00 2001 From: Hongbo Wu Date: Thu, 2 Jun 2022 18:44:04 +0800 Subject: [PATCH 19/35] Create Webhook interface --- packages/web/pages/settings/webhooks.tsx | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/packages/web/pages/settings/webhooks.tsx b/packages/web/pages/settings/webhooks.tsx index f76109fec..40985868a 100644 --- a/packages/web/pages/settings/webhooks.tsx +++ b/packages/web/pages/settings/webhooks.tsx @@ -12,7 +12,17 @@ import { ConfirmationModal } from '../../components/patterns/ConfirmationModal' import { deleteWebhookMutation } from '../../lib/networking/mutations/deleteWebhookMutation' import { FormInputProps, FormModal } from '../../components/patterns/FormModal' import { setWebhookMutation } from '../../lib/networking/mutations/setWebhookMutation' -import { useGetWebhookQuery } from '../../lib/networking/queries/useGetWebhookQuery' + +interface Webhook { + id?: string + url: string + eventTypes: string + contentType?: string + method?: string + enabled: string + createdAt?: Date + updatedAt?: Date +} export default function Webhooks(): JSX.Element { const { webhooks, revalidate } = useGetWebhooksQuery() From 8662c54589c3be6c15683edbb24b9a8c0de5847e Mon Sep 17 00:00:00 2001 From: Hongbo Wu Date: Thu, 2 Jun 2022 18:44:43 +0800 Subject: [PATCH 20/35] Set onEditWebhook data from Table --- packages/web/pages/settings/webhooks.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/web/pages/settings/webhooks.tsx b/packages/web/pages/settings/webhooks.tsx index 40985868a..bf499e5df 100644 --- a/packages/web/pages/settings/webhooks.tsx +++ b/packages/web/pages/settings/webhooks.tsx @@ -28,7 +28,7 @@ export default function Webhooks(): JSX.Element { const { webhooks, revalidate } = useGetWebhooksQuery() const [onDeleteId, setOnDeleteId] = useState(null) const [addModelOpen, setAddModelOpen] = useState(false) - const [onEditId, setOnEditId] = useState('') + const [onEditWebhook, setOnEditWebhook] = useState(null) const [url, setUrl] = useState('') const [eventTypes, setEventTypes] = useState([ 'PAGE_CREATED', @@ -109,7 +109,7 @@ export default function Webhooks(): JSX.Element { async function onUpdate(): Promise { const result = await setWebhookMutation({ - id: onEditId, + id: onEditWebhook?.id, url, eventTypes, enabled: enabled, @@ -151,11 +151,11 @@ export default function Webhooks(): JSX.Element { /> )} - {onEditId && ( + {onEditWebhook && ( setOnEditId('')} + onOpenChange={() => setOnEditWebhook(null)} inputs={formInputs} acceptButtonLabel={'Update'} /> From d90beb3dda6dbd58ad571f200bbe78d669fe4acf Mon Sep 17 00:00:00 2001 From: Hongbo Wu Date: Thu, 2 Jun 2022 18:45:21 +0800 Subject: [PATCH 21/35] Set default addWebhook formInputProps --- packages/web/pages/settings/webhooks.tsx | 52 ++++++++++++------------ 1 file changed, 26 insertions(+), 26 deletions(-) diff --git a/packages/web/pages/settings/webhooks.tsx b/packages/web/pages/settings/webhooks.tsx index bf499e5df..0e634347c 100644 --- a/packages/web/pages/settings/webhooks.tsx +++ b/packages/web/pages/settings/webhooks.tsx @@ -30,33 +30,33 @@ export default function Webhooks(): JSX.Element { const [addModelOpen, setAddModelOpen] = useState(false) const [onEditWebhook, setOnEditWebhook] = useState(null) const [url, setUrl] = useState('') - const [eventTypes, setEventTypes] = useState([ - 'PAGE_CREATED', - 'HIGHLIGHT_CREATED', - ]) + const [eventTypes, setEventTypes] = useState([]) const [enabled, setEnabled] = useState(false) - const [formInputs, setFormInputs] = useState([ - { - 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) + const [formInputs, setFormInputs] = useState([]) + + useEffect(() => { + setFormInputs([ + { + label: 'URL', + onChange: setUrl, + name: 'url', + placeholder: 'https://example.com/webhook', + required: true, + }, + { + label: 'Event Types', + name: 'eventTypes', + value: 'PAGE_CREATED, HIGHLIGHT_CREATED', + onChange: setEventTypes, + }, + { + label: 'Enabled', + name: 'enabled', + type: 'checkbox', + onChange: setEnabled, + }, + ]) + }, [addModelOpen]) useEffect(() => { if (webhook) { From fe92a00323b8af8347ac6822dc7c06788686b9f9 Mon Sep 17 00:00:00 2001 From: Hongbo Wu Date: Thu, 2 Jun 2022 18:45:54 +0800 Subject: [PATCH 22/35] Set values of editWebhook formInputProps --- packages/web/pages/settings/webhooks.tsx | 68 ++++++++++++------------ 1 file changed, 33 insertions(+), 35 deletions(-) diff --git a/packages/web/pages/settings/webhooks.tsx b/packages/web/pages/settings/webhooks.tsx index 0e634347c..32e5eaee5 100644 --- a/packages/web/pages/settings/webhooks.tsx +++ b/packages/web/pages/settings/webhooks.tsx @@ -59,30 +59,39 @@ export default function Webhooks(): JSX.Element { }, [addModelOpen]) useEffect(() => { - if (webhook) { - setFormInputs([ - { - label: 'URL', - onChange: setUrl, - name: 'url', - value: webhook.url, - }, - { - label: 'Event Types', - name: 'eventTypes', - disabled: true, - value: webhook.eventTypes.join(', '), - }, - { - label: 'Enabled', - name: 'enabled', - type: 'checkbox', - onChange: setEnabled, - value: webhook.enabled, - }, - ]) - } - }, [webhook]) + setFormInputs([ + { + label: 'URL', + onChange: setUrl, + name: 'url', + value: onEditWebhook?.url, + required: true, + }, + { + label: 'Event Types', + name: 'eventTypes', + value: onEditWebhook?.eventTypes, + onChange: setEventTypes, + }, + { + label: 'Enabled', + name: 'enabled', + type: 'checkbox', + onChange: setEnabled, + value: onEditWebhook?.enabled === 'Yes', + }, + ]) + }, [onEditWebhook]) + + const headers = ['URL', 'Event Types', 'Enabled'] + const rows = new Map() + webhooks.forEach((webhook) => + rows.set(webhook.id, { + url: webhook.url, + eventTypes: webhook.eventTypes.join(', '), + enabled: webhook.enabled ? 'Yes' : 'No', + }) + ) applyStoredTheme(false) @@ -119,20 +128,9 @@ export default function Webhooks(): JSX.Element { } else { showErrorToast('Failed to update', { position: 'bottom-right' }) } - setUrl('') revalidate() } - const headers = ['URL', 'Event Types', 'Enabled'] - const rows = new Map() - webhooks.forEach((webhook) => - rows.set(webhook.id, [ - webhook.url, - webhook.eventTypes.join(', '), - webhook.enabled ? 'Yes' : 'No', - ]) - ) - return ( Date: Thu, 2 Jun 2022 18:46:13 +0800 Subject: [PATCH 23/35] Do not remove url from form --- packages/web/pages/settings/webhooks.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/web/pages/settings/webhooks.tsx b/packages/web/pages/settings/webhooks.tsx index 32e5eaee5..50d849f57 100644 --- a/packages/web/pages/settings/webhooks.tsx +++ b/packages/web/pages/settings/webhooks.tsx @@ -112,7 +112,6 @@ export default function Webhooks(): JSX.Element { } else { showErrorToast('Failed to add', { position: 'bottom-right' }) } - setUrl('') revalidate() } From fdccc3e701ab94737cd90f1017810879536493df Mon Sep 17 00:00:00 2001 From: Hongbo Wu Date: Thu, 2 Jun 2022 21:34:17 +0800 Subject: [PATCH 24/35] Make inputs as state --- packages/web/components/patterns/FormModal.tsx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/packages/web/components/patterns/FormModal.tsx b/packages/web/components/patterns/FormModal.tsx index 86a968184..55592319d 100644 --- a/packages/web/components/patterns/FormModal.tsx +++ b/packages/web/components/patterns/FormModal.tsx @@ -6,6 +6,7 @@ import { import { Box, HStack, VStack } from '../elements/LayoutPrimitives' import { Button } from '../elements/Button' import { StyledText } from '../elements/StyledText' +import { useState } from 'react' export interface FormInputProps { name: string @@ -28,6 +29,8 @@ export interface FormModalProps { } export function FormModal(props: FormModalProps): JSX.Element { + const [inputs, setInputs] = useState(props.inputs || []) + return ( @@ -42,7 +45,7 @@ export function FormModal(props: FormModalProps): JSX.Element { props.onOpenChange(false) }} > - {props.inputs?.map((input) => ( + {inputs.map((input, index) => ( {input.label} { - input.onChange && + if (input.onChange) { + inputs[index].value = event.target.value + setInputs(inputs) input.onChange( event.target.value || event.target.checked ) + } }} disabled={input.disabled} hidden={input.hidden} From 967ea80ddb4df6f2188731625e3c3368e0447613 Mon Sep 17 00:00:00 2001 From: Hongbo Wu Date: Thu, 2 Jun 2022 21:34:32 +0800 Subject: [PATCH 25/35] Make rows as state --- packages/web/pages/settings/webhooks.tsx | 136 ++++++++++++----------- 1 file changed, 73 insertions(+), 63 deletions(-) diff --git a/packages/web/pages/settings/webhooks.tsx b/packages/web/pages/settings/webhooks.tsx index 50d849f57..53890f786 100644 --- a/packages/web/pages/settings/webhooks.tsx +++ b/packages/web/pages/settings/webhooks.tsx @@ -6,7 +6,7 @@ import { useGetWebhooksQuery, WebhookEvent, } from '../../lib/networking/queries/useGetWebhooksQuery' -import { useEffect, useState } from 'react' +import { useMemo, useState } from 'react' import { showErrorToast, showSuccessToast } from '../../lib/toastHelpers' import { ConfirmationModal } from '../../components/patterns/ConfirmationModal' import { deleteWebhookMutation } from '../../lib/networking/mutations/deleteWebhookMutation' @@ -30,68 +30,29 @@ export default function Webhooks(): JSX.Element { const [addModelOpen, setAddModelOpen] = useState(false) const [onEditWebhook, setOnEditWebhook] = useState(null) const [url, setUrl] = useState('') - const [eventTypes, setEventTypes] = useState([]) + const [eventTypes, setEventTypes] = useState([ + 'PAGE_CREATED', + 'HIGHLIGHT_CREATED', + ]) const [enabled, setEnabled] = useState(false) const [formInputs, setFormInputs] = useState([]) - useEffect(() => { - setFormInputs([ - { - label: 'URL', - onChange: setUrl, - name: 'url', - placeholder: 'https://example.com/webhook', - required: true, - }, - { - label: 'Event Types', - name: 'eventTypes', - value: 'PAGE_CREATED, HIGHLIGHT_CREATED', - onChange: setEventTypes, - }, - { - label: 'Enabled', - name: 'enabled', - type: 'checkbox', - onChange: setEnabled, - }, - ]) - }, [addModelOpen]) - - useEffect(() => { - setFormInputs([ - { - label: 'URL', - onChange: setUrl, - name: 'url', - value: onEditWebhook?.url, - required: true, - }, - { - label: 'Event Types', - name: 'eventTypes', - value: onEditWebhook?.eventTypes, - onChange: setEventTypes, - }, - { - label: 'Enabled', - name: 'enabled', - type: 'checkbox', - onChange: setEnabled, - value: onEditWebhook?.enabled === 'Yes', - }, - ]) - }, [onEditWebhook]) - - const headers = ['URL', 'Event Types', 'Enabled'] - const rows = new Map() - webhooks.forEach((webhook) => - rows.set(webhook.id, { - url: webhook.url, - eventTypes: webhook.eventTypes.join(', '), - enabled: webhook.enabled ? 'Yes' : 'No', - }) - ) + const [headers, setHeaders] = useState([ + 'URL', + 'Event Types', + 'Enabled', + ]) + const rows = useMemo(() => { + const rows = new Map() + webhooks.forEach((webhook) => + rows.set(webhook.id, { + url: webhook.url, + eventTypes: webhook.eventTypes.join(', '), + enabled: webhook.enabled ? 'Yes' : 'No', + }) + ) + return rows + }, [webhooks]) applyStoredTheme(false) @@ -120,7 +81,7 @@ export default function Webhooks(): JSX.Element { id: onEditWebhook?.id, url, eventTypes, - enabled: enabled, + enabled, }) if (result) { showSuccessToast('Updated', { position: 'bottom-right' }) @@ -175,8 +136,57 @@ export default function Webhooks(): JSX.Element { headers={headers} rows={rows} onDelete={setOnDeleteId} - onAdd={() => setAddModelOpen(true)} - onEdit={setOnEditWebhook} + onAdd={() => { + setFormInputs([ + { + label: 'URL', + onChange: setUrl, + name: 'url', + placeholder: 'https://example.com/webhook', + required: true, + }, + { + label: 'Event Types', + name: 'eventTypes', + value: eventTypes, + onChange: setEventTypes, + required: true, + }, + { + label: 'Enabled', + name: 'enabled', + type: 'checkbox', + onChange: setEnabled, + }, + ]) + setAddModelOpen(true) + }} + onEdit={(webhook) => { + setFormInputs([ + { + label: 'URL', + onChange: setUrl, + name: 'url', + value: webhook?.url, + required: true, + }, + { + label: 'Event Types', + name: 'eventTypes', + value: webhook?.eventTypes, + onChange: setEventTypes, + required: true, + }, + { + label: 'Enabled', + name: 'enabled', + type: 'checkbox', + onChange: setEnabled, + value: webhook?.enabled === 'Yes', + }, + ]) + setOnEditWebhook(webhook) + }} /> ) From d1fa54d3e2f986412170dd0b2bcfa7b7357b30e3 Mon Sep 17 00:00:00 2001 From: Hongbo Wu Date: Thu, 2 Jun 2022 21:38:27 +0800 Subject: [PATCH 26/35] Add contentType and method --- packages/web/pages/settings/webhooks.tsx | 29 +++++++++++++++++++++++- 1 file changed, 28 insertions(+), 1 deletion(-) diff --git a/packages/web/pages/settings/webhooks.tsx b/packages/web/pages/settings/webhooks.tsx index 53890f786..5c78f69e2 100644 --- a/packages/web/pages/settings/webhooks.tsx +++ b/packages/web/pages/settings/webhooks.tsx @@ -34,7 +34,9 @@ export default function Webhooks(): JSX.Element { 'PAGE_CREATED', 'HIGHLIGHT_CREATED', ]) - const [enabled, setEnabled] = useState(false) + const [enabled, setEnabled] = useState(true) + const [contentType, setContentType] = useState('application/json') + const [method, setMethod] = useState('POST') const [formInputs, setFormInputs] = useState([]) const [headers, setHeaders] = useState([ @@ -152,11 +154,24 @@ export default function Webhooks(): JSX.Element { onChange: setEventTypes, required: true, }, + { + label: 'Method', + name: 'method', + value: method, + disabled: true, + }, + { + label: 'Content Type', + name: 'contentType', + value: contentType, + disabled: true, + }, { label: 'Enabled', name: 'enabled', type: 'checkbox', onChange: setEnabled, + value: enabled, }, ]) setAddModelOpen(true) @@ -177,6 +192,18 @@ export default function Webhooks(): JSX.Element { onChange: setEventTypes, required: true, }, + { + label: 'Method', + name: 'method', + value: method, + disabled: true, + }, + { + label: 'Content Type', + name: 'contentType', + value: contentType, + disabled: true, + }, { label: 'Enabled', name: 'enabled', From 99e5c7fa1d9276cb68148d26b84bc9796c1b9d01 Mon Sep 17 00:00:00 2001 From: Hongbo Wu Date: Thu, 2 Jun 2022 21:42:17 +0800 Subject: [PATCH 27/35] remove enabled --- packages/web/pages/settings/webhooks.tsx | 42 +++++++++++++----------- 1 file changed, 23 insertions(+), 19 deletions(-) diff --git a/packages/web/pages/settings/webhooks.tsx b/packages/web/pages/settings/webhooks.tsx index 5c78f69e2..105b25c26 100644 --- a/packages/web/pages/settings/webhooks.tsx +++ b/packages/web/pages/settings/webhooks.tsx @@ -19,7 +19,7 @@ interface Webhook { eventTypes: string contentType?: string method?: string - enabled: string + enabled?: string createdAt?: Date updatedAt?: Date } @@ -42,7 +42,9 @@ export default function Webhooks(): JSX.Element { const [headers, setHeaders] = useState([ 'URL', 'Event Types', - 'Enabled', + 'Method', + 'Content Type', + // 'Enabled', ]) const rows = useMemo(() => { const rows = new Map() @@ -50,7 +52,9 @@ export default function Webhooks(): JSX.Element { rows.set(webhook.id, { url: webhook.url, eventTypes: webhook.eventTypes.join(', '), - enabled: webhook.enabled ? 'Yes' : 'No', + method: webhook.method, + contentType: webhook.contentType, + // enabled: webhook.enabled ? 'Yes' : 'No', }) ) return rows @@ -152,7 +156,7 @@ export default function Webhooks(): JSX.Element { name: 'eventTypes', value: eventTypes, onChange: setEventTypes, - required: true, + disabled: true, }, { label: 'Method', @@ -166,13 +170,13 @@ export default function Webhooks(): JSX.Element { value: contentType, disabled: true, }, - { - label: 'Enabled', - name: 'enabled', - type: 'checkbox', - onChange: setEnabled, - value: enabled, - }, + // { + // label: 'Enabled', + // name: 'enabled', + // type: 'checkbox', + // onChange: setEnabled, + // value: enabled, + // }, ]) setAddModelOpen(true) }} @@ -190,7 +194,7 @@ export default function Webhooks(): JSX.Element { name: 'eventTypes', value: webhook?.eventTypes, onChange: setEventTypes, - required: true, + disabled: true, }, { label: 'Method', @@ -204,13 +208,13 @@ export default function Webhooks(): JSX.Element { value: contentType, disabled: true, }, - { - label: 'Enabled', - name: 'enabled', - type: 'checkbox', - onChange: setEnabled, - value: webhook?.enabled === 'Yes', - }, + // { + // label: 'Enabled', + // name: 'enabled', + // type: 'checkbox', + // onChange: setEnabled, + // value: webhook?.enabled === 'Yes', + // }, ]) setOnEditWebhook(webhook) }} From 0353930ca3a68755feedabff805c59bbcde128c9 Mon Sep 17 00:00:00 2001 From: Hongbo Wu Date: Thu, 2 Jun 2022 21:55:37 +0800 Subject: [PATCH 28/35] Update Table CSS --- packages/web/components/elements/Table.tsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/web/components/elements/Table.tsx b/packages/web/components/elements/Table.tsx index bd918da2a..ede6836cc 100644 --- a/packages/web/components/elements/Table.tsx +++ b/packages/web/components/elements/Table.tsx @@ -158,12 +158,18 @@ export function Table(props: TableProps): JSX.Element { color: '$grayTextContrast', textTransform: 'uppercase', }, + width: '240px', }} > {header} ))} + {Array.from(props.rows.keys()).map((key, index) => ( Date: Thu, 2 Jun 2022 22:02:50 +0800 Subject: [PATCH 29/35] Update modal headline padding --- packages/web/components/patterns/FormModal.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/web/components/patterns/FormModal.tsx b/packages/web/components/patterns/FormModal.tsx index 55592319d..e1a76fcf8 100644 --- a/packages/web/components/patterns/FormModal.tsx +++ b/packages/web/components/patterns/FormModal.tsx @@ -35,8 +35,10 @@ export function FormModal(props: FormModalProps): JSX.Element { - + {props.title} + +
{ From 32a45676e3823181938bdd0dde25ac457daf5f72 Mon Sep 17 00:00:00 2001 From: Hongbo Wu Date: Fri, 3 Jun 2022 10:42:00 +0800 Subject: [PATCH 30/35] Update modal form style --- .../web/components/patterns/FormModal.tsx | 125 ++++++++++++++---- 1 file changed, 96 insertions(+), 29 deletions(-) diff --git a/packages/web/components/patterns/FormModal.tsx b/packages/web/components/patterns/FormModal.tsx index e1a76fcf8..14244a4c0 100644 --- a/packages/web/components/patterns/FormModal.tsx +++ b/packages/web/components/patterns/FormModal.tsx @@ -7,6 +7,9 @@ import { Box, HStack, VStack } from '../elements/LayoutPrimitives' import { Button } from '../elements/Button' import { StyledText } from '../elements/StyledText' import { useState } from 'react' +import { FormInput } from '../elements/FormElements' +import { CrossIcon } from '../elements/images/CrossIcon' +import { theme } from '../tokens/stitches.config' export interface FormInputProps { name: string @@ -34,12 +37,36 @@ export function FormModal(props: FormModalProps): JSX.Element { return ( - - - {props.title} - - - + { + event.preventDefault() + props.onOpenChange(false) + }} + css={{ overflow: 'auto', p: '0' }} + > + + + + {props.title} + + + + { event.preventDefault() @@ -48,34 +75,74 @@ export function FormModal(props: FormModalProps): JSX.Element { }} > {inputs.map((input, index) => ( - - {input.label} - { - if (input.onChange) { - inputs[index].value = event.target.value - setInputs(inputs) - input.onChange( - event.target.value || event.target.checked - ) - } + + + + { + if (input.onChange) { + inputs[index].value = event.target.value + setInputs(inputs) + input.onChange( + event.target.value || event.target.checked + ) + } + }} + disabled={input.disabled} + hidden={input.hidden} + required={input.required} + checked={input.value} + css={{ + border: '1px solid $grayBorder', + borderRadius: '8px', + width: '100%', + bg: 'transparent', + fontSize: '16px', + textIndent: '8px', + marginBottom: '2px', + color: '$grayTextContrast', + '&:focus': { + outline: 'none', + boxShadow: + '0px 0px 2px 2px rgba(255, 234, 159, 0.56)', + }, + }} + /> + ))} - - - + From 96e67a1ddd2df88e5df4ac7fff7c5ee8bdba91ac Mon Sep 17 00:00:00 2001 From: Hongbo Wu Date: Fri, 3 Jun 2022 16:23:05 +0800 Subject: [PATCH 31/35] Add checkout box input --- packages/web/components/elements/Checkbox.tsx | 22 +++--- .../web/components/elements/FormElements.tsx | 75 +++++++++++++++++++ packages/web/components/elements/Table.tsx | 3 +- .../web/components/patterns/FormModal.tsx | 49 +----------- packages/web/pages/settings/webhooks.tsx | 30 +------- 5 files changed, 96 insertions(+), 83 deletions(-) diff --git a/packages/web/components/elements/Checkbox.tsx b/packages/web/components/elements/Checkbox.tsx index ac7f91d7a..f09997077 100644 --- a/packages/web/components/elements/Checkbox.tsx +++ b/packages/web/components/elements/Checkbox.tsx @@ -19,17 +19,21 @@ const CheckboxIndicator = styled(CheckboxPrimitive.Indicator, { color: '#FFFFFF', }) -export const CheckboxComponent:React.FC<{ - checked: boolean; - setChecked:(arg: boolean) => void; -}> = ({checked, setChecked}) => { - const toggleChecked = () => setChecked(!checked); +export const CheckboxComponent: React.FC<{ + checked: boolean + setChecked: (arg: boolean) => void +}> = ({ checked, setChecked }) => { + const toggleChecked = () => setChecked(!checked) return ( - + diff --git a/packages/web/components/elements/FormElements.tsx b/packages/web/components/elements/FormElements.tsx index 6b9acb5e6..723a7d71d 100644 --- a/packages/web/components/elements/FormElements.tsx +++ b/packages/web/components/elements/FormElements.tsx @@ -1,4 +1,20 @@ import { styled } from '../tokens/stitches.config' +import { useState } from 'react' +import Checkbox from './Checkbox' + +export interface FormInputProps { + name: string + label: string + value?: any + onChange?: (value: any) => void + type?: string + placeholder?: string + disabled?: boolean + hidden?: boolean + required?: boolean + css?: any + labels?: string[] +} export const FormInput = styled('input', { border: 'none', @@ -19,3 +35,62 @@ export const BorderedFormInput = styled(FormInput, { border: `1px solid $grayBorder`, p: '$3', }) + +export function GeneralFormInput(props: FormInputProps): JSX.Element { + const [input, setInput] = useState(props) + + if (props.type === 'checkbox') { + return ( +
+ {input.labels?.map((label, index) => ( + { + return + }) + } + > + {label} + + ))} +
+ ) + } else { + return ( + { + if (input.onChange) { + // input.value = event.target.value + setInput(input) + input.onChange(event.target.value) + } + }} + disabled={input.disabled} + hidden={input.hidden} + required={input.required} + css={{ + border: '1px solid $grayBorder', + borderRadius: '8px', + width: '100%', + bg: 'transparent', + fontSize: '16px', + textIndent: '8px', + marginBottom: '2px', + color: '$grayTextContrast', + '&:focus': { + outline: 'none', + boxShadow: '0px 0px 2px 2px rgba(255, 234, 159, 0.56)', + }, + }} + name={input.name} + /> + ) + } +} diff --git a/packages/web/components/elements/Table.tsx b/packages/web/components/elements/Table.tsx index ede6836cc..c4e79ef36 100644 --- a/packages/web/components/elements/Table.tsx +++ b/packages/web/components/elements/Table.tsx @@ -221,7 +221,8 @@ export function Table(props: TableProps): JSX.Element { style="ctaWhite" css={{ mr: '$1', background: '$labelButtonsBg' }} onClick={() => { - props.onEdit && props.onEdit(props.rows.get(key)) + props.onEdit && + props.onEdit({ ...props.rows.get(key), id: key }) }} > diff --git a/packages/web/components/patterns/FormModal.tsx b/packages/web/components/patterns/FormModal.tsx index 14244a4c0..c6a3592c2 100644 --- a/packages/web/components/patterns/FormModal.tsx +++ b/packages/web/components/patterns/FormModal.tsx @@ -7,22 +7,10 @@ import { Box, HStack, VStack } from '../elements/LayoutPrimitives' import { Button } from '../elements/Button' import { StyledText } from '../elements/StyledText' import { useState } from 'react' -import { FormInput } from '../elements/FormElements' +import { FormInputProps, GeneralFormInput } from '../elements/FormElements' import { CrossIcon } from '../elements/images/CrossIcon' import { theme } from '../tokens/stitches.config' -export interface FormInputProps { - name: string - label: string - value?: any - onChange?: (value: any) => void - type?: string - placeholder?: string - disabled?: boolean - hidden?: boolean - required?: boolean -} - export interface FormModalProps { inputs?: FormInputProps[] title: string @@ -89,40 +77,7 @@ export function FormModal(props: FormModalProps): JSX.Element { - { - if (input.onChange) { - inputs[index].value = event.target.value - setInputs(inputs) - input.onChange( - event.target.value || event.target.checked - ) - } - }} - disabled={input.disabled} - hidden={input.hidden} - required={input.required} - checked={input.value} - css={{ - border: '1px solid $grayBorder', - borderRadius: '8px', - width: '100%', - bg: 'transparent', - fontSize: '16px', - textIndent: '8px', - marginBottom: '2px', - color: '$grayTextContrast', - '&:focus': { - outline: 'none', - boxShadow: - '0px 0px 2px 2px rgba(255, 234, 159, 0.56)', - }, - }} - /> + ))} diff --git a/packages/web/pages/settings/webhooks.tsx b/packages/web/pages/settings/webhooks.tsx index 105b25c26..324aefd5c 100644 --- a/packages/web/pages/settings/webhooks.tsx +++ b/packages/web/pages/settings/webhooks.tsx @@ -10,8 +10,9 @@ import { useMemo, useState } from 'react' import { showErrorToast, showSuccessToast } from '../../lib/toastHelpers' import { ConfirmationModal } from '../../components/patterns/ConfirmationModal' import { deleteWebhookMutation } from '../../lib/networking/mutations/deleteWebhookMutation' -import { FormInputProps, FormModal } from '../../components/patterns/FormModal' +import { FormModal } from '../../components/patterns/FormModal' import { setWebhookMutation } from '../../lib/networking/mutations/setWebhookMutation' +import { FormInputProps } from '../../components/elements/FormElements' interface Webhook { id?: string @@ -34,18 +35,11 @@ export default function Webhooks(): JSX.Element { 'PAGE_CREATED', 'HIGHLIGHT_CREATED', ]) - const [enabled, setEnabled] = useState(true) const [contentType, setContentType] = useState('application/json') const [method, setMethod] = useState('POST') const [formInputs, setFormInputs] = useState([]) - const [headers, setHeaders] = useState([ - 'URL', - 'Event Types', - 'Method', - 'Content Type', - // 'Enabled', - ]) + const headers = ['URL', 'Event Types', 'Method', 'Content Type'] const rows = useMemo(() => { const rows = new Map() webhooks.forEach((webhook) => @@ -54,7 +48,6 @@ export default function Webhooks(): JSX.Element { eventTypes: webhook.eventTypes.join(', '), method: webhook.method, contentType: webhook.contentType, - // enabled: webhook.enabled ? 'Yes' : 'No', }) ) return rows @@ -73,7 +66,7 @@ export default function Webhooks(): JSX.Element { } async function onAdd(): Promise { - const result = await setWebhookMutation({ url, eventTypes, enabled }) + const result = await setWebhookMutation({ url, eventTypes }) if (result) { showSuccessToast('Added', { position: 'bottom-right' }) } else { @@ -87,7 +80,6 @@ export default function Webhooks(): JSX.Element { id: onEditWebhook?.id, url, eventTypes, - enabled, }) if (result) { showSuccessToast('Updated', { position: 'bottom-right' }) @@ -170,13 +162,6 @@ export default function Webhooks(): JSX.Element { value: contentType, disabled: true, }, - // { - // label: 'Enabled', - // name: 'enabled', - // type: 'checkbox', - // onChange: setEnabled, - // value: enabled, - // }, ]) setAddModelOpen(true) }} @@ -208,13 +193,6 @@ export default function Webhooks(): JSX.Element { value: contentType, disabled: true, }, - // { - // label: 'Enabled', - // name: 'enabled', - // type: 'checkbox', - // onChange: setEnabled, - // value: webhook?.enabled === 'Yes', - // }, ]) setOnEditWebhook(webhook) }} From 9212f9e270927fad4d6c1cacf43dac14ea975804 Mon Sep 17 00:00:00 2001 From: Hongbo Wu Date: Fri, 3 Jun 2022 16:27:08 +0800 Subject: [PATCH 32/35] Update toast --- packages/web/pages/settings/webhooks.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/web/pages/settings/webhooks.tsx b/packages/web/pages/settings/webhooks.tsx index 324aefd5c..39bbbb850 100644 --- a/packages/web/pages/settings/webhooks.tsx +++ b/packages/web/pages/settings/webhooks.tsx @@ -58,17 +58,17 @@ export default function Webhooks(): JSX.Element { async function onDelete(id: string): Promise { const result = await deleteWebhookMutation(id) if (result) { - showSuccessToast('Deleted', { position: 'bottom-right' }) + showSuccessToast('Webhook deleted', { position: 'bottom-right' }) } else { showErrorToast('Failed to delete', { position: 'bottom-right' }) } revalidate() } - async function onAdd(): Promise { + async function onCreate(): Promise { const result = await setWebhookMutation({ url, eventTypes }) if (result) { - showSuccessToast('Added', { position: 'bottom-right' }) + showSuccessToast('Webhook created', { position: 'bottom-right' }) } else { showErrorToast('Failed to add', { position: 'bottom-right' }) } @@ -82,7 +82,7 @@ export default function Webhooks(): JSX.Element { eventTypes, }) if (result) { - showSuccessToast('Updated', { position: 'bottom-right' }) + showSuccessToast('Webhook updated', { position: 'bottom-right' }) } else { showErrorToast('Failed to update', { position: 'bottom-right' }) } @@ -100,7 +100,7 @@ export default function Webhooks(): JSX.Element { {addModelOpen && ( Date: Fri, 3 Jun 2022 16:41:26 +0800 Subject: [PATCH 33/35] Set values in checkboxes --- .../web/components/elements/FormElements.tsx | 35 +++++++++++-------- packages/web/pages/settings/webhooks.tsx | 5 +-- 2 files changed, 24 insertions(+), 16 deletions(-) diff --git a/packages/web/components/elements/FormElements.tsx b/packages/web/components/elements/FormElements.tsx index 723a7d71d..89fe3623f 100644 --- a/packages/web/components/elements/FormElements.tsx +++ b/packages/web/components/elements/FormElements.tsx @@ -1,6 +1,8 @@ import { styled } from '../tokens/stitches.config' import { useState } from 'react' import Checkbox from './Checkbox' +import { Box, HStack, VStack } from './LayoutPrimitives' +import { StyledText } from './StyledText' export interface FormInputProps { name: string @@ -41,22 +43,27 @@ export function GeneralFormInput(props: FormInputProps): JSX.Element { if (props.type === 'checkbox') { return ( -
+ {input.labels?.map((label, index) => ( - { - return - }) - } - > - {label} - + + {label} + + { + input.value[index] = arg + setInput(input) + props.onChange && + props.onChange( + input.labels?.filter((_, i) => input.value[i]) + ) + }} + > + + ))} -
+ ) } else { return ( diff --git a/packages/web/pages/settings/webhooks.tsx b/packages/web/pages/settings/webhooks.tsx index 39bbbb850..ed3dc98ca 100644 --- a/packages/web/pages/settings/webhooks.tsx +++ b/packages/web/pages/settings/webhooks.tsx @@ -146,9 +146,10 @@ export default function Webhooks(): JSX.Element { { label: 'Event Types', name: 'eventTypes', - value: eventTypes, + value: [true, true], onChange: setEventTypes, - disabled: true, + labels: eventTypes, + type: 'checkbox', }, { label: 'Method', From 5177b30f859fc29dca5ea22f470ce3b668052872 Mon Sep 17 00:00:00 2001 From: Hongbo Wu Date: Fri, 3 Jun 2022 16:51:16 +0800 Subject: [PATCH 34/35] Add default event_type options --- packages/web/components/elements/FormElements.tsx | 9 ++++----- packages/web/pages/settings/webhooks.tsx | 15 ++++++++------- 2 files changed, 12 insertions(+), 12 deletions(-) diff --git a/packages/web/components/elements/FormElements.tsx b/packages/web/components/elements/FormElements.tsx index 89fe3623f..f7896089f 100644 --- a/packages/web/components/elements/FormElements.tsx +++ b/packages/web/components/elements/FormElements.tsx @@ -15,7 +15,7 @@ export interface FormInputProps { hidden?: boolean required?: boolean css?: any - labels?: string[] + options?: string[] } export const FormInput = styled('input', { @@ -44,7 +44,7 @@ export function GeneralFormInput(props: FormInputProps): JSX.Element { if (props.type === 'checkbox') { return ( - {input.labels?.map((label, index) => ( + {input.options?.map((label, index) => ( {label} @@ -56,7 +56,7 @@ export function GeneralFormInput(props: FormInputProps): JSX.Element { setInput(input) props.onChange && props.onChange( - input.labels?.filter((_, i) => input.value[i]) + input.options?.filter((_, i) => input.value[i]) ) }} > @@ -74,8 +74,7 @@ export function GeneralFormInput(props: FormInputProps): JSX.Element { placeholder={input.placeholder} onChange={(event) => { if (input.onChange) { - // input.value = event.target.value - setInput(input) + setInput({ ...input, value: event.target.value }) input.onChange(event.target.value) } }} diff --git a/packages/web/pages/settings/webhooks.tsx b/packages/web/pages/settings/webhooks.tsx index ed3dc98ca..a2fa8fedc 100644 --- a/packages/web/pages/settings/webhooks.tsx +++ b/packages/web/pages/settings/webhooks.tsx @@ -31,13 +31,11 @@ export default function Webhooks(): JSX.Element { const [addModelOpen, setAddModelOpen] = useState(false) const [onEditWebhook, setOnEditWebhook] = useState(null) const [url, setUrl] = useState('') - const [eventTypes, setEventTypes] = useState([ - 'PAGE_CREATED', - 'HIGHLIGHT_CREATED', - ]) + const [eventTypes, setEventTypes] = useState([]) const [contentType, setContentType] = useState('application/json') const [method, setMethod] = useState('POST') const [formInputs, setFormInputs] = useState([]) + const eventTypeOptions = ['PAGE_CREATED', 'HIGHLIGHT_CREATED'] const headers = ['URL', 'Event Types', 'Method', 'Content Type'] const rows = useMemo(() => { @@ -148,7 +146,7 @@ export default function Webhooks(): JSX.Element { name: 'eventTypes', value: [true, true], onChange: setEventTypes, - labels: eventTypes, + options: eventTypeOptions, type: 'checkbox', }, { @@ -178,9 +176,12 @@ export default function Webhooks(): JSX.Element { { label: 'Event Types', name: 'eventTypes', - value: webhook?.eventTypes, + value: eventTypeOptions.map((option) => + webhook?.eventTypes.includes(option) + ), onChange: setEventTypes, - disabled: true, + options: eventTypeOptions, + type: 'checkbox', }, { label: 'Method', From 65c6af23c463755df68624164608bcece936de2e Mon Sep 17 00:00:00 2001 From: Hongbo Wu Date: Fri, 3 Jun 2022 17:02:41 +0800 Subject: [PATCH 35/35] Fix url and eventTypes not set correctly --- packages/web/pages/settings/webhooks.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/web/pages/settings/webhooks.tsx b/packages/web/pages/settings/webhooks.tsx index a2fa8fedc..7f976c1b0 100644 --- a/packages/web/pages/settings/webhooks.tsx +++ b/packages/web/pages/settings/webhooks.tsx @@ -31,11 +31,11 @@ export default function Webhooks(): JSX.Element { const [addModelOpen, setAddModelOpen] = useState(false) const [onEditWebhook, setOnEditWebhook] = useState(null) const [url, setUrl] = useState('') + const eventTypeOptions = ['PAGE_CREATED', 'HIGHLIGHT_CREATED'] const [eventTypes, setEventTypes] = useState([]) const [contentType, setContentType] = useState('application/json') const [method, setMethod] = useState('POST') const [formInputs, setFormInputs] = useState([]) - const eventTypeOptions = ['PAGE_CREATED', 'HIGHLIGHT_CREATED'] const headers = ['URL', 'Event Types', 'Method', 'Content Type'] const rows = useMemo(() => { @@ -162,6 +162,8 @@ export default function Webhooks(): JSX.Element { disabled: true, }, ]) + setUrl('') + setEventTypes(eventTypeOptions as WebhookEvent[]) setAddModelOpen(true) }} onEdit={(webhook) => { @@ -196,6 +198,8 @@ export default function Webhooks(): JSX.Element { disabled: true, }, ]) + setUrl(webhook?.url) + setEventTypes(webhook?.eventTypes) setOnEditWebhook(webhook) }} />