Merge pull request #1 from WebDevStudios/feature/filter-default-post-type

Adds ability to filter posts type

Author: coreymcollins

assets/css/wds-react-post-search.css

@@ -1,8 +1,11 @@
 .search-form-input {
-	margin-bottom: 50px;
 	position: relative;
 }
 
+.search-form-performing-action {
+	margin-bottom: 50px;
+}
+
 .search-form-input .search-input,
 .search-results-container {
 	width: 100%;

assets/js/components/searchForm.js

@@ -1,12 +1,14 @@
 import React from 'react';
+import qs from 'query-string';
 import SearchResults from './searchResults';
 
 export default class SearchForm extends React.Component {
 
 	constructor( props ) {
 		super( props );
 
-		this.getResults = this.getResults.bind( this );
+		this.getResults   = this.getResults.bind( this );
+		this.getFormClass = this.getFormClass.bind( this );
 
 		this.state = {
 			results: [],
@@ -41,8 +43,20 @@ export default class SearchForm extends React.Component {
 				empty: false,
 			} );
 
-			let url = wds_react_post_search.rest_search_posts.replace( '%s', search );
+			const postType = this.props.postType;
 
+			let url   = wds_react_post_search.rest_search_posts.replace( '%s', search );
+			let query = {
+				s: search
+			};
+
+			if ( postType ) {
+				query.type = postType;
+			};
+
+			const queryString = qs.stringify( query );
+			url = `${ url }?${ queryString }`;
+			
 			let	json = fetch( url )
 				.then(
 					response => {
@@ -67,9 +81,23 @@ export default class SearchForm extends React.Component {
 		}
 	}
 
+	getFormClass() {
+		let className = 'search-form-input';
+
+		if ( this.state.results.length > 0 || this.state.loading || this.state.lengthError || this.state.searched ) {
+			className += ' search-form-performing-action';
+		}
+
+		if ( this.state.empty ) {
+			className = 'search-form-input';
+		}
+
+		return className;
+	}
+	
 	render() {
 		return (
-			<div className="search-form-input">
+			<div className={ `${ this.getFormClass() }` }>
 				<input className="search-input" type="text" onChange={ this.getResults } />
 				<SearchResults searched={ this.state.searched } loading={ this.state.loading } results={ this.state.results } lengthError={ this.state.lengthError } empty={ this.state.empty } />
 			</div>

assets/js/components/searchResult.js

@@ -9,7 +9,7 @@ export default class SearchResult extends React.Component {
 	render() {
 		return (
 			<li className="search-results-item">
-				<a href={ this.props.result.link }>{ this.props.result.title.rendered }</a>
+				<a href={ this.props.result.link }>{ this.props.result.title }</a>
 			</li>
 		)
 	}

assets/js/public.js

@@ -2,14 +2,20 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import SearchForm from './components/searchForm';
 
-const searchFormElement = <SearchForm />,
-	searchFields = document.getElementsByClassName( wds_react_post_search.search_form_class );
+const searchFields = document.getElementsByClassName( wds_react_post_search.search_form_class );
 
 if ( searchFields.length ) {
 
-	for ( let i=0; i < searchFields.length; i++ ) {
+	for ( let i = 0; i < searchFields.length; i++ ) {
+		const searchForm = searchFields[ i ];
+		let postType     = '';
+		
+		if( searchForm.querySelector('input[name=post_type]') ) {
+			postType = searchForm.querySelector('input[name=post_type]').value;
+		}
+
 		ReactDOM.render(
-			searchFormElement,
+			<SearchForm postType={ postType } />,
 			searchFields[ i ]
 		)
 	}

assets/js/public.min.js

@@ -231,6 +231,7 @@ public function requirements_not_met_notice() {
 	 */
 	public function hooks() {
 		add_filter( 'wp_enqueue_scripts', array( $this, 'enqueue_scripts' ), 1 );
+		add_action( 'rest_api_init', array( $this, 'rest_api_init' ), 10, 2 );
 		add_action( 'rest_post_query', array( $this, 'add_post_types_to_query' ), 10, 2 );
 	}
 
@@ -248,7 +249,7 @@ public function enqueue_scripts() {
 		wp_enqueue_style( 'wds-react-post-search-styles' );
 
 		wp_localize_script( 'wds-react-post-search', 'wds_react_post_search', array(
-			'rest_search_posts'       => rest_url( 'wp/v2/posts?' . $this->get_post_types_to_search() . 'search=%s' ),
+			'rest_search_posts'       => rest_url( 'wds-react-post-search/v1/search' ),
 			'loading_text'            => apply_filters( 'wds_react_post_search_loading_text', esc_html__( 'Loading results...', 'wds-react-post-search' ) ),
 			'no_results_text'         => apply_filters( 'wds_react_post_search_no_results_text', esc_html__( 'No results found.', 'wds-react-post-search' ) ),
 			'length_error'            => apply_filters( 'wds_react_post_search_length_error_text', esc_html__( 'Please enter at least 3 characters.', 'wds-react-post-search' ) ),
@@ -308,41 +309,105 @@ public function add_post_types_to_query( $args, $request ) {
 	 * }
 	 * add_filter( 'wds_react_post_search_filter_post_types', '_s_filter_post_types_to_query' );
 	 *
-	 * @param array $post_types Array of post types to be used.
 	 * @author Corey Collins
 	 */
-	public function post_types_to_search( $post_types = array() ) {
+	public function post_types_to_search() {
 
-		$default_post_types = array(
-			'post',
+		$post_types = array(
+			'any',
 		);
 
-		$all_post_types = array_merge( $default_post_types, apply_filters( 'wds_react_post_search_filter_post_types', $post_types ) );
+		$all_post_types = apply_filters( 'wds_react_post_search_filter_post_types', $post_types );
 
 		return $all_post_types;
 	}
 
 	/**
-	 * Get the string of post types to search for our REST API query.
+	 * Register REST API search results route.
 	 *
-	 * @return void Bail if we don't even have filtered post types – we'll just search posts.
-	 * @author Corey Collins
+	 * @return void
 	 */
-	public function get_post_types_to_search() {
-
-		$post_types = $this->post_types_to_search();
+	public function rest_api_init() {
+		register_rest_route('wds-react-post-search/v1', '/search', [
+			'methods'  => WP_REST_Server::READABLE,
+			'callback' => array( $this, 'search_posts' ),
+			'args'     => $this->get_search_args(),
+		]);
+	}
 
-		if ( ! $post_types ) {
-			return;
-		}
+	/**
+	 * Define the arguments our endpoint receives.
+	 */
+	public function get_search_args() {
+		$args = [];
+
+		$args['s'] = [
+			'description' => esc_html__( 'The search term.', 'wds-react-post-search' ),
+			'type'        => 'string',
+		];
+
+		$args['type'] = [
+			'description' => esc_html__( 'Post Types.', 'wds-react-post-search' ),
+			'type'        => 'array',
+			'default'     => [],
+			'items'       => [
+				'type' => 'string',
+			],
+		];
 
-		$post_types_string = '';
+		return $args;
+	}
 
-		foreach ( $post_types as $post_type ) {
-			$post_types_string .= 'type[]=' . esc_attr( $post_type ) . '&';
+	/**
+	 * Get search post types.
+	 *
+	 * @param  array $request HTTP request variables.
+	 * @return mixed
+	 */
+	public function get_valid_search_post_types( $request ) {
+		if ( is_array( $request['type'] ) && ! empty( $request['type'] ) ) {
+			return array_map( 'sanitize_text_field', $request['type'] );
+		} elseif ( $request['type'] ) {
+			return sanitize_text_field( $request['type'] );
+		} else {
+			return $this->post_types_to_search();
 		}
+	}
 
-		return $post_types_string;
+	/**
+	 * Search posts.
+	 *
+	 * @param array $request HTTP request variables.
+	 * @return array  Search results or error.
+	 */
+	public function search_posts( $request ) {
+		$posts   = [];
+		$results = [];
+
+		if ( isset( $request['s'] ) ) :
+			$filter = [
+				'posts_per_page' => -1,
+				'post_type'      => $this->get_valid_search_post_types( $request ),
+				's'              => sanitize_text_field( $request['s'] ),
+			];
+
+			// Get posts.
+			$posts = get_posts( $filter );
+
+			// Return title and link.
+			foreach ( $posts as $post ) :
+				$results[] = [
+					'title' => $post->post_title,
+					'link'  => get_permalink( $post->ID ),
+				];
+			endforeach;
+		endif;
+
+		if ( empty( $results ) ) :
+			return new WP_Error( 'wds-react-post-search-results', apply_filters( 'wds_react_post_search_no_results_text', esc_html__( 'No results found.', 'wds-react-post-search' ) ) );
+		endif;
+
+		return rest_ensure_response( $results );
 	}
 }