Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Update To use New React Components #11

Merged
merged 2 commits into from
May 31, 2024
Merged

feat: Update To use New React Components #11

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
35f61e4
feat: update creating new Space example
bangarang Apr 26, 2024
fab5cb8
feat: adds example for re-using a space
bangarang Apr 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
148 changes: 86 additions & 62 deletions app/NewSpace/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,75 +1,99 @@
"use client";
import { ISpace, useSpace } from "@flatfile/react";
import api, { Flatfile } from "@flatfile/api";
import {
Space,
Workbook,
useEvent,
useFlatfile,
usePlugin,
} from "@flatfile/react";
import Link from "next/link";
import React, { useState } from "react";
import { workbook } from "../workbooks/workbooks";
import { recordHook } from "@flatfile/plugin-record-hook";

const Space = ({
callback,
config,
}: {
callback: () => void;
config: ISpace;
}) => {
return useSpace({
...config,
closeSpace: {
export default function NewSpace({ config }: { config: Flatfile.SpaceConfig }) {
const [success, setSuccess] = useState(false);
const { openPortal, open, closePortal } = useFlatfile();

// Can be used for debugging
// useEvent("**", (event) => {
// console.log("EVENT -> ", { event });
// });

usePlugin(
recordHook("contacts", (record) => {
const firstName = record.get("firstName");
console.log({ firstName });
record.set("lastName", "Rock");
return record;
})
);

useEvent(
"job:ready",
{ job: "workbook:submitActionFg" },
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.",
},
});
}
Comment on lines +33 to +63
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The API interaction and error handling are robust. However, consider adding more detailed error messages and handling specific error types to improve the user experience.

}
);

useEvent(
"job:outcome-acknowledged",
{
operation: "submitActionFg",
onClose: () => callback(),
status: "complete",
},
});
};
async (event) => {
// any logic related to the event needed for closing the event
console.log("Window Closed!");
// close the portal iFrame window
closePortal();
setSuccess(true);
}
);

export default function NewSpace({ config }: { config: ISpace }) {
const [showSpace, setShowSpace] = useState(false);
const [success, setSuccess] = useState(false);
const credentials = !!config.publishableKey;
return (
<div>
{credentials ? (
<>
<div>
<button
className="btn btn-primary"
onClick={() => {
setShowSpace(!showSpace);
}}
>
{showSpace === true ? "Close" : "Open and create new"} space
</button>
</div>
{showSpace && (
<div id="flatfile_iFrameContainer">
<Space
callback={() => {
setShowSpace(false);
setSuccess(true);
}}
config={config}
/>
</div>
)}
</>
) : (
<div className="alert alert-error">
<svg
xmlns="http://www.w3.org/2000/svg"
className="stroke-current shrink-0 h-6 w-6"
fill="none"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
<span>
Error! Please add your <pre>publishableKey</pre> and{" "}
<pre>environmentId</pre>
</span>
<>
<div>
<button className="btn btn-primary" onClick={openPortal}>
{open === true ? "Close" : "Open and create new"} space
</button>
</div>
)}
<div id="flatfile_iFrameContainer">
<Space config={config}>
<Workbook config={workbook} />
</Space>
</div>
</>

Comment on lines +2 to +96
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The overall structure of the component is clear and logical. Good use of hooks and API interactions. Ensure that all functionalities are covered by unit tests.

Would you like me to help with writing unit tests for this component?

{success && (
<div className="alert alert-success mt-6">
<svg
Expand Down
Loading