Merge pull request #3643 from 10up/feature/sync-rest-api

Replace Sync AJAX callback with REST API endpoint.

assets/js/sync-ui/config.js

@@ -3,12 +3,12 @@
  */
 const {
 	auto_start_index: autoIndex,
-	ajax_url: ajaxUrl,
+	api_url: apiUrl,
 	index_meta: indexMeta = null,
 	is_epio: isEpio,
 	ep_last_sync_date: lastSyncDateTime = null,
 	ep_last_sync_failed: lastSyncFailed = false,
 	nonce,
 } = window.epDash;
 
-export { autoIndex, ajaxUrl, indexMeta, isEpio, lastSyncDateTime, lastSyncFailed, nonce };
+export { autoIndex, apiUrl, indexMeta, isEpio, lastSyncDateTime, lastSyncFailed, nonce };

assets/js/sync-ui/index.js

@@ -8,7 +8,7 @@ import { SyncProvider } from '../sync';
  * Internal dependencies.
  */
 import {
-	ajaxUrl,
+	apiUrl,
 	autoIndex,
 	lastSyncDateTime,
 	lastSyncFailed,
@@ -25,7 +25,7 @@ import SettingsPage from './apps/settings-page';
  */
 const App = () => (
 	<SyncProvider
-		ajaxUrl={ajaxUrl}
+		apiUrl={apiUrl}
 		autoIndex={autoIndex}
 		defaultLastSyncDateTime={lastSyncDateTime}
 		defaultLastSyncFailed={lastSyncFailed}

assets/js/sync/index.js

@@ -36,7 +36,7 @@ const Context = createContext();
  * App component.
  *
  * @param {object} props Component props.
- * @param {string} props.ajaxUrl AJAX URL endpoint.
+ * @param {string} props.apiUrl API endpoint URL.
  * @param {boolean} props.autoIndex Whether to start an index automatically.
  * @param {Function} props.children Component children
  * @param {string} props.defaultLastSyncDateTime Last sync date and time.
@@ -47,7 +47,7 @@ const Context = createContext();
  * @returns {WPElement} App component.
  */
 export const SyncProvider = ({
-	ajaxUrl,
+	apiUrl,
 	autoIndex,
 	children,
 	defaultLastSyncDateTime,
@@ -59,7 +59,7 @@ export const SyncProvider = ({
 	/**
 	 * Indexing methods.
 	 */
-	const { cancelIndex, index, indexStatus } = useIndex(ajaxUrl, nonce);
+	const { cancelIndex, index, indexStatus } = useIndex(apiUrl, nonce);
 
 	/**
 	 * Message log state.
@@ -261,7 +261,7 @@ export const SyncProvider = ({
 		 * messages. Returns a Promise that resolves if syncing should
 		 * continue.
 		 *
-		 * @param {object} response AJAX response.
+		 * @param {object} response API response.
 		 * @returns {Promise} Promise that resolves if sync is to continue.
 		 */
 		(response) => {

assets/js/sync/src/hooks.js

@@ -12,11 +12,11 @@ import { __ } from '@wordpress/i18n';
  * interrupt eachother to avoid multiple sync requests causing race conditions
  * or duplicate output, such as by rapidly pausing and unpausing indexing.
  *
- * @param {string} ajaxUrl AJAX endpoint URL.
+ * @param {string} apiUrl AJAX endpoint URL.
  * @param {string} nonce WordPress nonce.
  * @returns {object} Sync, sync status, and cancel functions.
  */
-export const useIndex = (ajaxUrl, nonce) => {
+export const useIndex = (apiUrl, nonce) => {
 	const abort = useRef(new AbortController());
 	const request = useRef(null);
 
@@ -119,16 +119,17 @@ export const useIndex = (ajaxUrl, nonce) => {
 		 * Silently catches abort errors and clears the current request on
 		 * completion.
 		 *
+		 * @param {URL} url API URL.
 		 * @param {object} options Request options.
 		 * @throws {Error} Any non-abort errors.
 		 * @returns {Promise} Current request promise.
 		 */
-		(options) => {
-			request.current = fetch(ajaxUrl, options).then(onResponse).finally(onComplete);
+		(url, options) => {
+			request.current = fetch(url, options).then(onResponse).finally(onComplete);
 
 			return request.current;
 		},
-		[ajaxUrl, onComplete, onResponse],
+		[onComplete, onResponse],
 	);
 
 	const cancelIndex = useCallback(
@@ -141,20 +142,19 @@ export const useIndex = (ajaxUrl, nonce) => {
 			abort.current.abort();
 			abort.current = new AbortController();
 
-			const body = new FormData();
-
-			body.append('action', 'ep_cancel_index');
-			body.append('nonce', nonce);
+			const url = new URL(apiUrl);
 
 			const options = {
-				method: 'POST',
-				body,
+				headers: {
+					'X-WP-Nonce': nonce,
+				},
+				method: 'DELETE',
 				signal: abort.current.signal,
 			};
 
-			return sendRequest(options);
+			return sendRequest(url, options);
 		},
-		[nonce, sendRequest],
+		[apiUrl, nonce, sendRequest],
 	);
 
 	const index = useCallback(
@@ -168,21 +168,21 @@ export const useIndex = (ajaxUrl, nonce) => {
 			abort.current.abort();
 			abort.current = new AbortController();
 
-			const body = new FormData();
+			const url = new URL(apiUrl);
 
-			body.append('action', 'ep_index');
-			body.append('put_mapping', putMapping ? 1 : 0);
-			body.append('nonce', nonce);
+			url.searchParams.append('put_mapping', putMapping);
 
 			const options = {
+				headers: {
+					'X-WP-Nonce': nonce,
+				},
 				method: 'POST',
-				body,
 				signal: abort.current.signal,
 			};
 
-			return sendRequest(options);
+			return sendRequest(url, options);
 		},
-		[nonce, sendRequest],
+		[apiUrl, nonce, sendRequest],
 	);
 
 	const indexStatus = useCallback(
@@ -195,20 +195,19 @@ export const useIndex = (ajaxUrl, nonce) => {
 			abort.current.abort();
 			abort.current = new AbortController();
 
-			const body = new FormData();
-
-			body.append('action', 'ep_index_status');
-			body.append('nonce', nonce);
+			const url = new URL(apiUrl);
 
 			const options = {
-				method: 'POST',
-				body,
+				headers: {
+					'X-WP-Nonce': nonce,
+				},
+				method: 'GET',
 				signal: abort.current.signal,
 			};
 
-			return sendRequest(options);
+			return sendRequest(url, options);
 		},
-		[nonce, sendRequest],
+		[apiUrl, nonce, sendRequest],
 	);
 
 	return { cancelIndex, index, indexStatus };