Merge pull request #10 from FlatFilers/feat/update-listener-deps

feat: update listener, workbook, styling and deps

app/globals/global.css

@@ -5,20 +5,25 @@
 :root {
   --ff-primary-color: #4c48ef !important;
   --ff-secondary-color: #616a7d !important;
-  --ff-text-color: #090b2b !important;
+  --ff-text-color: #fff !important;
+  --ff-background-color: #090b2b !important;
   --ff-dialog-border-radius: 4px !important;
   --ff-border-radius: 5px !important;
   --ff-bg-fade: rgba(0, 0, 0, 0.2) !important;
+  --ff-font-family: sans-serif !important;
+  --color-text: var(--ff-text-color) !important;
+  --text-font: var(--ff-font-family) !important;
+  --size-base: 16px !important;
 }
 
 html,
 body {
   height: 100%;
   margin: 0;
   padding: 0;
-  font-family: sans-serif;
-  background: var(--ff-text-color);
-  color: #fff;
+  font-family: var(--ff-font-family);
+  background: var(--ff-background-color);
+  color: var(--ff-text-color);
 }
 
 pre {
@@ -40,7 +45,7 @@ pre {
 /* .flatfile_displayAsModal .flatfile_close-button {
 } */
 .flatfile_displayAsModal .flatfile-close-button {
-  top: 30px ;
+  top: 30px;
   right: 30px;
 }
 /* The icon for the close button in top right to close modal */

app/layout.tsx

@@ -1,5 +1,5 @@
-import "./globals/global.css";
 import Menu from "./globals/Menu";
+import "./globals/global.css";
 
 export const metadata = {
   title: "Embedded Flatfile in a Next.js App",

app/new-space/page.tsx

@@ -1,6 +1,6 @@
 "use client";
-import React from "react";
 import { ISpace } from "@flatfile/react";
+import React from "react";
 import { listener } from "../../listeners/basic";
 import { workbook } from "../../workbooks/workbook";
 import NewSpaceApp from "./NewSpaceApp";

app/page.tsx

@@ -1,7 +1,6 @@
 "use client";
-import React from "react";
-import styles from "./globals/page.module.css";
 import Link from "next/link";
+import React from "react";
 
 export default function Home() {
   return (

listeners/basic.ts

@@ -1,34 +1,53 @@
-import { FlatfileListener } from '@flatfile/listener'
-import { recordHook } from '@flatfile/plugin-record-hook'
+import api from "@flatfile/api";
+import { FlatfileListener } from "@flatfile/listener";
+import { recordHook } from "@flatfile/plugin-record-hook";
 
 /**
  * Example Listener
  */
-export const listener = FlatfileListener.create((client) => {
-  // client.on('**', async (event) => {
-  //   const { spaceId } = event.context
-  //   const secret = await event.secrets('TEST', { spaceId })
-  //   console.log({ secret })
-  // })
+export const listener = FlatfileListener.create((listener) => {
+  listener.on("**", (event) => {
+    console.log(`Received event: ${event.topic}`);
+  });
 
-  // client.use(
-  //   recordHook('contacts', (record) => {
-  //     const firstName = record.get('firstName')
-  //     console.log({ firstName })
-  //     // Gettign the real types here would be nice but seems tricky
-  //     record.set('lastName', 'Rock')
-  //     return record
-  //   })
-  // )
-  client.use(
-    recordHook('TestSheet', (record) => {
-      const last_name = record.get('last_name')
-      console.log('passing through record hook', last_name)
-      if (!last_name) {
-        console.log('last_name is required')
-        record.addError('last_name', 'Name is required')
-      }
-      return record
+  listener.use(
+    recordHook("contacts", (record) => {
+      const firstName = record.get("firstName");
+      console.log({ firstName });
+      record.set("lastName", "Rock");
+      return record;
     })
-  )
-})
+  );
+
+  listener.filter({ job: "workbook:submitActionFg" }, (configure) => {
+    configure.on("job:ready", async ({ context: { jobId } }) => {
+      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");
+
+        await api.jobs.complete(jobId, {
+          outcome: {
+            acknowledge: true,
+            message: "This is now complete.",
+            next: {
+              type: "wait",
+            },
+          },
+        });
+      } catch (error: any) {
+        console.error("Error:", error.stack);
+
+        await api.jobs.fail(jobId, {
+          outcome: {
+            message: "This job encountered an error.",
+          },
+        });
+      }
+    });
+  });
+});