Abstract Sync page logic into a provider pattern

assets/js/sync/components/sync-page.js → 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,18 +126,20 @@ 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)}
 					warningMessage={__(
 						'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}
 		</>

assets/js/sync/components/sync/controls.js → assets/js/sync-ui/components/sync/controls.js

@@ -18,22 +18,22 @@ 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.
  * @param {Function} props.onSync Sync button click callback.
  * @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 ? (

assets/js/sync/components/sync/panel.js → assets/js/sync-ui/components/sync/panel.js

@@ -13,30 +13,22 @@ import SyncControls from './controls';
 import SyncLog from './log';
 import SyncProgress from './progress';
 import SyncStatus from './status';
+import { useSync } from '../../../sync';
 
 /**
  * Sync page component.
  *
  * @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}

assets/js/sync-ui/index.js

@@ -0,0 +1,46 @@
+/**
+ * WordPress dependencies.
+ */
+import { createRoot, render, WPElement } from '@wordpress/element';
+import { SyncProvider } from '../sync';
+
+/**
+ * Internal dependencies.
+ */
+import {
+	ajaxUrl,
+	autoIndex,
+	lastSyncDateTime,
+	lastSyncFailed,
+	indexMeta,
+	isEpio,
+	nonce,
+} from './config';
+import SettingsPage from './apps/settings-page';
+
+/**
+ * App component.
+ *
+ * @returns {WPElement} App component.
+ */
+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'));
+
+	root.render(<App />);
+} else {
+	render(<App />, document.getElementById('ep-sync'));
+}