pagination fixes

3 files changed, 58 insertions, 38 deletions

diff --git a/src/routes/[username]/+page.svelte b/src/routes/[username]/+page.svelte
index e7321b95..3fbd0d9a 100644
--- a/src/routes/[username]/+page.svelte
+++ b/src/routes/[username]/+page.svelte
@@ -37,10 +37,10 @@
 </script>
 
 <div class="container px-4 flex flex-wrap">
-	<div class="p-10 pt-20 w-full lg:w-1/3">
+	<div class="p-10 pt-20">
 		<h1 class="text-3xl font-bold">{subject.username}</h1>
 
-		<p class="text-secondary">
+		<p class="text-secondary w-64">
 			{subject.address && subject.address !== 'null' ? subject.address : ''}
 		</p>
 
@@ -55,35 +55,35 @@
     -->
 	</div>
 
-	<div class="space-y-5 lg:mt-20 mx-auto">
-		<div class="flex justify-center gap-2">
-			<a href={`/${subject.username}`}>
-				<button
-					class="rounded-full border py-2 px-5 font-bold hover:opacity-80 w-full mb-2 bg-black text-white"
-					>Lightning</button
-				>
-			</a>
-			<a href={`/${subject.username}/bitcoin`}>
-				<button class="rounded-full border py-2 px-5 font-bold hover:opacity-80 w-full mb-2"
-					>Bitcoin</button
-				>
-			</a>
-		</div>
+	<div class="space-y-5 md:mt-20 mx-auto w-[350px]">
+		<!-- <div class="flex justify-center gap-2"> -->
+		<!-- 	<a href={`/${subject.username}`}> -->
+		<!-- 		<button -->
+		<!-- 			class="rounded-full border py-2 px-5 font-bold hover:opacity-80 w-full mb-2 bg-black text-white" -->
+		<!-- 			>Lightning</button -->
+		<!-- 		> -->
+		<!-- 	</a> -->
+		<!-- 	<a href={`/${subject.username}/bitcoin`}> -->
+		<!-- 		<button class="rounded-full border py-2 px-5 font-bold hover:opacity-80 w-full mb-2" -->
+		<!-- 			>Bitcoin</button -->
+		<!-- 		> -->
+		<!-- 	</a> -->
+		<!-- </div> -->
 		<div
 			on:click={() => copy(lightningAddress)}
 			id="qr"
-			class="cursor-pointer w-[292px] md:w-[342px] h-[342px] border border-lightgrey rounded-3xl flex p-5 justify-center items-center relative"
+			class="cursor-pointer w-[292px] md:w-[342px] h-[342px] border border-lightgrey rounded-3xl flex p-5 justify-center items-center relative mx-auto"
 		/>
 
-		<p class="text-secondary text-xl text-center font-semibold">{$t('user.scanToPayBTC')}</p>
 
 		<div
-			class="bg-primary font-semibold rounded-xl text-sm p-3 flex flex-wrap justify-between items-center"
+			class="bg-primary font-semibold rounded-xl text-sm p-3 flex justify-between items-center"
 		>
-			<span>{lightningAddress}</span>
+			<span class="mx-auto">{lightningAddress}</span>
 			<button class="hover:opacity-80" on:click={() => copy(lightningAddress)}>
 				<Icon icon="copy" style="ml-2" />
 			</button>
 		</div>
+  <p class="text-center">This is a re-usable <a href="https://lightningaddress.com/" class="underline" target="_blank">lightning address</a> that you can share or print</p>
 	</div>
 </div>
diff --git a/src/routes/[username]/transactions/[...page]/+page.server.js b/src/routes/[username]/transactions/[...page]/+page.server.js
index caa2e155..95fb8094 100644
--- a/src/routes/[username]/transactions/[...page]/+page.server.js
+++ b/src/routes/[username]/transactions/[...page]/+page.server.js
@@ -1,6 +1,6 @@
 import { get, auth } from '$lib/utils';
 
-let offset = 25;
+let limit = 25;
 
 export async function load({ cookies, params, request }) {
 	let parts = params.page.split('/');
@@ -11,16 +11,16 @@ export async function load({ cookies, params, request }) {
 	if (parts.length === 3) [start, end, page] = parts;
 	if (!parseInt(page)) page = 1;
 
-	let url = '/payments';
-	if (start && end) url += `?start=${start}&end=${end}`;
-	else if (start) url += `?start=${start}`;
-	else if (end) url += `?end=${end}`;
+	let offset = (page-1) * limit;
+
+	let url = `/payments?v2=true&limit=${limit}&offset=${offset}`;
+	if (start) url += `&start=${start}`;
+	if (end) url += `&end=${end}`;
+
+	let { total, transactions } = await get(url, auth(cookies));
+  console.log("TOT", total, transactions.length);
+	let pages = new Array(Math.ceil(total / limit));
 
-	let transactions = await get(url, auth(cookies));
-	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, start, end };
 }
diff --git a/src/routes/[username]/transactions/[...page]/+page.svelte b/src/routes/[username]/transactions/[...page]/+page.svelte
index cf809445..71314e88 100644
--- a/src/routes/[username]/transactions/[...page]/+page.svelte
+++ b/src/routes/[username]/transactions/[...page]/+page.svelte
@@ -7,21 +7,23 @@
 	import { f, s, sats } from '$lib/utils';
 	import { page } from '$app/stores';
 	import { differenceInDays, getUnixTime, sub } from 'date-fns';
+	import { goto } from '$app/navigation';
 
 	export let data;
 
 	let { start, end, user } = data;
+	let change = ({ target: { value } }) => goto(value);
 
 	let presets = [
-		{ title: 'Today', start: sub(new Date(), { days: 1 }), end: null },
-		{ title: '7 days', start: sub(new Date(), { days: 7 }), end: null },
-		{ title: 'Last month', start: sub(new Date(), { months: 1 }), end: null },
-		{ title: 'All', start: null, end: null }
+		{ title: 'Today', start: null, end: null },
+		{ title: 'Week', start: sub(new Date(), { days: 7 }), end: null },
+		{ title: 'Month', start: sub(new Date(), { months: 1 }), end: null },
+		{ title: 'All', start: sub(new Date(), { years: 5 }), end: null }
 	];
 
 	$: selection = start
 		? presets.findIndex((p) => Math.abs(differenceInDays(new Date(start * 1000), p.start)) < 1)
-		: presets.length - 1;
+		: 0;
 
 	let p,
 		total,
@@ -32,6 +34,9 @@
 	$: $page && ($newPayment = false);
 	$: $newPayment && invalidate(`/users/${user.username}`);
 
+  $: path = $page.url.pathname.substring(0, $page.url.pathname.lastIndexOf('/'));
+  $: console.log(path)
+
 	let csv = () => {
 		const keys = ['hash', 'updatedAt', 'rate', 'currency', 'amount', 'fee', 'tip'];
 		const csv =
@@ -63,9 +68,18 @@
 		{$t('user.transactions.header')}
 	</h1>
 
-	<div class="container w-full mx-auto md:text-lg px-10 lg:px-72">
+	<div class="container w-full mx-auto md:text-lg px-4 max-w-xl">
 		<div class="flex text-md text-secondary flex-wrap mb-4">
-			<div class="flex flex-wrap gap-2">
+			<select class="md:hidden bg-white border p-4 rounded-full" on:change={change}>
+				{#each presets as { start, end, title }, i}
+					<option
+						selected={selection === i}
+						value={`/${user.username}/transactions/${start ? getUnixTime(start) + '/' : ''}1`}
+						>{title}</option
+					>
+				{/each}
+			</select>
+			<div class="hidden md:block flex flex-wrap gap-2">
 				{#each presets as { start, end, title }, i}
 					<a
 						class:active={selection === i}
@@ -88,7 +102,7 @@
 				{#each pages as _, i}
 					<a
 						class="mr-1 last:mr-0"
-						href={`/${user.username}/transactions/${i + 1}`}
+      href={`${path}/${i + 1}`}
 						class:active={parseInt(p) === i + 1}
 					>
 						<div class="border py-2 rounded-full border-2 w-12 h-12 hover:opacity-80 text-center">
@@ -145,4 +159,10 @@
 	.active * {
 		@apply bg-black text-white border-black;
 	}
+
+	select {
+		-webkit-appearance: none;
+		-moz-appearance: none;
+		appearance: none;
+	}
 </style>