Skip to content

Commit 5acc629

Browse files
jimthoburnjimthoburn
authored
feat: live update the search results on the details page (#38)
1 parent 2350b24 commit 5acc629

File tree

5 files changed

+40
-20
lines changed

5 files changed

+40
-20
lines changed

‎api/detail.js

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { OPENAPI_PATHS } from "../public/components/openapi-paths.js";
55
import { parameterField } from "../public/components/parameter-field.js";
66
import { requestPreview } from "../public/components/request-preview.js";
77
import { getResponseHTML } from "../public/components/get-response-html.js";
8+
import { search } from "../public/components/search.js";
89

910
const MarkdownIt = require("markdown-it");
1011

@@ -118,13 +119,11 @@ module.exports = async (request, response) => {
118119
<body>
119120
<h1>octokit.rest</h1>
120121
121-
<form action="/">
122-
<label>
123-
What would you like to request?<br />
124-
<input type="text" value="${endpoint.method} ${path}" name="query" />
125-
</label>
126-
<button type="submit">Go</button>
127-
</form>
122+
<div id="search">
123+
${search({ query: `${endpoint.method} ${endpoint.url}` })}
124+
</div>
125+
126+
<div id="details">
128127
129128
<section>
130129
<h2>${endpoint.name} (<code>${route}</code>)</h2>
@@ -178,7 +177,10 @@ module.exports = async (request, response) => {
178177
endpoint.documentationUrl
179178
}">GitHub developer guides</a></p>
180179
180+
</div>
181+
181182
<script type="module" src="/detail.js"></script>
183+
<script type="module" src="/search.js"></script>
182184
</body>
183185
</html>
184186
`);

‎api/search.js

Lines changed: 3 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { OPENAPI_PATHS } from "../public/components/openapi-paths.js";
2-
import { searchResults } from "../public/components/search-results.js";
32
import { pageTitle } from "../public/components/page-title.js";
3+
import { search } from "../public/components/search.js";
44

55
const allEndpointPaths = Object.keys(OPENAPI_PATHS);
66

@@ -59,16 +59,8 @@ module.exports = async (request, response) => {
5959
<body>
6060
<h1>octokit.rest</h1>
6161
62-
<form action="/">
63-
<label>
64-
What would you like to request?<br />
65-
<input type="text" value="${query}" name="query" />
66-
</label>
67-
<button type="submit">Go</button>
68-
</form>
69-
70-
<div id="results">
71-
${searchResults({ query, results })}
62+
<div id="search">
63+
${search({ query, results })}
7264
</div>
7365
7466
<script type="module" src="/search.js"></script>

‎public/components/search-results.js

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
export function searchResults({ query, results }) {
22
const queryRegex = new RegExp(`(${query})`, "i");
33

4-
const resultsHTML = results
4+
if (!results) return "";
5+
6+
const resultsHTML = results ? results
57
.filter(Boolean)
68
.map(([method, path, operation]) => {
79
const route = `${method} ${path}`.replace(queryRegex, `<mark>$1</mark>`);
@@ -13,7 +15,7 @@ export function searchResults({ query, results }) {
1315
</a>
1416
</article>`;
1517
})
16-
.join("\n");
18+
.join("\n") : "";
1719

1820
if (resultsHTML) {
1921
return `<h2>Results</h2>

‎public/components/search.js

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
2+
import { searchResults } from "./search-results.js";
3+
4+
export function search({ query, results }) {
5+
6+
const resultsHTML = searchResults({ query, results });
7+
8+
return `
9+
<form action="/">
10+
<label>
11+
What would you like to request?<br />
12+
<input type="text" value="${query}" name="query" autocomplete="off" />
13+
</label>
14+
<button type="submit">Go</button>
15+
</form>
16+
17+
<div id="results">
18+
${resultsHTML}
19+
</div>
20+
`;
21+
22+
}

‎public/search.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,14 @@ import { pageTitle } from "/components/page-title.js";
33

44
const $queryField = document.querySelector(`input[name="query"]`);
55
const $results = document.querySelector(`#results`);
6+
const $details = document.querySelector(`#details`);
67

78
$queryField.addEventListener("keyup", async function(event) {
89
const query = $queryField.value.trim();
910
const results = query ? await sendSearchRequest(query) : [];
1011

1112
$results.innerHTML = await searchResults({ query, results });
13+
$details.style.display = "none";
1214

1315
window.history.pushState(
1416
{},

0 commit comments

Comments
 (0)