-
Notifications
You must be signed in to change notification settings - Fork 87
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
Conversation
…er to ensure no overwrites when form is refetched
There was a problem hiding this 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 => { |
There was a problem hiding this comment.
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?
There was a problem hiding this comment.
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> |
There was a problem hiding this comment.
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
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
yepp
if (startPage.logo.state === FormLogoState.Custom) | ||
setCustomLogoMeta(startPage.logo) |
There was a problem hiding this comment.
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
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
sorry senpai 🙏
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
intoDesignDrawer
, which now wrapsDesignInput
. 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
Screenshots
Screen.Recording.2022-08-11.at.4.32.37.PM.mov