From e3cc8548599380f0254098add756b346069e3bf6 Mon Sep 17 00:00:00 2001
From: Jacob Peattie <jacob.peattie@10up.com>
Date: Tue, 5 Sep 2023 15:25:03 +1000
Subject: [PATCH 1/2] Rename sync scripts directory.

---
 assets/js/{sync => sync-ui}/components/common/date-time.js    | 0
 assets/js/{sync => sync-ui}/components/common/message-log.js  | 0
 assets/js/{sync => sync-ui}/components/common/progress-bar.js | 0
 assets/js/{sync => sync-ui}/components/icons/pause.js         | 0
 assets/js/{sync => sync-ui}/components/icons/play.js          | 0
 assets/js/{sync => sync-ui}/components/icons/stop.js          | 0
 assets/js/{sync => sync-ui}/components/icons/sync.js          | 0
 assets/js/{sync => sync-ui}/components/icons/thumbs-down.js   | 0
 assets/js/{sync => sync-ui}/components/icons/thumbs-up.js     | 0
 assets/js/{sync => sync-ui}/components/sync-page.js           | 0
 assets/js/{sync => sync-ui}/components/sync/controls.js       | 0
 assets/js/{sync => sync-ui}/components/sync/log.js            | 0
 assets/js/{sync => sync-ui}/components/sync/panel.js          | 0
 assets/js/{sync => sync-ui}/components/sync/progress.js       | 0
 assets/js/{sync => sync-ui}/components/sync/status.js         | 0
 assets/js/{sync => sync-ui}/config.js                         | 0
 assets/js/{sync => sync-ui}/hooks.js                          | 0
 assets/js/{sync => sync-ui}/index.js                          | 0
 assets/js/{sync => sync-ui}/utilities.js                      | 0
 package.json                                                  | 2 +-
 20 files changed, 1 insertion(+), 1 deletion(-)
 rename assets/js/{sync => sync-ui}/components/common/date-time.js (100%)
 rename assets/js/{sync => sync-ui}/components/common/message-log.js (100%)
 rename assets/js/{sync => sync-ui}/components/common/progress-bar.js (100%)
 rename assets/js/{sync => sync-ui}/components/icons/pause.js (100%)
 rename assets/js/{sync => sync-ui}/components/icons/play.js (100%)
 rename assets/js/{sync => sync-ui}/components/icons/stop.js (100%)
 rename assets/js/{sync => sync-ui}/components/icons/sync.js (100%)
 rename assets/js/{sync => sync-ui}/components/icons/thumbs-down.js (100%)
 rename assets/js/{sync => sync-ui}/components/icons/thumbs-up.js (100%)
 rename assets/js/{sync => sync-ui}/components/sync-page.js (100%)
 rename assets/js/{sync => sync-ui}/components/sync/controls.js (100%)
 rename assets/js/{sync => sync-ui}/components/sync/log.js (100%)
 rename assets/js/{sync => sync-ui}/components/sync/panel.js (100%)
 rename assets/js/{sync => sync-ui}/components/sync/progress.js (100%)
 rename assets/js/{sync => sync-ui}/components/sync/status.js (100%)
 rename assets/js/{sync => sync-ui}/config.js (100%)
 rename assets/js/{sync => sync-ui}/hooks.js (100%)
 rename assets/js/{sync => sync-ui}/index.js (100%)
 rename assets/js/{sync => sync-ui}/utilities.js (100%)

diff --git a/assets/js/sync/components/common/date-time.js b/assets/js/sync-ui/components/common/date-time.js
similarity index 100%
rename from assets/js/sync/components/common/date-time.js
rename to assets/js/sync-ui/components/common/date-time.js
diff --git a/assets/js/sync/components/common/message-log.js b/assets/js/sync-ui/components/common/message-log.js
similarity index 100%
rename from assets/js/sync/components/common/message-log.js
rename to assets/js/sync-ui/components/common/message-log.js
diff --git a/assets/js/sync/components/common/progress-bar.js b/assets/js/sync-ui/components/common/progress-bar.js
similarity index 100%
rename from assets/js/sync/components/common/progress-bar.js
rename to assets/js/sync-ui/components/common/progress-bar.js
diff --git a/assets/js/sync/components/icons/pause.js b/assets/js/sync-ui/components/icons/pause.js
similarity index 100%
rename from assets/js/sync/components/icons/pause.js
rename to assets/js/sync-ui/components/icons/pause.js
diff --git a/assets/js/sync/components/icons/play.js b/assets/js/sync-ui/components/icons/play.js
similarity index 100%
rename from assets/js/sync/components/icons/play.js
rename to assets/js/sync-ui/components/icons/play.js
diff --git a/assets/js/sync/components/icons/stop.js b/assets/js/sync-ui/components/icons/stop.js
similarity index 100%
rename from assets/js/sync/components/icons/stop.js
rename to assets/js/sync-ui/components/icons/stop.js
diff --git a/assets/js/sync/components/icons/sync.js b/assets/js/sync-ui/components/icons/sync.js
similarity index 100%
rename from assets/js/sync/components/icons/sync.js
rename to assets/js/sync-ui/components/icons/sync.js
diff --git a/assets/js/sync/components/icons/thumbs-down.js b/assets/js/sync-ui/components/icons/thumbs-down.js
similarity index 100%
rename from assets/js/sync/components/icons/thumbs-down.js
rename to assets/js/sync-ui/components/icons/thumbs-down.js
diff --git a/assets/js/sync/components/icons/thumbs-up.js b/assets/js/sync-ui/components/icons/thumbs-up.js
similarity index 100%
rename from assets/js/sync/components/icons/thumbs-up.js
rename to assets/js/sync-ui/components/icons/thumbs-up.js
diff --git a/assets/js/sync/components/sync-page.js b/assets/js/sync-ui/components/sync-page.js
similarity index 100%
rename from assets/js/sync/components/sync-page.js
rename to assets/js/sync-ui/components/sync-page.js
diff --git a/assets/js/sync/components/sync/controls.js b/assets/js/sync-ui/components/sync/controls.js
similarity index 100%
rename from assets/js/sync/components/sync/controls.js
rename to assets/js/sync-ui/components/sync/controls.js
diff --git a/assets/js/sync/components/sync/log.js b/assets/js/sync-ui/components/sync/log.js
similarity index 100%
rename from assets/js/sync/components/sync/log.js
rename to assets/js/sync-ui/components/sync/log.js
diff --git a/assets/js/sync/components/sync/panel.js b/assets/js/sync-ui/components/sync/panel.js
similarity index 100%
rename from assets/js/sync/components/sync/panel.js
rename to assets/js/sync-ui/components/sync/panel.js
diff --git a/assets/js/sync/components/sync/progress.js b/assets/js/sync-ui/components/sync/progress.js
similarity index 100%
rename from assets/js/sync/components/sync/progress.js
rename to assets/js/sync-ui/components/sync/progress.js
diff --git a/assets/js/sync/components/sync/status.js b/assets/js/sync-ui/components/sync/status.js
similarity index 100%
rename from assets/js/sync/components/sync/status.js
rename to assets/js/sync-ui/components/sync/status.js
diff --git a/assets/js/sync/config.js b/assets/js/sync-ui/config.js
similarity index 100%
rename from assets/js/sync/config.js
rename to assets/js/sync-ui/config.js
diff --git a/assets/js/sync/hooks.js b/assets/js/sync-ui/hooks.js
similarity index 100%
rename from assets/js/sync/hooks.js
rename to assets/js/sync-ui/hooks.js
diff --git a/assets/js/sync/index.js b/assets/js/sync-ui/index.js
similarity index 100%
rename from assets/js/sync/index.js
rename to assets/js/sync-ui/index.js
diff --git a/assets/js/sync/utilities.js b/assets/js/sync-ui/utilities.js
similarity index 100%
rename from assets/js/sync/utilities.js
rename to assets/js/sync-ui/utilities.js
diff --git a/package.json b/package.json
index 96ae7faf5c..c3c4ea949e 100644
--- a/package.json
+++ b/package.json
@@ -69,7 +69,7 @@
       "facets-meta-range-block-view-script": "./assets/js/blocks/facets/meta-range/view.js",
       "related-posts-block-script": "./assets/js/blocks/related-posts/index.js",
       "settings-script": "./assets/js/settings.js",
-      "sync-script": "./assets/js/sync/index.js",
+      "sync-script": "./assets/js/sync-ui/index.js",
       "sites-admin-script": "./assets/js/sites-admin.js",
       "stats-script": "./assets/js/stats.js",
       "status-report-script": "./assets/js/status-report/index.js",

From b07072d3d2e4f57eb5dd8d327bbc9028a831e99c Mon Sep 17 00:00:00 2001
From: Jacob Peattie <jacob.peattie@10up.com>
Date: Tue, 5 Sep 2023 16:56:10 +1000
Subject: [PATCH 2/2] Abstract Sync page logic into a provider pattern.

---
 .../sync-page.js => apps/settings-page.js}    | 112 +++-
 assets/js/sync-ui/components/sync/controls.js |   8 +-
 assets/js/sync-ui/components/sync/panel.js    |  39 +-
 assets/js/sync-ui/index.js                    | 545 +----------------
 assets/js/sync/index.js                       | 549 ++++++++++++++++++
 assets/js/{sync-ui => sync/src}/hooks.js      |  17 +-
 assets/js/{sync-ui => sync/src}/utilities.js  |   0
 7 files changed, 683 insertions(+), 587 deletions(-)
 rename assets/js/sync-ui/{components/sync-page.js => apps/settings-page.js} (56%)
 create mode 100644 assets/js/sync/index.js
 rename assets/js/{sync-ui => sync/src}/hooks.js (95%)
 rename assets/js/{sync-ui => sync/src}/utilities.js (100%)

diff --git a/assets/js/sync-ui/components/sync-page.js b/assets/js/sync-ui/apps/settings-page.js
similarity index 56%
rename from assets/js/sync-ui/components/sync-page.js
rename to assets/js/sync-ui/apps/settings-page.js
index b13cb51efa..1c809dba94 100644
--- a/assets/js/sync-ui/components/sync-page.js
+++ b/assets/js/sync-ui/apps/settings-page.js
@@ -7,34 +7,82 @@ import { __, sprintf } from '@wordpress/i18n';
 /**
  * Internal dependencies.
  */
-import SyncPanel from './sync/panel';
+import { useSync } from '../../sync';
+import SyncPanel from '../components/sync/panel';
 
 /**
  * Sync page component.
  *
- * @param {object} props Component props.
- * @param {boolean} props.isCli If sync is a CLI sync.
- * @param {boolean} props.isComplete If sync is complete.
- * @param {boolean} props.isDeleting If sync is a delete and sync.
- * @param {boolean} props.isEpio If ElasticPress is using ElasticPress.io.
- * @param {boolean} props.isFailed If sync has failed.
- * @param {boolean} props.isPaused If sync is paused.
- * @param {boolean} props.isSyncing If sync is running.
- * @param {number} props.itemsProcessed Number of items processed.
- * @param {number} props.itemsTotal Number of items to process.
- * @param {string} props.lastSyncDateTime Date and time of last sync in ISO-8601.
- * @param {boolean} props.lastSyncFailed If the last sync had failures.
- * @param {object[]} props.log Sync message log.
- * @param {Function} props.onDelete Callback for clicking delete and sync.
- * @param {Function} props.onPause Callback for clicking pause.
- * @param {Function} props.onResume Callback for clicking resume.
- * @param {Function} props.onStop Callback for clicking stop.
- * @param {Function} props.onSync Callback for clicking sync.
- * @param {string} props.syncStartDateTime Date and time of current sync in ISO 8601.
  * @returns {WPElement} Sync page component.
  */
-export default ({ isCli, isComplete, isDeleting, isEpio, isFailed, isSyncing, log, ...props }) => {
-	const isInitialSync = props.lastSyncDateTime === null;
+export default () => {
+	const {
+		isCli,
+		isComplete,
+		isDeleting,
+		isEpio,
+		isFailed,
+		isSyncing,
+		lastSyncDateTime,
+		log,
+		logMessage,
+		pauseSync,
+		resumeSync,
+		startSync,
+		stopSync,
+	} = useSync();
+
+	const isInitialSync = lastSyncDateTime === null;
+
+	/**
+	 * Handle clicking delete and sync button.
+	 *
+	 * @returns {void}
+	 */
+	const onDelete = async () => {
+		startSync(true);
+		logMessage(__('Starting delete and sync…', 'elasticpress'), 'info');
+	};
+
+	/**
+	 * Handle clicking pause button.
+	 *
+	 * @returns {void}
+	 */
+	const onPause = () => {
+		pauseSync();
+		logMessage(__('Pausing sync…', 'elasticpress'), 'info');
+	};
+
+	/**
+	 * Handle clicking play button.
+	 *
+	 * @returns {void}
+	 */
+	const onResume = () => {
+		resumeSync();
+		logMessage(__('Resuming sync…', 'elasticpress'), 'info');
+	};
+
+	/**
+	 * Handle clicking stop button.
+	 *
+	 * @returns {void}
+	 */
+	const onStop = () => {
+		stopSync();
+		logMessage(__('Sync stopped', 'elasticpress'), 'info');
+	};
+
+	/**
+	 * Handle clicking sync button.
+	 *
+	 * @returns {void}
+	 */
+	const onSync = async () => {
+		startSync(false);
+		logMessage(__('Starting sync…', 'elasticpress'), 'info');
+	};
 
 	return (
 		<>
@@ -58,15 +106,17 @@ export default ({ isCli, isComplete, isDeleting, isEpio, isFailed, isSyncing, lo
 								'elasticpress',
 						  )
 				}
-				isComplete={isComplete}
 				isDisabled={(isSyncing && isDeleting) || (isSyncing && isCli)}
-				isFailed={isFailed}
-				isSyncing={isSyncing && !isDeleting}
+				isLoading={isSyncing && !isDeleting}
 				logMessages={log.filter((m) => !m.isDeleting)}
 				showLastSync
 				showProgress={!isDeleting && (isSyncing || isComplete || isFailed)}
 				showSync
-				{...props}
+				onDelete={onDelete}
+				onPause={onPause}
+				onResume={onResume}
+				onSync={onSync}
+				onStop={onStop}
 			/>
 
 			{!isInitialSync ? (
@@ -76,10 +126,8 @@ export default ({ isCli, isComplete, isDeleting, isEpio, isFailed, isSyncing, lo
 						'If you are still having issues with your search results, you may need to do a completely fresh sync.',
 						'elasticpress',
 					)}
-					isComplete={isComplete}
 					isDisabled={(isSyncing && !isDeleting) || (isSyncing && isCli)}
-					isFailed={isFailed}
-					isSyncing={isSyncing && isDeleting}
+					isLoading={isSyncing && isDeleting}
 					logMessages={log.filter((m) => m.isDeleting)}
 					showDelete
 					showProgress={isDeleting && (isSyncing || isComplete || isFailed)}
@@ -87,7 +135,11 @@ export default ({ isCli, isComplete, isDeleting, isEpio, isFailed, isSyncing, lo
 						'All indexed data on ElasticPress will be deleted without affecting anything on your WordPress website. This may take a few hours depending on the amount of content that needs to be synced and indexed. While this is happening, searches will use the default WordPress results',
 						'elasticpress',
 					)}
-					{...props}
+					onDelete={onDelete}
+					onPause={onPause}
+					onResume={onResume}
+					onSync={onSync}
+					onStop={onStop}
 				/>
 			) : null}
 		</>
diff --git a/assets/js/sync-ui/components/sync/controls.js b/assets/js/sync-ui/components/sync/controls.js
index d32817447e..b4fc918bcb 100644
--- a/assets/js/sync-ui/components/sync/controls.js
+++ b/assets/js/sync-ui/components/sync/controls.js
@@ -18,8 +18,8 @@ import stop from '../icons/stop';
  *
  * @param {object} props Component props.
  * @param {boolean} props.disabled If controls are disabled.
+ * @param {boolean} props.isLoading If syncing is in progress.
  * @param {boolean} props.isPaused If syncing is paused.
- * @param {boolean} props.isSyncing If syncing is in progress.
  * @param {Function} props.onPause Pause button click callback.
  * @param {Function} props.onResume Play button click callback.
  * @param {Function} props.onStop Stop button click callback.
@@ -27,13 +27,13 @@ import stop from '../icons/stop';
  * @param {boolean} props.showSync If sync button is shown.
  * @returns {WPElement} Component.
  */
-export default ({ disabled, isPaused, isSyncing, onPause, onResume, onStop, onSync, showSync }) => {
+export default ({ disabled, isLoading, isPaused, onPause, onResume, onStop, onSync, showSync }) => {
 	/**
 	 * Render.
 	 */
 	return (
 		<div className="ep-sync-controls">
-			{showSync && !isSyncing ? (
+			{showSync && !isLoading ? (
 				<div className="ep-sync-controls__sync">
 					<Button
 						className="ep-sync-button ep-sync-button--sync"
@@ -47,7 +47,7 @@ export default ({ disabled, isPaused, isSyncing, onPause, onResume, onStop, onSy
 				</div>
 			) : null}
 
-			{isSyncing ? (
+			{isLoading ? (
 				<>
 					<div className="ep-sync-controls__pause-resume">
 						{isPaused ? (
diff --git a/assets/js/sync-ui/components/sync/panel.js b/assets/js/sync-ui/components/sync/panel.js
index 14028242ac..5109fb494f 100644
--- a/assets/js/sync-ui/components/sync/panel.js
+++ b/assets/js/sync-ui/components/sync/panel.js
@@ -13,6 +13,7 @@ import SyncControls from './controls';
 import SyncLog from './log';
 import SyncProgress from './progress';
 import SyncStatus from './status';
+import { useSync } from '../../../sync';
 
 /**
  * Sync page component.
@@ -20,23 +21,14 @@ import SyncStatus from './status';
  * @param {object} props Component props.
  * @param {string} props.heading Panel heading.
  * @param {string} props.introduction Panel introduction.
- * @param {boolean} props.isCli If sync is a CLI sync.
- * @param {boolean} props.isComplete If sync is complete.
  * @param {boolean} props.isDisabled If controls are disabled.
- * @param {boolean} props.isFailed If sync has failed.
- * @param {boolean} props.isPaused If sync is paused.
- * @param {boolean} props.isSyncing If sync is running.
- * @param {number} props.itemsProcessed Number of items processed.
- * @param {number} props.itemsTotal Number of items to process.
- * @param {string} props.lastSyncDateTime Date and time of last sync in ISO-8601.
- * @param {boolean} props.lastSyncFailed If the last sync had failures.
+ * @param {boolean} props.isLoading If sync is running.
  * @param {object[]} props.logMessages Log messages.
  * @param {Function} props.onDelete Callback for clicking delete and sync.
  * @param {Function} props.onPause Callback for clicking pause.
  * @param {Function} props.onResume Callback for clicking resume.
  * @param {Function} props.onStop Callback for clicking stop.
  * @param {Function} props.onSync Callback for clicking sync.
- * @param {string} props.syncStartDateTime Date and time of current sync in ISO 8601.
  * @param {boolean} props.showLastSync Whether to show the last sync details.
  * @param {boolean} props.showDelete Whether to show the delete button.
  * @param {boolean} props.showProgress Whether to show the progress bar.
@@ -47,16 +39,8 @@ import SyncStatus from './status';
 export default ({
 	heading,
 	introduction,
-	isCli,
-	isComplete,
 	isDisabled,
-	isFailed,
-	isPaused,
-	isSyncing,
-	itemsProcessed,
-	itemsTotal,
-	lastSyncDateTime,
-	lastSyncFailed,
+	isLoading,
 	logMessages,
 	onDelete,
 	onPause,
@@ -67,9 +51,20 @@ export default ({
 	showLastSync,
 	showProgress,
 	showSync,
-	syncStartDateTime,
 	warningMessage,
 }) => {
+	const {
+		isCli,
+		isComplete,
+		isFailed,
+		isPaused,
+		itemsProcessed,
+		itemsTotal,
+		lastSyncDateTime,
+		lastSyncFailed,
+		syncStartDateTime,
+	} = useSync();
+
 	return (
 		<>
 			{heading ? <h2 className="ep-sync-heading">{heading}</h2> : null}
@@ -97,7 +92,7 @@ export default ({
 							<p>
 								<Button
 									className="ep-sync-button ep-sync-button--delete"
-									disabled={isDisabled || isSyncing}
+									disabled={isDisabled || isLoading}
 									isSecondary
 									isDestructive
 									onClick={onDelete}
@@ -112,7 +107,7 @@ export default ({
 						<SyncControls
 							disabled={isDisabled}
 							isPaused={isPaused}
-							isSyncing={isSyncing}
+							isLoading={isLoading}
 							onPause={onPause}
 							onResume={onResume}
 							onStop={onStop}
diff --git a/assets/js/sync-ui/index.js b/assets/js/sync-ui/index.js
index a35195ce12..ebcb5a251f 100644
--- a/assets/js/sync-ui/index.js
+++ b/assets/js/sync-ui/index.js
@@ -1,538 +1,41 @@
-/**
- * External dependencies.
- */
-import { v4 as uuid } from 'uuid';
-
 /**
  * WordPress dependencies.
  */
-import {
-	createRoot,
-	render,
-	useCallback,
-	useEffect,
-	useRef,
-	useState,
-	WPElement,
-} from '@wordpress/element';
-import { __, sprintf } from '@wordpress/i18n';
+import { createRoot, render, WPElement } from '@wordpress/element';
+import { SyncProvider } from '../sync';
 
 /**
  * Internal dependencies.
  */
-import { autoIndex, lastSyncDateTime, lastSyncFailed, isEpio, indexMeta } from './config';
-import { useIndex } from './hooks';
 import {
-	clearSyncParam,
-	getItemsProcessedFromIndexMeta,
-	getItemsTotalFromIndexMeta,
-} from './utilities';
-import SyncPage from './components/sync-page';
+	ajaxUrl,
+	autoIndex,
+	lastSyncDateTime,
+	lastSyncFailed,
+	indexMeta,
+	isEpio,
+	nonce,
+} from './config';
+import SettingsPage from './apps/settings-page';
 
 /**
  * App component.
  *
  * @returns {WPElement} App component.
  */
-const App = () => {
-	/**
-	 * Indexing methods.
-	 */
-	const { cancelIndex, index, indexStatus } = useIndex();
-
-	/**
-	 * Message log state.
-	 */
-	const [log, setLog] = useState([]);
-
-	/**
-	 * Sync state.
-	 */
-	const [state, setState] = useState({
-		isComplete: false,
-		isDeleting: false,
-		isFailed: false,
-		isSyncing: false,
-		itemsProcessed: 0,
-		itemsTotal: 100,
-		lastSyncDateTime,
-		lastSyncFailed,
-		syncStartDateTime: null,
-	});
-
-	/**
-	 * Current state reference.
-	 */
-	const stateRef = useRef(state);
-
-	/**
-	 * Update state, and current state ref.
-	 *
-	 * @param {object} newState New state properties.
-	 * @returns {void}
-	 */
-	const updateState = (newState) => {
-		stateRef.current = { ...stateRef.current, ...newState };
-		setState((state) => ({ ...state, ...newState }));
-	};
-
-	const logMessage = useCallback(
-		/**
-		 * Log a message.
-		 *
-		 * @param {Array|string} message Message/s to log.
-		 * @param {string} status Message status.
-		 * @returns {void}
-		 */
-		(message, status) => {
-			const { isDeleting } = stateRef.current;
-
-			const messages = Array.isArray(message) ? message : [message];
-
-			for (const message of messages) {
-				setLog((log) => [...log, { message, status, isDeleting, id: uuid() }]);
-			}
-		},
-		[],
-	);
-
-	const stopSync = useCallback(
-		/**
-		 * Stop syncing.
-		 *
-		 * @returns {void}
-		 */
-		() => {
-			updateState({ isPaused: false, isSyncing: false });
-			cancelIndex();
-		},
-		[cancelIndex],
-	);
-
-	const syncCompleted = useCallback(
-		/**
-		 * Set sync state to completed, with success based on the number of
-		 * failures in the index totals.
-		 *
-		 * @param {object} indexTotals Index totals.
-		 * @returns {void}
-		 */
-		(indexTotals) => {
-			updateState({
-				isComplete: true,
-				isPaused: false,
-				isSyncing: false,
-				lastSyncDateTime: indexTotals.end_date_time,
-				lastSyncFailed: indexTotals.failed > 0,
-			});
-
-			/**
-			 * Hide the "just need to sync" notice, if it's present.
-			 */
-			document.querySelector('[data-ep-notice="no_sync"]')?.remove();
-		},
-		[],
-	);
-
-	const syncFailed = useCallback(
-		/**
-		 * Handle an error in the sync request.
-		 *
-		 * @param {object|Error} response Request response.
-		 * @returns {void}
-		 */
-		(response) => {
-			/**
-			 * Any running requests are cancelled when a new request is made.
-			 * We can handle this silently.
-			 */
-			if (response.name === 'AbortError') {
-				return;
-			}
-
-			/**
-			 * Log any error messages.
-			 */
-			if (response.message) {
-				logMessage(response.message, 'error');
-			}
-
-			/**
-			 * Log a final message and update the sync state.
-			 */
-			logMessage(__('Sync failed', 'elasticpress'), 'error');
-
-			updateState({
-				isFailed: true,
-				isSyncing: false,
-				lastSyncDateTime: stateRef.current.syncStartDateTime,
-				lastSyncFailed: true,
-			});
-		},
-		[logMessage],
-	);
-
-	const syncInterrupted = useCallback(
-		/**
-		 * Set sync state to interrupted.
-		 *
-		 * Logs an appropriate message based on the sync method and
-		 * Elasticsearch hosting.
-		 *
-		 * @returns {void}
-		 */
-		() => {
-			const { isDeleting } = stateRef.current;
-
-			const message = isDeleting
-				? sprintf(
-						/* translators: %s: Index type. ElasticPress.io or Elasticsearch. */
-						__(
-							'Your indexing process has been stopped by WP-CLI and your %s index could be missing content. To restart indexing, please click the Start button or use WP-CLI commands to perform the reindex. Please note that search results could be incorrect or incomplete until the reindex finishes.',
-							'elasticpress',
-						),
-						isEpio
-							? __('ElasticPress.io', 'elasticpress')
-							: __('Elasticsearch', 'elasticpress'),
-				  )
-				: __('Sync interrupted by WP-CLI command.', 'elasticpress');
-
-			logMessage(message, 'info');
-			updateState({ isSyncing: false });
-		},
-		[logMessage],
-	);
-
-	const syncInProgress = useCallback(
-		/**
-		 * Set state for a sync in progress from its index meta.
-		 *
-		 * @param {object} indexMeta Index meta.
-		 * @returns {void}
-		 */
-		(indexMeta) => {
-			const isInitialSync = stateRef.current.lastSyncDateTime === null;
-
-			/**
-			 * We should not appear to be deleting if this is the first sync.
-			 */
-			const isDeleting = isInitialSync ? false : indexMeta.put_mapping;
-
-			updateState({
-				isCli: indexMeta.method === 'cli',
-				isDeleting,
-				isSyncing: true,
-				itemsProcessed: getItemsProcessedFromIndexMeta(indexMeta),
-				itemsTotal: getItemsTotalFromIndexMeta(indexMeta),
-				syncStartDateTime: indexMeta.start_date_time,
-			});
-		},
-		[],
-	);
-
-	const updateSyncState = useCallback(
-		/**
-		 * Handle the response to a request to index.
-		 *
-		 * Updates the application state from the response data and logs any
-		 * messages. Returns a Promise that resolves if syncing should
-		 * continue.
-		 *
-		 * @param {object} response AJAX response.
-		 * @returns {Promise} Promise that resolves if sync is to continue.
-		 */
-		(response) => {
-			const { isPaused, isSyncing } = stateRef.current;
-			const { message, status, totals = [], index_meta: indexMeta } = response.data;
-
-			return new Promise((resolve) => {
-				/**
-				 * Don't continue if syncing has been stopped.
-				 */
-				if (!isSyncing) {
-					return;
-				}
-
-				/**
-				 * Stop sync if there is an error.
-				 */
-				if (status === 'error') {
-					syncFailed(response.data);
-					return;
-				}
-
-				/**
-				 * Log any messages.
-				 */
-				if (message) {
-					logMessage(message, status);
-				}
-
-				/**
-				 * If totals are available the index is complete.
-				 */
-				if (!Array.isArray(totals)) {
-					syncCompleted(totals);
-					return;
-				}
-
-				/**
-				 * Update sync progress from index meta.
-				 */
-				syncInProgress(indexMeta);
-
-				/**
-				 * Don't continue if the sync was interrupted externally.
-				 */
-				if (indexMeta.should_interrupt_sync) {
-					syncInterrupted();
-					return;
-				}
-
-				/**
-				 * Don't continue if syncing has been paused.
-				 */
-				if (isPaused) {
-					logMessage(__('Sync paused', 'elasticpress'), 'info');
-					return;
-				}
-
-				/**
-				 * Syncing should continue.
-				 */
-				resolve(indexMeta.method);
-			});
-		},
-		[syncCompleted, syncFailed, syncInProgress, syncInterrupted, logMessage],
-	);
-
-	const doIndexStatus = useCallback(
-		/**
-		 * Check the status of a sync.
-		 *
-		 * Used to get the status of an external sync already in progress, such
-		 * as a WP CLI index.
-		 *
-		 * @returns {void}
-		 */
-		() => {
-			indexStatus().then(updateSyncState).then(doIndexStatus).catch(syncFailed);
-		},
-		[indexStatus, syncFailed, updateSyncState],
-	);
-
-	const doIndex = useCallback(
-		/**
-		 * Start or continue a sync.
-		 *
-		 * @param {boolean} putMapping Whether to send mapping.
-		 * @returns {void}
-		 */
-		(putMapping) => {
-			index(putMapping)
-				.then(updateSyncState)
-				.then(
-					/**
-					 * If an existing sync has been found just check its status,
-					 * otherwise continue syncing.
-					 *
-					 * @param {string} method Sync method.
-					 */
-					(method) => {
-						if (method === 'cli') {
-							doIndexStatus();
-						} else {
-							doIndex(putMapping);
-						}
-					},
-				)
-				.catch(syncFailed);
-		},
-		[doIndexStatus, index, syncFailed, updateSyncState],
-	);
-
-	const pauseSync = useCallback(
-		/**
-		 * Stop syncing.
-		 *
-		 * @returns {void}
-		 */
-		() => {
-			updateState({ isPaused: true, isSyncing: true });
-		},
-		[],
-	);
-
-	const resumeSync = useCallback(
-		/**
-		 * Resume syncing.
-		 *
-		 * @returns {void}
-		 */
-		() => {
-			const { isDeleting, lastSyncDateTime } = stateRef.current;
-			const isInitialSync = lastSyncDateTime === null;
-
-			/**
-			 * Send mapping if we are deleting and syncing or if this is the
-			 * first sync.
-			 */
-			const putMapping = isInitialSync || isDeleting;
-
-			updateState({ isPaused: false, isSyncing: true });
-			doIndex(putMapping);
-		},
-		[doIndex],
-	);
-
-	const startSync = useCallback(
-		/**
-		 * Start syncing.
-		 *
-		 * @param {boolean} deleteAndSync Whether to delete and sync.
-		 * @returns {void}
-		 */
-		(deleteAndSync) => {
-			const { lastSyncDateTime } = stateRef.current;
-			const isInitialSync = lastSyncDateTime === null;
-
-			/**
-			 * We should not appear to be deleting if this is the first sync.
-			 */
-			const isDeleting = isInitialSync ? false : deleteAndSync;
-
-			/**
-			 * Send mapping if we are deleting and syncing or if this is the
-			 * first sync.
-			 */
-			const putMapping = isInitialSync || deleteAndSync;
-
-			updateState({
-				isComplete: false,
-				isFailed: false,
-				isDeleting,
-				isPaused: false,
-				isSyncing: true,
-			});
-
-			updateState({ itemsProcessed: 0, syncStartDateTime: Date.now() });
-			doIndex(putMapping);
-		},
-		[doIndex],
-	);
-
-	/**
-	 * Handle clicking delete and sync button.
-	 *
-	 * @returns {void}
-	 */
-	const onDelete = async () => {
-		startSync(true);
-		logMessage(__('Starting delete and sync…', 'elasticpress'), 'info');
-	};
-
-	/**
-	 * Handle clicking pause button.
-	 *
-	 * @returns {void}
-	 */
-	const onPause = () => {
-		pauseSync();
-		logMessage(__('Pausing sync…', 'elasticpress'), 'info');
-	};
-
-	/**
-	 * Handle clicking play button.
-	 *
-	 * @returns {void}
-	 */
-	const onResume = () => {
-		resumeSync();
-		logMessage(__('Resuming sync…', 'elasticpress'), 'info');
-	};
-
-	/**
-	 * Handle clicking stop button.
-	 *
-	 * @returns {void}
-	 */
-	const onStop = () => {
-		stopSync();
-		logMessage(__('Sync stopped', 'elasticpress'), 'info');
-	};
-
-	/**
-	 * Handle clicking sync button.
-	 *
-	 * @returns {void}
-	 */
-	const onSync = async () => {
-		startSync(false);
-		logMessage(__('Starting sync…', 'elasticpress'), 'info');
-	};
-
-	/**
-	 * Initialize.
-	 *
-	 * @returns {void}
-	 */
-	const init = () => {
-		/**
-		 * Clear sync parameter from the URL to prevent a refresh triggering a new
-		 * sync.
-		 */
-		clearSyncParam();
-
-		/**
-		 * If a sync is in progress, update state to reflect its progress.
-		 */
-		if (indexMeta) {
-			syncInProgress(indexMeta);
-
-			/**
-			 * If the sync is a CLI sync, start getting its status.
-			 */
-			if (indexMeta.method === 'cli') {
-				doIndexStatus();
-				logMessage(__('WP CLI sync in progress', 'elasticpress'), 'info');
-			} else {
-				pauseSync();
-				logMessage(__('Sync paused', 'elasticpress'), 'info');
-			}
-
-			return;
-		}
-
-		/**
-		 * Start an initial index.
-		 */
-		if (autoIndex) {
-			startSync(true);
-			logMessage(__('Starting delete and sync…', 'elasticpress'), 'info');
-		}
-	};
-
-	/**
-	 * Effects.
-	 */
-	useEffect(init, [doIndexStatus, syncInProgress, logMessage, pauseSync, startSync]);
-
-	/**
-	 * Render.
-	 */
-	return (
-		<SyncPage
-			isEpio={isEpio}
-			log={log}
-			onDelete={onDelete}
-			onPause={onPause}
-			onResume={onResume}
-			onStop={onStop}
-			onSync={onSync}
-			{...state}
-		/>
-	);
-};
+const App = () => (
+	<SyncProvider
+		ajaxUrl={ajaxUrl}
+		autoIndex={autoIndex}
+		defaultLastSyncDateTime={lastSyncDateTime}
+		defaultLastSyncFailed={lastSyncFailed}
+		indexMeta={indexMeta}
+		isEpio={isEpio}
+		nonce={nonce}
+	>
+		<SettingsPage />
+	</SyncProvider>
+);
 
 if (typeof createRoot === 'function') {
 	const root = createRoot(document.getElementById('ep-sync'));
diff --git a/assets/js/sync/index.js b/assets/js/sync/index.js
new file mode 100644
index 0000000000..db02397409
--- /dev/null
+++ b/assets/js/sync/index.js
@@ -0,0 +1,549 @@
+/**
+ * External dependencies.
+ */
+import { v4 as uuid } from 'uuid';
+
+/**
+ * WordPress dependencies.
+ */
+import {
+	createContext,
+	useCallback,
+	useContext,
+	useEffect,
+	useRef,
+	useState,
+	WPElement,
+} from '@wordpress/element';
+import { __, sprintf } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies.
+ */
+import { useIndex } from './src/hooks';
+import {
+	clearSyncParam,
+	getItemsProcessedFromIndexMeta,
+	getItemsTotalFromIndexMeta,
+} from './src/utilities';
+
+/**
+ * Sync context.
+ */
+const Context = createContext();
+
+/**
+ * App component.
+ *
+ * @param {object} props Component props.
+ * @param {string} props.ajaxUrl AJAX URL endpoint.
+ * @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.
+ * @param {boolean} props.defaultLastSyncFailed Whether the last sync failed.
+ * @param {object|null} props.indexMeta Details of a sync in progress.
+ * @param {boolean} props.isEpio Whether ElasticPress.io is in use.
+ * @param {string} props.nonce WordPress nonce.
+ * @returns {WPElement} App component.
+ */
+export const SyncProvider = ({
+	ajaxUrl,
+	autoIndex,
+	children,
+	defaultLastSyncDateTime,
+	defaultLastSyncFailed,
+	indexMeta,
+	isEpio,
+	nonce,
+}) => {
+	/**
+	 * Indexing methods.
+	 */
+	const { cancelIndex, index, indexStatus } = useIndex(ajaxUrl, nonce);
+
+	/**
+	 * Message log state.
+	 */
+	const [log, setLog] = useState([]);
+
+	/**
+	 * Sync state.
+	 */
+	const [state, setState] = useState({
+		isCli: false,
+		isComplete: false,
+		isDeleting: false,
+		isFailed: false,
+		isPaused: false,
+		isSyncing: false,
+		itemsProcessed: 0,
+		itemsTotal: 100,
+		lastSyncDateTime: defaultLastSyncDateTime,
+		lastSyncFailed: defaultLastSyncFailed,
+		syncStartDateTime: null,
+	});
+
+	/**
+	 * Current state reference.
+	 */
+	const stateRef = useRef(state);
+
+	/**
+	 * Update state, and current state ref.
+	 *
+	 * @param {object} newState New state properties.
+	 * @returns {void}
+	 */
+	const updateState = (newState) => {
+		stateRef.current = { ...stateRef.current, ...newState };
+		setState((state) => ({ ...state, ...newState }));
+	};
+
+	const logMessage = useCallback(
+		/**
+		 * Log a message.
+		 *
+		 * @param {Array|string} message Message/s to log.
+		 * @param {string} status Message status.
+		 * @returns {void}
+		 */
+		(message, status) => {
+			const { isDeleting } = stateRef.current;
+
+			const messages = Array.isArray(message) ? message : [message];
+
+			for (const message of messages) {
+				setLog((log) => [...log, { message, status, isDeleting, id: uuid() }]);
+			}
+		},
+		[],
+	);
+
+	const stopSync = useCallback(
+		/**
+		 * Stop syncing.
+		 *
+		 * @returns {void}
+		 */
+		() => {
+			updateState({ isPaused: false, isSyncing: false });
+			cancelIndex();
+		},
+		[cancelIndex],
+	);
+
+	const syncCompleted = useCallback(
+		/**
+		 * Set sync state to completed, with success based on the number of
+		 * failures in the index totals.
+		 *
+		 * @param {object} indexTotals Index totals.
+		 * @returns {void}
+		 */
+		(indexTotals) => {
+			updateState({
+				isComplete: true,
+				isPaused: false,
+				isSyncing: false,
+				lastSyncDateTime: indexTotals.end_date_time,
+				lastSyncFailed: indexTotals.failed > 0,
+			});
+
+			/**
+			 * Hide the "just need to sync" notice, if it's present.
+			 */
+			document.querySelector('[data-ep-notice="no_sync"]')?.remove();
+		},
+		[],
+	);
+
+	const syncFailed = useCallback(
+		/**
+		 * Handle an error in the sync request.
+		 *
+		 * @param {object|Error} response Request response.
+		 * @returns {void}
+		 */
+		(response) => {
+			/**
+			 * Any running requests are cancelled when a new request is made.
+			 * We can handle this silently.
+			 */
+			if (response.name === 'AbortError') {
+				return;
+			}
+
+			/**
+			 * Log any error messages.
+			 */
+			if (response.message) {
+				logMessage(response.message, 'error');
+			}
+
+			/**
+			 * Log a final message and update the sync state.
+			 */
+			logMessage(__('Sync failed', 'elasticpress'), 'error');
+
+			updateState({
+				isFailed: true,
+				isSyncing: false,
+				lastSyncDateTime: stateRef.current.syncStartDateTime,
+				lastSyncFailed: true,
+			});
+		},
+		[logMessage],
+	);
+
+	const syncInterrupted = useCallback(
+		/**
+		 * Set sync state to interrupted.
+		 *
+		 * Logs an appropriate message based on the sync method and
+		 * Elasticsearch hosting.
+		 *
+		 * @returns {void}
+		 */
+		() => {
+			const { isDeleting } = stateRef.current;
+
+			const message = isDeleting
+				? sprintf(
+						/* translators: %s: Index type. ElasticPress.io or Elasticsearch. */
+						__(
+							'Your indexing process has been stopped by WP-CLI and your %s index could be missing content. To restart indexing, please click the Start button or use WP-CLI commands to perform the reindex. Please note that search results could be incorrect or incomplete until the reindex finishes.',
+							'elasticpress',
+						),
+						isEpio
+							? __('ElasticPress.io', 'elasticpress')
+							: __('Elasticsearch', 'elasticpress'),
+				  )
+				: __('Sync interrupted by WP-CLI command.', 'elasticpress');
+
+			logMessage(message, 'info');
+			updateState({ isSyncing: false });
+		},
+		[isEpio, logMessage],
+	);
+
+	const syncInProgress = useCallback(
+		/**
+		 * Set state for a sync in progress from its index meta.
+		 *
+		 * @param {object} indexMeta Index meta.
+		 * @returns {void}
+		 */
+		(indexMeta) => {
+			const isInitialSync = stateRef.current.lastSyncDateTime === null;
+
+			/**
+			 * We should not appear to be deleting if this is the first sync.
+			 */
+			const isDeleting = isInitialSync ? false : indexMeta.put_mapping;
+
+			updateState({
+				isCli: indexMeta.method === 'cli',
+				isDeleting,
+				isSyncing: true,
+				itemsProcessed: getItemsProcessedFromIndexMeta(indexMeta),
+				itemsTotal: getItemsTotalFromIndexMeta(indexMeta),
+				syncStartDateTime: indexMeta.start_date_time,
+			});
+		},
+		[],
+	);
+
+	const updateSyncState = useCallback(
+		/**
+		 * Handle the response to a request to index.
+		 *
+		 * Updates the application state from the response data and logs any
+		 * messages. Returns a Promise that resolves if syncing should
+		 * continue.
+		 *
+		 * @param {object} response AJAX response.
+		 * @returns {Promise} Promise that resolves if sync is to continue.
+		 */
+		(response) => {
+			const { isPaused, isSyncing } = stateRef.current;
+			const { message, status, totals = [], index_meta: indexMeta } = response.data;
+
+			return new Promise((resolve) => {
+				/**
+				 * Don't continue if syncing has been stopped.
+				 */
+				if (!isSyncing) {
+					return;
+				}
+
+				/**
+				 * Stop sync if there is an error.
+				 */
+				if (status === 'error') {
+					syncFailed(response.data);
+					return;
+				}
+
+				/**
+				 * Log any messages.
+				 */
+				if (message) {
+					logMessage(message, status);
+				}
+
+				/**
+				 * If totals are available the index is complete.
+				 */
+				if (!Array.isArray(totals)) {
+					syncCompleted(totals);
+					return;
+				}
+
+				/**
+				 * Update sync progress from index meta.
+				 */
+				syncInProgress(indexMeta);
+
+				/**
+				 * Don't continue if the sync was interrupted externally.
+				 */
+				if (indexMeta.should_interrupt_sync) {
+					syncInterrupted();
+					return;
+				}
+
+				/**
+				 * Don't continue if syncing has been paused.
+				 */
+				if (isPaused) {
+					logMessage(__('Sync paused', 'elasticpress'), 'info');
+					return;
+				}
+
+				/**
+				 * Syncing should continue.
+				 */
+				resolve(indexMeta.method);
+			});
+		},
+		[syncCompleted, syncFailed, syncInProgress, syncInterrupted, logMessage],
+	);
+
+	const doIndexStatus = useCallback(
+		/**
+		 * Check the status of a sync.
+		 *
+		 * Used to get the status of an external sync already in progress, such
+		 * as a WP CLI index.
+		 *
+		 * @returns {void}
+		 */
+		() => {
+			indexStatus().then(updateSyncState).then(doIndexStatus).catch(syncFailed);
+		},
+		[indexStatus, syncFailed, updateSyncState],
+	);
+
+	const doIndex = useCallback(
+		/**
+		 * Start or continue a sync.
+		 *
+		 * @param {boolean} putMapping Whether to send mapping.
+		 * @returns {void}
+		 */
+		(putMapping) => {
+			index(putMapping)
+				.then(updateSyncState)
+				.then(
+					/**
+					 * If an existing sync has been found just check its status,
+					 * otherwise continue syncing.
+					 *
+					 * @param {string} method Sync method.
+					 */
+					(method) => {
+						if (method === 'cli') {
+							doIndexStatus();
+						} else {
+							doIndex(putMapping);
+						}
+					},
+				)
+				.catch(syncFailed);
+		},
+		[doIndexStatus, index, syncFailed, updateSyncState],
+	);
+
+	const pauseSync = useCallback(
+		/**
+		 * Stop syncing.
+		 *
+		 * @returns {void}
+		 */
+		() => {
+			updateState({ isPaused: true, isSyncing: true });
+		},
+		[],
+	);
+
+	const resumeSync = useCallback(
+		/**
+		 * Resume syncing.
+		 *
+		 * @returns {void}
+		 */
+		() => {
+			const { isDeleting, lastSyncDateTime } = stateRef.current;
+			const isInitialSync = lastSyncDateTime === null;
+
+			/**
+			 * Send mapping if we are deleting and syncing or if this is the
+			 * first sync.
+			 */
+			const putMapping = isInitialSync || isDeleting;
+
+			updateState({ isPaused: false, isSyncing: true });
+			doIndex(putMapping);
+		},
+		[doIndex],
+	);
+
+	const startSync = useCallback(
+		/**
+		 * Start syncing.
+		 *
+		 * @param {boolean} deleteAndSync Whether to delete and sync.
+		 * @returns {void}
+		 */
+		(deleteAndSync) => {
+			const { lastSyncDateTime } = stateRef.current;
+			const isInitialSync = lastSyncDateTime === null;
+
+			/**
+			 * We should not appear to be deleting if this is the first sync.
+			 */
+			const isDeleting = isInitialSync ? false : deleteAndSync;
+
+			/**
+			 * Send mapping if we are deleting and syncing or if this is the
+			 * first sync.
+			 */
+			const putMapping = isInitialSync || deleteAndSync;
+
+			updateState({
+				isComplete: false,
+				isFailed: false,
+				isDeleting,
+				isPaused: false,
+				isSyncing: true,
+			});
+
+			updateState({ itemsProcessed: 0, syncStartDateTime: Date.now() });
+			doIndex(putMapping);
+		},
+		[doIndex],
+	);
+
+	/**
+	 * Initialize.
+	 *
+	 * @returns {void}
+	 */
+	const init = () => {
+		/**
+		 * Clear sync parameter from the URL to prevent a refresh triggering a new
+		 * sync.
+		 */
+		clearSyncParam();
+
+		/**
+		 * If a sync is in progress, update state to reflect its progress.
+		 */
+		if (indexMeta) {
+			syncInProgress(indexMeta);
+
+			/**
+			 * If the sync is a CLI sync, start getting its status.
+			 */
+			if (indexMeta.method === 'cli') {
+				doIndexStatus();
+				logMessage(__('WP CLI sync in progress', 'elasticpress'), 'info');
+			} else {
+				pauseSync();
+				logMessage(__('Sync paused', 'elasticpress'), 'info');
+			}
+
+			return;
+		}
+
+		/**
+		 * Start an initial index.
+		 */
+		if (autoIndex) {
+			startSync(true);
+			logMessage(__('Starting delete and sync…', 'elasticpress'), 'info');
+		}
+	};
+
+	/**
+	 * Effects.
+	 */
+	useEffect(init, [
+		autoIndex,
+		doIndexStatus,
+		syncInProgress,
+		indexMeta,
+		logMessage,
+		pauseSync,
+		startSync,
+	]);
+
+	/**
+	 * Provide state to context.
+	 */
+	const {
+		isCli,
+		isComplete,
+		isDeleting,
+		isFailed,
+		isPaused,
+		isSyncing,
+		itemsProcessed,
+		itemsTotal,
+		lastSyncDateTime,
+		lastSyncFailed,
+		syncStartDateTime,
+	} = stateRef.current;
+
+	// eslint-disable-next-line react/jsx-no-constructed-context-values
+	const contextValue = {
+		isCli,
+		isComplete,
+		isDeleting,
+		isFailed,
+		isPaused,
+		isSyncing,
+		itemsProcessed,
+		itemsTotal,
+		lastSyncDateTime,
+		lastSyncFailed,
+		log,
+		logMessage,
+		pauseSync,
+		resumeSync,
+		startSync,
+		stopSync,
+		syncStartDateTime,
+	};
+
+	return <Context.Provider value={contextValue}>{children}</Context.Provider>;
+};
+
+/**
+ * Use the API Search context.
+ *
+ * @returns {object} API Search Context.
+ */
+export const useSync = () => {
+	return useContext(Context);
+};
diff --git a/assets/js/sync-ui/hooks.js b/assets/js/sync/src/hooks.js
similarity index 95%
rename from assets/js/sync-ui/hooks.js
rename to assets/js/sync/src/hooks.js
index e4786a0b37..114fd36f66 100644
--- a/assets/js/sync-ui/hooks.js
+++ b/assets/js/sync/src/hooks.js
@@ -4,11 +4,6 @@
 import { useCallback, useRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
-/**
- * Internal dependencies.
- */
-import { ajaxUrl, nonce } from './config';
-
 /**
  * Indexing hook.
  *
@@ -17,9 +12,11 @@ import { ajaxUrl, nonce } from './config';
  * 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} nonce WordPress nonce.
  * @returns {object} Sync, sync status, and cancel functions.
  */
-export const useIndex = () => {
+export const useIndex = (ajaxUrl, nonce) => {
 	const abort = useRef(new AbortController());
 	const request = useRef(null);
 
@@ -131,7 +128,7 @@ export const useIndex = () => {
 
 			return request.current;
 		},
-		[onComplete, onResponse],
+		[ajaxUrl, onComplete, onResponse],
 	);
 
 	const cancelIndex = useCallback(
@@ -157,7 +154,7 @@ export const useIndex = () => {
 
 			return sendRequest(options);
 		},
-		[sendRequest],
+		[nonce, sendRequest],
 	);
 
 	const index = useCallback(
@@ -185,7 +182,7 @@ export const useIndex = () => {
 
 			return sendRequest(options);
 		},
-		[sendRequest],
+		[nonce, sendRequest],
 	);
 
 	const indexStatus = useCallback(
@@ -211,7 +208,7 @@ export const useIndex = () => {
 
 			return sendRequest(options);
 		},
-		[sendRequest],
+		[nonce, sendRequest],
 	);
 
 	return { cancelIndex, index, indexStatus };
diff --git a/assets/js/sync-ui/utilities.js b/assets/js/sync/src/utilities.js
similarity index 100%
rename from assets/js/sync-ui/utilities.js
rename to assets/js/sync/src/utilities.js