feat: cleanup and add tests #82

bangarang · 2024-04-09T04:01:31Z

Adds a first pass at tests for all new Components.
Adds test for useEvent hook
Cleans up a lot of types and fixes some bugs

coderabbitai · 2024-04-09T04:26:28Z

Walkthrough

This update introduces a series of enhancements and refinements across the React application and its utility packages, focusing on event handling, component props, error handling, and testing improvements. The changes aim to improve code readability, maintainability, and the overall structure of event and space management within the application, aligning with best practices and facilitating easier future development.

Changes

Files	Change Summary
`apps/react/app/App.tsx` `apps/react/app/page.tsx`	Adjusted event handling and listener usage; added `preload: true` option.
`packages/embedded-utils/package.json`	Updated `@flatfile/listener` version.
`packages/embedded-utils/src/types/Space.ts` `packages/listener/src/events/event.handler.ts`	Updated function return type; modified `eventPayload` assignment.
`packages/react/src/components/Document.tsx` `packages/react/src/components/Workbook.tsx` `packages/react/src/components/Sheet.tsx` `packages/react/src/components/Space.tsx`	Refactored props with new types; improved logic and error handling.
`packages/react/src/components/FlatfileContext.tsx` `packages/react/src/components/FlatfileProvider.tsx`	Updated `createSpace` property; simplified type declaration and logic.
`packages/react/src/components/_tests_/...` `packages/react/src/hooks/_tests_/...` `packages/react/src/utils/_tests_/...`	Introduced and updated tests for components and hooks.
`packages/react/src/components/legacy/...` `packages/react/src/hooks/legacy/...`	Updated import paths for `DefaultError`.
`packages/react/src/hooks/useEvent.ts` `packages/react/src/hooks/useFlatfile.ts` `packages/react/src/hooks/useListener.ts` `packages/react/src/hooks/usePlugin.ts`	Updated hook functionalities and dependencies.
`packages/react/src/utils/initializeSpace.tsx` `packages/react/src/utils/useEffectDebugger.ts` `packages/react/src/utils/useDeepCompareEffect.ts`	Adjusted `initializeSpace` function; introduced `useEffectDebugger`.
`packages/vue/src/components/SpaceC.vue`	Removed `Flatfile` import, affecting component functionality.

Possibly related issues

add reusable spaces to create-react-app example create-flatfile-react#9: The enhancements to component props, event handling, and the introduction of tests could potentially address the objectives of improving code readability, maintainability, and demonstrating the effective use of spaces. This PR's focus on structured event and space management aligns with the issue's goals for enhancing the create-react-app example with reusable spaces.

Recent Review Details

Configuration used: CodeRabbit UI

Commits

Files that changed from the base of the PR and between a9c296e and 02ce541.

Files selected for processing (1)

packages/react/src/hooks/useFlatfile.ts (2 hunks)

Additional comments not posted (2)

packages/react/src/hooks/useFlatfile.ts (2)
71-71: Consider checking for publishableKey validity more robustly.

The current condition only checks for the presence of publishableKey and absence of accessToken before attempting to create a space. It might be beneficial to also validate the format or content of publishableKey to ensure it meets expected criteria before proceeding. This can help prevent unnecessary calls or errors downstream.

68-74: > 📝 NOTE

This review was outside the diff hunks and was mapped to the diff hunk with the greatest overlap. Original lines [1-81]

Improve error handling in asynchronous operations.

Both handleCreateSpace and handleReUseSpace perform asynchronous operations without explicit error handling. Consider wrapping these operations in try-catch blocks to manage potential errors gracefully. This can improve the robustness of the hook and provide a better user experience by allowing for error reporting or fallback actions.
const handleCreateSpace = async () => {
  if (!publishableKey) {
    return
  }
  try {
    const autoConfigure = !(createSpace.workbook && createSpace.workbook.sheets)
    const { data: createdSpace } = await createSpaceInternal({
      apiUrl,
      publishableKey,
      space: { ...createSpace.space, autoConfigure },
      workbook: createSpace.workbook,
      document: createSpace.document,
    })
    setAccessToken(createdSpace.space.accessToken)
    setSessionSpace(createdSpace)
    ;(window as any).CROSSENV_FLATFILE_API_KEY = createdSpace.space.accessToken
  } catch (error) {
    // Handle error appropriately
  }
}

const handleReUseSpace = async () => {
  if (accessToken && 'id' in createSpace.space) {
    createSpace.space.accessToken = accessToken
    try {
      const { data: reUsedSpace } = await getSpace({
        space: createSpace.space,
        apiUrl,
      })
      if (reUsedSpace.accessToken) {
        ;(window as any).CROSSENV_FLATFILE_API_KEY = reUsedSpace.accessToken
        setAccessToken(reUsedSpace.accessToken)
      }
      setSessionSpace({ space: reUsedSpace })
    } catch (error) {
      // Handle error appropriately
    }
  }
}

Tips

Chat

There are 3 ways to chat with CodeRabbit:

Review comments: Directly reply to a review comment made by CodeRabbit. Example:
- I pushed a fix in commit <commit_id>.
- Generate unit testing code for this file.
- Open a follow-up GitHub issue for this discussion.
Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
- @coderabbitai generate unit testing code for this file.
- @coderabbitai modularize this function.
PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
- @coderabbitai generate interesting stats about this repository and render them as a table.
- @coderabbitai show all the console.log statements in this repository.
- @coderabbitai read src/utils.ts and generate unit testing code.
- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

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)

@coderabbitai pause to pause the reviews on a PR.
@coderabbitai resume to resume the paused reviews.
@coderabbitai review to trigger a review. This is useful when automatic reviews are disabled for the repository.
@coderabbitai resolve resolve all the CodeRabbit review comments.
@coderabbitai help to get help.

Additionally, you can add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.

CodeRabbit Configration File (`.coderabbit.yaml`)

You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
Please see the configuration documentation for more information.
If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

Visit our Documentation for detailed information on how to use CodeRabbit.
Join our Discord Community to get help, request features, and share feedback.
Follow us on X/Twitter for updates and announcements.

carlbrugger

Just a couple nits!

packages/react/src/components/Sheet.tsx

packages/react/src/components/Workbook.tsx

packages/react/src/components/_tests_/Workbook.spec.tsx

packages/react/src/hooks/usePlugin.ts

bangarang · 2024-04-09T16:22:30Z

Thanks @carlbrugger!

Co-authored-by: Carl Brugger <[email protected]>

coderabbitai

Actionable comments posted: 3

packages/react/src/utils/constants.ts

apps/react/app/App.tsx

coderabbitai

Actionable comments posted: 4

packages/react/src/components/Workbook.tsx

coderabbitai

Actionable comments posted: 2

apps/react/app/App.tsx

coderabbitai

Actionable comments posted: 1

coderabbitai · 2024-04-10T23:36:43Z

packages/react/src/hooks/useFlatfile.ts

@@ -78,7 +78,7 @@ export const useFlatfile: () => {

  const closePortal = () => {
    setOpen(false)
-    // TODO: Do we want to do any cleanup / remove the iFrame from the DOM?
+    // TODO: Do we want to do any cleanup / remove the iFrame/listener from the DOM?


Clarify the cleanup strategy in closePortal.

The TODO comment suggests a need for cleanup, specifically removing the iFrame/listener from the DOM. It's important to address this to prevent potential memory leaks or unintended behavior. If you need assistance with implementing a cleanup strategy, I can help draft a solution or open an issue to track this task.

Can you make a GH issue for this?

@bangarang, I've created a GitHub issue to address the cleanup strategy in closePortal as requested. You can find it here: GitHub Issue #83. This issue outlines the need for a cleanup strategy, specifically for removing the iFrame/listener from the DOM, to prevent potential memory leaks or unintended behavior.

Analysis chain

Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash # Create a GitHub issue for the cleanup strategy in `closePortal`. gh issue create \ --title "Implement cleanup strategy for \`closePortal\` in \`useFlatfile\` hook" \ --body "There's a TODO comment in the `useFlatfile` hook within `packages/react/src/hooks/useFlatfile.ts` suggesting the need for a cleanup strategy, specifically for removing the iFrame/listener from the DOM. This is important to prevent potential memory leaks or unintended behavior. Context: The TODO was highlighted during a review of PR https://github.com/FlatFilers/flatfile-core-libraries/pull/82, specifically in the discussion https://github.com/FlatFilers/flatfile-core-libraries/pull/82#discussion_r1560169026. The issue involves deciding on and implementing a strategy to ensure that resources are properly cleaned up when the `closePortal` function is called. This may include removing iFrames and detaching event listeners that were added during the portal's operation. This task is crucial for maintaining the integrity and performance of the application, preventing memory leaks, and ensuring that event listeners do not persist beyond their intended lifecycle. Requested by: @bangarang" \ --repo FlatFilers/flatfile-core-libraries

Length of output: 1485

bangarang added 3 commits April 8, 2024 22:01

feat: cleanup and add tests

a40b393

feat: fix some tests/paclage linking

b0d7f5e

feat: add version numbers back in

057ae60

bangarang marked this pull request as ready for review April 9, 2024 04:26

carlbrugger approved these changes Apr 9, 2024

View reviewed changes

bangarang and others added 3 commits April 10, 2024 10:44

Update packages/react/src/components/Sheet.tsx

8e15e87

Co-authored-by: Carl Brugger <[email protected]>

Update packages/react/src/components/Workbook.tsx

44a4cb9

Co-authored-by: Carl Brugger <[email protected]>

feat: bug fixes, cleanup and a much better apps/react example

4490b69

coderabbitai bot reviewed Apr 10, 2024

View reviewed changes

packages/react/src/utils/constants.ts Outdated Show resolved Hide resolved

apps/react/app/App.tsx Outdated Show resolved Hide resolved

bangarang added 2 commits April 10, 2024 13:11

feat: adds tsdocs to each of the new components

dbeab9c

feat: update action builder

bc5bbdf

coderabbitai bot reviewed Apr 10, 2024

View reviewed changes

bangarang added 2 commits April 10, 2024 15:50

feat: fix tests with action builder

b9e533a

feat: fix registering workbook recordHooks

709838f

coderabbitai bot reviewed Apr 10, 2024

View reviewed changes

apps/react/app/App.tsx Show resolved Hide resolved

apps/react/app/App.tsx Show resolved Hide resolved

bangarang added 3 commits April 10, 2024 17:14

feat: simplifyb onRecordHooks slug shorthand

07b0c0f

feat: default example to preload

a9c296e

feat: handle re-opening a portal

02ce541

coderabbitai bot reviewed Apr 10, 2024

View reviewed changes

coderabbitai bot mentioned this pull request Apr 10, 2024

Implement cleanup strategy for closePortal in useFlatfile hook #83

Open

bangarang merged commit cbd7c52 into main Apr 10, 2024
2 checks passed

bangarang deleted the feat/reactCleanup branch April 10, 2024 23:39

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: cleanup and add tests #82

feat: cleanup and add tests #82

bangarang commented Apr 9, 2024 •

edited

Loading

coderabbitai bot commented Apr 9, 2024 •

edited

Loading

Chat

CodeRabbit Commands (invoked as PR comments)

CodeRabbit Configration File (`.coderabbit.yaml`)

Documentation and Community

carlbrugger left a comment

bangarang commented Apr 9, 2024

coderabbitai bot left a comment

coderabbitai bot left a comment

coderabbitai bot left a comment

coderabbitai bot left a comment

coderabbitai bot Apr 10, 2024 •

edited

Loading

bangarang Apr 10, 2024

coderabbitai bot Apr 10, 2024

feat: cleanup and add tests #82

feat: cleanup and add tests #82

Conversation

bangarang commented Apr 9, 2024 • edited Loading

coderabbitai bot commented Apr 9, 2024 • edited Loading

Walkthrough

Changes

Possibly related issues

Chat

CodeRabbit Commands (invoked as PR comments)

CodeRabbit Configration File (.coderabbit.yaml)

Documentation and Community

carlbrugger left a comment

Choose a reason for hiding this comment

bangarang commented Apr 9, 2024

coderabbitai bot left a comment

Choose a reason for hiding this comment

coderabbitai bot left a comment

Choose a reason for hiding this comment

coderabbitai bot left a comment

Choose a reason for hiding this comment

coderabbitai bot left a comment

Choose a reason for hiding this comment

coderabbitai bot Apr 10, 2024 • edited Loading

Choose a reason for hiding this comment

bangarang Apr 10, 2024

Choose a reason for hiding this comment

coderabbitai bot Apr 10, 2024

Choose a reason for hiding this comment

bangarang commented Apr 9, 2024 •

edited

Loading

coderabbitai bot commented Apr 9, 2024 •

edited

Loading

CodeRabbit Configration File (`.coderabbit.yaml`)

coderabbitai bot Apr 10, 2024 •

edited

Loading