next page link for apps

site/src/routes/apps/index.json.js

@@ -3,13 +3,14 @@ import { query } from '../../utils/db';
 
 export async function get(req, res) {
 	if (req.user) {
-		const offset = req.query.offset || 0;
+		const page_size = 100;
+		const offset = req.query.offset ? parseInt(req.query.offset) : 0;
 		const rows = await query(`
 			select g.uid, g.name, coalesce(g.updated_at, g.created_at) as updated_at
 			from gists g
 			where g.user_id = $1
-			order by updated_at desc
-			limit 100
+			order by id desc
+			limit ${page_size + 1}
 			offset $2
 		`, [req.user.id, offset]);
 
@@ -17,7 +18,8 @@ export async function get(req, res) {
 			row.uid = row.uid.replace(/-/g, '');
 		});
 
-		send(res, 200, rows);
+		const more = rows.length > page_size;
+		send(res, 200, { apps: rows.slice(0, page_size), offset: more ? offset + page_size : null });
 	} else {
 		send(res, 401);
 	}

site/src/routes/apps/index.svelte

@@ -1,17 +1,22 @@
 <script context="module">
 	export async function preload(page, { user }) {
-		let apps;
+		let apps = [];
+		let offset = null;
 
 		if (user) {
-			const r = await this.fetch('apps.json', {
+			var url = 'apps.json';
+			if (page.query.offset) {
+				url += `?offset=${encodeURIComponent(page.query.offset)}`;
+			}
+			const r = await this.fetch(url, {
 				credentials: 'include'
 			});
 			if (!r.ok) return this.error(r.status, await r.text());
 
-			apps = await r.json();
+			({ apps, offset } = await r.json());
 		}
 
-		return { user, apps };
+		return { user, apps, offset };
 	}
 </script>
 
@@ -20,6 +25,7 @@
 
 	export let user;
 	export let apps;
+	export let offset;
 
 	const { login, logout } = getContext('app');
 
@@ -62,6 +68,10 @@
 				</li>
 			{/each}
 		</ul>
+
+		{#if offset !== null}
+			<div><a href="apps?offset={offset}">Next page...</a></div>
+		{/if}
 	{:else}
 		<p>Please <a on:click|preventDefault={login} href="auth/login">log in</a> to see your saved apps.</p>
 	{/if}
@@ -127,4 +137,4 @@
 		font-size: 14px;
 		color: #999;
 	}
-</style>
+</style>