feat: make terms searchable through async req

assets/components/filters-controls/taxonomy-select-control.js

@@ -1,12 +1,14 @@
 /**
  * External dependencies
  */
-import Select from 'react-select';
+import AsyncSelect from 'react-select/async';
+import debounce from 'debounce-promise';
 
 /**
  * WordPress dependencies
  */
-import { useEffect, useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { useCallback, useEffect, useMemo, useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -17,18 +19,32 @@ import { mapTermsToOptions } from '../../utils/helpers';
 const TaxonomySelectControl = ( props ) => {
 	const { taxonomy, attributes, setAttributes } = props;
 	const { taxonomyTerms } = attributes;
-	const [ options, setOptions ] = useState( [] );
+	const [ defaultOptions, setDefaultOptions ] = useState( [] );
 
-	useEffect( () => {
-		const getTerms = async () => {
-			const allTerms = await fetchTermsByTaxonomy( taxonomy.rest_base );
-			const mappedTerms = mapTermsToOptions( allTerms );
+	const getTermsAsOptions = useCallback(
+		async ( input = '' ) => {
+			const terms = await fetchTermsByTaxonomy(
+				taxonomy.rest_base,
+				input
+			);
+			return terms ? mapTermsToOptions( terms ) : [];
+		},
+		[ taxonomy.rest_base ]
+	);
 
-			setOptions( mappedTerms );
+	useEffect( () => {
+		const getOptions = async () => {
+			const options = await getTermsAsOptions();
+			setDefaultOptions( options );
 		};
 
-		getTerms();
-	}, [ taxonomy.rest_base ] );
+		getOptions();
+	}, [ getTermsAsOptions ] );
+
+	const loadOptions = useMemo(
+		() => debounce( getTermsAsOptions, 500 ),
+		[ getTermsAsOptions ]
+	);
 
 	/**
 	 * Save the selected terms as an attribute
@@ -49,15 +65,25 @@ const TaxonomySelectControl = ( props ) => {
 	return (
 		<>
 			<p className="yard-query-inspector-label">{ taxonomy.name }</p>
-			<Select
+			<AsyncSelect
+				backspaceRemovesValue={ false }
+				closeMenuOnSelect={ false }
+				defaultOptions={ defaultOptions }
 				isMulti
+				loadingMessage={ () =>
+					__( 'Aan het zoeken…', 'yard-query-block' )
+				}
+				loadOptions={ loadOptions }
+				noOptionsMessage={ () =>
+					__( 'Geen items gevonden.', 'yard-query-block' )
+				}
+				onChange={ onChange }
+				placeholder={ __( 'Selecteer een item', 'yard-query-block' ) }
 				value={
 					taxonomyTerms?.[ taxonomy.slug ]
 						? taxonomyTerms[ taxonomy.slug ]
 						: []
 				}
-				options={ options }
-				onChange={ onChange }
 			/>
 		</>
 	);

assets/utils/api.js

@@ -52,9 +52,12 @@ export const fetchTaxonomiesByPostType = ( type = '' ) => {
  * Fetch terms by taxonomy
  *
  * @param {string} taxonomy
+ * @param {string} search
  */
-export const fetchTermsByTaxonomy = ( taxonomy = '' ) => {
-	return apiFetch( { path: `wp/v2/${ taxonomy }?per_page=100` } );
+export const fetchTermsByTaxonomy = ( taxonomy = '', search = '' ) => {
+	return apiFetch( {
+		path: `wp/v2/${ taxonomy }?search=${ search }&per_page=100`,
+	} );
 };
 
 /**

public/index.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'react-dom', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-data', 'wp-element', 'wp-hooks', 'wp-html-entities', 'wp-i18n', 'wp-server-side-render'), 'version' => '874f7a3a84f5264fbf77');
+<?php return array('dependencies' => array('react', 'react-dom', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-data', 'wp-element', 'wp-hooks', 'wp-html-entities', 'wp-i18n', 'wp-server-side-render'), 'version' => 'd6d6d4dde80aacc7e53a');