From 279f40004f091ea856a1165ea13772bd00468a83 Mon Sep 17 00:00:00 2001
From: Bauke <me@bauke.xyz>
Date: Thu, 3 Feb 2022 12:23:10 +0100
Subject: [PATCH] Add a load more button for search results (#16).

---
 source/ts/components/search-bar.ts | 28 ++++++++++++++++++++++++++++
 source/ts/utilities/search.ts      |  7 ++++++-
 2 files changed, 34 insertions(+), 1 deletion(-)

diff --git a/source/ts/components/search-bar.ts b/source/ts/components/search-bar.ts
index d6595c1..33a148f 100644
--- a/source/ts/components/search-bar.ts
+++ b/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
diff --git a/source/ts/utilities/search.ts b/source/ts/utilities/search.ts
index 06a20ac..7468488 100644
--- a/source/ts/utilities/search.ts
+++ b/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',