feat: update packages and reorganize

FlatFilers · Apr 26, 2024 · ddf3d8b · ddf3d8b
1 parent 4fa5da7
commit ddf3d8b
Show file tree

Hide file tree

Showing 8 changed files with 2,461 additions and 2,280 deletions.
diff --git a/app/NewSpace/index.tsx b/app/NewSpace/index.tsx
@@ -1,29 +1,28 @@
-'use client';
-import { ISpace, useSpace } from '@flatfile/react';
-import Link from 'next/link';
-import React, { Dispatch, SetStateAction, useState } from 'react';
+"use client";
+import { ISpace, useSpace } from "@flatfile/react";
+import Link from "next/link";
+import React, { useState } from "react";
 
 const Space = ({
   callback,
-  config
+  config,
 }: {
   callback: () => void;
   config: ISpace;
 }) => {
-  const space = useSpace({
+  return useSpace({
     ...config,
     closeSpace: {
-      operation: 'contacts:submit',
-      onClose: () => callback()
-    }
+      operation: "submitActionFg",
+      onClose: () => callback(),
+    },
   });
-  return space;
 };
 
 export default function NewSpace({ config }: { config: ISpace }) {
   const [showSpace, setShowSpace] = useState(false);
   const [success, setSuccess] = useState(false);
-  const credentials = !!config.publishableKey && !!config.environmentId;
+  const credentials = !!config.publishableKey;
   return (
     <div>
       {credentials ? (
@@ -35,7 +34,7 @@ export default function NewSpace({ config }: { config: ISpace }) {
                 setShowSpace(!showSpace);
               }}
             >
-              {showSpace === true ? 'Close' : 'Open and create new'} space
+              {showSpace === true ? "Close" : "Open and create new"} space
             </button>
           </div>
           {showSpace && (
@@ -66,7 +65,7 @@ export default function NewSpace({ config }: { config: ISpace }) {
             />
           </svg>
           <span>
-            Error! Please add your <pre>publishableKey</pre> and{' '}
+            Error! Please add your <pre>publishableKey</pre> and{" "}
             <pre>environmentId</pre>
           </span>
         </div>
@@ -87,7 +86,7 @@ export default function NewSpace({ config }: { config: ISpace }) {
             />
           </svg>
           <span>
-            Great Success! Now you might want to try out reusing a space,{' '}
+            Great Success! Now you might want to try out reusing a space,{" "}
             <Link href="/reused-space">check out the next example here.</Link>
           </span>
         </div>

diff --git a/app/ReuseSpace/index.tsx b/app/ReuseSpace/index.tsx
@@ -1,10 +1,11 @@
-'use client';
-import { ISpace, useSpace } from '@flatfile/react';
-import React, { Dispatch, SetStateAction, useEffect, useState } from 'react';
+"use client";
+import { ISpace, useSpace } from "@flatfile/react";
+import React, { Dispatch, SetStateAction, useEffect, useState } from "react";
+import { listener } from "../listeners/listeners";
 
 const Space = ({
   setShowSpace,
-  config
+  config,
 }: {
   setShowSpace: Dispatch<SetStateAction<boolean>>;
   config: {
@@ -15,24 +16,24 @@ const Space = ({
 }) => {
   const spaceProps: ISpace = {
     environmentId: config.environmentId,
+    listener,
     space: {
       id: config.spaceId,
-      accessToken: config.accessToken
-    }
+      accessToken: config.accessToken,
+    },
   };
-  const space = useSpace({
+  return useSpace({
     ...spaceProps,
     closeSpace: {
-      operation: 'contacts:submit',
-      onClose: () => setShowSpace(false)
-    }
+      operation: "simpleSubmitAction",
+      onClose: () => setShowSpace(false),
+    },
   });
-  return space;
 };
 
 export default function ReuseSpace({
   spaceId,
-  environmentId
+  environmentId,
 }: {
   spaceId?: string;
   environmentId?: string;
@@ -54,14 +55,14 @@ export default function ReuseSpace({
       const spaceInfo = {
         spaceId,
         accessToken: json.space.data.accessToken,
-        environmentId
+        ...(environmentId ? { environmentId } : {}),
       };
 
       setData(spaceInfo);
       setLoading(false);
     };
 
-    if (!spaceId || !environmentId) {
+    if (!spaceId) {
       setLoading(false);
       return;
     }
@@ -80,7 +81,7 @@ export default function ReuseSpace({
       </button>
     );
   }
-  if (!spaceId || !environmentId || error) {
+  if (!spaceId || error) {
     return (
       <div className="alert alert-error">
         <svg
@@ -104,7 +105,7 @@ export default function ReuseSpace({
           )}
           {error && (
             <span>
-              {error} Make sure to set the <pre>FLATFILE_API_KEY</pre> in your{' '}
+              {error} Make sure to set the <pre>FLATFILE_API_KEY</pre> in your{" "}
               <pre>.env</pre> file. <br />
               You can find that in your Flatfile Dashboard under Developer
               Settings.
@@ -124,7 +125,7 @@ export default function ReuseSpace({
             setShowSpace(!showSpace);
           }}
         >
-          {showSpace === true ? 'Close' : 'Open existing'} space
+          {showSpace === true ? "Close" : "Open existing"} space
         </button>
       </div>
       {showSpace && (

diff --git a/app/listeners/listeners.ts b/app/listeners/listeners.ts
@@ -1,51 +1,82 @@
-import api from '@flatfile/api';
-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((listener) => {
-  listener.on('**', (event) => {
-    console.log(`Received event: ${event.topic}`);
+  listener.on("**", (event) => {
+    console.log(`Received event: ${event.topic}`, { event });
   });
 
   listener.use(
-    recordHook('contacts', (record) => {
-      const firstName = record.get('firstName');
+    recordHook("contacts", (record) => {
+      const firstName = record.get("firstName");
       console.log({ firstName });
-      record.set('lastName', 'Rock');
+      record.set("lastName", "Rock");
       return record;
     })
   );
 
-  listener.filter({ job: 'workbook:submitActionFg' }, (configure) => {
-    configure.on('job:ready', async ({ context: { jobId } }) => {
+  listener.filter({ job: "workbook:submitActionFg" }, (configure) => {
+    configure.on("job:ready", async ({ context: { jobId } }) => {
       try {
         await api.jobs.ack(jobId, {
-          info: 'Getting started.',
-          progress: 10
+          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');
+        console.log("Make changes here when an action is clicked");
 
         await api.jobs.complete(jobId, {
           outcome: {
             acknowledge: true,
-            message: 'This is now complete.',
+            message: "This is now complete.",
             next: {
-              type: 'wait'
-            }
-          }
+              type: "wait",
+            },
+          },
         });
       } catch (error: any) {
-        console.error('Error:', error.stack);
+        console.error("Error:", error.stack);
 
         await api.jobs.fail(jobId, {
           outcome: {
-            message: 'This job encountered an error.'
-          }
+            message: "This job encountered an error.",
+          },
+        });
+      }
+    });
+  });
+  listener.filter({ job: "workbook:simpleSubmitAction" }, (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.",
+          },
         });
       }
     });