feat: add a time filter and date/time sort option to /discovery page

feat: add a time filter and date/time sort option to /discovery page

src/lib/dateFormatter.ts

@@ -1,12 +0,0 @@
-export const formatDate = (dateString: string): string => {
-	const date = new Date(dateString);
-	const year = date.getFullYear();
-	const month = String(date.getMonth() + 1).padStart(2, '0');
-	const day = String(date.getDate()).padStart(2, '0');
-	return `${year}/${month}/${day}`;
-};
-
-export const formatTime = (timeString: string): string => {
-	const [hours, minutes] = timeString.split(':');
-	return `${hours}:${minutes}`;
-};

src/lib/dateHelpers.ts

@@ -0,0 +1,40 @@
+import type { Event } from './types';
+
+export const formatDate = (dateString: string): string => {
+	const date = new Date(dateString);
+	const year = date.getFullYear();
+	const month = String(date.getMonth() + 1).padStart(2, '0');
+	const day = String(date.getDate()).padStart(2, '0');
+	return `${year}/${month}/${day}`;
+};
+
+export const formatTime = (timeString: string): string => {
+	const [hours, minutes] = timeString.split(':');
+	return `${hours}:${minutes}`;
+};
+
+// Helper function to check if an event is within a time range
+export const isEventInTimeRange = (event: Event, timeFilter: string): boolean => {
+	if (timeFilter === 'any') return true;
+
+	const eventDate = new Date(`${event.date}T${event.time}`);
+	const now = new Date();
+
+	// Handle temporal status filters
+	if (timeFilter === 'upcoming') {
+		return eventDate >= now;
+	}
+
+	if (timeFilter === 'past') {
+		return eventDate < now;
+	}
+
+	// Handle time range filters
+	const ranges: Record<string, Date> = {
+		'next-week': new Date(now.getTime() + 7 * 24 * 60 * 60 * 1000),
+		'next-month': new Date(new Date(now).setMonth(now.getMonth() + 1))
+	};
+
+	const endDate = ranges[timeFilter];
+	return endDate ? eventDate >= now && eventDate <= endDate : true;
+};

src/routes/discover/+page.svelte

@@ -2,13 +2,17 @@
 	import type { Event, EventType } from '$lib/types';
 	import { goto } from '$app/navigation';
 	import type { PageData } from '../$types';
-	import { formatTime, formatDate } from '$lib/dateFormatter';
+	import { formatTime, formatDate, isEventInTimeRange } from '$lib/dateHelpers';
 	import Fuse from 'fuse.js';
 
 	let publicEvents: Event[] = [];
 	let error = '';
 	let searchQuery = '';
 	let selectedEventType: EventType | 'all' = 'all';
+	let selectedTimeFilter: 'any' | 'next-week' | 'next-month' = 'any';
+	let selectedTemporalStatus: 'all' | 'upcoming' | 'past' = 'all';
+	let selectedSortOrder: 'asc' | 'desc' = 'asc';
+	let showFilters = false;
 	let fuse: Fuse<Event>;
 
 	export let data: PageData;
@@ -26,7 +30,7 @@
 		includeMatches: true
 	});
 
-	// Filter events based on search query and event type using Fuse.js
+	// Filter events based on search query, event type, time filter, and temporal status
 	$: filteredEvents = (() => {
 		let events = publicEvents;
 
@@ -35,15 +39,43 @@
 			events = events.filter((event) => event.type === selectedEventType);
 		}
 
+		// Then filter by temporal status (past/upcoming/all)
+		if (selectedTemporalStatus !== 'all') {
+			events = events.filter((event) => isEventInTimeRange(event, selectedTemporalStatus));
+		}
+
+		// Then filter by time range
+		if (selectedTimeFilter !== 'any') {
+			events = events.filter((event) => isEventInTimeRange(event, selectedTimeFilter));
+		}
+
 		// Then apply search query
 		if (searchQuery.trim() !== '') {
 			events = fuse.search(searchQuery).map((result) => result.item);
-			// Re-apply type filter after search
+			// Re-apply all filters after search
 			if (selectedEventType !== 'all') {
 				events = events.filter((event) => event.type === selectedEventType);
 			}
+			if (selectedTemporalStatus !== 'all') {
+				events = events.filter((event) => isEventInTimeRange(event, selectedTemporalStatus));
+			}
+			if (selectedTimeFilter !== 'any') {
+				events = events.filter((event) => isEventInTimeRange(event, selectedTimeFilter));
+			}
 		}
 
+		// Sort events by date and time
+		events = events.sort((a, b) => {
+			const dateA = new Date(`${a.date}T${a.time}`);
+			const dateB = new Date(`${b.date}T${b.time}`);
+
+			if (selectedSortOrder === 'asc') {
+				return dateA.getTime() - dateB.getTime();
+			} else {
+				return dateB.getTime() - dateA.getTime();
+			}
+		});
+
 		return events;
 	})();
 </script>
@@ -89,10 +121,10 @@
 				</div>
 
 				<!-- Search and Filter Section -->
-				<div class="mb-8">
-					<div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-center">
-						<!-- Search Bar -->
-						<div class="relative mx-auto max-w-md sm:mx-0">
+				<div class="mb-8 max-h-screen">
+					<!-- Search Bar and Filter Toggle -->
+					<div class="mx-auto flex w-full items-center gap-3 md:w-2/3">
+						<div class="relative flex-1">
 							<div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
 								<svg
 									class="h-5 w-5 text-slate-400"
@@ -112,12 +144,13 @@
 								type="text"
 								bind:value={searchQuery}
 								placeholder="Search events by name, location..."
-								class="w-full rounded-lg border border-slate-600 bg-slate-800 px-4 py-3 pl-10 text-white placeholder-slate-400 focus:border-violet-500 focus:ring-2 focus:ring-violet-500/20 focus:outline-none"
+								class="w-full rounded-sm border border-slate-600 bg-slate-800 pl-10 text-white placeholder-slate-400 focus:border-violet-500 focus:ring-violet-500/20"
 							/>
 							{#if searchQuery}
 								<button
 									on:click={() => (searchQuery = '')}
 									class="absolute inset-y-0 right-0 flex items-center pr-3 text-slate-400 hover:text-slate-300"
+									aria-label="Search input"
 								>
 									<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 										<path
@@ -131,37 +164,88 @@
 							{/if}
 						</div>
 
-						<!-- Event Type Filter -->
-						<div class="flex items-center justify-center gap-2">
-							<button
-								on:click={() => (selectedEventType = 'all')}
-								class="rounded-sm border px-3 py-2 text-sm font-medium transition-colors {selectedEventType ===
-								'all'
-									? 'border-violet-500 bg-violet-500/20 text-violet-400'
-									: 'border-slate-600 text-slate-400 hover:border-slate-500 hover:text-slate-300'}"
-							>
-								All
-							</button>
-							<button
-								on:click={() => (selectedEventType = 'limited')}
-								class="rounded-sm border px-3 py-2 text-sm font-medium transition-colors {selectedEventType ===
-								'limited'
-									? 'border-amber-600 bg-amber-600/20 text-amber-600'
-									: 'border-slate-600 text-slate-400 hover:border-slate-500 hover:text-slate-300'}"
-							>
-								Limited
-							</button>
-							<button
-								on:click={() => (selectedEventType = 'unlimited')}
-								class="rounded-sm border px-3 py-2 text-sm font-medium transition-colors {selectedEventType ===
-								'unlimited'
-									? 'border-teal-500 bg-teal-500/20 text-teal-500'
-									: 'border-slate-600 text-slate-400 hover:border-slate-500 hover:text-slate-300'}"
-							>
-								Unlimited
-							</button>
-						</div>
+						<!-- Filter Toggle Button -->
+						<button
+							on:click={() => (showFilters = !showFilters)}
+							class="flex items-center rounded-sm border p-3 font-semibold {showFilters
+								? 'border-violet-500 bg-violet-400/20'
+								: 'border-slate-600 bg-slate-800'}"
+							aria-label="Toggle filters"
+						>
+							<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.207A1 1 0 013 6.5V4z"
+								></path>
+							</svg>
+						</button>
 					</div>
+
+					<!-- Time Filter and Sort Controls -->
+					{#if showFilters}
+						<div
+							class="mx-auto mt-4 flex flex-col items-center gap-4 sm:flex-row sm:justify-center"
+						>
+							<!-- Event Type Filter -->
+							<div class="flex items-center gap-2">
+								<label for="event-type-filter" class="text-sm font-medium text-slate-400"
+									>Type:</label
+								>
+								<select
+									id="event-type-filter"
+									bind:value={selectedEventType}
+									class="rounded-sm border border-slate-600 bg-slate-800 px-3 py-2 text-sm text-white focus:border-violet-500 focus:ring-2 focus:ring-violet-500/20"
+								>
+									<option value="all">All</option>
+									<option value="limited">Limited</option>
+									<option value="unlimited">Unlimited</option>
+								</select>
+							</div>
+							<!-- Temporal Status Filter -->
+							<div class="flex items-center gap-2">
+								<label for="temporal-status-filter" class="text-sm font-medium text-slate-400"
+									>Status:</label
+								>
+								<select
+									id="temporal-status-filter"
+									bind:value={selectedTemporalStatus}
+									class="rounded-sm border border-slate-600 bg-slate-800 px-3 py-2 text-sm text-white focus:border-violet-500 focus:ring-2 focus:ring-violet-500/20"
+								>
+									<option value="all">All events</option>
+									<option value="upcoming">Upcoming events</option>
+									<option value="past">Past events</option>
+								</select>
+							</div>
+							<!-- Time Filter Dropdown -->
+							<div class="flex items-center gap-2">
+								<label for="time-filter" class="text-sm font-medium text-slate-400">Time:</label>
+								<select
+									id="time-filter"
+									bind:value={selectedTimeFilter}
+									class="rounded-sm border border-slate-600 bg-slate-800 px-3 py-2 text-sm text-white focus:border-violet-500 focus:ring-2 focus:ring-violet-500/20"
+								>
+									<option value="any">Any time</option>
+									<option value="next-week">Next week</option>
+									<option value="next-month">Next month</option>
+								</select>
+							</div>
+
+							<!-- Sort Order Dropdown -->
+							<div class="flex items-center gap-2">
+								<label for="sort-order" class="text-sm font-medium text-slate-400">Sort:</label>
+								<select
+									id="sort-order"
+									bind:value={selectedSortOrder}
+									class="rounded-sm border border-slate-600 bg-slate-800 px-3 py-2 text-sm text-white focus:border-violet-500 focus:ring-2 focus:ring-violet-500/20"
+								>
+									<option value="asc">Earliest first</option>
+									<option value="desc">Latest first</option>
+								</select>
+							</div>
+						</div>
+					{/if}
 				</div>
 
 				<div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">

src/routes/event/+page.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { Event } from '$lib/types';
 	import { goto } from '$app/navigation';
-	import { formatTime, formatDate } from '$lib/dateFormatter';
+	import { formatTime, formatDate } from '$lib/dateHelpers';
 
 	export let data: { events: Event[] };
 

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

@@ -3,7 +3,7 @@
 	import type { Event, RSVP } from '$lib/types';
 	import { goto } from '$app/navigation';
 	import { enhance } from '$app/forms';
-	import { formatTime, formatDate } from '$lib/dateFormatter';
+	import { formatTime, formatDate } from '$lib/dateHelpers.js';
 
 	export let data: { event: Event; rsvps: RSVP[]; userId: string };
 	export let form;