Add a load more button for search results (#16).

source/ts/components/search-bar.ts

@@ -24,6 +24,23 @@ export default class SearchBar extends Component<Props, State> {
     };
   }
 
+  searchMore = async (): Promise<void> => {
+    if (this.state.searchValue.length === 0) {
+      this.setState({searchResults: [], searchState: 'waiting'});
+      return;
+    }
+
+    this.setState({
+      searchResults: [
+        ...this.state.searchResults,
+        ...(await searchReleases(
+          this.state.searchValue,
+          this.state.searchResults.length,
+        )),
+      ],
+    });
+  };
+
   searchQuery = async (): Promise<void> => {
     if (this.state.searchValue.length === 0) {
       this.setState({searchResults: [], searchState: 'waiting'});
@@ -79,6 +96,17 @@ export default class SearchBar extends Component<Props, State> {
       );
     }
 
+    const resultAmount = this.state.searchResults.length;
+    if (resultAmount > 0 && resultAmount % 25 === 0) {
+      results.push(
+        html`
+          <li class="search-state">
+            <button onClick=${this.searchMore}>Load more…</button>
+          </li>
+        `,
+      );
+    }
+
     return html`
       <div class="search-bar">
         <input

source/ts/utilities/search.ts

@@ -19,9 +19,14 @@ export type SearchResult = {
 
 export default async function searchReleases(
   query: string,
+  offset?: number,
 ): Promise<SearchResult[]> {
   query = encodeURIComponent(query);
-  const url = `https://musicbrainz.org/ws/2/release?query=${query}`;
+  let url = `https://musicbrainz.org/ws/2/release?query=${query}`;
+  if (offset !== undefined) {
+    url += `&offset=${offset}`;
+  }
+
   const response = await window.fetch(url, {
     headers: {
       accept: 'application/json',