Skip to content

Commit 8ffb4bb

Browse files
epeicherepeicher
authored
Implement RTK Query approach for fetching wpcom sites (#2132)
* Implement RTK Query approach for fetching wpcom sites * Use the new hook and update loading conditions * Rename function name for clarity * Remove use-fetch-wpcom-sites and update imports * Fix tests * Refetch sites when opening the sites modal instead of using an effect * Do not fetch sites on mount * Update files after merge * Infer the SitesEndpointSite type from the schema * Remove unnecessary effect on sites modal * Unify Publish site button in one component with a redirect prop * Fix comment wording * Remove isBusy from the publish site button The query is executed in the background so it is not required to indicate that in the button * Move fetching sites logic to sites modal selector * Add and remove comments * Refactor connected-sites mutation to accept an id and fetch the sites * Revert "Refactor connected-sites mutation to accept an id and fetch the sites" This reverts commit 5cfc0f2. * Use the more declarative refetchOnMount instead of an effect on pull-remote-site * Remove unnecessary code * Do not disable Connect site button if any site is syncing * Refactor Publish site button to remove unnecessary prop
1 parent e96d39b commit 8ffb4bb

31 files changed

+410
-429
lines changed

‎e2e/localization.test.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import AddSiteModal from './page-objects/add-site-modal';
44
import MainSidebar from './page-objects/main-sidebar';
55
import Onboarding from './page-objects/onboarding';
66
import SiteContent from './page-objects/site-content';
7-
import WhatsNewModal from './page-objects/whats-new-modal';
87
import { getUrlWithAutoLogin } from './utils';
98

109
test.describe( 'Localization', () => {

‎e2e/overview-customize-links.test.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import { test, expect, type Page } from '@playwright/test';
22
import { E2ESession } from './e2e-helpers';
33
import Onboarding from './page-objects/onboarding';
44
import SiteContent from './page-objects/site-content';
5-
import WhatsNewModal from './page-objects/whats-new-modal';
65
import { getUrlWithAutoLogin } from './utils';
76

87
const global = globalThis as unknown as {

‎src/components/publish-site-button.tsx‎

Lines changed: 19 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import { cloudUpload } from '@wordpress/icons';
22
import { useI18n } from '@wordpress/react-i18n';
3-
import Button from 'src/components/button';
4-
import { Tooltip } from 'src/components/tooltip';
3+
import { useCallback } from 'react';
54
import { useSyncSites } from 'src/hooks/sync-sites';
65
import { useAuth } from 'src/hooks/use-auth';
76
import { useContentTabs } from 'src/hooks/use-content-tabs';
87
import { useSiteDetails } from 'src/hooks/use-site-details';
8+
import { ConnectButton } from 'src/modules/sync/components/connect-button';
99
import { useAppDispatch } from 'src/stores';
1010
import {
1111
connectedSitesActions,
@@ -24,30 +24,29 @@ export const PublishSiteButton = () => {
2424
} );
2525
const { isAnySitePulling, isAnySitePushing } = useSyncSites();
2626
const isAnySiteSyncing = isAnySitePulling || isAnySitePushing;
27-
const handlePublishClick = () => {
27+
28+
const handlePublishClick = useCallback( () => {
2829
setSelectedTab( 'sync' );
2930
dispatch( connectedSitesActions.openModal( 'push' ) );
30-
};
31+
}, [ setSelectedTab, dispatch ] );
3132

3233
if ( connectedSites.length !== 0 ) return null;
3334

3435
return (
35-
<Tooltip
36-
disabled={ ! isAnySiteSyncing }
37-
text={ __(
38-
'Another site is syncing. Please wait for the sync to finish before you publish your site.'
39-
) }
40-
placement="left"
36+
<ConnectButton
37+
variant="primary"
38+
icon={ cloudUpload }
39+
connectSite={ handlePublishClick }
40+
disabled={ isAnySiteSyncing }
41+
tooltipText={
42+
isAnySiteSyncing
43+
? __(
44+
'Another site is syncing. Please wait for the sync to finish before you publish your site.'
45+
)
46+
: __( 'Publishing your site requires an internet connection.' )
47+
}
4148
>
42-
<Button
43-
variant="primary"
44-
disabled={ isAnySiteSyncing }
45-
aria-label={ __( 'Publish site' ) }
46-
onClick={ handlePublishClick }
47-
icon={ cloudUpload }
48-
>
49-
{ __( 'Publish site' ) }
50-
</Button>
51-
</Tooltip>
49+
{ __( 'Publish site' ) }
50+
</ConnectButton>
5251
);
5352
};

‎src/components/tests/app.test.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import { certificateTrustApi } from 'src/stores/certificate-trust-api';
1212
import { installedAppsApi } from 'src/stores/installed-apps-api';
1313
import { setProviderConstants } from 'src/stores/provider-constants-slice';
1414
import { connectedSitesApi } from 'src/stores/sync/connected-sites';
15+
import { wpcomSitesApi } from 'src/stores/sync/wpcom-sites';
1516
import { wordpressVersionsApi } from 'src/stores/wordpress-versions-api';
1617
import { wpcomApi, wpcomPublicApi } from 'src/stores/wpcom-api';
1718

@@ -90,7 +91,8 @@ describe( 'App', () => {
9091
.concat( wpcomApi.middleware )
9192
.concat( wpcomPublicApi.middleware )
9293
.concat( certificateTrustApi.middleware )
93-
.concat( connectedSitesApi.middleware ),
94+
.concat( connectedSitesApi.middleware )
95+
.concat( wpcomSitesApi.middleware ),
9496
} );
9597
store.dispatch(
9698
setProviderConstants( {

‎src/hooks/sync-sites/sync-sites-context.tsx‎

Lines changed: 3 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -10,22 +10,16 @@ import {
1010
mapImportResponseToPushState,
1111
} from 'src/hooks/sync-sites/use-sync-push';
1212
import { useAuth } from 'src/hooks/use-auth';
13-
import { useFetchWpComSites } from 'src/hooks/use-fetch-wpcom-sites';
1413
import { useFormatLocalizedTimestamps } from 'src/hooks/use-format-localized-timestamps';
15-
import { useSiteDetails } from 'src/hooks/use-site-details';
1614
import { useSyncStatesProgressInfo } from 'src/hooks/use-sync-states-progress-info';
1715
import { getIpcApi } from 'src/lib/get-ipc-api';
18-
import {
19-
useGetConnectedSitesForLocalSiteQuery,
20-
useUpdateSiteTimestampMutation,
21-
} from 'src/stores/sync/connected-sites';
16+
import { useUpdateSiteTimestampMutation } from 'src/stores/sync/connected-sites';
2217
import type { ImportResponse } from 'src/hooks/use-sync-states-progress-info';
2318

2419
type GetLastSyncTimeText = ( timestamp: string | null, type: 'pull' | 'push' ) => string;
2520

2621
export type SyncSitesContextType = Omit< UseSyncPull, 'pullStates' > &
27-
Omit< UseSyncPush, 'pushStates' > &
28-
ReturnType< typeof useFetchWpComSites > & {
22+
Omit< UseSyncPush, 'pushStates' > & {
2923
getLastSyncTimeText: GetLastSyncTimeText;
3024
};
3125

@@ -53,13 +47,6 @@ export function SyncSitesProvider( { children }: { children: React.ReactNode } )
5347
[ formatRelativeTime ]
5448
);
5549

56-
const { selectedSite } = useSiteDetails();
57-
const { user } = useAuth();
58-
const { data: connectedSites = [] } = useGetConnectedSitesForLocalSiteQuery( {
59-
localSiteId: selectedSite?.id,
60-
userId: user?.id,
61-
} );
62-
6350
const [ updateSiteTimestamp ] = useUpdateSiteTimestampMutation();
6451

6552
const { pullSite, isAnySitePulling, isSiteIdPulling, clearPullState, getPullState, cancelPull } =
@@ -79,10 +66,7 @@ export function SyncSitesProvider( { children }: { children: React.ReactNode } )
7966
updateSiteTimestamp( { siteId: remoteSiteId, localSiteId, type: 'push' } ),
8067
} );
8168

82-
const { syncSites, isFetching, refetchSites } = useFetchWpComSites(
83-
connectedSites.map( ( { id } ) => id )
84-
);
85-
useListenDeepLinkConnection( { refetchSites } );
69+
useListenDeepLinkConnection();
8670

8771
const { client } = useAuth();
8872
const { pushStatesProgressInfo } = useSyncStatesProgressInfo();
@@ -154,9 +138,6 @@ export function SyncSitesProvider( { children }: { children: React.ReactNode } )
154138
isSiteIdPulling,
155139
clearPullState,
156140
cancelPull,
157-
syncSites,
158-
refetchSites,
159-
isFetching,
160141
getPullState,
161142
getPushState,
162143
pushSite,

‎src/hooks/sync-sites/use-listen-deep-link-connection.ts‎

Lines changed: 19 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,32 @@
1-
import { SyncSitesContextType } from 'src/hooks/sync-sites/sync-sites-context';
1+
import { useAuth } from 'src/hooks/use-auth';
22
import { useContentTabs } from 'src/hooks/use-content-tabs';
33
import { useIpcListener } from 'src/hooks/use-ipc-listener';
44
import { useSiteDetails } from 'src/hooks/use-site-details';
5-
import { useConnectSiteMutation } from 'src/stores/sync/connected-sites';
5+
import {
6+
useConnectSiteMutation,
7+
useGetConnectedSitesForLocalSiteQuery,
8+
} from 'src/stores/sync/connected-sites';
9+
import { useGetWpComSitesQuery } from 'src/stores/sync/wpcom-sites';
610

7-
export function useListenDeepLinkConnection( {
8-
refetchSites,
9-
}: {
10-
refetchSites: SyncSitesContextType[ 'refetchSites' ];
11-
} ) {
11+
export function useListenDeepLinkConnection() {
1212
const [ connectSite ] = useConnectSiteMutation();
1313
const { selectedSite, setSelectedSiteId } = useSiteDetails();
1414
const { setSelectedTab, selectedTab } = useContentTabs();
15+
const { user } = useAuth();
16+
const { data: connectedSites = [] } = useGetConnectedSitesForLocalSiteQuery( {
17+
localSiteId: selectedSite?.id,
18+
userId: user?.id,
19+
} );
20+
const connectedSiteIds = connectedSites.map( ( { id } ) => id );
21+
const { refetch: refetchWpComSites } = useGetWpComSitesQuery( {
22+
connectedSiteIds,
23+
userId: user?.id,
24+
} );
1525

1626
useIpcListener( 'sync-connect-site', async ( _event, { remoteSiteId, studioSiteId } ) => {
1727
// Fetch latest sites from network before checking
18-
const latestSites = await refetchSites();
28+
const result = await refetchWpComSites();
29+
const latestSites = result.data ?? [];
1930
const newConnectedSite = latestSites.find( ( site ) => site.id === remoteSiteId );
2031
if ( newConnectedSite ) {
2132
if ( selectedSite?.id && selectedSite.id !== studioSiteId ) {

‎src/hooks/sync-sites/use-sync-pull.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ import {
2020
} from 'src/hooks/use-sync-states-progress-info';
2121
import { getIpcApi } from 'src/lib/get-ipc-api';
2222
import { getHostnameFromUrl } from 'src/lib/url-utils';
23-
import type { SyncSite } from 'src/hooks/use-fetch-wpcom-sites/types';
23+
import type { SyncSite } from 'src/modules/sync/types';
2424
import type { SyncOption } from 'src/types';
2525

2626
export type SyncBackupState = {

‎src/hooks/sync-sites/use-sync-push.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,8 @@ import {
1717
} from 'src/hooks/use-sync-states-progress-info';
1818
import { getIpcApi } from 'src/lib/get-ipc-api';
1919
import { getHostnameFromUrl } from 'src/lib/url-utils';
20-
import type { SyncSite } from 'src/hooks/use-fetch-wpcom-sites/types';
2120
import type { ImportResponse } from 'src/hooks/use-sync-states-progress-info';
21+
import type { SyncSite } from 'src/modules/sync/types';
2222
import type { SyncOption } from 'src/types';
2323

2424
export type SyncPushState = {

‎src/hooks/tests/get-sync-support.test.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { getSyncSupport } from 'src/hooks/use-fetch-wpcom-sites';
1+
import { getSyncSupport } from 'src/modules/sync/lib/sync-support';
22

33
// Mocks for site shapes
44
const baseSite = {

‎src/hooks/tests/reconcile-connected-sites.test.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { reconcileConnectedSites } from 'src/hooks/use-fetch-wpcom-sites/reconcile-connected-sites';
2-
import type { SyncSite } from 'src/hooks/use-fetch-wpcom-sites/types';
1+
import { reconcileConnectedSites } from 'src/modules/sync/lib/reconcile-connected-sites';
2+
import type { SyncSite } from 'src/modules/sync/types';
33

44
describe( 'reconcileConnectedSites', () => {
55
test( 'should update relevant properties', () => {

0 commit comments

Comments
 (0)