From 0ac480092048805a1cb280a4f894f5eeda1101c1 Mon Sep 17 00:00:00 2001
From: Hongbo Wu <hongbo@omnivore.app>
Date: Thu, 21 Mar 2024 11:45:48 +0800
Subject: [PATCH] add export to notion button

---
 .../mutations/exportToIntegrationMutation.ts  |  43 ++++++
 .../queries/useGetIntegrationQuery.tsx        |  33 ++--
 .../pages/settings/integrations/notion.tsx    | 141 +++++++++---------
 3 files changed, 126 insertions(+), 91 deletions(-)
 create mode 100644 packages/web/lib/networking/mutations/exportToIntegrationMutation.ts

diff --git a/packages/web/lib/networking/mutations/exportToIntegrationMutation.ts b/packages/web/lib/networking/mutations/exportToIntegrationMutation.ts
new file mode 100644
index 000000000..23eca8900
--- /dev/null
+++ b/packages/web/lib/networking/mutations/exportToIntegrationMutation.ts
@@ -0,0 +1,43 @@
+import { gqlFetcher } from '../networkHelpers'
+
+export interface Task {
+  id: string
+  state: string
+  createdAt: Date
+  name: string
+  runningTime: number
+  progress: number
+  failedReason?: string
+}
+
+interface ExportToIntegrationDataResponseData {
+  exportToIntegration: {
+    Task: Task
+    errorCodes?: string[]
+  }
+}
+
+export async function exportToIntegrationMutation(integrationId: string) {
+  const mutation = `
+    mutation ExportToIntegration($integrationId: ID!) {
+      exportToIntegration(integrationId:$integrationId) {
+        ... on ExportToIntegrationError {
+          errorCodes
+        }
+        ... on ExportToIntegrationSuccess {
+          Task {
+            id
+          }
+        }
+      }
+    }`
+
+  const data = await gqlFetcher(mutation, { integrationId })
+  const output = data as ExportToIntegrationDataResponseData
+  const error = output.exportToIntegration.errorCodes?.find(() => true)
+  if (error) {
+    throw error
+  }
+
+  return output.exportToIntegration.Task
+}
diff --git a/packages/web/lib/networking/queries/useGetIntegrationQuery.tsx b/packages/web/lib/networking/queries/useGetIntegrationQuery.tsx
index ee16f5097..3c11bc6b9 100644
--- a/packages/web/lib/networking/queries/useGetIntegrationQuery.tsx
+++ b/packages/web/lib/networking/queries/useGetIntegrationQuery.tsx
@@ -5,16 +5,15 @@ import { Integration } from './useGetIntegrationsQuery'
 
 interface IntegrationQueryResponse {
   isValidating: boolean
-  integration: Integration | null
+  integration: Integration
   revalidate: () => void
 }
 
 interface IntegrationQueryResponseData {
-  integration: IntegrationData
-}
-
-interface IntegrationData {
-  integration: unknown
+  integration: {
+    integration: Integration
+    errorCodes?: string[]
+  }
 }
 
 export function useGetIntegrationQuery(name: string): IntegrationQueryResponse {
@@ -42,25 +41,15 @@ export function useGetIntegrationQuery(name: string): IntegrationQueryResponse {
   `
 
   const { data, mutate, isValidating } = useSWR(query, makeGqlFetcher({ name }))
-  try {
-    if (data) {
-      const result = data as IntegrationQueryResponseData
-      const integration = result.integration.integration as Integration
-      return {
-        isValidating,
-        integration,
-        revalidate: () => {
-          mutate()
-        },
-      }
-    }
-  } catch (error) {
-    console.log('error', error)
+  const result = data as IntegrationQueryResponseData
+  const error = result.integration.errorCodes?.find(() => true)
+  if (error) {
+    throw error
   }
 
   return {
-    isValidating: false,
-    integration: null,
+    isValidating,
+    integration: result.integration.integration,
     revalidate: () => {
       mutate()
     },
diff --git a/packages/web/pages/settings/integrations/notion.tsx b/packages/web/pages/settings/integrations/notion.tsx
index 19a878369..a431e907d 100644
--- a/packages/web/pages/settings/integrations/notion.tsx
+++ b/packages/web/pages/settings/integrations/notion.tsx
@@ -19,6 +19,7 @@ import { Beta } from '../../../components/templates/Beta'
 import { Header } from '../../../components/templates/settings/SettingsTable'
 import { SettingsLayout } from '../../../components/templates/SettingsLayout'
 import { deleteIntegrationMutation } from '../../../lib/networking/mutations/deleteIntegrationMutation'
+import { exportToIntegrationMutation } from '../../../lib/networking/mutations/exportToIntegrationMutation'
 import { setIntegrationMutation } from '../../../lib/networking/mutations/setIntegrationMutation'
 import { useGetIntegrationQuery } from '../../../lib/networking/queries/useGetIntegrationQuery'
 import { applyStoredTheme } from '../../../lib/themeUpdater'
@@ -42,18 +43,14 @@ export default function Notion(): JSX.Element {
 
   useEffect(() => {
     form.setFieldsValue({
-      parentPageId: notion?.settings?.parentPageId,
-      parentDatabaseId: notion?.settings?.parentDatabaseId,
-      enabled: notion?.enabled,
-      properties: notion?.settings?.properties,
+      parentPageId: notion.settings?.parentPageId,
+      parentDatabaseId: notion.settings?.parentDatabaseId,
+      enabled: notion.enabled,
+      properties: notion.settings?.properties,
     })
   }, [form, notion])
 
   const deleteNotion = async () => {
-    if (!notion) {
-      throw new Error('Notion integration not found')
-    }
-
     await deleteIntegrationMutation(notion.id)
     showSuccessToast('Notion integration disconnected successfully.')
 
@@ -62,10 +59,6 @@ export default function Notion(): JSX.Element {
   }
 
   const updateNotion = async (values: FieldType) => {
-    if (!notion) {
-      throw new Error('Notion integration not found')
-    }
-
     await setIntegrationMutation({
       id: notion.id,
       name: notion.name,
@@ -97,6 +90,16 @@ export default function Notion(): JSX.Element {
     form.setFieldsValue({ properties: value.map((v) => v.toString()) })
   }
 
+  const exportToNotion = async () => {
+    try {
+      const task = await exportToIntegrationMutation(notion.id)
+      console.log('task', task)
+      showSuccessToast('Exporting to Notion...')
+    } catch (error) {
+      messageApi.error('There was an error exporting to Notion.')
+    }
+  }
+
   return (
     <>
       {contextHolder}
@@ -131,67 +134,67 @@ export default function Notion(): JSX.Element {
             <Beta />
           </HStack>
 
-          {notion && (
-            <div style={{ width: '100%', marginTop: '40px' }}>
-              <Form
-                labelCol={{ span: 6 }}
-                wrapperCol={{ span: 8 }}
-                labelAlign="left"
-                form={form}
-                onFinish={onFinish}
-                onFinishFailed={onFinishFailed}
-              >
-                <Form.Item<FieldType>
-                  label="Notion Page Id"
-                  name="parentPageId"
-                  rules={[
-                    {
-                      required: true,
-                      message: 'Please input your Notion Page Id!',
-                    },
-                  ]}
-                >
-                  <Input />
-                </Form.Item>
+          <Form
+            labelCol={{ span: 6 }}
+            wrapperCol={{ span: 8 }}
+            labelAlign="left"
+            form={form}
+            onFinish={onFinish}
+            onFinishFailed={onFinishFailed}
+          >
+            <Form.Item<FieldType>
+              label="Notion Page Id"
+              name="parentPageId"
+              rules={[
+                {
+                  required: true,
+                  message: 'Please input your Notion Page Id!',
+                },
+              ]}
+            >
+              <Input />
+            </Form.Item>
 
-                <Form.Item<FieldType>
-                  label="Notion Database Id"
-                  name="parentDatabaseId"
-                  hidden
-                >
-                  <Input disabled />
-                </Form.Item>
+            <Form.Item<FieldType>
+              label="Notion Database Id"
+              name="parentDatabaseId"
+              hidden
+            >
+              <Input disabled />
+            </Form.Item>
 
-                <Form.Item<FieldType>
-                  label="Automatic Sync"
-                  name="enabled"
-                  valuePropName="checked"
-                >
-                  <Switch />
-                </Form.Item>
+            <Form.Item<FieldType>
+              label="Automatic Sync"
+              name="enabled"
+              valuePropName="checked"
+            >
+              <Switch />
+            </Form.Item>
 
-                <Form.Item<FieldType>
-                  label="Properties to Export"
-                  name="properties"
-                >
-                  <Checkbox.Group onChange={onDataChange}>
-                    <Checkbox value="highlights">Highlights</Checkbox>
-                  </Checkbox.Group>
-                </Form.Item>
+            <Form.Item<FieldType>
+              label="Properties to Export"
+              name="properties"
+            >
+              <Checkbox.Group onChange={onDataChange}>
+                <Checkbox value="highlights">Highlights</Checkbox>
+              </Checkbox.Group>
+            </Form.Item>
 
-                <Form.Item>
-                  <Space>
-                    <Button type="primary" htmlType="submit">
-                      Save
-                    </Button>
-                    <Button type="primary" danger onClick={deleteNotion}>
-                      Disconnect
-                    </Button>
-                  </Space>
-                </Form.Item>
-              </Form>
-            </div>
-          )}
+            <Form.Item>
+              <Space>
+                <Button type="primary" htmlType="submit">
+                  Save
+                </Button>
+                <Button type="primary" danger onClick={deleteNotion}>
+                  Disconnect
+                </Button>
+              </Space>
+            </Form.Item>
+          </Form>
+
+          <Button type="primary" onClick={exportToNotion}>
+            Export most recent items to Notion
+          </Button>
         </VStack>
       </SettingsLayout>
     </>