[Assistants] Add pagination (#772)

* [Assistants] Add pagination

* Update src/lib/components/PaginationArrow.svelte

Co-authored-by: Victor Muštar <[email protected]>

* format

* Simplify by using a href

* this statement needs to be reactive

* simplify pagination

* update disabled

* Update src/routes/assistants/+page.server.ts

---------

Co-authored-by: Victor Muštar <[email protected]>

src/lib/components/Pagination.svelte

@@ -0,0 +1,99 @@
+<script lang="ts">
+	import { page } from "$app/stores";
+	import PaginationArrow from "./PaginationArrow.svelte";
+
+	export let classNames = "";
+	export let numItemsPerPage: number;
+	export let numTotalItems: number;
+
+	const ELLIPSIS_IDX = -1 as const;
+
+	const numTotalPages = Math.ceil(numTotalItems / numItemsPerPage);
+	$: pageIndex = parseInt($page.url.searchParams.get("p") ?? "0");
+	$: pageIndexes = getPageIndexes(pageIndex);
+
+	function getHref(pageIdx: number) {
+		const newUrl = new URL($page.url);
+		newUrl.searchParams.set("p", pageIdx.toString());
+		return newUrl.toString();
+	}
+
+	function getPageIndexes(pageIdx: number) {
+		let pageIdxs: number[] = [];
+
+		const NUM_EXTRA_BUTTONS = 2; // The number of page links to show on either side of the current page link.
+
+		const minIdx = 0;
+		const maxIdx = numTotalPages - 1;
+
+		pageIdxs = [pageIdx];
+
+		// forward
+		for (let i = 1; i < NUM_EXTRA_BUTTONS + 1; i++) {
+			const newPageIdx = pageIdx + i;
+			if (newPageIdx > maxIdx) {
+				continue;
+			}
+			pageIdxs.push(newPageIdx);
+		}
+		if (maxIdx - pageIdxs[pageIdxs.length - 1] > 1) {
+			pageIdxs.push(...[ELLIPSIS_IDX, maxIdx]);
+		} else if (maxIdx - pageIdxs[pageIdxs.length - 1] === 1) {
+			pageIdxs.push(maxIdx);
+		}
+
+		// backward
+		for (let i = 1; i < NUM_EXTRA_BUTTONS + 1; i++) {
+			const newPageIdx = pageIdx - i;
+			if (newPageIdx < minIdx) {
+				continue;
+			}
+			pageIdxs.unshift(newPageIdx);
+		}
+		if (pageIdxs[0] - minIdx > 1) {
+			pageIdxs.unshift(...[minIdx, ELLIPSIS_IDX]);
+		} else if (pageIdxs[0] - minIdx === 1) {
+			pageIdxs.unshift(minIdx);
+		}
+		return pageIdxs;
+	}
+</script>
+
+{#if numTotalPages > 1}
+	<nav>
+		<ul
+			class="flex select-none items-center justify-between space-x-2 text-gray-700 sm:justify-center dark:text-gray-300 {classNames}"
+		>
+			<li>
+				<PaginationArrow
+					href={getHref(pageIndex - 1)}
+					direction="previous"
+					isDisabled={pageIndex - 1 < 0}
+				/>
+			</li>
+			{#each pageIndexes as pageIdx}
+				<li class="hidden sm:block">
+					<a
+						class="
+							rounded-lg px-2.5 py-1
+							{pageIndex === pageIdx
+							? 'bg-gray-50 font-semibold ring-1 ring-inset ring-gray-200 dark:bg-gray-800 dark:text-yellow-500 dark:ring-gray-700'
+							: ''}
+						"
+						class:pointer-events-none={pageIdx === ELLIPSIS_IDX || pageIndex === pageIdx}
+						href={getHref(pageIdx)}
+					>
+						{pageIdx === ELLIPSIS_IDX ? "..." : pageIdx + 1}
+					</a>
+				</li>
+			{/each}
+			<li>
+				<PaginationArrow
+					href={getHref(pageIndex + 1)}
+					direction="next"
+					isDisabled={pageIndex + 1 >= numTotalPages}
+				/>
+			</li>
+		</ul>
+	</nav>
+{/if}

src/lib/components/PaginationArrow.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import CarbonCaretLeft from "~icons/carbon/caret-left";
+	import CarbonCaretRight from "~icons/carbon/caret-right";
+
+	export let href: string;
+	export let direction: "next" | "previous";
+	export let isDisabled = false;
+</script>
+
+<a
+	class="flex items-center rounded-lg px-2.5 py-1 hover:bg-gray-50 dark:hover:bg-gray-800 {isDisabled
+		? 'pointer-events-none opacity-50'
+		: ''}"
+	{href}
+>
+	{#if direction === "previous"}
+		<CarbonCaretLeft classNames="mr-1.5" />
+		Previous
+	{:else}
+		Next
+		<CarbonCaretRight classNames="ml-1.5" />
+	{/if}
+</a>

src/routes/assistants/+page.server.ts

@@ -3,6 +3,9 @@ import { ENABLE_ASSISTANTS } from "$env/static/private";
 import { collections } from "$lib/server/database.js";
 import type { Assistant } from "$lib/types/Assistant";
 import { redirect } from "@sveltejs/kit";
+import type { Filter } from "mongodb";
+
+const NUM_PER_PAGE = 24;
 
 export const load = async ({ url }) => {
 	if (!ENABLE_ASSISTANTS) {
@@ -10,13 +13,26 @@ export const load = async ({ url }) => {
 	}
 
 	const modelId = url.searchParams.get("modelId");
+	const pageIndex = parseInt(url.searchParams.get("p") ?? "0");
 
-	// fetch the top 10 assistants sorted by user count from biggest to smallest, filter out all assistants with only 1 users. filter by model too if modelId is provided
+	// fetch the top assistants sorted by user count from biggest to smallest, filter out all assistants with only 1 users. filter by model too if modelId is provided
+	const filter: Filter<Assistant> = {
+		userCount: { $gt: 1 },
+		modelId: modelId ?? { $exists: true },
+		featured: true,
+	};
 	const assistants = await collections.assistants
-		.find({ userCount: { $gt: 1 }, modelId: modelId ?? { $exists: true }, featured: true })
+		.find(filter)
+		.skip(NUM_PER_PAGE * pageIndex)
 		.sort({ userCount: -1 })
-		.limit(10)
+		.limit(NUM_PER_PAGE)
 		.toArray();
 
-	return { assistants: JSON.parse(JSON.stringify(assistants)) as Array<Assistant> };
+	const numTotalItems = await collections.assistants.countDocuments(filter);
+
+	return {
+		assistants: JSON.parse(JSON.stringify(assistants)) as Array<Assistant>,
+		numTotalItems,
+		numItemsPerPage: NUM_PER_PAGE,
+	};
 };

src/routes/assistants/+page.svelte

@@ -10,6 +10,7 @@
 
 	import CarbonAdd from "~icons/carbon/add";
 	import CarbonHelpFilled from "~icons/carbon/help-filled";
+	import Pagination from "$lib/components/Pagination.svelte";
 
 	export let data: PageData;
 
@@ -124,5 +125,10 @@
 				No assistants found
 			{/each}
 		</div>
+		<Pagination
+			classNames="w-full flex justify-center mt-14 mb-4"
+			numItemsPerPage={data.numItemsPerPage}
+			numTotalItems={data.numTotalItems}
+		/>
 	</div>
 </div>