From da48813fd9ddb3bc3e06149be0aa3a4f9c6b2452 Mon Sep 17 00:00:00 2001 From: Alex Rock Date: Wed, 17 Apr 2024 09:00:46 -0600 Subject: [PATCH] feat: set acknowledge: true on Submit Action Job (#94) --- .changeset/strong-adults-deny.md | 5 ++ apps/react/app/App.tsx | 66 +++++++--------------- packages/react/src/components/Sheet.tsx | 51 ++--------------- packages/react/src/components/Workbook.tsx | 45 ++------------- packages/react/src/utils/constants.ts | 51 ++++++++++++++++- 5 files changed, 85 insertions(+), 133 deletions(-) create mode 100644 .changeset/strong-adults-deny.md diff --git a/.changeset/strong-adults-deny.md b/.changeset/strong-adults-deny.md new file mode 100644 index 00000000..b644be46 --- /dev/null +++ b/.changeset/strong-adults-deny.md @@ -0,0 +1,5 @@ +--- +'@flatfile/react': patch +--- + +Updates onSubmit action handlers to add acknowledge: true to the job diff --git a/apps/react/app/App.tsx b/apps/react/app/App.tsx index b597e025..a6403bd7 100644 --- a/apps/react/app/App.tsx +++ b/apps/react/app/App.tsx @@ -11,14 +11,10 @@ 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() @@ -26,9 +22,12 @@ const App = () => { 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 (
@@ -123,7 +96,10 @@ const App = () => { > { console.log('on Workbook Submit ', { sheet }) }} diff --git a/packages/react/src/components/Sheet.tsx b/packages/react/src/components/Sheet.tsx index 0f12045e..42bfc73c 100644 --- a/packages/react/src/components/Sheet.tsx +++ b/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 <> diff --git a/packages/react/src/components/Workbook.tsx b/packages/react/src/components/Workbook.tsx index f268351b..8d075f96 100644 --- a/packages/react/src/components/Workbook.tsx +++ b/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 = ( 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) ) } diff --git a/packages/react/src/utils/constants.ts b/packages/react/src/utils/constants.ts index 8ea9d74a..fce2b643 100644 --- a/packages/react/src/utils/constants.ts +++ b/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) + } + } +}