Web UI for notion integration

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

@@ -11,6 +11,7 @@ export interface Integration {
   createdAt: Date
   updatedAt: Date
   taskName?: string
+  settings?: unknown
 }
 
 export type IntegrationType = 'EXPORT' | 'IMPORT'
@@ -43,6 +44,7 @@ export function useGetIntegrationsQuery(): IntegrationsQueryResponse {
             createdAt
             updatedAt
             taskName
+            settings
           }
         }
         ... on IntegrationsError {

packages/web/pages/settings/integrations.tsx

@@ -110,11 +110,14 @@ export default function Integrations(): JSX.Element {
     }
   }
 
-  const redirectToPocket = (importItemState: ImportItemState) => {
+  const redirectToIntegration = (
+    name: string,
+    importItemState: ImportItemState
+  ) => {
     // create a form and submit it to the backend
     const form = document.createElement('form')
     form.method = 'POST'
-    form.action = `${fetchEndpoint}/integration/pocket/auth`
+    form.action = `${fetchEndpoint}/integration/${name.toLowerCase()}/auth`
     const input = document.createElement('input')
     input.type = 'hidden'
     input.name = 'state'
@@ -158,10 +161,39 @@ export default function Integrations(): JSX.Element {
         router.replace('/settings/integrations')
       }
     }
+
+    const connectWithNotion = async () => {
+      try {
+        // get the token from query string
+        const token = router.query.code as string
+        const result = await setIntegrationMutation({
+          token,
+          name: 'NOTION',
+          type: 'EXPORT',
+          enabled: true,
+        })
+        if (result) {
+          revalidate()
+          showSuccessToast('Connected with Notion.')
+        } else {
+          showErrorToast('There was an error connecting to Notion.')
+        }
+      } catch (err) {
+        showErrorToast(
+          'There was an error connecting to Notion. Please try again.',
+          { duration: 5000 }
+        )
+      } finally {
+        router.replace('/settings/integrations')
+      }
+    }
     if (!router.isReady) return
     if (router.query.pocketToken && router.query.state && !pocketConnected) {
       connectToPocket()
     }
+    if (router.query.code) {
+      connectWithNotion()
+    }
   }, [router])
 
   useEffect(() => {
@@ -210,7 +242,7 @@ export default function Integrations(): JSX.Element {
           action: () => {
             pocketConnected
               ? deleteIntegration(pocketConnected.id)
-              : redirectToPocket(ImportItemState.Unarchived)
+              : redirectToIntegration('pocket', ImportItemState.Unarchived)
           },
           disabled: isImporting(pocketConnected),
           isDropdown: !pocketConnected,
@@ -218,18 +250,33 @@ export default function Integrations(): JSX.Element {
             {
               text: 'Import All',
               action: () => {
-                redirectToPocket(ImportItemState.All)
+                redirectToIntegration('pocket', ImportItemState.All)
               },
             },
             {
               text: 'Import Unarchived',
               action: () => {
-                redirectToPocket(ImportItemState.Unarchived)
+                redirectToIntegration('pocket', ImportItemState.Unarchived)
               },
             },
           ],
         },
       },
+      {
+        icon: '/static/icons/notion.png',
+        title: 'Notion',
+        subText:
+          'Notion is an all-in-one workspace. Use our Notion integration to sync your Omnivore items to Notion.',
+        button: {
+          text: 'Settings',
+          icon: <Link size={16} weight={'bold'} />,
+          style: 'ctaWhite',
+          action: () =>
+            router.push(
+              '/settings/integrations/notion'
+            ),
+        },
+      },
       {
         icon: '/static/icons/webhooks.svg',
         title: 'Webhooks',

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

@@ -0,0 +1,97 @@
+import { styled } from '@stitches/react'
+import { Button, Checkbox, Form, Input, Switch } from 'antd'
+import 'antd/dist/antd.compact.css'
+import Image from 'next/image'
+import { useMemo } from 'react'
+import {
+  Box,
+  HStack,
+  VStack,
+} from '../../../components/elements/LayoutPrimitives'
+import { PageMetaData } from '../../../components/patterns/PageMetaData'
+import { SettingsLayout } from '../../../components/templates/SettingsLayout'
+import { useGetIntegrationsQuery } from '../../../lib/networking/queries/useGetIntegrationsQuery'
+
+// Styles
+const Header = styled(Box, {
+  color: '$utilityTextDefault',
+  fontSize: 'x-large',
+  margin: '20px',
+})
+
+export default function Notion(): JSX.Element {
+  const { integrations, revalidate } = useGetIntegrationsQuery()
+  const notion = useMemo(() => {
+    return integrations.find((i) => i.name == 'NOTION' && i.type == 'EXPORT')
+  }, [integrations])
+
+  return (
+    <>
+      <PageMetaData title="Notion" path="/integrations/notion" />
+      <SettingsLayout>
+        <VStack
+          css={{
+            margin: 'auto',
+            width: '80%',
+          }}
+        >
+          <HStack>
+            <Image
+              src="/static/icons/notion.png"
+              alt="Integration Image"
+              width={75}
+              height={75}
+            />
+            <Header>Notion integration settings</Header>
+          </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>
+
+                  <Button>Save</Button>
+                </HStack>
+
+                <Form.Item label="Notion Database Id" name="parentDatabaseId">
+                  <Input disabled />
+                </Form.Item>
+
+                <Form.Item label="Automatic Sync" name="autoSync">
+                  <Switch />
+                </Form.Item>
+
+                <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>
+          )}
+        </VStack>
+      </SettingsLayout>
+    </>
+  )
+}