feat: added ability to load more discogs results on editsong

backend/logic/actions/apis.js

@@ -76,12 +76,13 @@ module.exports = {
 	 * @param query - the query
 	 * @param cb
 	 */
-	searchDiscogs: hooks.adminRequired((session, query, cb, userId) => {
+	searchDiscogs: hooks.adminRequired((session, query, page, cb, userId) => {
 		async.waterfall([
 			(next) => {
 				const params = [
 					`q=${encodeURIComponent(query)}`,
-					`per_page=20`
+					`per_page=20`,
+					`page=${page}`
 				].join('&');
 		
 				const options = {
@@ -95,18 +96,18 @@ module.exports = {
 				request(options, (err, res, body) => {
 					if (err) next(err);
 					body = JSON.parse(body);
-					next(null, body.results);
+					next(null, body);
 					if (body.error) next(body.error);
 				});
 			}
-		], async (err, results) => {
+		], async (err, body) => {
 			if (err) {
 				err = await utils.getError(err);
 				logger.error("APIS_SEARCH_DISCOGS", `Searching discogs failed with query "${query}". "${err}"`);
 				return cb({status: 'failure', message: err});
 			}
 			logger.success('APIS_SEARCH_DISCOGS', `User "${userId}" searched Discogs succesfully for query "${query}".`);
-			cb({status: 'success', results});
+			cb({status: 'success', results: body.results, pages: body.pagination.pages});
 		});
 	}),
 

frontend/components/Modals/EditSong.vue

@@ -364,11 +364,12 @@
 								class="input"
 								type="text"
 								v-model="discogsQuery"
+								@change="onDiscogsQueryChange"
 							/>
 						</p>
 						<button
 							class="button is-info is-fullwidth"
-							v-on:click="searchDiscogs()"
+							v-on:click="searchDiscogsForPage(1)"
 						>
 							Search
 						</button>
@@ -457,6 +458,17 @@
 								</div>
 							</div>
 						</div>
+						<button
+							v-if="
+								discogs.apiResults.length > 0 &&
+									!discogs.disableLoadMore &&
+									discogs.page < discogs.pages
+							"
+							class="button is-fullwidth is-info discogs-load-more"
+							@click="loadNextDiscogsPage()"
+						>
+							Load more...
+						</button>
 					</div>
 				</div>
 			</div>
@@ -600,7 +612,10 @@ export default {
 			youtubeVideoNote: "",
 			useHTTPS: false,
 			discogs: {
-				apiResults: []
+				apiResults: [],
+				page: 1,
+				pages: 1,
+				disableLoadMore: false
 			},
 			artistInputValue: "",
 			genreInputValue: "",
@@ -821,37 +836,65 @@ export default {
 					value: this.editing.song.discogs.album.artists
 				});
 		},
-		searchDiscogs() {
+		searchDiscogsForPage(page) {
 			const query = this.discogsQuery;
 
-			this.socket.emit("apis.searchDiscogs", query, res => {
+			this.socket.emit("apis.searchDiscogs", query, page, res => {
 				if (res.status === "success") {
-					Toast.methods.addToast(
-						`Successfully searched. Got ${res.results.length} results.`,
-						4000
+					if (page === 1)
+						Toast.methods.addToast(
+							`Successfully searched. Got ${res.results.length} results.`,
+							4000
+						);
+					else
+						Toast.methods.addToast(
+							`Successfully got ${res.results.length} more results.`,
+							4000
+						);
+
+					if (page === 1) {
+						this.discogs.apiResults = [];
+					}
+
+					this.discogs.pages = res.pages;
+
+					this.discogs.apiResults = this.discogs.apiResults.concat(
+						res.results.map(result => {
+							const type =
+								result.type.charAt(0).toUpperCase() +
+								result.type.slice(1);
+
+							return {
+								expanded: false,
+								gotMoreInfo: false,
+								album: {
+									id: result.id,
+									title: result.title,
+									type,
+									year: result.year,
+									genres: result.genre,
+									albumArt: result.cover_image,
+									resourceUrl: result.resource_url
+								}
+							};
+						})
 					);
-					this.discogs.apiResults = res.results.map(result => {
-						const type =
-							result.type.charAt(0).toUpperCase() +
-							result.type.slice(1);
-
-						return {
-							expanded: false,
-							gotMoreInfo: false,
-							album: {
-								id: result.id,
-								title: result.title,
-								type,
-								year: result.year,
-								genres: result.genre,
-								albumArt: result.cover_image,
-								resourceUrl: result.resource_url
-							}
-						};
-					});
+
+					this.discogs.page = page;
+					this.discogs.disableLoadMore = false;
 				} else Toast.methods.addToast(res.message, 8000);
 			});
 		},
+		loadNextDiscogsPage() {
+			this.discogs.disableLoadMore = true;
+			this.searchDiscogsForPage(this.discogs.page + 1);
+		},
+		onDiscogsQueryChange() {
+			this.discogs.page = 1;
+			this.discogs.pages = 1;
+			this.discogs.apiResults = [];
+			this.discogs.disableLoadMore = false;
+		},
 		selectTrack(apiResultIndex, trackIndex) {
 			const apiResult = JSON.parse(
 				JSON.stringify(this.discogs.apiResults[apiResultIndex])
@@ -1690,6 +1733,10 @@ export default {
 				background-color: #f4f4f4;
 			}
 		}
+
+		.discogs-load-more {
+			margin-bottom: 8px;
+		}
 	}
 }