From 23927834d268634f94778e1213d97f3d168b9135 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fabian=20Ka=CC=88gy?= <mail@fabian-kaegy.de>
Date: Fri, 23 Feb 2024 14:51:57 +0100
Subject: [PATCH 1/3] allow passing in a custom render item component to
 display custom search result layouts

---
 components/content-picker/index.js |  5 +++++
 components/content-search/index.js | 36 +++++++++++++++++++++++-------
 2 files changed, 33 insertions(+), 8 deletions(-)

diff --git a/components/content-picker/index.js b/components/content-picker/index.js
index 27ac7d14..1e6c771e 100644
--- a/components/content-picker/index.js
+++ b/components/content-picker/index.js
@@ -54,6 +54,7 @@ const ContentPickerWrapper = styled.div`
  * @param {number} props.perPage number of items to show per page
  * @param {boolean} props.fetchInitialResults whether or not to fetch initial results on mount
  * @param {Function} props.renderItemType callback to render the item type
+ * @param {Function} props.renderItem react component to render the search result item
  * @returns {*} React JSX
  */
 const ContentPicker = ({
@@ -74,6 +75,7 @@ const ContentPicker = ({
 	perPage,
 	fetchInitialResults,
 	renderItemType,
+	renderItem,
 }) => {
 	const currentPostId = select('core/editor')?.getCurrentPostId();
 
@@ -141,6 +143,7 @@ const ContentPicker = ({
 						perPage={perPage}
 						fetchInitialResults={fetchInitialResults}
 						renderItemType={renderItemType}
+						renderItem={renderItem}
 					/>
 				) : (
 					label && (
@@ -205,6 +208,7 @@ ContentPicker.defaultProps = {
 	singlePickedLabel: __('You have selected the following item:', '10up-block-components'),
 	fetchInitialResults: false,
 	renderItemType: defaultRenderItemType,
+	renderItem: undefined,
 };
 
 ContentPicker.propTypes = {
@@ -225,6 +229,7 @@ ContentPicker.propTypes = {
 	perPage: PropTypes.number,
 	fetchInitialResults: PropTypes.bool,
 	renderItemType: PropTypes.func,
+	renderItem: PropTypes.func,
 };
 
 export { ContentPicker };
diff --git a/components/content-search/index.js b/components/content-search/index.js
index 21522915..84df913e 100644
--- a/components/content-search/index.js
+++ b/components/content-search/index.js
@@ -50,6 +50,7 @@ const ContentSearch = ({
 	queryFilter,
 	excludeItems,
 	renderItemType,
+	renderItem: RenderItemComponent,
 	fetchInitialResults,
 }) => {
 	const [searchString, setSearchString] = useState('');
@@ -385,6 +386,12 @@ const ContentSearch = ({
 										return null;
 									}
 
+									const isSelected = selectedItem === index + 1;
+
+									const selectItem = () => {
+										handleItemSelection(item);
+									};
+
 									return (
 										<li
 											key={item.id}
@@ -393,14 +400,25 @@ const ContentSearch = ({
 												marginBottom: '0',
 											}}
 										>
-											<SearchItem
-												onClick={() => handleItemSelection(item)}
-												searchTerm={searchString}
-												suggestion={item}
-												contentTypes={contentTypes}
-												isSelected={selectedItem === index + 1}
-												renderType={renderItemType}
-											/>
+											{RenderItemComponent ? (
+												<RenderItemComponent
+													item={item}
+													onClick={selectItem}
+													searchTerm={searchString}
+													contentTypes={contentTypes}
+													isSelected={isSelected}
+													renderType={renderItemType}
+												/>
+											) : (
+												<SearchItem
+													onClick={selectItem}
+													searchTerm={searchString}
+													suggestion={item}
+													contentTypes={contentTypes}
+													isSelected={isSelected}
+													renderType={renderItemType}
+												/>
+											)}
 										</li>
 									);
 								})}
@@ -435,6 +453,7 @@ ContentSearch.defaultProps = {
 		console.log('Select!'); // eslint-disable-line no-console
 	},
 	renderItemType: defaultRenderItemType,
+	renderItem: undefined,
 	fetchInitialResults: false,
 };
 
@@ -449,6 +468,7 @@ ContentSearch.propTypes = {
 	hideLabelFromVision: PropTypes.bool,
 	perPage: PropTypes.number,
 	renderItemType: PropTypes.func,
+	renderItem: PropTypes.func,
 	fetchInitialResults: PropTypes.bool,
 };
 

From d4c65aeaa7be3c72c516a1ec6845def104a137ea Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fabian=20Ka=CC=88gy?= <mail@fabian-kaegy.de>
Date: Fri, 23 Feb 2024 21:57:38 +0100
Subject: [PATCH 2/3] refactor query strings to use addQueryArg function

---
 components/content-search/index.js | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/components/content-search/index.js b/components/content-search/index.js
index 84df913e..4d3f30ec 100644
--- a/components/content-search/index.js
+++ b/components/content-search/index.js
@@ -1,6 +1,7 @@
 import { Spinner, NavigableMenu, Button, SearchControl } from '@wordpress/components';
 import apiFetch from '@wordpress/api-fetch';
 import { useState, useRef, useEffect, useCallback } from '@wordpress/element';
+import { addQueryArgs } from '@wordpress/url';
 import PropTypes from 'prop-types';
 import { __ } from '@wordpress/i18n';
 import styled from '@emotion/styled';
@@ -112,12 +113,20 @@ const ContentSearch = ({
 
 			switch (mode) {
 				case 'user':
-					searchQuery = `wp/v2/users/?search=${keyword}`;
+					searchQuery = addQueryArgs('wp/v2/users', {
+						search: keyword,
+					});
 					break;
 				default:
-					searchQuery = `wp/v2/search/?search=${keyword}&subtype=${contentTypes.join(
-						',',
-					)}&type=${mode}&_embed&per_page=${perPage}&page=${page}`;
+					searchQuery = addQueryArgs('wp/v2/search', {
+						search: keyword,
+						subtype: contentTypes.join(','),
+						type: mode,
+						_embed: true,
+						per_page: perPage,
+						page,
+					});
+
 					break;
 			}
 

From 6a21307ddf1b6854d56775d8fc658ce9f73a191d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fabian=20Ka=CC=88gy?= <mail@fabian-kaegy.de>
Date: Fri, 23 Feb 2024 21:57:48 +0100
Subject: [PATCH 3/3] fix rename onClick to onSelect

---
 components/content-search/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/content-search/index.js b/components/content-search/index.js
index 4d3f30ec..34c52c10 100644
--- a/components/content-search/index.js
+++ b/components/content-search/index.js
@@ -412,7 +412,7 @@ const ContentSearch = ({
 											{RenderItemComponent ? (
 												<RenderItemComponent
 													item={item}
-													onClick={selectItem}
+													onSelect={selectItem}
 													searchTerm={searchString}
 													contentTypes={contentTypes}
 													isSelected={isSelected}