feat: Update To use New React Components #11
Conversation
WalkthroughThis update focuses on integrating and refining the use of Flatfile's React hooks and components across several files. It enhances event handling, introduces new configurations, and updates state management to improve functionality and code clarity in handling data imports and user interfaces. Changes
Possibly related issues
Recent Review DetailsConfiguration used: CodeRabbit UI Files selected for processing (4)
Additional comments not posted (13)
TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (invoked as PR comments)
Additionally, you can add CodeRabbit Configration File (
|
bangarang
changed the title
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
Out of diff range and nitpick comments (5)
pages/new-space/index.tsx (1)
1-1: Ensure that all necessary imports are used and remove any unused imports to keep the code clean.app/ReuseSpace/index.tsx (1)
2-11: Ensure that all imports are necessary and used within the component. Consider removing any unused imports to optimize the bundle size.pages/reuse-space/index.tsx (2)
2-4: Ensure that all imports are necessary and used within the component. Consider removing any unused imports to optimize the bundle size.
Line range hint
2-103: The overall structure of the component is clear and logical. Good use of state management and conditional rendering. Ensure that all functionalities are covered by unit tests.Would you like me to help with writing unit tests for this component?
app/NewSpace/index.tsx (1)
2-13: Ensure that all imports are necessary and used within the component. Consider removing any unused imports to optimize the bundle size.
| "job:ready", | ||
| { job: "workbook:submitActionFg" }, | ||
| async ({ context: { jobId } }) => { | ||
| try { | ||
| await api.jobs.ack(jobId, { | ||
| info: "Getting started.", | ||
| progress: 10, | ||
| }); | ||
|
|
||
| if (!spaceId) { | ||
| setLoading(false); | ||
| return; | ||
| } | ||
| // Make changes after cells in a Sheet have been updated | ||
| console.log("Make changes here when an action is clicked"); | ||
|
|
||
| fetchData(spaceId).catch((err) => { | ||
| setLoading(false); | ||
| setError(err); | ||
| }); | ||
| }, [spaceId, environmentId]); | ||
| await api.jobs.complete(jobId, { | ||
| outcome: { | ||
| acknowledge: true, | ||
| message: "This is now complete.", | ||
| next: { | ||
| type: "wait", | ||
| }, | ||
| }, | ||
| }); | ||
| } catch (error: any) { | ||
| console.error("Error:", error.stack); | ||
|
|
||
| if (loading) { | ||
| return ( | ||
| <button className="btn"> | ||
| <span className="loading loading-spinner"></span> | ||
| loading | ||
| </button> | ||
| ); | ||
| } | ||
| if (!spaceId || error) { | ||
| return ( | ||
| <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 className="flex-col"> | ||
| {(!spaceId || !environmentId) && ( | ||
| <span> | ||
| Please add a <pre>spaceId</pre> and <pre>environmentId</pre> | ||
| </span> | ||
| )} | ||
| {error && ( | ||
| <span> | ||
| {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. | ||
| </span> | ||
| )} | ||
| </span> | ||
| </div> | ||
| ); | ||
| } | ||
| await api.jobs.fail(jobId, { | ||
| outcome: { | ||
| message: "This job encountered an error.", | ||
| }, | ||
| }); | ||
| } |
There was a problem hiding this comment.
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.
| 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 className="flex-col"> | ||
| {(!spaceId || !environmentId) && ( | ||
| <span> | ||
| Please add a <pre>spaceId</pre> and <pre>environmentId</pre> | ||
| </span> | ||
| )} | ||
| {error && ( | ||
| <span> | ||
| {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. | ||
| </span> | ||
| )} | ||
| </span> | ||
| </div> | ||
| ); | ||
| } | ||
| await api.jobs.fail(jobId, { | ||
| outcome: { | ||
| message: "This job encountered an error.", | ||
| }, | ||
| }); | ||
| } | ||
| } | ||
| ); | ||
|
|
||
| useEvent( | ||
| "job:outcome-acknowledged", | ||
| { | ||
| operation: "submitActionFg", | ||
| 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(); | ||
| } | ||
| ); | ||
| return ( | ||
| <div> | ||
| <div> | ||
| <button | ||
| className="btn btn-primary" | ||
| onClick={() => { | ||
| setShowSpace(!showSpace); | ||
| open ? closePortal() : openPortal(); | ||
| }} | ||
| > | ||
| {showSpace === true ? "Close" : "Open existing"} space | ||
| {open ? "Close" : "Open existing"} space | ||
| </button> | ||
| </div> | ||
| {showSpace && ( | ||
| <div id="flatfile_iFrameContainer"> | ||
| {data?.accessToken ? ( | ||
| <Space setShowSpace={setShowSpace} config={data} /> | ||
| ) : ( | ||
| <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>No access token available.</span> | ||
| </div> | ||
| )} | ||
| </div> | ||
| )} | ||
| <div id="flatfile_iFrameContainer"> | ||
| <Space | ||
| id={spaceId} | ||
| config={{ | ||
| metadata: { | ||
| sidebarConfig: { | ||
| showSidebar: true, | ||
| }, | ||
| }, | ||
| }} | ||
| /> | ||
| </div> |
There was a problem hiding this comment.
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?
| 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.", | ||
| }, | ||
| }); | ||
| } |
There was a problem hiding this comment.
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.
| 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.", | ||
| }, | ||
| }); | ||
| } | ||
| } | ||
| ); | ||
|
|
||
| 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> | ||
| </> | ||
|
|
There was a problem hiding this comment.
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?
First pass at updating the example repo to use the latest React Components
Summary by CodeRabbit
New Features
Refactor
Documentation