| ... |
... |
@@ -36,28 +36,26 @@ |
| 36 |
36 |
// this.attachShadow({ mode: 'open' }); |
| 37 |
37 |
super.connectedCallback(); |
| 38 |
38 |
this.render(); |
| 39 |
|
- this.$('#search').addEventListener('click', () => this.handleSearch()); |
| 40 |
|
- this.$('#prev').addEventListener('click', () => { |
| 41 |
|
- if(this.offset > 0) { |
| 42 |
|
- this.offset--; |
| 43 |
|
- this.handleSearch(); |
| 44 |
|
- } |
| 45 |
|
- }); |
| 46 |
|
- this.$('#next').addEventListener('click', () => { |
| 47 |
|
- this.offset++; |
| 48 |
|
- this.handleSearch(); |
| 49 |
|
- }); |
|
39 |
+ this.searchButton.addEventListener('click', () => this.handleSearch()); |
| 50 |
50 |
} |
| 51 |
51 |
|
| 52 |
52 |
|
| 53 |
53 |
handleSearch = () => { |
| 54 |
|
- const value = this.$('input[type="text"]').value; |
| 55 |
|
- fetch(`${this.searchBaseUrl}${encodeURIComponent(value)}`) |
|
44 |
+ fetch(`${this.searchBaseUrl}${encodeURIComponent(this.searchInput.value)}`) |
| 56 |
56 |
.then(res => res.json()) |
| 57 |
57 |
.then(this.renderResults); |
|
47 |
+ |
| 58 |
58 |
} |
| 59 |
59 |
|
|
50 |
+ get searchInput() { |
|
51 |
+ return this.$('input[type="text"]'); |
|
52 |
+ } |
| 60 |
60 |
|
|
54 |
+ get searchButton() { |
|
55 |
+ return this.$('#button'); |
|
56 |
+ } |
|
57 |
+ |
|
58 |
+ |
| 61 |
61 |
get searchInputTemplate() { |
| 62 |
62 |
return this.createTemplate(` |
| 63 |
63 |
<div> |
| ... |
... |
@@ -69,7 +69,7 @@ |
| 69 |
69 |
`); |
| 70 |
70 |
} |
| 71 |
71 |
|
| 72 |
|
- renderResults = (results) => { |
|
70 |
+ renderResults(results) { |
| 73 |
73 |
const resultsContainer = this.$('#results'); |
| 74 |
74 |
resultsContainer.replaceChildren(); |
| 75 |
75 |
for(let i = 0, j = results.length; i < j; i++) { |