get value from database

packages/web/components/templates/Beta.tsx

@@ -1,5 +1,5 @@
 import { Alert } from 'antd'
 
-export function BetaFeature(): JSX.Element {
+export function Beta(): JSX.Element {
   return <Alert message="Beta" type="warning" showIcon />
 }

packages/web/lib/networking/queries/useGetIntegrationsQuery.tsx

@@ -11,7 +11,7 @@ export interface Integration {
   createdAt: Date
   updatedAt: Date
   taskName?: string
-  settings?: unknown
+  settings?: any
 }
 
 export type IntegrationType = 'EXPORT' | 'IMPORT'

packages/web/pages/settings/integrations.tsx

@@ -89,6 +89,9 @@ export default function Integrations(): JSX.Element {
   const pocketConnected = useMemo(() => {
     return integrations.find((i) => i.name == 'POCKET' && i.type == 'IMPORT')
   }, [integrations])
+  const isConnected = (name: string) => {
+    return integrations.find((i) => i.name == name)?.enabled
+  }
 
   const deleteIntegration = async (id: string) => {
     try {
@@ -112,18 +115,20 @@ export default function Integrations(): JSX.Element {
 
   const redirectToIntegration = (
     name: string,
-    importItemState: ImportItemState
+    importItemState?: ImportItemState
   ) => {
     // create a form and submit it to the backend
     const form = document.createElement('form')
     form.method = 'POST'
     form.action = `${fetchEndpoint}/integration/${name.toLowerCase()}/auth`
-    const input = document.createElement('input')
-    input.type = 'hidden'
-    input.name = 'state'
-    input.value = importItemState
-    form.appendChild(input)
-    document.body.appendChild(form)
+    if (importItemState) {
+      const input = document.createElement('input')
+      input.type = 'hidden'
+      input.name = 'state'
+      input.value = importItemState
+      form.appendChild(input)
+    }
+
     form.submit()
   }
 
@@ -184,9 +189,10 @@ export default function Integrations(): JSX.Element {
           { duration: 5000 }
         )
       } finally {
-        router.replace('/settings/integrations')
+        router.replace('/settings/integrations/notion')
       }
     }
+
     if (!router.isReady) return
     if (router.query.pocketToken && router.query.state && !pocketConnected) {
       connectToPocket()
@@ -268,13 +274,14 @@ export default function Integrations(): JSX.Element {
         subText:
           'Notion is an all-in-one workspace. Use our Notion integration to sync your Omnivore items to Notion.',
         button: {
-          text: 'Settings',
+          text: isConnected('NOTION') ? 'Settings' : 'Connect',
           icon: <Link size={16} weight={'bold'} />,
           style: 'ctaWhite',
-          action: () =>
-            router.push(
-              '/settings/integrations/notion'
-            ),
+          action: () => {
+            isConnected('NOTION')
+              ? router.push('/settings/integrations/notion')
+              : redirectToIntegration('NOTION')
+          },
         },
       },
       {
@@ -305,7 +312,7 @@ export default function Integrations(): JSX.Element {
         },
       },
     ])
-  }, [pocketConnected, readwiseConnected, webhooks])
+  }, [pocketConnected, readwiseConnected, webhooks, integrations])
 
   return (
     <SettingsLayout>

packages/web/pages/settings/integrations/notion.tsx

@@ -1,6 +1,7 @@
 import { styled } from '@stitches/react'
-import { Button, Checkbox, Form, Input, Switch } from 'antd'
+import { Button, Checkbox, Form, FormProps, Input, Space, Switch } from 'antd'
 import 'antd/dist/antd.compact.css'
+import { CheckboxValueType } from 'antd/lib/checkbox/Group'
 import Image from 'next/image'
 import { useMemo } from 'react'
 import {
@@ -9,23 +10,75 @@ import {
   VStack,
 } from '../../../components/elements/LayoutPrimitives'
 import { PageMetaData } from '../../../components/patterns/PageMetaData'
-import { BetaFeature } from '../../../components/templates/BetaFeature'
+import { Beta } from '../../../components/templates/Beta'
 import { SettingsLayout } from '../../../components/templates/SettingsLayout'
 import { useGetIntegrationsQuery } from '../../../lib/networking/queries/useGetIntegrationsQuery'
 
+interface FieldData {
+  name: string | number | (string | number)[]
+  value?: any
+  checked?: boolean
+  validating?: boolean
+  errors?: string[]
+}
+
+type FieldType = {
+  parentPageId?: string
+  parentDatabaseId?: string
+  autoSync?: boolean
+  properties?: string[]
+}
+
 // Styles
 const Header = styled(Box, {
   color: '$utilityTextDefault',
   fontSize: 'x-large',
-  margin: '20px',
+  margin: '20px 20px 40px 40px',
 })
 
 export default function Notion(): JSX.Element {
   const { integrations, revalidate } = useGetIntegrationsQuery()
-  const notion = useMemo(() => {
-    return integrations.find((i) => i.name == 'NOTION' && i.type == 'EXPORT')
+  const fields = useMemo<FieldData[]>(() => {
+    const notion = integrations.find(
+      (i) => i.name == 'NOTION' && i.type == 'EXPORT'
+    )
+    return [
+      {
+        name: 'parentPageId',
+        value: notion?.settings?.parentPageId,
+      },
+      {
+        name: 'parentDatabaseId',
+        value: notion?.settings?.parentDatabaseId,
+      },
+      {
+        name: 'autoSync',
+        checked: notion?.settings?.autoSync,
+      },
+      {
+        name: 'properties',
+        value: notion?.settings?.properties,
+      },
+    ]
   }, [integrations])
 
+  const [form] = Form.useForm<FieldType>()
+
+  const onFinish: FormProps<FieldType>['onFinish'] = (values) => {
+    console.log('Success:', values)
+  }
+
+  const onFinishFailed: FormProps<FieldType>['onFinishFailed'] = (
+    errorInfo
+  ) => {
+    console.log('Failed:', errorInfo)
+  }
+
+  const onDataChange = (value: Array<CheckboxValueType>) => {
+    form.setFieldsValue({ properties: value.map((v) => v.toString()) })
+    form.submit()
+  }
+
   return (
     <>
       <PageMetaData title="Notion" path="/integrations/notion" />
@@ -44,54 +97,67 @@ export default function Notion(): JSX.Element {
               height={75}
             />
             <Header>Notion integration settings</Header>
-            <BetaFeature />
+            <Beta />
           </HStack>
 
-          {notion && (
-            <Form>
-              <VStack
-                css={{
-                  padding: '20px',
-                }}
-              >
-                <HStack>
-                  <Form.Item
-                    label="Notion Page Id"
-                    name="parentPageId"
-                    style={{ marginRight: '20px' }}
-                    rules={[
-                      {
-                        required: true,
-                        message: 'Please input your Notion Page Id!',
-                      },
-                    ]}
-                  >
-                    <Input />
-                  </Form.Item>
+          <Form
+            labelCol={{ span: 4 }}
+            wrapperCol={{ span: 6 }}
+            labelAlign="left"
+            style={{ width: '100%' }}
+            form={form}
+            fields={fields}
+            onFinish={onFinish}
+            onFinishFailed={onFinishFailed}
+          >
+            <Form.Item<FieldType>
+              label="Notion Page Id"
+              name="parentPageId"
+              rules={[
+                {
+                  required: true,
+                  message: 'Please input your Notion Page Id!',
+                },
+              ]}
+            >
+              <Space>
+                <Input />
+                <Button type="primary" htmlType="submit">
+                  Save
+                </Button>
+              </Space>
+            </Form.Item>
 
-                  <Button>Save</Button>
-                </HStack>
+            <Form.Item<FieldType>
+              label="Notion Database Id"
+              name="parentDatabaseId"
+              hidden
+            >
+              <Input disabled />
+            </Form.Item>
 
-                <Form.Item label="Notion Database Id" name="parentDatabaseId">
-                  <Input disabled />
-                </Form.Item>
+            <Form.Item<FieldType> label="Automatic Sync" name="autoSync">
+              <Switch />
+            </Form.Item>
 
-                <Form.Item label="Automatic Sync" name="autoSync">
-                  <Switch />
-                </Form.Item>
+            <Form.Item<FieldType>
+              label="Properties to Export"
+              name="properties"
+            >
+              <Checkbox.Group onChange={onDataChange}>
+                <Checkbox value="highlights">Highlights</Checkbox>
+                <Checkbox value="labels">Labels</Checkbox>
+                <Checkbox value="notes">Notes</Checkbox>
+              </Checkbox.Group>
+            </Form.Item>
+          </Form>
 
-                <Form.Item label="Data to Export" name="dataToExport">
-                  <Checkbox.Group>
-                    <Checkbox value="highlights">Highlights</Checkbox>
-                    <Checkbox value="labels">Labels</Checkbox>
-                    <Checkbox value="notes">Notes</Checkbox>
-                  </Checkbox.Group>
-                </Form.Item>
-
-                <Button>Export Recent Items</Button>
-              </VStack>
-            </Form>
-          )}
+          <Space>
+            <Button type="primary">Export Recent Items</Button>
+            <Button type="primary" danger>
+              Disconnect
+            </Button>
+          </Space>
         </VStack>
       </SettingsLayout>
     </>