Merge pull request #326 from 10up/fix/refactor-content-search-to-reac…

…t-query Refactor `ContentSearch` to use react query
10up · Jun 11, 2024 · a1f134f · a1f134f
2 parents 2d97321 + fe40048
commit a1f134f
Show file tree

Hide file tree

Showing 6 changed files with 426 additions and 540 deletions.
diff --git a/components/content-search/SearchItem.tsx b/components/content-search/SearchItem.tsx
@@ -8,14 +8,17 @@ import {
 	__experimentalTruncate as Truncate,
 } from '@wordpress/components';
 import { getTextContent, create } from '@wordpress/rich-text';
+import { RenderItemComponentProps } from './types';
+import { NormalizedSuggestion } from './utils';
 
-const ButtonStyled = styled(Button)`
+const SearchItemWrapper = styled(Button)`
 	display: flex;
 	text-align: left;
 	width: 100%;
 	justify-content: space-between;
 	align-items: center;
 	border-radius: 2px;
+	box-sizing: border-box;
 	height: auto !important;
 	padding: 0.3em 0.7em;
 	overflow: hidden;
@@ -24,110 +27,79 @@ const ButtonStyled = styled(Button)`
 		/* Add opacity background to support future color changes */
 		/* Reduce background from #ddd to 0.05 for text contrast  */
 		background-color: rgba(0, 0, 0, 0.05);
-
-		.block-editor-link-control__search-item-type {
-			color: black;
-		}
 	}
+`;
 
-	.block-editor-link-control__search-item-type {
-		background-color: rgba(0, 0, 0, 0.05);
-		padding: 2px 4px;
-		text-transform: capitalize;
-		border-radius: 2px;
-		flex-shrink: 0;
-	}
+const SearchItemHeader = styled.span`
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+`;
 
-	.block-editor-link-control__search-item-header {
-		display: flex;
-		flex-direction: column;
-		align-items: flex-start;
-	}
+const SearchItemTitle = styled.span<{ showType: boolean }>`
+	padding-right: ${({ showType }) => (showType ? 0 : undefined)};
+`;
 
-	mark {
-		padding: 0 !important;
-		margin: 0 !important;
-	}
+const SearchItemInfo = styled.span<{ showType: boolean }>`
+	padding-right: ${({ showType }) => (showType ? 0 : undefined)};
 `;
 
-export interface Suggestion {
-	id: number;
-	title: string;
-	url: string;
-	type: string;
-	subtype: string;
-}
+const SearchItemType = styled.span`
+	background-color: rgba(0, 0, 0, 0.05);
+	color: black;
+	padding: 2px 4px;
+	text-transform: capitalize;
+	border-radius: 2px;
+	flex-shrink: 0;
+`;
 
-interface SearchItemProps {
-	suggestion: Suggestion;
-	onClick: () => void;
-	searchTerm?: string;
-	isSelected?: boolean;
-	id?: string;
-	contentTypes: string[];
-	renderType?: (suggestion: Suggestion) => string;
-}
+const StyledTextHighlight = styled(TextHighlight)`
+	margin: 0 !important;
+	padding: 0 !important;
+`;
+
+export function defaultRenderItemType(suggestion: NormalizedSuggestion): string {
+	// Rename 'post_tag' to 'tag'. Ideally, the API would return the localized CPT or taxonomy label.
+	if (suggestion.type === 'post_tag') {
+		return 'tag';
+	}
+
+	if (suggestion.subtype) {
+		return suggestion.subtype;
+	}
 
-export function defaultRenderItemType(suggestion: Suggestion): string {
-	// Rename 'post_tag' to 'tag'. Ideally, the API would return the localised CPT or taxonomy label.
-	return suggestion.type === 'post_tag' ? 'tag' : suggestion.subtype;
+	return suggestion.type;
 }
 
-const SearchItem: React.FC<SearchItemProps> = ({
-	suggestion,
-	onClick,
+const SearchItem: React.FC<RenderItemComponentProps> = ({
+	item: suggestion,
+	onSelect: onClick,
 	searchTerm = '',
-	isSelected = false,
 	id = '',
 	contentTypes,
 	renderType = defaultRenderItemType,
 }) => {
-	const showType = suggestion.type && contentTypes.length > 1;
+	const showType = !!(suggestion.type && contentTypes.length > 1);
 
 	const richTextContent = create({ html: suggestion.title });
 	const textContent = getTextContent(richTextContent);
 	const titleContent = decodeEntities(textContent);
 
 	return (
 		<Tooltip text={decodeEntities(suggestion.title)}>
-			<ButtonStyled
-				id={id}
-				onClick={onClick}
-				className={`block-editor-link-control__search-item is-entity ${
-					isSelected && 'is-selected'
-				}`}
-				style={{
-					borderRadius: '0',
-					boxSizing: 'border-box',
-				}}
-			>
-				<span className="block-editor-link-control__search-item-header">
-					<span
-						className="block-editor-link-control__search-item-title"
-						style={{
-							paddingRight: !showType ? 0 : undefined,
-						}}
-					>
-						<TextHighlight text={titleContent} highlight={searchTerm} />
-					</span>
-					<span
-						aria-hidden
-						className="block-editor-link-control__search-item-info"
-						style={{
-							paddingRight: !showType ? 0 : undefined,
-						}}
-					>
+			<SearchItemWrapper id={id} onClick={onClick}>
+				<SearchItemHeader>
+					<SearchItemTitle showType={showType}>
+						<StyledTextHighlight text={titleContent} highlight={searchTerm} />
+					</SearchItemTitle>
+					<SearchItemInfo aria-hidden showType={showType}>
 						<Truncate numberOfLines={1} limit={55} ellipsizeMode="middle">
 							{filterURLForDisplay(safeDecodeURI(suggestion.url)) || ''}
 						</Truncate>
-					</span>
-				</span>
-				{showType && (
-					<span className="block-editor-link-control__search-item-type">
-						{renderType(suggestion)}
-					</span>
-				)}
-			</ButtonStyled>
+					</SearchItemInfo>
+				</SearchItemHeader>
+				{showType && <SearchItemType>{renderType(suggestion)}</SearchItemType>}
+			</SearchItemWrapper>
 		</Tooltip>
 	);
 };