-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
390009c
commit 4b28c92
Showing
3 changed files
with
109 additions
and
103 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,108 +1,122 @@ | ||
| require( 'isomorphic-fetch' ); | ||
| import React from 'react'; | ||
| import qs from 'query-string'; | ||
| import { DebounceInput } from 'react-debounce-input'; | ||
| import SearchResults from './searchResults'; | ||
| require("isomorphic-fetch"); | ||
| import React from "react"; | ||
| import qs from "query-string"; | ||
| import { DebounceInput } from "react-debounce-input"; | ||
| import SearchResults from "./searchResults"; | ||
|
|
||
| export default class SearchForm extends React.Component { | ||
| constructor(props) { | ||
| super(props); | ||
|
|
||
| constructor( props ) { | ||
| super( props ); | ||
|
|
||
| this.getResults = this.getResults.bind( this ); | ||
| this.getFormClass = this.getFormClass.bind( this ); | ||
| this.getResults = this.getResults.bind(this); | ||
| this.getFormClass = this.getFormClass.bind(this); | ||
|
|
||
| this.state = { | ||
| results: [], | ||
| loading: false, | ||
| searched: false, | ||
| lengthError: false, | ||
| empty: false, | ||
| empty: false | ||
| }; | ||
| } | ||
|
|
||
| getResults( event ) { | ||
|
|
||
| getResults(event) { | ||
| const search = event.target.value; | ||
|
|
||
| if ( ! search ) { | ||
| this.setState( { | ||
| if (!search) { | ||
| this.setState({ | ||
| results: [], | ||
| loading: false, | ||
| searched: false, | ||
| lengthError: false, | ||
| empty: true, | ||
| } ); | ||
| empty: true | ||
| }); | ||
|
|
||
| return; | ||
| } | ||
|
|
||
| if ( search && wds_react_post_search.minimum_character_count <= search.length ) { | ||
| this.setState( { | ||
| if ( | ||
| search && | ||
| wds_react_post_search.minimum_character_count <= search.length | ||
| ) { | ||
| this.setState({ | ||
| loading: true, | ||
| searched: true, | ||
| lengthError: false, | ||
| empty: false, | ||
| } ); | ||
| empty: false | ||
| }); | ||
|
|
||
| const postType = this.props.postType; | ||
|
|
||
| let url = wds_react_post_search.rest_search_posts.replace( '%s', search ); | ||
| let url = wds_react_post_search.rest_search_posts.replace("%s", search); | ||
| let query = { | ||
| s: search | ||
| }; | ||
|
|
||
| if ( postType ) { | ||
| if (postType) { | ||
| query.type = postType; | ||
| }; | ||
|
|
||
| const queryString = qs.stringify( query ); | ||
| url = `${ url }?${ queryString }`; | ||
|
|
||
| let json = fetch( url ) | ||
| .then( | ||
| response => { | ||
| return response.json() | ||
| } | ||
| ) | ||
| .then( | ||
| results => { | ||
| this.setState( { | ||
| results: results, | ||
| loading: false | ||
| } ); | ||
| } | ||
| ); | ||
| } | ||
|
|
||
| const queryString = qs.stringify(query); | ||
| url = `${url}?${queryString}`; | ||
|
|
||
| let json = fetch(url) | ||
| .then(response => { | ||
| return response.json(); | ||
| }) | ||
| .then(results => { | ||
| this.setState({ | ||
| results: results, | ||
| loading: false | ||
| }); | ||
| }); | ||
| } else { | ||
| this.setState( { | ||
| this.setState({ | ||
| results: [], | ||
| searched: false, | ||
| lengthError: true, | ||
| empty: false, | ||
| } ); | ||
| empty: false | ||
| }); | ||
| } | ||
| } | ||
|
|
||
| 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'; | ||
| 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'; | ||
| if (this.state.empty) { | ||
| className = "search-form-input"; | ||
| } | ||
|
|
||
| return className; | ||
| } | ||
|
|
||
| render() { | ||
| return ( | ||
| <div className={ `${ this.getFormClass() }` }> | ||
| <DebounceInput debounceTimeout={ 300 } className="search-input" type="text" onChange={ this.getResults } placeholder={ wds_react_post_search.placeholder_text } /> | ||
| <SearchResults searched={ this.state.searched } loading={ this.state.loading } results={ this.state.results } lengthError={ this.state.lengthError } empty={ this.state.empty } /> | ||
| <div className={`${this.getFormClass()}`}> | ||
| <DebounceInput | ||
| debounceTimeout={300} | ||
| className="search-input" | ||
| type="text" | ||
| onChange={this.getResults} | ||
| placeholder={wds_react_post_search.placeholder_text} | ||
| /> | ||
| <SearchResults | ||
| searched={this.state.searched} | ||
| loading={this.state.loading} | ||
| results={this.state.results} | ||
| lengthError={this.state.lengthError} | ||
| empty={this.state.empty} | ||
| /> | ||
| </div> | ||
| ) | ||
| ); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,16 +1,17 @@ | ||
| import React from 'react'; | ||
| import { decodeEntities } from '@wordpress/html-entities'; | ||
| import React from "react"; | ||
| import { decodeEntities } from "@wordpress/html-entities"; | ||
| export default class SearchResult extends React.Component { | ||
|
|
||
| constructor( props ) { | ||
| super( props ); | ||
| constructor(props) { | ||
| super(props); | ||
| } | ||
|
|
||
| render() { | ||
| render() { | ||
| return ( | ||
| <li className="search-results-item"> | ||
| <a href={ this.props.result.link }>{ decodeEntities( this.props.result.title ) }</a> | ||
| <a href={this.props.result.link}> | ||
| {decodeEntities(this.props.result.title)} | ||
| </a> | ||
| </li> | ||
| ) | ||
| ); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,63 +1,54 @@ | ||
| import React from 'react'; | ||
| import SearchResult from './searchResult'; | ||
| import React from "react"; | ||
| import SearchResult from "./searchResult"; | ||
|
|
||
| export default class SearchResults extends React.Component { | ||
|
|
||
| constructor( props ) { | ||
| super( props ); | ||
| constructor(props) { | ||
| super(props); | ||
| } | ||
|
|
||
| render() { | ||
|
|
||
| let results = '', | ||
| resultsClass = ''; | ||
| let results = "", | ||
| resultsClass = ""; | ||
|
|
||
| // If the input is empty, like we deleted our query. | ||
| if ( this.props.empty ) { | ||
| if (this.props.empty) { | ||
| return null; | ||
| } | ||
|
|
||
| // If we have results, OR we have results, but we're still typing. We don't want to take the results away to load more. | ||
| if ( 0 < this.props.results.length || 0 < this.props.results.length && this.props.loading ) { | ||
|
|
||
| const queryResults = this.props.results.map( result => { | ||
| return( | ||
| <SearchResult key={ result.id } result={ result } /> | ||
| ); | ||
| } ); | ||
|
|
||
| results = <ul className="search-results-list">{ queryResults }</ul>; | ||
| resultsClass = this.props.loading ? ' has-results loading-more performed-action' : ' has-results performed-action'; | ||
|
|
||
| } else if ( this.props.loading ) { | ||
|
|
||
| if ( | ||
| 0 < this.props.results.length || | ||
| (0 < this.props.results.length && this.props.loading) | ||
| ) { | ||
| const queryResults = this.props.results.map(result => { | ||
| return <SearchResult key={result.id} result={result} />; | ||
| }); | ||
|
|
||
| results = <ul className="search-results-list">{queryResults}</ul>; | ||
| resultsClass = this.props.loading | ||
| ? " has-results loading-more performed-action" | ||
| : " has-results performed-action"; | ||
| } else if (this.props.loading) { | ||
| // If we're loading results for the first time. | ||
| results = <p>{ wds_react_post_search.loading_text }</p>; | ||
| resultsClass = ' loading performed-action'; | ||
|
|
||
| } else if ( ! this.props.empty && this.props.lengthError ) { | ||
|
|
||
| results = <p>{wds_react_post_search.loading_text}</p>; | ||
| resultsClass = " loading performed-action"; | ||
| } else if (!this.props.empty && this.props.lengthError) { | ||
| // If the input isn't empty but doesn't have enough characters. | ||
| results = <p>{ wds_react_post_search.length_error }</p>; | ||
| resultsClass = ' character-length performed-action'; | ||
|
|
||
| } else if ( this.props.searched ) { | ||
|
|
||
| results = <p>{wds_react_post_search.length_error}</p>; | ||
| resultsClass = " character-length performed-action"; | ||
| } else if (this.props.searched) { | ||
| // If no results were found. | ||
| results = <p>{ wds_react_post_search.no_results_text }</p>; | ||
| resultsClass = ' no-results performed-action'; | ||
|
|
||
| results = <p>{wds_react_post_search.no_results_text}</p>; | ||
| resultsClass = " no-results performed-action"; | ||
| } | ||
|
|
||
| // Bail if we have no results variables set. | ||
| if ( ! results ) { | ||
| if (!results) { | ||
| return null; | ||
| } | ||
|
|
||
| return ( | ||
| <div className={ `search-results-container${ resultsClass }` }> | ||
| { results } | ||
| </div> | ||
| ) | ||
| <div className={`search-results-container${resultsClass}`}>{results}</div> | ||
| ); | ||
| } | ||
| } |