| 1 |
/** |
| 2 |
* WordPress dependencies. |
| 3 |
*/ |
| 4 |
import { Panel, PanelBody } from '@wordpress/components'; |
| 5 |
import { useEffect, useState, WPElement } from '@wordpress/element'; |
| 6 |
import { __, sprintf } from '@wordpress/i18n'; |
| 7 |
|
| 8 |
/** |
| 9 |
* Internal dependencies. |
| 10 |
*/ |
| 11 |
|
| 12 |
import { useSettingsScreen } from '../../settings-screen'; |
| 13 |
import { useSync } from '../../sync'; |
| 14 |
import Controls from '../components/controls'; |
| 15 |
import Indexables from '../components/types'; |
| 16 |
import Log from '../components/log'; |
| 17 |
import Objects from '../components/objects'; |
| 18 |
import Progress from '../components/progress'; |
| 19 |
import PutMapping from '../components/put-mapping'; |
| 20 |
import SyncHistory from '../components/sync-history'; |
| 21 |
import { useSyncSettings } from '../provider'; |
| 22 |
|
| 23 |
/** |
| 24 |
* Sync page component. |
| 25 |
* |
| 26 |
* @returns {WPElement} Sync page component. |
| 27 |
*/ |
| 28 |
export default () => { |
| 29 |
const { createNotice } = useSettingsScreen(); |
| 30 |
const { |
| 31 |
errorCounts, |
| 32 |
isComplete, |
| 33 |
isEpio, |
| 34 |
isSyncing, |
| 35 |
logMessage, |
| 36 |
startSync, |
| 37 |
syncHistory, |
| 38 |
syncTrigger, |
| 39 |
} = useSync(); |
| 40 |
const { args, autoIndex } = useSyncSettings(); |
| 41 |
|
| 42 |
/** |
| 43 |
* State. |
| 44 |
*/ |
| 45 |
const [isLogOpen, setIsLogOpen] = useState(false); |
| 46 |
const [errorCount, setErrorCount] = useState(0); |
| 47 |
|
| 48 |
/** |
| 49 |
* Handle toggling the log panel. |
| 50 |
* |
| 51 |
* @param {boolean} opened Whether the panel will be open. |
| 52 |
*/ |
| 53 |
const onToggleLog = (opened) => { |
| 54 |
setIsLogOpen(opened); |
| 55 |
}; |
| 56 |
|
| 57 |
/** |
| 58 |
* Display a notice when a sync is complete. |
| 59 |
*/ |
| 60 |
const onCompleteDisplayNotice = () => { |
| 61 |
if (isComplete) { |
| 62 |
createNotice('success', __('Sync completed.', 'elasticpress')); |
| 63 |
} |
| 64 |
}; |
| 65 |
|
| 66 |
/** |
| 67 |
* Handle logs and errors count when a sync is complete. |
| 68 |
*/ |
| 69 |
const onComplete = () => { |
| 70 |
if (isComplete) { |
| 71 |
const newErrorCount = errorCounts.reduce((c, e) => c + e.count, 0); |
| 72 |
|
| 73 |
if (newErrorCount > errorCount) { |
| 74 |
setIsLogOpen(true); |
| 75 |
} |
| 76 |
|
| 77 |
setErrorCount(newErrorCount); |
| 78 |
} |
| 79 |
}; |
| 80 |
|
| 81 |
/** |
| 82 |
* Initialize. |
| 83 |
* |
| 84 |
* @returns {void} |
| 85 |
*/ |
| 86 |
const onInit = () => { |
| 87 |
if (autoIndex) { |
| 88 |
startSync({ put_mapping: true, trigger: syncTrigger }); |
| 89 |
logMessage(__('Starting delete and sync…', 'elasticpress'), 'info'); |
| 90 |
} |
| 91 |
}; |
| 92 |
|
| 93 |
/** |
| 94 |
* Handle clicking sync button. |
| 95 |
* |
| 96 |
* @param {Event} event Submit event. |
| 97 |
* @returns {void} |
| 98 |
*/ |
| 99 |
const onSync = async (event) => { |
| 100 |
event.preventDefault(); |
| 101 |
|
| 102 |
const { put_mapping } = args; |
| 103 |
|
| 104 |
const putMapping = syncHistory.length ? put_mapping : true; |
| 105 |
const syncArgs = { ...args, put_mapping: putMapping, trigger: 'manual' }; |
| 106 |
|
| 107 |
startSync(syncArgs); |
| 108 |
logMessage(__('Starting sync…', 'elasticpress'), 'info'); |
| 109 |
}; |
| 110 |
|
| 111 |
useEffect(onCompleteDisplayNotice, [createNotice, isComplete]); |
| 112 |
useEffect(onComplete, [createNotice, errorCount, errorCounts, isComplete]); |
| 113 |
useEffect(onInit, [autoIndex, logMessage, startSync, syncTrigger]); |
| 114 |
|
| 115 |
return ( |
| 116 |
<form onSubmit={onSync}> |
| 117 |
<p> |
| 118 |
{syncHistory.length |
| 119 |
? __( |
| 120 |
'ElasticPress automatically syncs your content every time you create, delete, or update it. After the initial sync, manual syncs are rarely needed unless you make changes to your content programmatically, enable certain features, or change your Elasticsearch mapping via code.', |
| 121 |
'elasticpress', |
| 122 |
) |
| 123 |
: sprintf( |
| 124 |
/* translators: %s: Index type. ElasticPress.io or Elasticsearch. */ |
| 125 |
__( |
| 126 |
'Run a sync to index your existing content %s. Once syncing finishes, your site is officially supercharged.', |
| 127 |
'elasticpress', |
| 128 |
), |
| 129 |
isEpio |
| 130 |
? __('on ElasticPress.io', 'elasticpress') |
| 131 |
: __('in Elasticsearch', 'elasticpress'), |
| 132 |
)} |
| 133 |
</p> |
| 134 |
<p> |
| 135 |
<b> |
| 136 |
{__( |
| 137 |
'The sync will pause if you close this window. Please keep it open until completion.', |
| 138 |
'elasticpress', |
| 139 |
)} |
| 140 |
</b> |
| 141 |
</p> |
| 142 |
<Panel className="ep-sync-panel"> |
| 143 |
<PanelBody className="ep-sync-panel__controls"> |
| 144 |
{isSyncing || isComplete ? <Progress /> : null} |
| 145 |
<Controls /> |
| 146 |
{syncHistory.length ? <PutMapping /> : null} |
| 147 |
</PanelBody> |
| 148 |
<PanelBody onToggle={onToggleLog} opened={isLogOpen} title="Log"> |
| 149 |
<Log /> |
| 150 |
</PanelBody> |
| 151 |
{syncHistory.length ? ( |
| 152 |
<> |
| 153 |
<PanelBody |
| 154 |
className="ep-sync-panel__advanced" |
| 155 |
initialOpen={false} |
| 156 |
title={__('Advanced options', 'elasticpress')} |
| 157 |
> |
| 158 |
<Indexables /> |
| 159 |
<Objects /> |
| 160 |
</PanelBody> |
| 161 |
<PanelBody title={__('Sync history', 'elasticpress')}> |
| 162 |
<SyncHistory /> |
| 163 |
</PanelBody> |
| 164 |
</> |
| 165 |
) : null} |
| 166 |
</Panel> |
| 167 |
</form> |
| 168 |
); |
| 169 |
}; |
| 170 |
|
