From 1a9887df01f8112c3c47f9cb0f4b28e69bdb7141 Mon Sep 17 00:00:00 2001
From: mat <github@matdoes.dev>
Date: Fri, 1 Jul 2022 19:00:37 -0500
Subject: add pagination to auctions

---
 src/lib/sections/Auctions.svelte | 92 ++++++++++++++++------------------------
 1 file changed, 37 insertions(+), 55 deletions(-)

(limited to 'src/lib/sections/Auctions.svelte')

diff --git a/src/lib/sections/Auctions.svelte b/src/lib/sections/Auctions.svelte
index 38fcbe9..54f7cfe 100644
--- a/src/lib/sections/Auctions.svelte
+++ b/src/lib/sections/Auctions.svelte
@@ -10,12 +10,33 @@
 	import Item from '$lib/minecraft/Item.svelte'
 	import type { MatcherFile } from 'skyblock-assets'
 	import Username from '$lib/minecraft/Username.svelte'
+	import Auction from '$lib/Auction.svelte'
+	import { onMount } from 'svelte'
 
 	export let data: CleanMemberProfile
 	export let stats: StatItem[]
 	export let pack: MatcherFile
 
 	let onlyThisProfile = true
+
+	let auctions: any[] = []
+	let loading = true
+
+	let page = 0
+
+	async function updateAuctions() {
+		loading = true
+		const thisPage = page
+		page += 1
+		const auctionsResponse = await fetchApi(
+			`playerauctions/${data.member.uuid}?page=${thisPage}`,
+			fetch
+		).then(r => r.json())
+		loading = false
+		auctions = [...auctions, ...auctionsResponse.auctions]
+	}
+
+	updateAuctions()
 </script>
 
 <div class="auction-stats-and-list-container">
@@ -35,37 +56,24 @@
 	</ul>
 
 	<div class="player-auctions-list-container">
-		{#await fetchApi(`playerauctions/${data.member.uuid}`, fetch).then(r => r.json())}
+		{#if loading || auctions.length > 0}
 			<h3>Auctions sold</h3>
-			Loading...
-		{:then auctions}
-			{#if auctions.length > 0}
-				<h3>Auctions sold</h3>
-				<div class="player-auctions-list">
-					{#each auctions as auction}
-						{#if !onlyThisProfile || auction.sellerProfileUuid == data.profile.uuid}
-							<div class="auction">
-								<div class="item-slot-container">
-									<Item item={auction.item} {pack} />
-								</div>
-
-								<h4 class="auction-item-name">
-									{removeFormattingCode(auction.item.display.name)}
-								</h4>
-								{#if auction.bin}
-									<b>Bin</b>
-								{/if}
-								<div class="auction-info-text">
-									<p>Coins: <b>{auction.coins.toLocaleString()}</b></p>
-									<p>Buyer: <Username player={auction.buyer} prefix hyperlinkToProfile /></p>
-									<p>{millisecondsToTime(Date.now() - auction.creationTimestamp)} ago</p>
-								</div>
-							</div>
-						{/if}
-					{/each}
-				</div>
+		{/if}
+		{#if auctions.length > 0}
+			<div class="player-auctions-list">
+				{#each auctions as auction}
+					{#if !onlyThisProfile || auction.sellerProfileUuid == data.profile.uuid}
+						<Auction {auction} {pack} />
+					{/if}
+				{/each}
+			</div>
+			{#if !loading}
+				<button on:click={updateAuctions}>Show more</button>
 			{/if}
-		{/await}
+		{/if}
+		{#if loading}
+			Loading...
+		{/if}
 	</div>
 </div>
 
@@ -78,43 +86,17 @@
 		margin-top: 0.5em;
 		width: max-content;
 	}
-	p {
-		margin: 0;
-	}
-
 	.auction-stats-and-list-container {
 		display: grid;
 		grid-template-columns: 1fr auto;
 	}
 
-	.auction-info-text {
-		color: var(--theme-darker-text);
-	}
-	.auction-info-text b {
-		color: var(--theme-main-text);
-	}
-
-	.auction-item-name {
-		font-size: 1.5rem;
-		margin: 0;
-	}
-
-	.auction {
-		border: 1px solid rgba(255, 255, 255, 0.1);
-		background: rgba(0, 0, 0, 0.1);
-		padding: 0.75em;
-		border-radius: 1em;
-		width: 18em;
-	}
 	.player-auctions-list {
 		display: flex;
 		flex-wrap: wrap;
 		column-gap: 0.5rem;
 		row-gap: 0.5rem;
 	}
-	.item-slot-container {
-		float: right;
-	}
 	.player-auctions-list-container {
 		margin-top: 0.5em;
 		margin-left: 0.5em;
-- 
cgit