From 6f3fa90f07458c2e6a303549fea6445464a74e04 Mon Sep 17 00:00:00 2001
From: Taylor Lovett <tlovett88@gmail.com>
Date: Thu, 18 Mar 2021 11:56:23 -0400
Subject: [PATCH 1/4] Make class namespaces more accurate; don't show type
 label in search result if we are only searching one type

---
 components/ContentPicker/index.js      |  2 +-
 components/ContentSearch/SearchItem.js |  5 +++--
 components/ContentSearch/index.js      | 11 ++++++-----
 3 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/components/ContentPicker/index.js b/components/ContentPicker/index.js
index 673fd21e..b801441c 100644
--- a/components/ContentPicker/index.js
+++ b/components/ContentPicker/index.js
@@ -7,7 +7,7 @@ import { __ } from '@wordpress/i18n';
 import { ContentSearch } from '../ContentSearch';
 import SortableList from './SortableList';
 
-const NAMESPACE = '10up-block-components';
+const NAMESPACE = '10up-content-picker';
 
 /**
  * Content Picker
diff --git a/components/ContentSearch/SearchItem.js b/components/ContentSearch/SearchItem.js
index 470d4b5e..5ab388ad 100644
--- a/components/ContentSearch/SearchItem.js
+++ b/components/ContentSearch/SearchItem.js
@@ -14,7 +14,7 @@ import { Button, TextHighlight } from '@wordpress/components';
  * @param props.id
  * @return {*} React JSX
  */
-const SearchItem = ({ suggestion, onClick, searchTerm, isSelected, id }) => {
+const SearchItem = ({ suggestion, onClick, searchTerm, isSelected, id, contentTypes }) => {
 	return (
 		<Button
 			id={id}
@@ -34,7 +34,7 @@ const SearchItem = ({ suggestion, onClick, searchTerm, isSelected, id }) => {
 					{filterURLForDisplay(safeDecodeURI(suggestion.url)) || ''}
 				</span>
 			</span>
-			{suggestion.type && (
+			{suggestion.type && contentTypes.length > 1 && (
 				<span className="block-editor-link-control__search-item-type">
 					{/* Rename 'post_tag' to 'tag'. Ideally, the API would return the localised CPT or taxonomy label. */}
 					{suggestion.type === 'post_tag' ? 'tag' : suggestion.type}
@@ -56,6 +56,7 @@ SearchItem.propTypes = {
 	suggestion: PropTypes.object.isRequired,
 	onClick: PropTypes.func.isRequired,
 	isSelected: PropTypes.bool,
+	contentTypes: PropTypes.array.isRequired,
 };
 
 export default SearchItem;
diff --git a/components/ContentSearch/index.js b/components/ContentSearch/index.js
index 0282ef40..354ef7b1 100644
--- a/components/ContentSearch/index.js
+++ b/components/ContentSearch/index.js
@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import { __ } from '@wordpress/i18n';
 import SearchItem from './SearchItem';
 
-const NAMESPACE = '10up-block-components';
+const NAMESPACE = '10up-content-search';
 
 const ContentSearch = ({ onSelectItem, placeholder, label, contentTypes, mode, excludeItems }) => {
 	const [searchString, setSearchString] = useState('');
@@ -88,7 +88,7 @@ const ContentSearch = ({ onSelectItem, placeholder, label, contentTypes, mode, e
 			/>
 			{hasSearchString ? (
 				<ul
-					className={`${NAMESPACE}-grid`}
+					className={`${NAMESPACE}-list`}
 					style={{
 						marginTop: '0',
 						marginBottom: '0',
@@ -100,7 +100,7 @@ const ContentSearch = ({ onSelectItem, placeholder, label, contentTypes, mode, e
 					{isLoading && <Spinner />}
 					{!isLoading && !hasSearchResults && (
 						<li
-							className={`${NAMESPACE}-grid-item components-button`}
+							className={`${NAMESPACE}-list-item components-button`}
 							style={{ color: 'inherit', cursor: 'default', paddingLeft: '3px' }}
 						>
 							{__('Nothing found.', '10up-block-components')}
@@ -114,7 +114,7 @@ const ContentSearch = ({ onSelectItem, placeholder, label, contentTypes, mode, e
 						return (
 							<li
 								key={item.id}
-								className={`${NAMESPACE}-grid-item`}
+								className={`${NAMESPACE}-list-item`}
 								style={{
 									marginBottom: '0',
 								}}
@@ -123,6 +123,7 @@ const ContentSearch = ({ onSelectItem, placeholder, label, contentTypes, mode, e
 									onClick={() => handleItemSelection(item)}
 									searchTerm={searchString}
 									suggestion={item}
+									contentTypes={contentTypes}
 									isSelected={selectedItem === index + 1}
 								/>
 							</li>
@@ -141,7 +142,7 @@ ContentSearch.defaultProps = {
 	excludeItems: [],
 	mode: 'post',
 	onSelectItem: () => {
-		console.log('Select!');
+		console.log('Select!'); // eslint-disable-line no-console
 	},
 };
 

From 0c832094a3d4882ba780358fcf89388d3b086605 Mon Sep 17 00:00:00 2001
From: Taylor Lovett <tlovett88@gmail.com>
Date: Thu, 18 Mar 2021 12:02:13 -0400
Subject: [PATCH 2/4] Styling for content search without type

---
 components/ContentSearch/SearchItem.js | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/components/ContentSearch/SearchItem.js b/components/ContentSearch/SearchItem.js
index 5ab388ad..de268cee 100644
--- a/components/ContentSearch/SearchItem.js
+++ b/components/ContentSearch/SearchItem.js
@@ -15,6 +15,8 @@ import { Button, TextHighlight } from '@wordpress/components';
  * @return {*} React JSX
  */
 const SearchItem = ({ suggestion, onClick, searchTerm, isSelected, id, contentTypes }) => {
+	const showType = suggestion.type && contentTypes.length > 1;
+
 	return (
 		<Button
 			id={id}
@@ -27,14 +29,25 @@ const SearchItem = ({ suggestion, onClick, searchTerm, isSelected, id, contentTy
 			}}
 		>
 			<span className="block-editor-link-control__search-item-header">
-				<span className="block-editor-link-control__search-item-title">
+				<span
+					className="block-editor-link-control__search-item-title"
+					style={{
+						paddingRight: !showType ? 0 : null,
+					}}
+				>
 					<TextHighlight text={decodeEntities(suggestion.title)} highlight={searchTerm} />
 				</span>
-				<span aria-hidden className="block-editor-link-control__search-item-info">
+				<span
+					aria-hidden
+					className="block-editor-link-control__search-item-info"
+					style={{
+						paddingRight: !showType ? 0 : null,
+					}}
+				>
 					{filterURLForDisplay(safeDecodeURI(suggestion.url)) || ''}
 				</span>
 			</span>
-			{suggestion.type && contentTypes.length > 1 && (
+			{showType && (
 				<span className="block-editor-link-control__search-item-type">
 					{/* Rename 'post_tag' to 'tag'. Ideally, the API would return the localised CPT or taxonomy label. */}
 					{suggestion.type === 'post_tag' ? 'tag' : suggestion.type}

From cf8be4fa23e6a210ed58c5c09439670c04588db2 Mon Sep 17 00:00:00 2001
From: Taylor Lovett <tlovett88@gmail.com>
Date: Thu, 18 Mar 2021 12:22:30 -0400
Subject: [PATCH 3/4] Add caching to content search

---
 components/ContentSearch/index.js | 55 ++++++++++++++++++-------------
 1 file changed, 32 insertions(+), 23 deletions(-)

diff --git a/components/ContentSearch/index.js b/components/ContentSearch/index.js
index 354ef7b1..a7b0158b 100644
--- a/components/ContentSearch/index.js
+++ b/components/ContentSearch/index.js
@@ -7,6 +7,8 @@ import SearchItem from './SearchItem';
 
 const NAMESPACE = '10up-content-search';
 
+const searchCache = {};
+
 const ContentSearch = ({ onSelectItem, placeholder, label, contentTypes, mode, excludeItems }) => {
 	const [searchString, setSearchString] = useState('');
 	const [searchResults, setSearchResults] = useState([]);
@@ -51,30 +53,37 @@ const ContentSearch = ({ onSelectItem, placeholder, label, contentTypes, mode, e
 		setSearchString(keyword);
 		setIsLoading(true);
 
-		const searchQuery = `wp/v2/search/?search=${keyword}&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;
-			});
-
-			setSearchResults(newResults);
+		if (searchCache[keyword]) {
+			setSearchResults(searchCache[keyword]);
 			setIsLoading(false);
-		});
+		} else {
+			const searchQuery = `wp/v2/search/?search=${keyword}&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;
+				});
+
+				searchCache[keyword] = newResults;
+
+				setSearchResults(newResults);
+				setIsLoading(false);
+			});
+		}
 	};
 
 	return (

From 7f14c3e152777ed1496e1d70969c1334dae53e15 Mon Sep 17 00:00:00 2001
From: Taylor Lovett <tlovett88@gmail.com>
Date: Tue, 30 Mar 2021 16:56:37 -0400
Subject: [PATCH 4/4] Properly cache search query; bail on api fetch if
 unmounted

---
 components/ContentSearch/index.js | 28 ++++++++++++++++++++--------
 1 file changed, 20 insertions(+), 8 deletions(-)

diff --git a/components/ContentSearch/index.js b/components/ContentSearch/index.js
index a7b0158b..f48f1884 100644
--- a/components/ContentSearch/index.js
+++ b/components/ContentSearch/index.js
@@ -1,6 +1,6 @@
 import { TextControl, Spinner, NavigableMenu } from '@wordpress/components';
 import apiFetch from '@wordpress/api-fetch';
-import { useState } from '@wordpress/element'; // eslint-disable-line
+import { useState, useRef, useEffect } from '@wordpress/element'; // eslint-disable-line
 import PropTypes from 'prop-types';
 import { __ } from '@wordpress/i18n';
 import SearchItem from './SearchItem';
@@ -15,6 +15,8 @@ const ContentSearch = ({ onSelectItem, placeholder, label, contentTypes, mode, e
 	const [isLoading, setIsLoading] = useState(false);
 	const [selectedItem, setSelectedItem] = useState(null);
 
+	const mounted = useRef(true);
+
 	/**
 	 * handleSelection
 	 *
@@ -53,17 +55,21 @@ const ContentSearch = ({ onSelectItem, placeholder, label, contentTypes, mode, e
 		setSearchString(keyword);
 		setIsLoading(true);
 
-		if (searchCache[keyword]) {
-			setSearchResults(searchCache[keyword]);
+		const searchQuery = `wp/v2/search/?search=${keyword}&subtype=${contentTypes.join(
+			',',
+		)}&type=${mode}`;
+
+		if (searchCache[searchQuery]) {
+			setSearchResults(searchCache[searchQuery]);
 			setIsLoading(false);
 		} else {
-			const searchQuery = `wp/v2/search/?search=${keyword}&subtype=${contentTypes.join(
-				',',
-			)}&type=${mode}`;
-
 			apiFetch({
 				path: searchQuery,
 			}).then((results) => {
+				if (mounted.current === false) {
+					return;
+				}
+
 				const newResults = results.filter((result) => {
 					let keep = true;
 
@@ -78,7 +84,7 @@ const ContentSearch = ({ onSelectItem, placeholder, label, contentTypes, mode, e
 					return keep;
 				});
 
-				searchCache[keyword] = newResults;
+				searchCache[searchQuery] = newResults;
 
 				setSearchResults(newResults);
 				setIsLoading(false);
@@ -86,6 +92,12 @@ const ContentSearch = ({ onSelectItem, placeholder, label, contentTypes, mode, e
 		}
 	};
 
+	useEffect(() => {
+		return () => {
+			mounted.current = false;
+		};
+	}, []);
+
 	return (
 		<NavigableMenu onNavigate={handleSelection} orientation="vertical">
 			<TextControl