From 58a40fdc8d8bf2ddd0f88ff4b974e0fe9fcef245 Mon Sep 17 00:00:00 2001
From: Adam Soltys <asoltys@gmail.com>
Date: Thu, 15 Sep 2022 16:37:31 -0700
Subject: transaction pagination

---
 src/routes/[username]/transactions/+page.svelte    | 57 ----------------
 .../transactions/[...page]/+page.server.js         | 14 ++++
 .../[username]/transactions/[...page]/+page.svelte | 78 ++++++++++++++++++++++
 3 files changed, 92 insertions(+), 57 deletions(-)
 delete mode 100644 src/routes/[username]/transactions/+page.svelte
 create mode 100644 src/routes/[username]/transactions/[...page]/+page.server.js
 create mode 100644 src/routes/[username]/transactions/[...page]/+page.svelte

diff --git a/src/routes/[username]/transactions/+page.svelte b/src/routes/[username]/transactions/+page.svelte
deleted file mode 100644
index 5a132394..00000000
--- a/src/routes/[username]/transactions/+page.svelte
+++ /dev/null
@@ -1,57 +0,0 @@
-<script>
-	import { AppHeader } from '$comp';
-	import { user, newPayment } from '$lib/store';
-	import { t } from '$lib/translations';
-      import { f, s } from "$lib/utils";
-
-	$newPayment = false;
-
-	$: transactions = $user.payments;
-</script>
-
-<AppHeader />
-
-<div class="my-20">
-	<h1 class="px-3 md:px-0 text-center text-3xl md:text-4xl font-semibold mb-10">
-		{$t('user.transactions.header')}
-	</h1>
-
-	<div class="max-w-5xl w-11/12 md:w-3/4 xl:w-1/2 mx-auto md:text-lg">
-		<div class="text-secondary grid grid-cols-3 mb-5">
-			<h2>{$t('user.transactions.AMOUNT')}</h2>
-			<h2 class="text-center">{$t('user.transactions.TYPE')}</h2>
-			<h2 class="text-right">{$t('user.transactions.TIME')}</h2>
-		</div>
-
-		<div class="space-y-10">
-			{#if transactions.length}
-				{#each transactions as tx}
-					<div class="grid grid-cols-3 border-b pb-5">
-						<div class="font-bold">
-							<span class="block mb-1"
-								>{tx.amount > 0 ? '+' : ''}{f(tx.amount * (tx.rate / 100000000), tx.currency)}
-							</span>
-
-							<span class="text-secondary"
-								>{tx.amount > 0 ? '+' : ''}{s(tx.amount)}
-								SAT
-							</span>
-						</div>
-
-						<div class="text-center">
-							<span class="text-secondary"
-								>{$t('user.transactions.' + (tx.amount < 0 ? 'sent' : 'received'))}</span
-							>
-						</div>
-
-						<div class="text-secondary text-right">
-							{new Date(tx.createdAt).toLocaleDateString(undefined, { dateStyle: 'medium' })}
-						</div>
-					</div>
-				{/each}
-			{:else}
-				<p class="text-secondary text-lg text-center">{$t('user.transactions.empty')}</p>
-			{/if}
-		</div>
-	</div>
-</div>
diff --git a/src/routes/[username]/transactions/[...page]/+page.server.js b/src/routes/[username]/transactions/[...page]/+page.server.js
new file mode 100644
index 00000000..d84c895a
--- /dev/null
+++ b/src/routes/[username]/transactions/[...page]/+page.server.js
@@ -0,0 +1,14 @@
+import { get, auth } from '$lib/utils';
+
+let offset = 25;
+
+export async function load({ params, request }) {
+	let page = parseInt(params.page || 1);
+	let transactions = await get('/payments', auth(request));
+	let total = transactions.length;
+	let pages = new Array(Math.ceil(total / offset));
+	let i = (page - 1) * offset;
+	transactions = transactions.slice(i, i + offset);
+
+	return { total, transactions, page, pages };
+}
diff --git a/src/routes/[username]/transactions/[...page]/+page.svelte b/src/routes/[username]/transactions/[...page]/+page.svelte
new file mode 100644
index 00000000..a5209ed8
--- /dev/null
+++ b/src/routes/[username]/transactions/[...page]/+page.svelte
@@ -0,0 +1,78 @@
+<script>
+	import { AppHeader } from '$comp';
+	import { newPayment } from '$lib/store';
+	import { t } from '$lib/translations';
+	import { f, s } from '$lib/utils';
+	export let data;
+
+  let { user } = data;
+
+	$newPayment = false;
+  let page, total, transactions = [], pages = [];
+  $: data && ({ page, pages, total, transactions } = data);
+</script>
+
+<AppHeader />
+
+<div class="my-20">
+	<h1 class="px-3 md:px-0 text-center text-3xl md:text-4xl font-semibold mb-10">
+		{$t('user.transactions.header')}
+	</h1>
+
+	<div class="container w-full mx-auto flex px-10 lg:px-40 mb-8 text-right">
+    <div class="ml-auto flex">
+		{#if pages.length > 1}
+			{#each pages as _, i}
+        <a href={`/${user.username}/transactions/${i+1}`} class:active={page === i + 1}>
+				<div class="border p-4 px-6 border-r-0 last:border-r">
+					{i + 1}
+				</div>
+        </a>
+			{/each}
+		{/if}
+    </div>
+	</div>
+
+	<div class="container w-full mx-auto md:text-lg px-10 lg:px-40">
+		<div class="text-secondary grid grid-cols-3 mb-5">
+			<h2>{$t('user.transactions.AMOUNT')}</h2>
+			<h2 class="text-center">{$t('user.transactions.TYPE')}</h2>
+			<h2 class="text-right">{$t('user.transactions.TIME')}</h2>
+		</div>
+
+		<div class="space-y-10">
+			{#if transactions.length}
+				{#each transactions as tx}
+					<div class="grid grid-cols-3 border-b pb-5">
+						<div class="font-bold">
+							<span class="block mb-1"
+								>{tx.amount > 0 ? '+' : ''}{f(tx.amount * (tx.rate / 100000000), tx.currency)}
+							</span>
+
+							<span class="text-secondary"
+								>{tx.amount > 0 ? '+' : ''}{s(tx.amount)}
+								SAT
+							</span>
+						</div>
+
+						<div class="text-center">
+							<span class="text-secondary"
+								>{$t('user.transactions.' + (tx.amount < 0 ? 'sent' : 'received'))}</span
+							>
+						</div>
+
+						<div class="text-secondary text-right">
+							{new Date(tx.createdAt).toLocaleDateString(undefined, { dateStyle: 'medium' })}
+						</div>
+					</div>
+				{/each}
+			{:else}
+				<p class="text-secondary text-lg text-center">{$t('user.transactions.empty')}</p>
+			{/if}
+		</div>
+	</div>
+</div>
+
+<style>
+  .active { @apply font-bold; }
+</style>
-- 
cgit v1.2.3