add pagination to auctions

3 files changed, 98 insertions, 58 deletions

diff --git a/src/lib/Auction.svelte b/src/lib/Auction.svelte
new file mode 100644
index 0000000..57d8cee
--- /dev/null
+++ b/src/lib/Auction.svelte
@@ -0,0 +1,56 @@
+<script lang="ts">
+	import type { MatcherFile } from 'skyblock-assets'
+	import Item from './minecraft/Item.svelte'
+	import Username from './minecraft/Username.svelte'
+	import { millisecondsToTime, removeFormattingCode } from './utils'
+
+	export let auction
+	export let pack: MatcherFile
+</script>
+
+<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>
+
+<style>
+	.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;
+	}
+	.item-slot-container {
+		float: right;
+	}
+
+	p {
+		margin: 0;
+	}
+</style>
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;
diff --git a/src/routes/items.svelte b/src/routes/items.svelte
index f836de0..82b3ee3 100644
--- a/src/routes/items.svelte
+++ b/src/routes/items.svelte
@@ -71,9 +71,11 @@
 
 <main>
 	<div class="last-updated">
-		Last updated: <a href="https://github.com/mat-1/skyblock-items-history/commits/main"><time datetime="${data.lastUpdated}">
-			{millisecondsToTime(now - data.lastUpdated)} ago
-		</time></a>
+		Last updated: <a href="https://github.com/mat-1/skyblock-items-history/commits/main"
+			><time datetime="${data.lastUpdated}">
+				{millisecondsToTime(now - data.lastUpdated)} ago
+			</time></a
+		>
 	</div>
 	<h1>SkyBlock Item List</h1>
 	<p class="results-count">{filteredItems.length.toLocaleString()} items</p>