feat: implement psql and improvements

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

@@ -0,0 +1,74 @@
+import { drizzleQuery } from '$lib/database/db';
+import { events } from '$lib/database/schema';
+import { fail } from '@sveltejs/kit';
+import { eq, desc } from 'drizzle-orm';
+
+export const load = async ({ cookies }) => {
+	const userId = cookies.get('cactoideUserId');
+
+	if (!userId) {
+		return { events: [] };
+	}
+
+	try {
+		const userEvents = await drizzleQuery
+			.select()
+			.from(events)
+			.where(eq(events.userId, userId))
+			.orderBy(desc(events.createdAt));
+
+		console.log(userEvents);
+
+		const transformedEvents = userEvents.map((event) => ({
+			id: event.id,
+			name: event.name,
+			date: event.date,
+			time: event.time,
+			location: event.location,
+			type: event.type,
+			attendee_limit: event.attendeeLimit,
+			visibility: event.visibility,
+			user_id: event.userId,
+			created_at: event.createdAt?.toISOString() || new Date().toISOString(),
+			updated_at: event.updatedAt?.toISOString() || new Date().toISOString()
+		}));
+
+		return { events: transformedEvents };
+	} catch (error) {
+		console.error('Error loading user events:', error);
+		return { events: [] };
+	}
+};
+
+export const actions: Actions = {
+	deleteEvent: async ({ request, cookies }) => {
+		const formData = await request.formData();
+		const eventId = formData.get('eventId') as string;
+		const userId = cookies.get('cactoideUserId');
+
+		if (!eventId || !userId) {
+			return fail(400, { error: 'Event ID and User ID are required' });
+		}
+
+		try {
+			// First verify the user owns this event
+			const [eventData] = await drizzleQuery.select().from(events).where(eq(events.id, eventId));
+
+			if (!eventData) {
+				return fail(404, { error: 'Event not found' });
+			}
+
+			if (eventData.userId !== userId) {
+				return fail(403, { error: 'You do not have permission to delete this event' });
+			}
+
+			// Delete the event (RSVPs will be deleted automatically due to CASCADE)
+			await drizzleQuery.delete(events).where(eq(events.id, eventId));
+
+			return { success: true };
+		} catch (error) {
+			console.error('Error deleting event:', error);
+			return fail(500, { error: 'Failed to delete event' });
+		}
+	}
+};

src/routes/event/+page.svelte

@@ -1,43 +1,16 @@
 <script lang="ts">
-	import { eventsStore } from '$lib/stores/events-supabase';
 	import type { Event } from '$lib/types';
 	import { goto } from '$app/navigation';
-	import { onMount } from 'svelte';
+
+	export let data: { events: Event[] };
 
 	let userEvents: Event[] = [];
-	let isLoading = true;
-	let error = '';
 	let currentUserId = '';
 	let showDeleteModal = false;
 	let eventToDelete: Event | null = null;
 
-	onMount(() => {
-		generateUserId();
-		loadUserEvents();
-	});
-
-	function generateUserId() {
-		// Generate a unique user ID and store it in localStorage
-		let userId = localStorage.getItem('eventCactusUserId');
-		if (!userId) {
-			userId = 'user_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9);
-			localStorage.setItem('eventCactusUserId', userId);
-		}
-		currentUserId = userId;
-	}
-
-	async function loadUserEvents() {
-		if (!currentUserId) return;
-
-		try {
-			isLoading = true;
-			userEvents = await eventsStore.getEventsByUser(currentUserId);
-		} catch (err) {
-			error = 'Failed to load your events';
-		} finally {
-			isLoading = false;
-		}
-	}
+	// Use server-side data
+	$: userEvents = data.events;
 
 	function openDeleteModal(event: Event) {
 		eventToDelete = event;
@@ -49,17 +22,33 @@
 
 		try {
 			const eventId = eventToDelete.id;
-			const success = await eventsStore.deleteEvent(eventId, currentUserId);
-			if (success) {
-				// Remove from local list
-				userEvents = userEvents.filter((event) => event.id !== eventId);
-				showDeleteModal = false;
-				eventToDelete = null;
+
+			// Use server-side action for deletion
+			const formData = new FormData();
+			formData.append('eventId', eventId);
+			formData.append('userId', currentUserId);
+
+			const response = await fetch('?/deleteEvent', {
+				method: 'POST',
+				body: formData
+			});
+
+			if (response.ok) {
+				const result = await response.json();
+				if (result.type === 'success') {
+					showDeleteModal = false;
+					eventToDelete = null;
+
+					// ✅ Reload the page to reflect updated events
+					location.reload();
+				} else {
+					alert(result.data?.error || 'Failed to delete event');
+				}
 			} else {
-				error = 'Failed to delete event. You may not have permission to delete this event.';
+				alert('Failed to delete event. You may not have permission to delete this event.');
 			}
 		} catch (err) {
-			error = 'An error occurred while deleting the event';
+			alert('An error occurred while deleting the event');
 		}
 	}
 
@@ -89,25 +78,7 @@
 <div class="flex min-h-screen flex-col">
 	<!-- Main Content -->
 	<div class="container mx-auto mt-8 flex-1 px-4 py-8 text-white">
-		{#if isLoading}
-			<div class="mx-auto max-w-2xl text-center">
-				<div
-					class="mx-auto mb-4 h-8 w-8 animate-spin rounded-full border-b-2 border-violet-600"
-				></div>
-				<p>Loading your events...</p>
-			</div>
-		{:else if error}
-			<div class="mx-auto max-w-2xl text-center">
-				<div class="mb-4 text-4xl text-red-500">⚠️</div>
-				<p class="text-red-600">{error}</p>
-				<button
-					on:click={loadUserEvents}
-					class="rounded-sm border-2 border-violet-500 px-8 py-4 font-bold duration-400 hover:scale-110 hover:bg-violet-500/10"
-				>
-					Try Again
-				</button>
-			</div>
-		{:else if userEvents.length === 0}
+		{#if userEvents.length === 0}
 			<div class="mx-auto max-w-2xl text-center">
 				<div class="mb-4 animate-pulse text-6xl">🎉</div>
 				<h2 class="mb-4 text-2xl font-bold">No Events Yet</h2>
@@ -165,7 +136,12 @@
 										<span>{event.location}</span>
 									</div>
 									<div class="flex items-center space-x-2">
-										<span class="rounded-sm border border-slate-300 px-2 py-1 text-xs font-medium">
+										<span
+											class="rounded-sm border px-2 py-1 text-xs font-medium {event.type ===
+											'limited'
+												? 'border-amber-600 text-amber-600'
+												: 'border-teal-500 text-teal-500'}"
+										>
 											{event.type === 'limited' ? 'Limited' : 'Unlimited'}
 										</span>
 										<span

src/routes/event/[id]/+error.svelte

@@ -6,18 +6,10 @@
 </script>
 
 <svelte:head>
-	<title>Error - Event Cactus</title>
+	<title>Error - Cactoide</title>
 </svelte:head>
 
 <div class="flex min-h-screen flex-col">
-	<!-- Page Header -->
-	<div class=" border-b py-6">
-		<div class="container mx-auto px-4 text-center">
-			<h1 class=" font-display mb-2 text-2xl font-bold">Error</h1>
-			<p class="">Something went wrong</p>
-		</div>
-	</div>
-
 	<!-- Error Content -->
 	<div class="container mx-auto flex-1 px-4 py-8">
 		<div class="mx-auto max-w-md text-center">
@@ -25,26 +17,25 @@
 				<div class="mb-4 text-6xl text-red-400">🚨</div>
 				<h2 class="mb-4 text-2xl font-bold text-red-400">Something Went Wrong</h2>
 
-				<p class=" mb-6">
+				<p class="mb-6">
 					{error?.message || 'An unexpected error occurred.'}
 				</p>
-
-				<div class="space-y-3">
-					<button
-						on:click={() => goto('/')}
-						class="  w-full rounded-sm px-6 py-3 font-semibold text-white transition-colors duration-200"
-					>
-						Create New Event
-					</button>
-
-					<button
-						on:click={() => window.location.reload()}
-						class="bg-dark-600 hover:bg-dark-500 w-full rounded-sm px-6 py-3 font-semibold text-white transition-colors duration-200"
-					>
-						Try Again
-					</button>
-				</div>
 			</div>
 		</div>
+		<div class="mx-auto mt-8 max-w-md text-center">
+			<button
+				on:click={() => goto('/create')}
+				class="rounded-sm border-2 border-violet-500 px-8 py-4 font-bold duration-400 hover:scale-110 hover:bg-violet-500/10"
+			>
+				Create New Event
+			</button>
+
+			<button
+				on:click={() => window.location.reload()}
+				class="rounded-sm border-2 border-violet-500 px-8 py-4 font-bold duration-400 hover:scale-110 hover:bg-violet-500/10"
+			>
+				Try Again
+			</button>
+		</div>
 	</div>
 </div>

src/routes/event/[id]/+page.server.ts

@@ -0,0 +1,145 @@
+import { drizzleQuery } from '$lib/database/db';
+import { events, rsvps } from '$lib/database/schema';
+import { eq, asc } from 'drizzle-orm';
+import { error, fail } from '@sveltejs/kit';
+import type { PageServerLoad, Actions } from './$types';
+
+export const load: PageServerLoad = async ({ params, cookies }) => {
+	const eventId = params.id;
+
+	if (!eventId) {
+		throw error(404, 'EventId not found');
+	}
+
+	try {
+		// Fetch event and RSVPs in parallel
+		const [eventData, rsvpData] = await Promise.all([
+			drizzleQuery.select().from(events).where(eq(events.id, eventId)).limit(1),
+			drizzleQuery
+				.select()
+				.from(rsvps)
+				.where(eq(rsvps.eventId, eventId))
+				.orderBy(asc(rsvps.createdAt))
+		]);
+
+		if (!eventData[0]) {
+			throw error(404, 'Event not found');
+		}
+
+		const event = eventData[0];
+		const eventRsvps = rsvpData;
+
+		// Transform the data to match the expected interface
+		const transformedEvent = {
+			id: event.id,
+			name: event.name,
+			date: event.date,
+			time: event.time,
+			location: event.location,
+			type: event.type,
+			attendee_limit: event.attendeeLimit,
+			visibility: event.visibility,
+			user_id: event.userId,
+			created_at: event.createdAt?.toISOString() || new Date().toISOString(),
+			updated_at: event.updatedAt?.toISOString() || new Date().toISOString()
+		};
+
+		const transformedRsvps = eventRsvps.map((rsvp) => ({
+			id: rsvp.id,
+			event_id: rsvp.eventId,
+			name: rsvp.name,
+			user_id: rsvp.userId,
+			created_at: rsvp.createdAt?.toISOString() || new Date().toISOString()
+		}));
+
+		const userId = cookies.get('cactoideUserId');
+
+		return {
+			event: transformedEvent,
+			rsvps: transformedRsvps,
+			userId: userId
+		};
+	} catch (err) {
+		if (err instanceof Response) throw err; // This is the 404 error
+
+		console.error('Error loading event:', err);
+		throw error(500, 'Failed to load event');
+	}
+};
+
+export const actions: Actions = {
+	addRSVP: async ({ request, params, cookies }) => {
+		const eventId = params.id;
+		const formData = await request.formData();
+
+		const name = formData.get('newAttendeeName') as string;
+		const userId = cookies.get('cactoideUserId');
+
+		console.log(`name: ${name}`);
+		console.log(`userId: ${userId}`);
+
+		if (!name?.trim() || !userId) {
+			return fail(400, { error: 'Name and user ID are required' });
+		}
+
+		try {
+			// Check if event exists and get its details
+			const [eventData] = await drizzleQuery.select().from(events).where(eq(events.id, eventId));
+			if (!eventData) {
+				return fail(404, { error: 'Event not found' });
+			}
+
+			// Check if event is full (for limited type events)
+			if (eventData.type === 'limited' && eventData.attendeeLimit) {
+				const currentRSVPs = await drizzleQuery
+					.select()
+					.from(rsvps)
+					.where(eq(rsvps.eventId, eventId));
+				if (currentRSVPs.length >= eventData.attendeeLimit) {
+					return fail(400, { error: 'Event is full' });
+				}
+			}
+
+			// Check if name is already in the list
+			const existingRSVPs = await drizzleQuery
+				.select()
+				.from(rsvps)
+				.where(eq(rsvps.eventId, eventId));
+			if (existingRSVPs.some((rsvp) => rsvp.name.toLowerCase() === name.toLowerCase())) {
+				return fail(400, { error: 'Name already exists for this event' });
+			}
+
+			// Add RSVP to database
+			await drizzleQuery.insert(rsvps).values({
+				eventId: eventId,
+				name: name.trim(),
+				userId: userId,
+				createdAt: new Date()
+			});
+
+			return { success: true };
+		} catch (err) {
+			console.error('Error adding RSVP:', err);
+			return fail(500, { error: 'Failed to add RSVP' });
+		}
+	},
+
+	removeRSVP: async ({ request, params }) => {
+		const eventId = params.id;
+		const formData = await request.formData();
+
+		const rsvpId = formData.get('rsvpId') as string;
+
+		if (!rsvpId) {
+			return fail(400, { error: 'RSVP ID is required' });
+		}
+
+		try {
+			await drizzleQuery.delete(rsvps).where(eq(rsvps.id, rsvpId));
+			return { success: true };
+		} catch (err) {
+			console.error('Error removing RSVP:', err);
+			return fail(500, { error: 'Failed to remove RSVP' });
+		}
+	}
+};

src/routes/event/[id]/+page.svelte

@@ -1,51 +1,39 @@
 <script lang="ts">
 	import { page } from '$app/stores';
-	import { eventsStore } from '$lib/stores/events-supabase';
 	import type { Event, RSVP } from '$lib/types';
 	import { goto } from '$app/navigation';
-	import { onMount } from 'svelte';
+	import { enhance } from '$app/forms';
 
-	let event: Event | undefined;
+	export let data: { event: Event; rsvps: RSVP[]; userId: string };
+	export let form;
+
+	let event: Event;
 	let rsvps: RSVP[] = [];
 	let newAttendeeName = '';
 	let isAddingRSVP = false;
 	let error = '';
 	let success = '';
-	let currentUserId = '';
+
+	// Use server-side data
+	$: event = data.event;
+	$: rsvps = data.rsvps;
+	$: currentUserId = data.userId;
+
+	// Handle form errors from server
+	$: if (form?.error) {
+		error = form.error;
+		success = '';
+	}
+
+	// Handle form success from server
+	$: if (form?.success) {
+		success = 'RSVP added successfully!';
+		error = '';
+		newAttendeeName = '';
+	}
 
 	const eventId = $page.params.id;
 
-	onMount(() => {
-		loadEvent();
-		generateUserId();
-	});
-
-	function generateUserId() {
-		// Generate a unique user ID and store it in localStorage
-		let userId = localStorage.getItem('eventCactusUserId');
-		if (!userId) {
-			userId = 'user_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9);
-			localStorage.setItem('eventCactusUserId', userId);
-		}
-		currentUserId = userId;
-	}
-
-	async function loadEvent() {
-		if (!eventId) return;
-
-		try {
-			const result = await eventsStore.getEventWithRSVPs(eventId);
-			if (result) {
-				event = result.event;
-				rsvps = result.rsvps;
-			} else {
-				error = 'Event not found';
-			}
-		} catch (err) {
-			error = 'Failed to load event';
-		}
-	}
-
 	function formatDate(dateString: string, timeString: string): string {
 		const date = new Date(`${dateString}T${timeString}`);
 		const year = date.getFullYear();
@@ -59,50 +47,24 @@
 		return `${hours}:${minutes}`;
 	}
 
-	async function addRSVP() {
-		if (!newAttendeeName.trim() || !eventId) return;
-
-		isAddingRSVP = true;
-		error = '';
-		success = '';
-
-		try {
-			const rsvpSuccess = await eventsStore.addRSVP(eventId, newAttendeeName.trim(), currentUserId);
-
-			if (rsvpSuccess) {
-				newAttendeeName = '';
-				await loadEvent(); // Reload to get updated attendee list
-				success = 'RSVP added successfully!';
-			} else {
-				error = 'Failed to add RSVP. Event might be full or name already exists.';
-			}
-		} catch (err) {
-			error = 'An error occurred while adding RSVP.';
-		} finally {
-			isAddingRSVP = false;
-		}
-	}
-
-	async function removeRSVP(rsvpId: string) {
-		if (!eventId) return;
-
-		const success = await eventsStore.removeRSVP(eventId, rsvpId);
-		if (success) {
-			await loadEvent(); // Reload to get updated attendee list
-		}
-	}
-
 	function copyEventLink() {
 		const url = `${window.location.origin}/event/${eventId}`;
 		navigator.clipboard.writeText(url).then(() => {
 			success = 'Event link copied to clipboard!';
-			setTimeout(() => (success = ''), 4000);
+			setTimeout(() => {
+				success = '';
+			}, 3000);
 		});
 	}
+
+	function clearMessages() {
+		error = '';
+		success = '';
+	}
 </script>
 
 <svelte:head>
-	<title>{event?.name || 'Event'} - Event Cactus</title>
+	<title>{event?.name || 'Event'} - Cactoide</title>
 </svelte:head>
 
 <div class="flex min-h-screen flex-col">
@@ -180,16 +142,20 @@
 						<!-- Event Type, Visibility & Capacity -->
 						<div class="flex items-center justify-between rounded-sm p-3">
 							<div class="flex items-center space-x-2">
-								<span class="rounded-full border px-2 py-1 text-xs font-semibold text-violet-400">
+								<span
+									class="rounded-sm border px-2 py-1 text-xs font-medium {event.type === 'limited'
+										? 'border-amber-600 text-amber-600'
+										: 'border-teal-500 text-teal-500'}"
+								>
 									{event.type === 'limited' ? 'Limited' : 'Unlimited'}
 								</span>
 								<span
-									class="rounded-full border px-2 py-1 text-xs font-semibold {event.visibility ===
+									class="rounded-sm border px-2 py-1 text-xs font-medium {event.visibility ===
 									'public'
 										? 'border-green-300 text-green-400'
 										: 'border-orange-300 text-orange-400'}"
 								>
-									{event.visibility === 'public' ? '🌍 Public' : '🔒 Private'}
+									{event.visibility === 'public' ? 'Public' : 'Private'}
 								</span>
 							</div>
 
@@ -216,13 +182,30 @@
 							<p class="mt-1 text-sm">Maximum capacity reached</p>
 						</div>
 					{:else}
-						<form on:submit|preventDefault={addRSVP} class="space-y-4">
+						<form
+							method="POST"
+							action="?/addRSVP"
+							use:enhance={() => {
+								isAddingRSVP = true;
+								clearMessages();
+								return async ({ result, update }) => {
+									isAddingRSVP = false;
+									if (result.type === 'failure') {
+										error = result.data?.error || 'Failed to add RSVP';
+									}
+									update();
+								};
+							}}
+							class="space-y-4"
+						>
+							<input type="hidden" name="userId" value={currentUserId} />
 							<div>
 								<label for="attendeeName" class=" mb-2 block text-sm font-semibold">
 									Your Name <span class="text-red-400">*</span>
 								</label>
 								<input
 									id="attendeeName"
+									name="newAttendeeName"
 									type="text"
 									bind:value={newAttendeeName}
 									class="border-dark-300 w-full rounded-sm border-2 px-4 py-3 text-slate-900 shadow-sm"
@@ -293,20 +276,36 @@
 									</div>
 
 									{#if attendee.user_id === currentUserId}
-										<button
-											on:click={() => removeRSVP(attendee.id)}
-											class="text-dark-400 p-1 transition-colors duration-200 hover:text-red-400"
-											aria-label="Remove RSVP"
+										<form
+											method="POST"
+											action="?/removeRSVP"
+											use:enhance={() => {
+												clearMessages();
+												return async ({ result, update }) => {
+													if (result.type === 'failure') {
+														error = result.data?.error || 'Failed to remove RSVP';
+													}
+													update();
+												};
+											}}
+											style="display: inline;"
 										>
-											<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-												<path
-													stroke-linecap="round"
-													stroke-linejoin="round"
-													stroke-width="2"
-													d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
-												></path>
-											</svg>
-										</button>
+											<input type="hidden" name="rsvpId" value={attendee.id} />
+											<button
+												type="submit"
+												class="text-dark-400 p-1 transition-colors duration-200 hover:text-red-400"
+												aria-label="Remove RSVP"
+											>
+												<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+													<path
+														stroke-linecap="round"
+														stroke-linejoin="round"
+														stroke-width="2"
+														d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+													></path>
+												</svg>
+											</button>
+										</form>
 									{/if}
 								</div>
 							{/each}