feat: set acknowledge: true on Submit Action Job (#94)

.changeset/strong-adults-deny.md

@@ -0,0 +1,5 @@
+---
+'@flatfile/react': patch
+---
+
+Updates onSubmit action handlers to add acknowledge: true to the job

apps/react/app/App.tsx

@@ -11,24 +11,23 @@ import {
   Document,
   Sheet,
 } from '@flatfile/react'
-import React, { useEffect, useState } from 'react'
+import React, { useState } from 'react'
 import styles from './page.module.css'
 import { recordHook } from '@flatfile/plugin-record-hook'
 
-import api from '@flatfile/api'
-
-const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms))
-
 const App = () => {
   const { open, openPortal, closePortal } = useFlatfile()
 
   const [label, setLabel] = useState('Rock')
 
   useListener((listener) => {
     listener.on('**', (event) => {
-      console.log('FFApp useListener Event => ', event.topic)
+      console.log('FFApp useListener Event => ', {
+        topic: event.topic,
+        payload: event.payload,
+      })
     })
-  }, [])
+  })
 
   // Both of these also work:
   // FlatfileListener.create((client) => {
@@ -58,45 +57,19 @@ const App = () => {
     [label]
   )
 
-  useEvent('space:created', async ({ context: { spaceId } }) => {
-    console.log('workbook:created')
-    const { data: space } = await api.spaces.get(spaceId)
-    console.log({ space })
-  })
-
-  useEvent('job:ready', { job: 'sheet:submitActionFg' }, async (event) => {
-    const { jobId } = event.context
-    try {
-      await api.jobs.ack(jobId, {
-        info: 'Getting started.',
-        progress: 10,
-      })
-
-      // Make changes after cells in a Sheet have been updated
-      console.log('Make changes here when an action is clicked')
-      const records = await event.data
-
-      console.log({ records })
-
-      await api.jobs.complete(jobId, {
-        outcome: {
-          message: 'This is now complete.',
-        },
-      })
-
-      // Probably a bad idea to close the portal here but just as an example
-      await sleep(3000)
+  useEvent(
+    'job:outcome-acknowledged',
+    {
+      operation: 'workbookSubmitAction',
+      status: 'complete',
+    },
+    async (event) => {
+      // any logic related to the event needed for closing the event
+      console.log({ event })
+      // close the portal iFrame window
       closePortal()
-    } catch (error: any) {
-      console.error('Error:', error.stack)
-
-      await api.jobs.fail(jobId, {
-        outcome: {
-          message: 'This job encountered an error.',
-        },
-      })
     }
-  })
+  )
 
   return (
     <div className={styles.main}>
@@ -123,7 +96,10 @@ const App = () => {
       >
         <Document config={document} />
         <Workbook
-          config={{ ...workbook, name: "ALEX'S WORKBOOK" }}
+          config={{
+            ...workbook,
+            name: "ALEX'S WORKBOOK",
+          }}
           onSubmit={async (sheet) => {
             console.log('on Workbook Submit ', { sheet })
           }}

packages/react/src/components/Sheet.tsx

@@ -1,18 +1,16 @@
 import React, { useCallback } from 'react'
-import { Flatfile, FlatfileClient } from '@flatfile/api'
+import { Flatfile } from '@flatfile/api'
 import { useContext } from 'react'
 import FlatfileContext from './FlatfileContext'
 import {
   DefaultSubmitSettings,
-  JobHandler,
-  SheetHandler,
   SimpleOnboarding,
 } from '@flatfile/embedded-utils'
 import { FlatfileEvent } from '@flatfile/listener'
 import { recordHook, FlatfileRecord } from '@flatfile/plugin-record-hook'
 import { usePlugin, useEvent } from '../hooks'
 import { useDeepCompareEffect } from '../utils/useDeepCompareEffect'
-import { workbookOnSubmitAction } from '../utils/constants'
+import { OnSubmitAction, workbookOnSubmitAction } from '../utils/constants'
 
 type SheetProps = {
   config: Flatfile.SheetConfig
@@ -47,7 +45,7 @@ type SheetProps = {
  *     return {
  *       email: {
  *         value: record.email,
- *         info: 'Only @example.com emails are allowed',
+ *         info: `Only "@example.com" emails are allowed`,
  *         level: 'error'
  *       }
  *     }
@@ -102,48 +100,7 @@ export const Sheet = (props: SheetProps) => {
     useEvent(
       'job:ready',
       { job: `workbook:${workbookOnSubmitAction(config.slug).operation}` },
-      async (event) => {
-        const { jobId, spaceId, workbookId } = event.context
-        const FlatfileAPI = new FlatfileClient()
-        try {
-          await FlatfileAPI.jobs.ack(jobId, {
-            info: 'Starting job',
-            progress: 10,
-          })
-
-          const job = new JobHandler(jobId)
-          const { data: workbookSheets } = await FlatfileAPI.sheets.list({
-            workbookId,
-          })
-
-          const thisSheet = workbookSheets.find((s) => s.slug === config.slug)
-
-          if (!thisSheet) {
-            throw new Error(
-              `Failed to find sheet slug:${config.slug} in the workbook id: ${workbookId}`
-            )
-          }
-          const sheet = new SheetHandler(thisSheet.id)
-
-          if (onSubmit) {
-            await onSubmit({ job, sheet, event })
-          }
-
-          await FlatfileAPI.jobs.complete(jobId, {
-            outcome: {
-              message: 'complete',
-            },
-          })
-          if (onSubmitSettings.deleteSpaceAfterSubmit) {
-            await FlatfileAPI.spaces.archiveSpace(spaceId)
-          }
-        } catch (error: any) {
-          if (jobId) {
-            await FlatfileAPI.jobs.cancel(jobId)
-          }
-          console.log('Error:', error.stack)
-        }
-      }
+      OnSubmitAction(onSubmit, onSubmitSettings)
     )
   }
   return <></>

packages/react/src/components/Workbook.tsx

@@ -1,9 +1,9 @@
 import FlatfileContext from './FlatfileContext'
-import React, { useCallback, useContext, useEffect, useRef } from 'react'
-import { FlatfileClient, type Flatfile } from '@flatfile/api'
+import React, { useCallback, useContext } from 'react'
+import { type Flatfile } from '@flatfile/api'
 import { useDeepCompareEffect } from '../utils/useDeepCompareEffect'
 import { TRecordDataWithLinks, TPrimitive } from '@flatfile/hooks'
-import FlatfileListener, { FlatfileEvent } from '@flatfile/listener'
+import { FlatfileEvent } from '@flatfile/listener'
 import { FlatfileRecord, recordHook } from '@flatfile/plugin-record-hook'
 import { useEvent, usePlugin } from '../hooks'
 import {
@@ -12,7 +12,7 @@ import {
   SheetHandler,
   SimpleOnboarding,
 } from '@flatfile/embedded-utils'
-import { workbookOnSubmitAction } from '../utils/constants'
+import { OnSubmitAction, workbookOnSubmitAction } from '../utils/constants'
 
 export type onRecordHook<T> = (
   record: T,
@@ -123,42 +123,7 @@ export const Workbook = (props: WorkbookProps) => {
     useEvent(
       'job:ready',
       { job: `workbook:${workbookOnSubmitAction().operation}` },
-      async (event) => {
-        const { jobId, spaceId, workbookId } = event.context
-        const FlatfileAPI = new FlatfileClient()
-        try {
-          await FlatfileAPI.jobs.ack(jobId, {
-            info: 'Starting job',
-            progress: 10,
-          })
-
-          const job = new JobHandler(jobId)
-          const { data: workbookSheets } = await FlatfileAPI.sheets.list({
-            workbookId,
-          })
-
-          // this assumes we are only allowing 1 sheet here (which we've talked about doing initially)
-          const sheet = new SheetHandler(workbookSheets[0].id)
-
-          if (onSubmit) {
-            await onSubmit({ job, sheet, event })
-          }
-
-          await FlatfileAPI.jobs.complete(jobId, {
-            outcome: {
-              message: 'complete',
-            },
-          })
-          if (onSubmitSettings.deleteSpaceAfterSubmit) {
-            await FlatfileAPI.spaces.archiveSpace(spaceId)
-          }
-        } catch (error: any) {
-          if (jobId) {
-            await FlatfileAPI.jobs.cancel(jobId)
-          }
-          console.log('Error:', error.stack)
-        }
-      }
+      OnSubmitAction(onSubmit, onSubmitSettings)
     )
   }
 

packages/react/src/utils/constants.ts

@@ -1,4 +1,10 @@
-import { Flatfile } from '@flatfile/api'
+import { Flatfile, FlatfileClient } from '@flatfile/api'
+import {
+  JobHandler,
+  SheetHandler,
+  SimpleOnboarding,
+} from '@flatfile/embedded-utils'
+import { FlatfileEvent } from '@flatfile/listener'
 
 export const workbookOnSubmitAction = (sheetSlug?: string): Flatfile.Action => {
   const operation = sheetSlug
@@ -12,3 +18,46 @@ export const workbookOnSubmitAction = (sheetSlug?: string): Flatfile.Action => {
     primary: true,
   }
 }
+
+export const OnSubmitAction = (
+  onSubmit: SimpleOnboarding['onSubmit'],
+  onSubmitSettings: SimpleOnboarding['submitSettings']
+) => {
+  return async (event: FlatfileEvent) => {
+    const { jobId, spaceId, workbookId } = event.context
+    const FlatfileAPI = new FlatfileClient()
+    try {
+      await FlatfileAPI.jobs.ack(jobId, {
+        info: 'Starting job',
+        progress: 10,
+      })
+
+      const job = new JobHandler(jobId)
+      const { data: workbookSheets } = await FlatfileAPI.sheets.list({
+        workbookId,
+      })
+
+      // this assumes we are only allowing 1 sheet here (which we've talked about doing initially)
+      const sheet = new SheetHandler(workbookSheets[0].id)
+
+      if (onSubmit) {
+        await onSubmit({ job, sheet, event })
+      }
+
+      await FlatfileAPI.jobs.complete(jobId, {
+        outcome: {
+          acknowledge: true,
+          message: 'Submitting data is now complete!',
+        },
+      })
+      if (onSubmitSettings?.deleteSpaceAfterSubmit) {
+        await FlatfileAPI.spaces.archiveSpace(spaceId)
+      }
+    } catch (error: any) {
+      if (jobId) {
+        await FlatfileAPI.jobs.cancel(jobId)
+      }
+      console.log('Error:', error.stack)
+    }
+  }
+}