import { FlatfileProvider, Sheet, Space, Workbook, DocumentConfig } from "@flatfile/react";
import { useFlatfile, useListener, usePlugin, useEvent } from "@flatfile/react";
import { recordHook } from "@flatfile/plugin-record-hook";
import { workbook } from "./workbook";
import { listener as importedListener } from './listener'
const FFApp = () => {
const { open, openPortal, closePortal } = useFlatfile()
const [lastName, setLastName] = useState('Rock')
const togglePortal = () => {
open ? closePortal() : openPortal()
}
useListener(
(listener) => {
listener.on('**', (event) => {
//note: listening to all events with a wildcard can be used while testing but is not
//recommended for production, as it will capture all events and may cause performance issues
console.log('initialListener Event => ', event.topic)
// Handle the workbook:deleted event
})
importedListener
},
[lastName]
)
// import file directly
useListener(importedListener, [])
usePlugin(
recordHook('contacts', (record, event) => {
console.log('recordHook', { event })
record.set('lastName', label)
return record
}),
[lastName]
)
useEvent('workbook:created', (event) => {
console.log('workbook:created', { event })
})
useEvent('*:created', (event) => {
console.log({ topic: event.topic })
})
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)
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}>
<div className={styles.description}>
<button onClick={togglePortal} >
{ open ? 'OPEN' : 'CLOSE' } PORTAL
</button>
<button onClick={() => setLabel('blue')}>blue listener</button>
<button onClick={() => setLabel('green')}>green listener</button>
</div>
<Space
config={{
metadata: {
sidebarConfig: {
showSidebar: true,
},
},
}}
>
<Document config={document} />
<Workbook
config={workbook}
onSubmit={(sheet) => {
console.log("onSubmit", { sheet });
}}
>
<Sheet
config={sheet}
onRecordHook={(record) => {
record.set("email", "TEST SHEET RECORD");
return record;
}}
/>
<Sheet config={{ ...sheet, name: "Contacts 2", slug: "contacts2" }} />
</Workbook>
</Space>
</div>
)
}
const App = () => {
return (
<FlatfileProvider
publishableKey={PUBLISHABLE_KEY}
config={{
mountElement,
exitText
exitTitle,
exitPrimaryButtonText
exitSecondaryButtonText,
displayAsModal: true,
}}
>
<FFApp />
</FlatfileProvider>
)
}
export default App
