# elasticpress/4.2.1/assets/js/synonyms/components/SynonymsEditor.js

ElasticPress, version 4.2.1. 128 lines.

- Page: https://pluginprobe.com/plugins/elasticpress/4.2.1/code/assets/js/synonyms/components/SynonymsEditor.js
- Raw: https://pluginprobe.com/plugins/elasticpress/4.2.1/raw/assets/js/synonyms/components/SynonymsEditor.js
- Modified: 2022-05-26T12:34:34+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/elasticpress/4.2.1/code/assets/js/synonyms/components/SynonymsEditor.js#L10-L20`.

```javascript
/**
 * WordPress dependencies.
 */
import { useContext, useEffect, WPElement } from '@wordpress/element';

/**
 * Internal dependencies.
 */
import { State, Dispatch } from '../context';
import AlterativesEditor from './editors/AlternativesEditor';
import SetsEditor from './editors/SetsEditor';
import SolrEditor from './editors/SolrEditor';

/**
 * Synonyms editor component.
 *
 * @returns {WPElement} Synonyms component
 */
const SynonymsEditor = () => {
	const state = useContext(State);
	const dispatch = useContext(Dispatch);
	const { alternatives, sets, isSolrEditable, isSolrVisible, dirty, submit } = state;
	const {
		pageHeading,
		pageDescription,
		pageToggleAdvanceText,
		pageToggleSimpleText,
		alternativesTitle,
		alternativesDescription,
		setsTitle,
		setsDescription,
		solrTitle,
		solrDescription,
		submitText,
	} = window.epSynonyms.i18n;

	/**
	 * Checks if the form is valid.
	 *
	 * @param {object} _state Current state.
	 * @returns {boolean} If the form is valid
	 */
	const isValid = (_state) => {
		return [..._state.sets, ..._state.alternatives].reduce((valid, item) => {
			return !valid ? valid : item.valid;
		}, true);
	};

	/**
	 * Handles submitting the form.
	 */
	const handleSubmit = () => {
		if (isSolrEditable) {
			dispatch({ type: 'REDUCE_SOLR_TO_STATE' });
		}

		dispatch({ type: 'VALIDATE_ALL' });
		dispatch({ type: 'REDUCE_STATE_TO_SOLR' });
		dispatch({ type: 'SUBMIT' });
	};

	/**
	 * Handle toggling the editor type.
	 */
	const handleToggleAdvance = () => {
		if (isSolrEditable) {
			dispatch({ type: 'REDUCE_SOLR_TO_STATE' });
		} else {
			dispatch({ type: 'REDUCE_STATE_TO_SOLR' });
		}

		dispatch({ type: 'SET_SOLR_EDITABLE', data: !isSolrEditable });
	};

	useEffect(() => {
		if (submit && !dirty && isValid(state)) {
			document.querySelector('.wrap form').submit();
		}
	}, [submit, dirty, state]);

	return (
		<>
			<h1 className="wp-heading-inline">
				{pageHeading}{' '}
				<button onClick={handleToggleAdvance} type="button" className="page-title-action">
					{isSolrEditable ? pageToggleSimpleText : pageToggleAdvanceText}
				</button>
			</h1>
			<p>{pageDescription}</p>

			{!isSolrEditable && (
				<>
					<div className="synonym-editor synonym-editor__sets">
						<h2>{`${setsTitle} (${sets.length})`}</h2>
						<p>{setsDescription}</p>
						<SetsEditor sets={sets} />
					</div>
					<div className="synonym-editor synonym-editor__alteratives">
						<h2>{`${alternativesTitle} (${alternatives.length})`}</h2>
						<p>{alternativesDescription}</p>
						<AlterativesEditor alternatives={alternatives} />
					</div>
				</>
			)}

			<div className="synonym-editor synonym-editor__solr">
				{isSolrVisible && <h2>{solrTitle}</h2>}
				{isSolrVisible && <p>{solrDescription}</p>}
				<SolrEditor />
			</div>

			<input
				type="hidden"
				name="synonyms_editor_mode"
				value={isSolrEditable ? 'advanced' : 'simple'}
			/>

			<div className="synonym-btn-group">
				<button onClick={handleSubmit} type="button" className="button button-primary">
					{submitText}
				</button>
			</div>
		</>
	);
};

export default SynonymsEditor;

```