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.

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

fix(form-v2): refactor to avoid repopulating design store when cache is invalidated #4554

Merged
merged 2 commits into from
Aug 15, 2022

Conversation

justynoh
Copy link
Contributor

Problem

In the current implementation, design store contents is reset to the original server state upon cache invalidation. Rather, we should retain the existing design store contents.

The reason why this occurs in the current implementation is that the effect in DesignDrawerContainer is run once upon invalidation (with an empty form), and then once again once the form is refetched (thus repopulating the design store with the server data).

Closes [#4547 ]

Solution

Move the population of design store with server state data from DesignDrawerContainer into DesignDrawer, which now wraps DesignInput. Thus, when the cache is invalidated and the form is refetching, we don't even render the design drawer, which means we also don't re-run the effect to repopulate the store.

Breaking Changes

  • No - this PR is backwards compatible

Screenshots

Screen.Recording.2022-08-11.at.4.32.37.PM.mov

…er to ensure no overwrites when form is refetched
@justynoh justynoh marked this pull request as ready for review August 11, 2022 09:05
Copy link
Contributor

@karrui karrui left a comment

Choose a reason for hiding this comment

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

lgtm

export const DesignDrawer = ({
startPageData,
}: DesignDrawerProps): JSX.Element | null => {
export const DesignInput = (): JSX.Element | null => {
Copy link
Contributor

Choose a reason for hiding this comment

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

nit: should this be extracted to its own component?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

we could but i don't think it's really necessary, DesignInput isn't reusable in any way (unlike, for instance, EditFieldContainer which can take in various Edit<X> as children)

@@ -183,6 +191,203 @@ export const DesignDrawer = ({

if (!startPageData) return null

return (
<DrawerContentContainer>
Copy link
Contributor

Choose a reason for hiding this comment

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

i assume this is a pure movement of code and has no changes from the previous implementation

Copy link
Contributor Author

Choose a reason for hiding this comment

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

yepp

Comment on lines 378 to 379
if (startPage.logo.state === FormLogoState.Custom)
setCustomLogoMeta(startPage.logo)
Copy link
Contributor

Choose a reason for hiding this comment

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

nit: can multiline conditionals be wrapped in braces for consistency in the codebase plsssssss

Copy link
Contributor Author

Choose a reason for hiding this comment

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

sorry senpai 🙏

@justynoh justynoh merged commit 1f09b52 into form-v2/develop Aug 15, 2022
@justynoh justynoh deleted the form-v2/fix/start-page-preview branch August 15, 2022 06:43
@justynoh justynoh mentioned this pull request Oct 5, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants