Skip to content

Commit 4b28c92

Browse files
gregrickabygregrickaby
committed
linting/prettier
1 parent 390009c commit 4b28c92

File tree

3 files changed

+109
-103
lines changed

3 files changed

+109
-103
lines changed

‎assets/js/components/searchForm.js‎

Lines changed: 69 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,108 +1,122 @@
1-
require( 'isomorphic-fetch' );
2-
import React from 'react';
3-
import qs from 'query-string';
4-
import { DebounceInput } from 'react-debounce-input';
5-
import SearchResults from './searchResults';
1+
require("isomorphic-fetch");
2+
import React from "react";
3+
import qs from "query-string";
4+
import { DebounceInput } from "react-debounce-input";
5+
import SearchResults from "./searchResults";
66

77
export default class SearchForm extends React.Component {
8+
constructor(props) {
9+
super(props);
810

9-
constructor( props ) {
10-
super( props );
11-
12-
this.getResults = this.getResults.bind( this );
13-
this.getFormClass = this.getFormClass.bind( this );
11+
this.getResults = this.getResults.bind(this);
12+
this.getFormClass = this.getFormClass.bind(this);
1413

1514
this.state = {
1615
results: [],
1716
loading: false,
1817
searched: false,
1918
lengthError: false,
20-
empty: false,
19+
empty: false
2120
};
2221
}
2322

24-
getResults( event ) {
25-
23+
getResults(event) {
2624
const search = event.target.value;
2725

28-
if ( ! search ) {
29-
this.setState( {
26+
if (!search) {
27+
this.setState({
3028
results: [],
3129
loading: false,
3230
searched: false,
3331
lengthError: false,
34-
empty: true,
35-
} );
32+
empty: true
33+
});
3634

3735
return;
3836
}
3937

40-
if ( search && wds_react_post_search.minimum_character_count <= search.length ) {
41-
this.setState( {
38+
if (
39+
search &&
40+
wds_react_post_search.minimum_character_count <= search.length
41+
) {
42+
this.setState({
4243
loading: true,
4344
searched: true,
4445
lengthError: false,
45-
empty: false,
46-
} );
46+
empty: false
47+
});
4748

4849
const postType = this.props.postType;
4950

50-
let url = wds_react_post_search.rest_search_posts.replace( '%s', search );
51+
let url = wds_react_post_search.rest_search_posts.replace("%s", search);
5152
let query = {
5253
s: search
5354
};
5455

55-
if ( postType ) {
56+
if (postType) {
5657
query.type = postType;
57-
};
58-
59-
const queryString = qs.stringify( query );
60-
url = `${ url }?${ queryString }`;
61-
62-
let json = fetch( url )
63-
.then(
64-
response => {
65-
return response.json()
66-
}
67-
)
68-
.then(
69-
results => {
70-
this.setState( {
71-
results: results,
72-
loading: false
73-
} );
74-
}
75-
);
58+
}
59+
60+
const queryString = qs.stringify(query);
61+
url = `${url}?${queryString}`;
62+
63+
let json = fetch(url)
64+
.then(response => {
65+
return response.json();
66+
})
67+
.then(results => {
68+
this.setState({
69+
results: results,
70+
loading: false
71+
});
72+
});
7673
} else {
77-
this.setState( {
74+
this.setState({
7875
results: [],
7976
searched: false,
8077
lengthError: true,
81-
empty: false,
82-
} );
78+
empty: false
79+
});
8380
}
8481
}
8582

8683
getFormClass() {
87-
let className = 'search-form-input';
88-
89-
if ( this.state.results.length > 0 || this.state.loading || this.state.lengthError || this.state.searched ) {
90-
className += ' search-form-performing-action';
84+
let className = "search-form-input";
85+
86+
if (
87+
this.state.results.length > 0 ||
88+
this.state.loading ||
89+
this.state.lengthError ||
90+
this.state.searched
91+
) {
92+
className += " search-form-performing-action";
9193
}
9294

93-
if ( this.state.empty ) {
94-
className = 'search-form-input';
95+
if (this.state.empty) {
96+
className = "search-form-input";
9597
}
9698

9799
return className;
98100
}
99101

100102
render() {
101103
return (
102-
<div className={ `${ this.getFormClass() }` }>
103-
<DebounceInput debounceTimeout={ 300 } className="search-input" type="text" onChange={ this.getResults } placeholder={ wds_react_post_search.placeholder_text } />
104-
<SearchResults searched={ this.state.searched } loading={ this.state.loading } results={ this.state.results } lengthError={ this.state.lengthError } empty={ this.state.empty } />
104+
<div className={`${this.getFormClass()}`}>
105+
<DebounceInput
106+
debounceTimeout={300}
107+
className="search-input"
108+
type="text"
109+
onChange={this.getResults}
110+
placeholder={wds_react_post_search.placeholder_text}
111+
/>
112+
<SearchResults
113+
searched={this.state.searched}
114+
loading={this.state.loading}
115+
results={this.state.results}
116+
lengthError={this.state.lengthError}
117+
empty={this.state.empty}
118+
/>
105119
</div>
106-
)
120+
);
107121
}
108122
}

‎assets/js/components/searchResult.js‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,17 @@
1-
import React from 'react';
2-
import { decodeEntities } from '@wordpress/html-entities';
1+
import React from "react";
2+
import { decodeEntities } from "@wordpress/html-entities";
33
export default class SearchResult extends React.Component {
4-
5-
constructor( props ) {
6-
super( props );
4+
constructor(props) {
5+
super(props);
76
}
87

9-
render() {
8+
render() {
109
return (
1110
<li className="search-results-item">
12-
<a href={ this.props.result.link }>{ decodeEntities( this.props.result.title ) }</a>
11+
<a href={this.props.result.link}>
12+
{decodeEntities(this.props.result.title)}
13+
</a>
1314
</li>
14-
)
15+
);
1516
}
1617
}

‎assets/js/components/searchResults.js‎

Lines changed: 31 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,63 +1,54 @@
1-
import React from 'react';
2-
import SearchResult from './searchResult';
1+
import React from "react";
2+
import SearchResult from "./searchResult";
33

44
export default class SearchResults extends React.Component {
5-
6-
constructor( props ) {
7-
super( props );
5+
constructor(props) {
6+
super(props);
87
}
98

109
render() {
11-
12-
let results = '',
13-
resultsClass = '';
10+
let results = "",
11+
resultsClass = "";
1412

1513
// If the input is empty, like we deleted our query.
16-
if ( this.props.empty ) {
14+
if (this.props.empty) {
1715
return null;
1816
}
1917

2018
// 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.
21-
if ( 0 < this.props.results.length || 0 < this.props.results.length && this.props.loading ) {
22-
23-
const queryResults = this.props.results.map( result => {
24-
return(
25-
<SearchResult key={ result.id } result={ result } />
26-
);
27-
} );
28-
29-
results = <ul className="search-results-list">{ queryResults }</ul>;
30-
resultsClass = this.props.loading ? ' has-results loading-more performed-action' : ' has-results performed-action';
31-
32-
} else if ( this.props.loading ) {
33-
19+
if (
20+
0 < this.props.results.length ||
21+
(0 < this.props.results.length && this.props.loading)
22+
) {
23+
const queryResults = this.props.results.map(result => {
24+
return <SearchResult key={result.id} result={result} />;
25+
});
26+
27+
results = <ul className="search-results-list">{queryResults}</ul>;
28+
resultsClass = this.props.loading
29+
? " has-results loading-more performed-action"
30+
: " has-results performed-action";
31+
} else if (this.props.loading) {
3432
// If we're loading results for the first time.
35-
results = <p>{ wds_react_post_search.loading_text }</p>;
36-
resultsClass = ' loading performed-action';
37-
38-
} else if ( ! this.props.empty && this.props.lengthError ) {
39-
33+
results = <p>{wds_react_post_search.loading_text}</p>;
34+
resultsClass = " loading performed-action";
35+
} else if (!this.props.empty && this.props.lengthError) {
4036
// If the input isn't empty but doesn't have enough characters.
41-
results = <p>{ wds_react_post_search.length_error }</p>;
42-
resultsClass = ' character-length performed-action';
43-
44-
} else if ( this.props.searched ) {
45-
37+
results = <p>{wds_react_post_search.length_error}</p>;
38+
resultsClass = " character-length performed-action";
39+
} else if (this.props.searched) {
4640
// If no results were found.
47-
results = <p>{ wds_react_post_search.no_results_text }</p>;
48-
resultsClass = ' no-results performed-action';
49-
41+
results = <p>{wds_react_post_search.no_results_text}</p>;
42+
resultsClass = " no-results performed-action";
5043
}
5144

5245
// Bail if we have no results variables set.
53-
if ( ! results ) {
46+
if (!results) {
5447
return null;
5548
}
5649

5750
return (
58-
<div className={ `search-results-container${ resultsClass }` }>
59-
{ results }
60-
</div>
61-
)
51+
<div className={`search-results-container${resultsClass}`}>{results}</div>
52+
);
6253
}
6354
}

0 commit comments

Comments
 (0)