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.

Sign up for GitHub

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

Jump to bottom

refactor(hosting-features): refetching of useSiteTransferStatusQuery should be automatic, instead of manual #95666

Open
wants to merge 2 commits into
base: trunk
Choose a base branch
from
Open

refactor(hosting-features): refetching of useSiteTransferStatusQuery should be automatic, instead of manual #95666

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
834f151
refactor(hosting-features): fefetching of useSiteTransferStatusQuery …
nightnei Oct 24, 2024
53035bb
chore: simplify approach
nightnei Oct 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 7 additions & 27 deletions client/hosting/hosting-features/components/hosting-features.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,12 @@ import { Button, Spinner } from '@wordpress/components';
import { addQueryArgs } from '@wordpress/url';
import { translate } from 'i18n-calypso';
import { useRef, useState, useEffect } from 'react';
import { AnyAction } from 'redux';
import EligibilityWarnings from 'calypso/blocks/eligibility-warnings';
import { HostingCard } from 'calypso/components/hosting-card';
import InlineSupportLink from 'calypso/components/inline-support-link';
import { useSiteTransferStatusQuery } from 'calypso/landing/stepper/hooks/use-site-transfer/query';
import { useSelector, useDispatch } from 'calypso/state';
import { recordTracksEvent } from 'calypso/state/analytics/actions';
import { fetchAtomicTransfer } from 'calypso/state/atomic-transfer/actions';
import { transferStates } from 'calypso/state/atomic-transfer/constants';
import isSiteWpcomAtomic from 'calypso/state/selectors/is-site-wpcom-atomic';
import siteHasFeature from 'calypso/state/selectors/site-has-feature';
Expand Down Expand Up @@ -61,32 +59,14 @@ const HostingFeatures = () => {

const hasEnTranslation = useHasEnTranslation();

const { data: siteTransferData, refetch: refetchSiteTransferData } = useSiteTransferStatusQuery(
siteId || undefined
);
// `siteTransferData?.isTransferring` is not a fully reliable indicator by itself, which is why
// we also look at `siteTransferData.status`
const isTransferInProgress =
const { data: siteTransferData } = useSiteTransferStatusQuery( siteId || undefined, {
refetchIntervalInBackground: true,
} );

const shouldRenderActivatingCopy =
( siteTransferData?.isTransferring || siteTransferData?.status === transferStates.COMPLETED ) &&
! isPlanExpired;

useEffect( () => {
if ( ! siteId ) {
return;
}

const interval = setInterval( () => {
if ( siteTransferData?.status !== transferStates.COMPLETED ) {
refetchSiteTransferData();
} else {
clearInterval( interval );
dispatch( fetchAtomicTransfer( siteId ) as unknown as AnyAction );
}
}, 3000 );

return () => clearInterval( interval );
}, [ siteId, siteTransferData?.status, refetchSiteTransferData, dispatch ] );

useEffect( () => {
if ( isSiteAtomic && ! isPlanExpired ) {
page.replace( redirectUrl );
Expand Down Expand Up @@ -191,7 +171,7 @@ const HostingFeatures = () => {
let title;
let description;
let buttons;
if ( isTransferInProgress ) {
if ( shouldRenderActivatingCopy ) {
title = translate( 'Activating hosting features' );
description = translate(
"The hosting features will appear here automatically when they're ready!",
Expand Down Expand Up @@ -255,7 +235,7 @@ const HostingFeatures = () => {
return (
<div className="hosting-features">
<div className="hosting-features__hero">
{ isTransferInProgress && <Spinner className="hosting-features__content-spinner" /> }
{ shouldRenderActivatingCopy && <Spinner className="hosting-features__content-spinner" /> }
<h1>{ title }</h1>
<p>{ description }</p>
{ buttons }
Expand Down
13 changes: 11 additions & 2 deletions client/landing/stepper/hooks/use-site-transfer/query.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,14 +52,22 @@ export function getSiteTransferStatusQueryKey( siteId: number ) {
}

const shouldRefetch = ( status: TransferStates | undefined ) => {
if ( ! status || status === transferStates.NONE ) {
if ( ! status ) {
return false;
}

// This condition ensures that when the status is NONE,
// we expect it might change in another tab. This allows the UI to reflect any updates dynamically.
if ( transferStates.NONE === status ) {
return true;
}

return isTransferring( status );
};

type Options = Pick< UseQueryOptions, 'retry' >;
type Options = Pick< UseQueryOptions, 'retry' > & {
refetchIntervalInBackground?: boolean;
};

/**
* Query hook to get the site transfer status, pooling the endpoint.
Expand All @@ -83,6 +91,7 @@ export const useSiteTransferStatusQuery = ( siteId: number | undefined, options?
};
},
refetchOnWindowFocus: false,
refetchIntervalInBackground: !! options?.refetchIntervalInBackground,
refetchInterval: ( { state } ) =>
shouldRefetch( state.data?.status ) ? REFETCH_TIME : false,
enabled: !! siteId,
Expand Down
Loading