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

feat: useWizardApiFetch add manual cache handling logic #3480

Merged
merged 1 commit into from
Oct 18, 2024

Conversation

jaredrethman
Copy link
Collaborator

@jaredrethman jaredrethman commented Oct 17, 2024

All Submissions:

Changes proposed in this Pull Request:

useWizardApiFetch caches in 3 ways:

  • Automatically for GET requests for specific paths.
  • updateCacheKey: Useful when different requests share the same response/cache schema.
  • updateCacheMethods: Useful when requests share the same path and response/cache schema.

The problem:
There are certain scenarios where return structures do not align with the cached object. These situations require either more configuration inside useWizardApiFetch or providing an API for directly interfacing with it, this PR introduces the latter.

Additionally, changes where made to fix how paths are stored as cache keys by removing query arguments.

How to test the changes in this Pull Request:

  1. Checkout this branch and build assets git checkout origin/feat/manual-cache-logic && npm run build
  2. Open /src/wizards/newspack/views/settings/display-settings/index.tsx
  3. Update:
const { wizardApiFetch, isFetching, errorMessage } = useWizardApiFetch(
	'newspack-settings/theme-mods'
);

to

const { wizardApiFetch, isFetching, errorMessage, cache } =
	useWizardApiFetch( 'newspack-settings/theme-mods' );
const themeModsCache = cache(
	'/newspack/v1/wizard/newspack-setup-wizard/theme'
);
  1. Add below element to return statement.
<button
	onClick={ () => {
		const showAuthorBio = ! data.show_author_bio;
		setData( {
			...data,
			show_author_bio: showAuthorBio,
		} );
		themeModsCache.set( {
			theme_mods: {
				...data,
				show_author_bio: showAuthorBio,
			},
		} );
	} }
>
	{ __( 'Toggle Author Bio', 'newspack-plugin' ) }
</button>
  1. Run npm run watch|build and navigate to /wp-admin/admin.php?page=newspack-settings#/display-settings
  2. Depending on where you added the <button>, you should see below.
    Screenshot 2024-10-18 at 08 53 00
  3. Upon clicking "Toggle Author Bio" button you will see the Author Bio control toggle on/off.
  4. Navigate to different tab i.e. "Additional Brands" and then back to "Display Settings" tab and confirm the control is as you left it.

Other information:

  • Have you added an explanation of what your changes do and why you'd like us to include them?
  • Have you written new tests for your changes, as applicable?
  • Have you successfully ran tests with your changes locally?

@jaredrethman jaredrethman marked this pull request as ready for review October 18, 2024 14:12
@jaredrethman jaredrethman requested a review from a team as a code owner October 18, 2024 14:12
@jaredrethman jaredrethman added the [Status] Needs Review The issue or pull request needs to be reviewed label Oct 18, 2024
@jaredrethman jaredrethman changed the title feat: add manual cache handling logic feat: useWizardApiFetch add manual cache handling logic Oct 18, 2024
Copy link
Contributor

@dkoo dkoo left a comment

Choose a reason for hiding this comment

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

After testing the "Toggle Author Bio" button both with and without this fix, I understand why it's needed. Nice improvement!

@github-actions github-actions bot added [Status] Approved The pull request has been reviewed and is ready to merge and removed [Status] Needs Review The issue or pull request needs to be reviewed labels Oct 18, 2024
@jaredrethman jaredrethman merged commit 8e4ae6b into epic/ia Oct 18, 2024
9 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Status] Approved The pull request has been reviewed and is ready to merge
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants