| 1 |
/** |
| 2 |
* WordPress dependencies. |
| 3 |
*/ |
| 4 |
import apiFetch from '@wordpress/api-fetch'; |
| 5 |
import { ToggleControl } from '@wordpress/components'; |
| 6 |
import domReady from '@wordpress/dom-ready'; |
| 7 |
import { render, useState, WPElement } from '@wordpress/element'; |
| 8 |
import { __ } from '@wordpress/i18n'; |
| 9 |
|
| 10 |
/** |
| 11 |
* Window dependencies. |
| 12 |
*/ |
| 13 |
const { ajaxurl, epsa } = window; |
| 14 |
|
| 15 |
/** |
| 16 |
* Toggle component. |
| 17 |
* |
| 18 |
* @param {object} props Component props. |
| 19 |
* @param {string} props.blogId Blog ID. |
| 20 |
* @param {boolean} props.isDefaultChecked Whether checked by default. |
| 21 |
* @returns {WPElement} Toggle component. |
| 22 |
*/ |
| 23 |
const ElasticPressToggleControl = ({ blogId, isDefaultChecked }) => { |
| 24 |
const [isChecked, setIsChecked] = useState(isDefaultChecked); |
| 25 |
const [isLoading, setIsLoading] = useState(false); |
| 26 |
|
| 27 |
/** |
| 28 |
* Handle toggle change. |
| 29 |
* |
| 30 |
* @param {boolean} isChecked New checked state. |
| 31 |
* @returns {void} |
| 32 |
*/ |
| 33 |
const onChange = async (isChecked) => { |
| 34 |
setIsChecked(isChecked); |
| 35 |
setIsLoading(true); |
| 36 |
|
| 37 |
const formData = new FormData(); |
| 38 |
|
| 39 |
formData.append('action', 'ep_site_admin'); |
| 40 |
formData.append('blog_id', blogId); |
| 41 |
formData.append('checked', isChecked ? 'yes' : 'no'); |
| 42 |
formData.append('nonce', epsa.nonce); |
| 43 |
|
| 44 |
await apiFetch({ |
| 45 |
method: 'POST', |
| 46 |
url: ajaxurl, |
| 47 |
body: formData, |
| 48 |
}); |
| 49 |
|
| 50 |
setIsLoading(false); |
| 51 |
}; |
| 52 |
|
| 53 |
return ( |
| 54 |
<ToggleControl |
| 55 |
checked={isChecked} |
| 56 |
className="index-toggle" |
| 57 |
disabled={isLoading} |
| 58 |
label={isChecked ? __('On', 'elasticpress') : __('Off', 'elasticpress')} |
| 59 |
onChange={onChange} |
| 60 |
/> |
| 61 |
); |
| 62 |
}; |
| 63 |
|
| 64 |
/** |
| 65 |
* Initialize. |
| 66 |
* |
| 67 |
* @returns {void} |
| 68 |
*/ |
| 69 |
const init = () => { |
| 70 |
const toggles = document.getElementsByClassName('index-toggle'); |
| 71 |
|
| 72 |
for (const toggle of toggles) { |
| 73 |
render( |
| 74 |
<ElasticPressToggleControl |
| 75 |
blogId={toggle.dataset.blogId} |
| 76 |
isDefaultChecked={toggle.checked} |
| 77 |
/>, |
| 78 |
toggle.parentElement, |
| 79 |
); |
| 80 |
} |
| 81 |
}; |
| 82 |
|
| 83 |
domReady(init); |
| 84 |
|
