From 4669612accb50211b5bfa81899aef7133d54defa Mon Sep 17 00:00:00 2001 From: Daniel Bachhuber Date: Wed, 3 Jan 2024 05:52:50 -0800 Subject: [PATCH] Refactor to use React Query in the command palette --- client/data/hosting/use-cache.ts | 59 ++++++++-------- client/my-sites/hosting/cache-card/index.js | 15 ++-- .../my-sites/hosting/cache-card/test/index.js | 2 +- .../components/wpcom-smp-commands.tsx | 68 +++++++------------ 4 files changed, 66 insertions(+), 78 deletions(-) diff --git a/client/data/hosting/use-cache.ts b/client/data/hosting/use-cache.ts index e5fbaa0222c6d6..ff0424604bd4aa 100644 --- a/client/data/hosting/use-cache.ts +++ b/client/data/hosting/use-cache.ts @@ -13,10 +13,15 @@ export const USE_EDGE_CACHE_QUERY_KEY = 'edge-cache-key'; export const TOGGLE_EDGE_CACHE_MUTATION_KEY = 'set-edge-site-mutation-key'; export const CLEAR_EDGE_CACHE_MUTATION_KEY = 'clear-edge-site-mutation-key'; -interface MutationVariables { +interface ClearEdgeCacheMutationVariables { name: string; } +interface SetEdgeCacheMutationVariables { + siteId: number; + active: boolean; +} + interface MutationResponse { message: string; } @@ -35,17 +40,6 @@ export const getEdgeCacheStatus = async ( siteId: number ) => { return response; }; -export const setEdgeCache = async ( siteId: number, newStatus: boolean ) => { - const response = await wp.req.post( { - path: `/sites/${ siteId }/hosting/edge-cache/active`, - apiNamespace: 'wpcom/v2', - body: { - active: newStatus, - }, - } ); - return response; -}; - export const purgeEdgeCache = async ( siteId: number ) => { return await wp.req.post( { path: `/sites/${ siteId }/hosting/edge-cache/purge`, @@ -73,16 +67,20 @@ interface MutationError { } export const useSetEdgeCacheMutation = ( - siteId: number, - options: UseMutationOptions< boolean, MutationError, boolean > = {} + options: UseMutationOptions< boolean, MutationError, SetEdgeCacheMutationVariables > = {} ) => { const queryClient = useQueryClient(); - const mutation = useMutation< boolean, MutationError, boolean >( { - mutationFn: async ( active ) => { - return setEdgeCache( siteId, active ); + const mutation = useMutation< boolean, MutationError, SetEdgeCacheMutationVariables >( { + mutationFn: async ( { active, siteId } ) => { + return await wp.req.post( { + path: `/sites/${ siteId }/hosting/edge-cache/active`, + apiNamespace: 'wpcom/v2', + body: { + active, + }, + } ); }, - mutationKey: [ TOGGLE_EDGE_CACHE_MUTATION_KEY, siteId ], - onMutate: async ( active ) => { + onMutate: async ( { active, siteId } ) => { await queryClient.cancelQueries( { queryKey: [ USE_EDGE_CACHE_QUERY_KEY, siteId ], } ); @@ -90,11 +88,12 @@ export const useSetEdgeCacheMutation = ( queryClient.setQueryData( [ USE_EDGE_CACHE_QUERY_KEY, siteId ], active ); return previousData; }, - onError( _err, _newActive, prevValue ) { + onError( _err, { siteId }, prevValue ) { // Revert to previous settings on failure queryClient.setQueryData( [ USE_EDGE_CACHE_QUERY_KEY, siteId ], Boolean( prevValue ) ); }, onSettled: ( ...args ) => { + const { siteId } = args[ 2 ]; // Refetch settings regardless queryClient.invalidateQueries( { queryKey: [ USE_EDGE_CACHE_QUERY_KEY, siteId ], @@ -103,21 +102,23 @@ export const useSetEdgeCacheMutation = ( }, } ); - const { mutate } = mutation; - // isMutating is returning a number. Greater than 0 means we have some pending mutations for - // the provided key. This is preserved across different pages, while isLoading it's not. - // TODO: Remove that when react-query v5 is out. They seem to have added isPending variable for this. - const isLoading = - useIsMutating( { mutationKey: [ TOGGLE_EDGE_CACHE_MUTATION_KEY, siteId ] } ) > 0; + const { mutate, ...rest } = mutation; - const setEdgeCacheCallback = useCallback( mutate, [ mutate ] ); + const setEdgeCache = useCallback( + ( siteId: number, active: boolean ) => mutate( { siteId, active } ), + [ mutate ] + ); - return { setEdgeCache: setEdgeCacheCallback, isLoading }; + return { setEdgeCache, ...rest }; }; export const useClearEdgeCacheMutation = ( siteId: number, - options: UseMutationOptions< MutationResponse, MutationError, MutationVariables > = {} + options: UseMutationOptions< + MutationResponse, + MutationError, + ClearEdgeCacheMutationVariables + > = {} ) => { const mutation = useMutation( { mutationFn: async () => purgeEdgeCache( siteId ), diff --git a/client/my-sites/hosting/cache-card/index.js b/client/my-sites/hosting/cache-card/index.js index 6c3ed35b2101a7..98232017e37474 100644 --- a/client/my-sites/hosting/cache-card/index.js +++ b/client/my-sites/hosting/cache-card/index.js @@ -81,9 +81,9 @@ export const CacheCard = ( { const isEdgeCacheEligible = ! isPrivate && ! isComingSoon; - const { setEdgeCache, isLoading: toggleEdgeCacheLoading } = useSetEdgeCacheMutation( siteId, { + const { setEdgeCache, isLoading: isEdgeCacheMutating } = useSetEdgeCacheMutation( { onSettled: ( ...args ) => { - const active = args[ 2 ]; + const active = args[ 2 ].active; recordTracksEvent( active ? 'calypso_hosting_configuration_edge_cache_enable' @@ -130,7 +130,7 @@ export const CacheCard = ( { isClearingCache || shouldRateLimitCacheClear || getEdgeCacheLoading || - toggleEdgeCacheLoading + isEdgeCacheMutating } > { translate( 'Clear cache' ) } @@ -182,7 +182,12 @@ export const CacheCard = ( { <> { translate( 'Global edge cache' ) } { dispatch( @@ -194,7 +199,7 @@ export const CacheCard = ( { { duration: 5000, id: EDGE_CACHE_ENABLE_DISABLE_NOTICE_ID } ) ); - setEdgeCache( active ); + setEdgeCache( siteId, active ); } } label={ edgeCacheToggleDescription } /> diff --git a/client/my-sites/hosting/cache-card/test/index.js b/client/my-sites/hosting/cache-card/test/index.js index e51ba5454d165a..99c78d7c6e85db 100644 --- a/client/my-sites/hosting/cache-card/test/index.js +++ b/client/my-sites/hosting/cache-card/test/index.js @@ -108,7 +108,7 @@ describe( 'CacheCard component', () => { expect( useSetEdgeCacheMutation().setEdgeCache ).not.toHaveBeenCalled(); expect( screen.getByRole( 'checkbox' ) ).toBeVisible(); screen.getByRole( 'checkbox' ).click(); - expect( useSetEdgeCacheMutation().setEdgeCache ).toHaveBeenCalledWith( true ); + expect( useSetEdgeCacheMutation().setEdgeCache ).toHaveBeenCalledWith( 1, true ); } ); it( 'displays rate limit message when shouldRateLimitCacheClear prop is true', () => { useEdgeCacheQuery.mockReturnValue( { data: false, isLoading: false } ); diff --git a/client/sites-dashboard/components/wpcom-smp-commands.tsx b/client/sites-dashboard/components/wpcom-smp-commands.tsx index 2fbd018082a398..eda606215a4b10 100644 --- a/client/sites-dashboard/components/wpcom-smp-commands.tsx +++ b/client/sites-dashboard/components/wpcom-smp-commands.tsx @@ -1,6 +1,5 @@ import { Gridicon, JetpackLogo } from '@automattic/components'; import { HELP_CENTER_STORE } from '@automattic/help-center/src/stores'; -import { useQueryClient } from '@tanstack/react-query'; import { useDispatch as useDataStoreDispatch } from '@wordpress/data'; import { alignJustify as acitvityLogIcon, @@ -37,9 +36,8 @@ import WooCommerceLogo from 'calypso/components/woocommerce-logo'; import { EDGE_CACHE_ENABLE_DISABLE_NOTICE_ID, getEdgeCacheStatus, - setEdgeCache, + useSetEdgeCacheMutation, purgeEdgeCache, - USE_EDGE_CACHE_QUERY_KEY, } from 'calypso/data/hosting/use-cache'; import { SiteExcerptData } from 'calypso/data/sites/site-excerpt-types'; import { navigate } from 'calypso/lib/navigate'; @@ -94,9 +92,21 @@ export const useCommandsArrayWpcom = ( { }; const commandNavigation = useCommandNavigation(); - const queryClient = useQueryClient(); - const dispatch = useDispatch(); + + const { setEdgeCache } = useSetEdgeCacheMutation( { + onSettled: ( ...args ) => { + const { active } = args[ 2 ]; + dispatch( + createNotice( + 'is-success', + active ? __( 'Edge cache enabled.' ) : __( 'Edge cache disabled.' ), + { duration: 5000, id: EDGE_CACHE_ENABLE_DISABLE_NOTICE_ID } + ) + ); + }, + } ); + const displayNotice = ( message: string, noticeType: NoticeStatus = 'is-success', @@ -242,25 +252,11 @@ export const useCommandsArrayWpcom = ( { return; } - const { removeNotice: removeLoadingNotice } = displayNotice( - __( 'Enabling edge cache…' ), - 'is-plain', - 5000, - { id: EDGE_CACHE_ENABLE_DISABLE_NOTICE_ID } - ); - try { - await setEdgeCache( siteId, true ); - queryClient.setQueryData( [ USE_EDGE_CACHE_QUERY_KEY, siteId ], true ); - removeLoadingNotice(); - displayNotice( __( 'Edge cache enabled.' ), 'is-success', 5000, { - id: EDGE_CACHE_ENABLE_DISABLE_NOTICE_ID, - } ); - } catch ( error ) { - removeLoadingNotice(); - displayNotice( __( 'Failed to enable edge cache.' ), 'is-error', 5000, { - id: EDGE_CACHE_ENABLE_DISABLE_NOTICE_ID, - } ); - } + displayNotice( __( 'Enabling edge cache…' ), 'is-plain', 5000, { + id: EDGE_CACHE_ENABLE_DISABLE_NOTICE_ID, + } ); + + setEdgeCache( siteId, true ); }; const disableEdgeCache = async ( siteId: number ) => { @@ -273,25 +269,11 @@ export const useCommandsArrayWpcom = ( { return; } - const { removeNotice: removeLoadingNotice } = displayNotice( - __( 'Disabling edge cache…' ), - 'is-plain', - 5000, - { id: EDGE_CACHE_ENABLE_DISABLE_NOTICE_ID } - ); - try { - await setEdgeCache( siteId, false ); - queryClient.setQueryData( [ USE_EDGE_CACHE_QUERY_KEY, siteId ], false ); - removeLoadingNotice(); - displayNotice( __( 'Edge cache disabled.' ), 'is-success', 5000, { - id: EDGE_CACHE_ENABLE_DISABLE_NOTICE_ID, - } ); - } catch ( error ) { - removeLoadingNotice(); - displayNotice( __( 'Failed to disable edge cache.' ), 'is-error', 5000, { - id: EDGE_CACHE_ENABLE_DISABLE_NOTICE_ID, - } ); - } + displayNotice( __( 'Disablingq edge cache…' ), 'is-plain', 5000, { + id: EDGE_CACHE_ENABLE_DISABLE_NOTICE_ID, + } ); + + setEdgeCache( siteId, false ); }; const { openPhpMyAdmin } = useOpenPhpMyAdmin();