update webhook doc

pages/dashboard/project/[projectId].tsx

@@ -1,4 +1,4 @@
-import { AlertDialog, AlertDialogBody, AlertDialogContent, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, Box, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, Center, Checkbox, Code, Container, Divider, Flex, FormControl, Heading, HStack, Input, Link, Spacer, Spinner, StackDivider, Switch, Tab, TabList, TabPanel, TabPanels, Tabs, Tag, Text, Textarea, toast, useDisclosure, useToast, VStack } from '@chakra-ui/react'
+import { AlertDialog, AlertDialogBody, AlertDialogContent, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, Box, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, Center, Checkbox, Code, Container, Divider, Flex, FormControl, Heading, HStack, Input, InputGroup, InputRightElement, Link, Spacer, Spinner, StackDivider, Switch, Tab, TabList, TabPanel, TabPanels, Tabs, Tag, Text, Textarea, toast, useDisclosure, useToast, VStack } from '@chakra-ui/react'
 import { Comment, Page, Project } from '@prisma/client'
 import { session, signIn } from 'next-auth/client'
 import { useRouter } from 'next/router'
@@ -418,10 +418,12 @@ function Settings(props: {
             <Switch onChange={onChangeEnableWebhook} defaultChecked={props.project.enableWebhook} />
             <Heading size="md">Webhook</Heading>
           </HStack>
-          <HStack>
+          <InputGroup>
             <Input defaultValue={props.project.webhook} type="text" ref={webhookInputRef}></Input>
-            <Button isLoading={updateWebhookUrlMutation.isLoading} onClick={onSaveWebhookUrl}>Save</Button>
-          </HStack>
+            <InputRightElement width='16'>
+              <Button size="sm" isLoading={updateWebhookUrlMutation.isLoading} onClick={onSaveWebhookUrl}>Save</Button>
+            </InputRightElement>
+          </InputGroup>
         </VStack>
 
         <Box>

prisma/pgsql/migrations/20210426145530_project_webhook/migration.sql

@@ -0,0 +1,3 @@
+-- AlterTable
+ALTER TABLE "projects" ADD COLUMN     "webhook" TEXT,
+ADD COLUMN     "enableWebhook" BOOLEAN;

prisma/pgsql/schema.prisma

@@ -58,7 +58,7 @@ model User {
   Comment Comment[]
 
   enableNewCommentNotification Boolean? @default(true) @map(name: "enable_new_comment_notification")
-  notificationEmail            String? @map(name: "notification_email")
+  notificationEmail            String?  @map(name: "notification_email")
 
   @@map(name: "users")
 }
@@ -92,6 +92,9 @@ model Project {
 
   enableNotification Boolean? @default(true) @map(name: "enable_notification")
 
+  webhook       String?
+  enableWebhook Boolean?
+
   @@map(name: "projects")
 }
 

public/doc/_sidebar.md

@@ -11,5 +11,6 @@
   - [Notification](/features/notification.md)
 - **Advanced**
   - [JS SDK Reference](/advanced/sdk.md)
+  - [Webhook Reference](/advanced/webhook.md)
   - [i18n](/advanced/i18n.md)
 - [**Contributing Guide**](/contributing.md)

public/doc/advanced/webhook.md

@@ -0,0 +1,30 @@
+# Webhook
+
+In addition to get new comment notification from Email, we also provide Webhook. 
+
+## Enable
+
+To enable webhook for project, in `Project` -> `Settings`, save your webhook url and turn on the switch button.
+
+![](../images/enable_webhook.png ':size=500')
+
+## Reference
+
+### New comment
+
+When new comment comes in, Cusdis will make a `POST` request to your webhook, with below data:
+
+```js
+{
+  "type": "new_comment",
+  "data": {
+    "by_nickname": "xxx",
+    "by_email": "xxx",
+    "content": "xxx",
+    "page_id": "xxx",
+    "page_title": "xxx", // page title, maybe NULL
+    "project_title": "haha", // project title
+    "approve_link": "" // use this link to approve this comment without login
+  }
+}
+```