refactor: use AutocompleteWithSuggestions from newspack-components (#56)

package.json

@@ -110,7 +110,7 @@
     "@wordpress/plugins": "^2.21.0",
     "@wordpress/url": "^2.18.0",
     "lodash": "^4.17.20",
-    "newspack-components": "^1.4.0"
+    "newspack-components": "^1.5.1"
   },
   "devDependencies": {
     "@automattic/calypso-build": "^6.3.0",

src/blocks/list-container/edit.js

@@ -8,15 +8,9 @@ import { compose } from '@wordpress/compose';
 import { withDispatch, withSelect } from '@wordpress/data';
 import { useEffect } from '@wordpress/element';
 
-const ListContainerEditorComponent = ( {
-	clientId,
-	innerBlocks,
-	isSelected,
-	parent,
-	setAttributes,
-} ) => {
+const ListContainerEditorComponent = ( { clientId, innerBlocks, parent, setAttributes } ) => {
 	const parentAttributes = parent.attributes || {};
-	const { queryMode, queryOptions, isSelected: parentIsSelected, showSortUi } = parentAttributes;
+	const { queryMode, queryOptions, showSortUi } = parentAttributes;
 	const { order } = queryOptions;
 
 	// Sync parent attributes to list container attributes, so that we can use parent attributes in the PHP render callback.
@@ -105,11 +99,7 @@ const ListContainerEditorComponent = ( {
 					'newspack-listings/marketplace',
 					'newspack-listings/place',
 				] }
-				renderAppender={ () =>
-					queryMode || ( ! isSelected && ! parentIsSelected ) ? null : (
-						<InnerBlocks.ButtonBlockAppender />
-					)
-				}
+				renderAppender={ () => ( queryMode ? null : <InnerBlocks.ButtonBlockAppender /> ) }
 			/>
 		</div>
 	);

src/blocks/listing/edit.js

@@ -6,13 +6,14 @@ import apiFetch from '@wordpress/api-fetch';
 import { Button, Placeholder, Spinner } from '@wordpress/components';
 import { withSelect } from '@wordpress/data';
 import { useEffect, useState } from '@wordpress/element';
+import { decodeEntities } from '@wordpress/html-entities';
 import { addQueryArgs } from '@wordpress/url';
 
 /**
  * Internal dependencies
  */
 import { Listing } from './listing';
-import { QueryControls } from '../../components';
+import { AutocompleteWithSuggestions } from 'newspack-components';
 import { capitalize, getIcon } from '../../editor/utils';
 
 const ListingEditorComponent = ( {
@@ -103,14 +104,54 @@ const ListingEditorComponent = ( {
 				label={ capitalize( listingTypeSlug ) }
 				icon={ getIcon( listingTypeSlug ) }
 			>
-				<QueryControls
+				<AutocompleteWithSuggestions
 					label={
 						__( 'Search for a ', 'newspack-listings' ) +
 						listingTypeSlug +
 						__( ' listing to display.', 'newspack-listings' )
 					}
-					listingType={ listingType }
-					listingTypeSlug={ listingTypeSlug }
+					fetchSavedPosts={ async postIDs => {
+						const posts = await apiFetch( {
+							path: addQueryArgs( 'newspack-listings/v1/listings', {
+								per_page: 100,
+								include: postIDs.join( ',' ),
+								_fields: 'id,title',
+							} ),
+						} );
+
+						return posts.map( _post => ( {
+							value: _post.id,
+							label: decodeEntities( _post.title ) || __( '(no title)', 'newspack-listings' ),
+						} ) );
+					} }
+					fetchSuggestions={ async search => {
+						const posts = await apiFetch( {
+							path: addQueryArgs( '/newspack-listings/v1/listings', {
+								search,
+								per_page: 10,
+								_fields: 'id,title',
+								type: listingType,
+							} ),
+						} );
+
+						// Only show suggestions if they aren't already in the list.
+						const result = posts.reduce( ( acc, _post ) => {
+							if (
+								listItems.indexOf( _post.id ) < 0 &&
+								listItems.indexOf( _post.id.toString() ) < 0
+							) {
+								acc.push( {
+									value: _post.id,
+									label: decodeEntities( _post.title ) || __( '(no title)', 'newspack-listings' ),
+								} );
+							}
+
+							return acc;
+						}, [] );
+						return result;
+					} }
+					postType={ listingType }
+					postTypeSlug={ listingTypeSlug }
 					maxLength={ 1 }
 					onChange={ _listing => {
 						if ( _listing.length ) {

src/blocks/listing/editor.scss

@@ -37,29 +37,6 @@
 		}
 	}
 
-	&__search-suggestions {
-		border-radius: 2px;
-		border: 1px solid var( --newspack-listings--grey-medium );
-		max-height: 204px;
-		padding: 4px;
-		overflow: scroll;
-
-		.components-button {
-			color: var( --newspack-listings--grey-dark );
-			display: block;
-			margin: 0;
-			padding: 10px 12px;
-			text-decoration: none;
-			width: 100%;
-
-			&:active:not( :disabled ),
-			&:hover:not( :disabled ) {
-				background: var( --wp-admin-theme-color );
-				color: white;
-			}
-		}
-	}
-
 	&__error {
 		margin: 1rem auto 2rem;
 	}

src/components/index.js

@@ -1,2 +1 @@
 export { default as SidebarQueryControls } from './sidebar-query-controls';
-export { default as QueryControls } from './query-controls';