Add pagination for events list

craigkai · Oct 16, 2024 · 143e78c · 143e78c
1 parent 3ba0cf5
commit 143e78c
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 15 deletions.
diff --git a/src/components/eventsCards.svelte b/src/components/eventsCards.svelte
@@ -2,13 +2,35 @@
 	import * as Card from '$components/ui/card/index.js';
 	import { getLocalTimeZone, parseDateTime } from '@internationalized/date';
 
-	export let events: Partial<EventRow>[];
+	// Input prop
+	let { events }: { events: Partial<EventRow>[] } = $props();
+
+	// Pagination states
+	let currentPage = $state(1);
+	let itemsPerPage = 4; // Adjust this to the number of events you want to show per page
+
+	// Calculate total pages
+	let totalPages = $derived(Math.ceil(events?.length / itemsPerPage));
+
+	// Get events for the current page
+	let paginatedEvents = $derived(
+		events?.slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage)
+	);
+
+	// Navigation handlers
+	const nextPage = () => {
+		if (currentPage < totalPages) currentPage++;
+	};
+
+	const prevPage = () => {
+		if (currentPage > 1) currentPage--;
+	};
 </script>
 
 <div class="flex flex-col items-center">
-	{#if events && events.length > 0}
+	{#if paginatedEvents && paginatedEvents.length > 0}
 		<div class="m-2">
-			{#each events as event}
+			{#each paginatedEvents as event}
 				<a href="/events/{event.id}">
 					<Card.Root class="m-2 w-[350px] dark:bg-slate-700">
 						<Card.Header>
@@ -19,11 +41,11 @@
 							<form>
 								<div class="grid w-full items-center gap-4">
 									<div class="flex flex-col space-y-1.5">
-										<span
-											>{parseDateTime(event.date ?? '')
+										<span>
+											{parseDateTime(event.date ?? '')
 												.toDate(getLocalTimeZone())
-												.toDateString()}</span
-										>
+												.toDateString()}
+										</span>
 									</div>
 								</div>
 							</form>
@@ -32,5 +54,24 @@
 				</a>
 			{/each}
 		</div>
+
+		<!-- Pagination Controls -->
+		<div class="mt-4 flex items-center space-x-2">
+			<button
+				onclick={prevPage}
+				disabled={currentPage === 1}
+				class="rounded bg-blue-500 px-4 py-2 text-white disabled:opacity-50"
+			>
+				Previous
+			</button>
+			<span>Page {currentPage} of {totalPages}</span>
+			<button
+				onclick={nextPage}
+				disabled={currentPage === totalPages}
+				class="rounded bg-blue-500 px-4 py-2 text-white disabled:opacity-50"
+			>
+				Next
+			</button>
+		</div>
 	{/if}
 </div>
diff --git a/src/routes/auth/+page.server.ts b/src/routes/auth/+page.server.ts
@@ -1,4 +1,3 @@
-import { invalidate } from '$app/navigation';
 import { signUpSchema, signInSchema, resetPasswordSchema } from './schemas';
 import { setError, message, superValidate, fail } from 'sveltekit-superforms';
 import { zod } from 'sveltekit-superforms/adapters';
@@ -30,10 +29,7 @@ export const actions = {
 			return setError(form, 'email', error.message);
 		}
 
-		invalidate('supabase:auth');
-
 		// Instead of returning the form directly, redirect or trigger a session update
-		// Option 1: Redirect after signing in
 		return { form, redirect: '/protected-routes/dashboard' };
 	},
 

diff --git a/src/routes/protected-routes/dashboard/+page.svelte b/src/routes/protected-routes/dashboard/+page.svelte
@@ -1,11 +1,10 @@
 <script lang="ts">
-	import type { PageData } from './$types';
 	import { Button } from '$components/ui/button/index.js';
 	import { goto } from '$app/navigation';
 	import EventsCards from '$components/eventsCards.svelte';
 
-	export let data: PageData;
-	const events = data?.events;
+	let { data } = $props();
+	let events = data?.events;
 </script>
 
 <svelte:head>
@@ -22,6 +21,9 @@
 	{/if}
 
 	<div class="button-container">
-		<Button on:click={() => goto('/events/create')}>Create</Button>
+		<Button
+			class="rounded bg-blue-500 px-4 py-2 text-white disabled:opacity-50"
+			on:click={() => goto('/events/create')}>Create</Button
+		>
 	</div>
 </div>