Merge pull request #364 from 10up/feature/content-search-debounce

Convert ContentSearch input field from useState to useDebouncedInput to minimize consequtive search requests

Author: fabiankaegy

components/content-picker/index.tsx

@@ -35,7 +35,11 @@ const ContentPickerWrapper = styled.div`
 	width: 100%;
 `;
 
-interface ContentPickerProps {
+export type ContentPickerOptions = {
+	inputDelay: number;
+};
+
+export interface ContentPickerProps {
 	label?: string;
 	hideLabelFromVision?: boolean;
 	mode?: ContentSearchMode;
@@ -55,6 +59,7 @@ interface ContentPickerProps {
 	renderItemType?: (props: NormalizedSuggestion) => string;
 	renderItem?: (props: RenderItemComponentProps) => JSX.Element;
 	PickedItemPreviewComponent?: React.ComponentType<{ item: PickedItemType }>;
+	options?: ContentPickerOptions;
 }
 
 export const ContentPicker: React.FC<ContentPickerProps> = ({
@@ -79,7 +84,10 @@ export const ContentPicker: React.FC<ContentPickerProps> = ({
 	renderItemType = defaultRenderItemType,
 	renderItem = undefined,
 	PickedItemPreviewComponent = undefined,
+	options,
 }) => {
+	const searchOptions =
+		options && options.inputDelay ? { inputDelay: options.inputDelay } : undefined;
 	const currentPostId = select('core/editor')?.getCurrentPostId();
 
 	/**
@@ -147,6 +155,7 @@ export const ContentPicker: React.FC<ContentPickerProps> = ({
 						fetchInitialResults={fetchInitialResults}
 						renderItemType={renderItemType}
 						renderItem={renderItem}
+						options={searchOptions}
 					/>
 				) : (
 					label && (

components/content-picker/readme.md

@@ -40,6 +40,7 @@ function MyComponent( props ) {
 | `content`             | `array`    | `[]`                 | Array of items to pre-populate picker with. Must be in the format of: `[{id: 1, type: 'post', uuid: '...',}, {id: 1, uuid: '...', type: 'page'},... ]`. You cannot provide terms and posts to the same picker. `uuid` was added as of version 1.5.0. It is only used as the React component list key in the admin. If it is not included, `id` will be used which will cause errors if you select the same post twice. |
 | `perPage`             | `number`   | `50`                 | Number of items to show during search
 | `fetchInitialResults` | `bool`     | `false`               | Fetch initial results to present when focusing the search input                                                                                          |
+| `options.inputDelay`  | `number`   | `undefined`                           | Debounce delay passed to the internal search input, defaults to 350ms                                                             |
 | `PickedItemPreviewComponent` | `React.ComponentType<item>`     | `undefined`               | Allow replacing the default picked item preview. The `item` prop includes information about the selected entry (please check the `PickedItemType` interface in `./PickedItem.tsx`). |                                                                                                                                                                                                                                                                                                                                                                                  |
 __NOTE:__ Content picker cannot validate that posts you pass it via `content` prop actually exist. If a post does not exist, it will not render as one of the picked items but will still be passed back as picked items if new items are picked/sorted. Therefore, on save you need to validate that all the picked posts/terms actually exist.
 

components/content-search/index.tsx

@@ -12,6 +12,7 @@ import type {
 	QueryFilter,
 	RenderItemComponentProps,
 } from './types';
+import { useDebouncedInput } from '../../hooks/use-debounced-input';
 import { useOnClickOutside } from '../../hooks/use-on-click-outside';
 import { NormalizedSuggestion, fetchSearchResults } from './utils';
 
@@ -65,11 +66,9 @@ const StyledNoResults = styled.li`
 	padding-left: 3px;
 `;
 
-const ContentSearchNoResults: React.FC = () => (
-	<StyledNoResults className="tenup-content-search-list-item components-button">
-		{__('Nothing found.', '10up-block-components')}
-	</StyledNoResults>
-);
+export type ContentSearchOptions = {
+	inputDelay: number;
+};
 
 export interface ContentSearchProps {
 	onSelectItem: (item: NormalizedSuggestion) => void;
@@ -84,8 +83,15 @@ export interface ContentSearchProps {
 	renderItemType?: (props: NormalizedSuggestion) => string;
 	renderItem?: (props: RenderItemComponentProps) => JSX.Element;
 	fetchInitialResults?: boolean;
+	options?: ContentSearchOptions;
 }
 
+const ContentSearchNoResults: React.FC = () => (
+	<StyledNoResults className="tenup-content-search-list-item components-button">
+		{__('Nothing found.', '10up-block-components')}
+	</StyledNoResults>
+);
+
 const ContentSearch: React.FC<ContentSearchProps> = ({
 	onSelectItem = () => {
 		console.log('Select!'); // eslint-disable-line no-console
@@ -101,8 +107,11 @@ const ContentSearch: React.FC<ContentSearchProps> = ({
 	renderItemType = undefined,
 	renderItem: SearchResultItem = SearchItem,
 	fetchInitialResults,
+	options,
 }) => {
-	const [searchString, setSearchString] = useState('');
+	const debounceOptions =
+		options && options.inputDelay ? { delay: options.inputDelay } : undefined;
+	const [searchInput, setSearchString, searchString] = useDebouncedInput('', debounceOptions);
 	const [isFocused, setIsFocused] = useState(false);
 	const searchContainer = useRef<HTMLDivElement>(null);
 
@@ -148,7 +157,7 @@ const ContentSearch: React.FC<ContentSearchProps> = ({
 	return (
 		<StyledNavigableMenu ref={mergedRef} orientation="vertical">
 			<StyledSearchControl
-				value={searchString}
+				value={searchInput}
 				onChange={(newSearchString: string) => {
 					setSearchString(newSearchString);
 				}}

components/content-search/readme.md

@@ -35,3 +35,4 @@ function MyComponent( props ) {
 | `perPage`             | `number`   | `50`                                 | Number of items to show during search                                                                                            |
 | `renderItemType`      | `function` | `undefined`                          | Function called to override the item type label in `SearchItem`. Must return the new label.                                      |
 | `fetchInitialResults` | `bool`     | `false`                              | Fetch initial results to present when focusing the search input                                                                  |
+| `options.inputDelay`  | `number`   | `undefined`                           | Debounce delay passed to the internal search input, defaults to 350ms                                                             |

components/media-toolbar/index.tsx

@@ -72,19 +72,15 @@ export const MediaToolbar: React.FC<MediaToolbarProps> = ({
 						name={mergedLabels.replace}
 					/>
 					{!!isOptional && (
-						<ToolbarButton onClick={onRemove}>
-							{mergedLabels.remove}
-						</ToolbarButton>
+						<ToolbarButton onClick={onRemove}>{mergedLabels.remove}</ToolbarButton>
 					)}
 				</>
 			) : (
 				<MediaUploadCheck>
 					<MediaUpload
 						onSelect={onSelect}
 						render={({ open }) => (
-							<ToolbarButton onClick={open}>
-								{mergedLabels.add}
-							</ToolbarButton>
+							<ToolbarButton onClick={open}>{mergedLabels.add}</ToolbarButton>
 						)}
 					/>
 				</MediaUploadCheck>

components/post-featured-image/index.tsx

@@ -2,7 +2,8 @@ import { useEntityProp } from '@wordpress/core-data';
 import { usePost } from '../../hooks';
 import { Image } from '../image';
 
-interface PostFeaturedImageProps extends Omit<React.ComponentProps<typeof Image>, 'id' | 'onSelect' | 'canEditImage'> {}
+interface PostFeaturedImageProps
+	extends Omit<React.ComponentProps<typeof Image>, 'id' | 'onSelect' | 'canEditImage'> {}
 
 export const PostFeaturedImage = (props: PostFeaturedImageProps) => {
 	const { postId, postType, isEditable } = usePost();

hooks/use-debounced-input/index.ts

@@ -0,0 +1,30 @@
+import { useEffect, useState } from '@wordpress/element';
+import { useDebounce } from '@wordpress/compose';
+
+type DebouncedInputOptions = {
+	delay: number;
+};
+
+/**
+ * Helper hook for input fields that need to debounce the value before using it.
+ *
+ * @param {string}                defaultValue The default value to use.
+ * @param {DebouncedInputOptions} options      Set of options for useDebounce, 350ms is the default
+ *
+ * @returns The input value, the setter and the debounced input value.
+ */
+export function useDebouncedInput(
+	defaultValue: string = '',
+	options: DebouncedInputOptions = { delay: 350 },
+): [string, (value: string) => void, string] {
+	const [input, setInput] = useState<string>(defaultValue);
+	const [debouncedInput, setDebouncedState] = useState(defaultValue);
+	const { delay } = options;
+	const setDebouncedInput = useDebounce(setDebouncedState, delay);
+
+	useEffect(() => {
+		setDebouncedInput(input);
+	}, [input, setDebouncedInput]);
+
+	return [input, setInput, debouncedInput];
+}

hooks/use-debounced-input/readme.md

@@ -0,0 +1,38 @@
+# `useDebouncedInput`
+
+The `useDebouncedInput` hook is a revision of the `@wordpress/components` version of the hook which exposes options, specifically to configure the debounce delay.
+
+## Usage
+
+```js
+import { SearchControl } from '@wordpress/components';
+import { useDebouncedInput } from '@10up/block-components';
+
+function BlockEdit(props) {
+	const [searchInput, setSearchString, searchString] = useDebouncedInput('');
+    ...
+    async fetchTitles => {
+        let options = await apiFetch({
+            path: addQueryArgs('/wp/v2/search', {
+                search: searchString,
+                ...
+            })
+        });
+        options = options.filter(option => option.title !== '');
+
+        return options;
+    };
+    ...
+    return (
+        <>
+            <SearchControl
+				value={searchInput}
+				onChange={(newSearchString: string) => {
+					setSearchString(newSearchString);
+				}}
+			/>
+        ...
+        </>
+    );
+}
+```