Fix/content picker improvements

[tlovett1]

Description of the Change

• Changes class names to make more sense for the Content Picker/Search
• Remove type label from search results if only one type is being searched.
• Caching for content search

Possible Drawbacks

• Backwards compat break.

Addresses #18

[johnwatkins0]

@tlovett1 The changes are working well, but I couldn't resist a few higher-level suggestions. Feel free to ignore those as they can be tackled separately. The only one I would call required is moving the search cache into state for the reason described in my inline comment.

[johnwatkins0]

This may look like overkill and is totally optional for this PR, but once the search cache is converted to state, we can handle search changes a little more efficiently (and close #18) by responding to keyword changes with effect hooks.

/**
	 * handleSearchStringChange
	 *
	 * Using the keyword and the list of tags that are linked to the parent block
	 * search for posts/terms that match and return them to the autocomplete component.
	 *
	 * @param {string} keyword search query string
	 */
	const handleSearchStringChange = (keyword) => {
		setSearchString(keyword);
	}

	useEffect(() => {
		if (isLoading || searchString in searchCache) {
			return;
		}

		setIsLoading(true);

		const searchQuery = `wp/v2/search/?search=${searchString}&subtype=${contentTypes.join(
			',',
		)}&type=${mode}`;

		apiFetch({
			path: searchQuery,
		}).then((results) => {
			const newResults = results.filter((result) => {
				let keep = true;

				if (excludeItems.length) {
					excludeItems.forEach((item) => {
						if (item.id === result.id) {
							keep = false;
						}
					});
				}

				return keep;
			});

			setSearchCache(oldSearchCache => ({...oldSearchCache, [searchString]: newResults}));
			setIsLoading(false);
		});
	}, [isLoading, searchCache, searchString]);

	useEffect(() => {
		if (searchString in searchCache) {
			setSearchResults(searchCache[searchString])
		}
	}, [searchString, searchCache])

The first effect hook will run when the search term changes, when the cache changes, and when isLoading changes. This includes when isLoading becomes false -- guaranteeing that the latest search term will always be queried. But by having that isLoading check at the start of the effect hook, we also ensure that only one fetch request is running at a time.

The second effect hook responds to changes to the search cache. This will run after a successful fetch to populate the results.

[tlovett1]

Great feedback @johnwatkins0 . I pushed up some changes. I left the search cache outside of the component because I think it's really important to share search cache across multiple instances.

[johnwatkins0]

Looks good.