diff --git a/client/hosting/performance/hooks/useSitePages.ts b/client/hosting/performance/hooks/useSitePages.ts index 01f176166d415..505289209c30d 100644 --- a/client/hosting/performance/hooks/useSitePages.ts +++ b/client/hosting/performance/hooks/useSitePages.ts @@ -31,6 +31,14 @@ const getPages = ( siteId: number, query = '' ) => { } ); }; +export const getSitePagesQueryKey = ( { + siteId, + query, +}: { + siteId?: number | null; + query: string; +} ) => [ 'useSitePages', siteId, query ]; + export const useSitePages = ( { query = '' } ) => { const { __ } = useI18n(); @@ -38,7 +46,7 @@ export const useSitePages = ( { query = '' } ) => { const siteId = site?.ID; const { data } = useQuery( { - queryKey: [ 'useSitePages', siteId, query ], + queryKey: getSitePagesQueryKey( { siteId, query } ), queryFn: () => getPages( siteId!, query ), refetchOnWindowFocus: false, enabled: !! siteId, diff --git a/client/hosting/performance/site-performance.tsx b/client/hosting/performance/site-performance.tsx index 7c0c00f7a3d1a..5a04dafdcc894 100644 --- a/client/hosting/performance/site-performance.tsx +++ b/client/hosting/performance/site-performance.tsx @@ -1,4 +1,6 @@ import page from '@automattic/calypso-router'; +import { useQueryClient } from '@tanstack/react-query'; +import { Button } from '@wordpress/components'; import { useDebouncedInput } from '@wordpress/compose'; import { translate } from 'i18n-calypso'; import moment from 'moment'; @@ -15,7 +17,7 @@ import { getSelectedSiteId } from 'calypso/state/ui/selectors'; import { PageSelector } from './components/PageSelector'; import { PerformanceReport } from './components/PerformanceReport'; import { DeviceTabControls, Tab } from './components/device-tab-control'; -import { useSitePages } from './hooks/useSitePages'; +import { getSitePagesQueryKey, useSitePages } from './hooks/useSitePages'; import './style.scss'; @@ -93,6 +95,17 @@ export const SitePerformance = () => { [ pages, currentPageId ] ); + const queryClient = useQueryClient(); + + const retestPage = () => { + // TODO: Trigger new test + + queryClient.invalidateQueries( { + queryKey: getSitePagesQueryKey( { siteId, query } ), + exact: true, + } ); + }; + const performanceReport = usePerformanceReport( currentPage?.wpcom_performance_url, activeTab ); return ( @@ -101,14 +114,42 @@ export const SitePerformance = () => { , - }, - } - ) } + subtitle={ + performanceReport.performanceReport + ? translate( 'Tested on %(testedDate)s. {{button}}Test again{{/button}}', { + args: { + testedDate: moment( performanceReport.performanceReport.timestamp ).format( + 'MMMM Do, YYYY h:mm:ss A' + ), + }, + components: { + button: ( +