feat(events): all events page

4 files changed, 99 insertions, 65 deletions

diff --git a/src/lib/Events/Event.svelte b/src/lib/Events/Event.svelte
new file mode 100644
index 00000000..986db071
--- /dev/null
+++ b/src/lib/Events/Event.svelte
@@ -0,0 +1,63 @@
+<script lang="ts">
+	import type { Event } from '$lib/Database/events';
+	import locale from '$stores/locale';
+
+	export let event: Event;
+</script>
+
+<a href={event.anilist_url} target="_blank">
+	<div
+		class="card"
+		id="user-grid"
+		style={`background-image: ${event.banner ? `url(${event.banner})` : 'none'}; padding: 0;`}
+	>
+		{#if event}
+			<img src={event.banner} alt="" id="cover-image" />
+		{/if}
+
+		<div class="card" id="user-grid-content">
+			<div id="user-grid-content-text">
+				<p>
+					<a href={event.anilist_url} target="_blank" class="title-text">
+						{event.title}
+					</a>
+					<br />
+					{$locale().dateFormatter(new Date(event.created_at))}
+				</p>
+
+				<p>{event.description}</p>
+			</div>
+		</div>
+	</div>
+</a>
+
+<style>
+	#user-grid-content {
+		display: flex;
+		flex-wrap: wrap;
+		column-gap: 1.5em;
+		background-color: rgba(0, 0, 0, 0.468);
+		color: #d8d8d8;
+		border-top-left-radius: 0;
+		border-top-right-radius: 0;
+	}
+
+	/* .click-item {
+		margin: 0 0.625rem;
+	} */
+
+	#user-grid {
+		background-size: cover;
+		background-position: center;
+		background-repeat: no-repeat;
+	}
+
+	#cover-image {
+		visibility: hidden;
+		height: 4.5em;
+	}
+
+	.title-text {
+		font-size: 1.1em;
+	}
+</style>
diff --git a/src/routes/api/events/+server.ts b/src/routes/api/events/+server.ts
index 987eecae..65347874 100644
--- a/src/routes/api/events/+server.ts
+++ b/src/routes/api/events/+server.ts
@@ -1,4 +1,8 @@
-import { getGroupEvents } from '$lib/Database/events';
+import { getEvents, getGroupEvents } from '$lib/Database/events';
 
 export const GET = async ({ url }) =>
-	Response.json(await getGroupEvents(url.searchParams.get('group') || ''));
+	Response.json(
+		url.searchParams.get('group')
+			? await getGroupEvents(url.searchParams.get('group') || '')
+			: await getEvents()
+	);
diff --git a/src/routes/events/+page.svelte b/src/routes/events/+page.svelte
new file mode 100644
index 00000000..eed87958
--- /dev/null
+++ b/src/routes/events/+page.svelte
@@ -0,0 +1,26 @@
+<script>
+	import Event from '$lib/Events/Event.svelte';
+	import Message from '$lib/Loading/Message.svelte';
+
+	import root from '$lib/Utility/root';
+</script>
+
+{#await fetch(root(`/api/events`))}
+	<Message message="Loading events ..." />
+{:then eventsResponse}
+	{#await eventsResponse.json()}
+		<Message message="Parsing events ..." />
+	{:then events}
+		{#if events}
+			{#each events as rawEvent, i}
+				<Event event={rawEvent} />
+
+				{#if i < events.length - 1}
+					<p />
+				{/if}
+			{/each}
+		{/if}
+	{:catch}
+		<Message message="" loader="ripple" slot withReload>Error parsing events.</Message>
+	{/await}
+{/await}
diff --git a/src/routes/events/group/[group]/+page.svelte b/src/routes/events/group/[group]/+page.svelte
index 8dd09118..ef920254 100644
--- a/src/routes/events/group/[group]/+page.svelte
+++ b/src/routes/events/group/[group]/+page.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
 	import type { Group as GroupType } from '$lib/Database/groups';
-	import type { Event } from '$lib/Database/events';
+	import type { Event as EventType } from '$lib/Database/events';
 	import Message from '$lib/Loading/Message.svelte';
 	import root from '$lib/Utility/root';
 	import { onMount } from 'svelte';
-	import locale from '$stores/locale.js';
 	import Group from '$lib/Events/Group.svelte';
+	import Event from '$lib/Events/Event.svelte';
 
 	export let data;
 
@@ -17,7 +17,7 @@
 
 	const asGroup = (group: any) => group as GroupType;
 
-	const asEvent = (event: any) => event as Event;
+	const asEvent = (event: any) => event as EventType;
 </script>
 
 {#await groupsResponse}
@@ -50,35 +50,7 @@
 						{:then events}
 							{#if events}
 								{#each events as rawEvent, i}
-									{@const event = asEvent(rawEvent)}
-
-									<a href={event.anilist_url} target="_blank">
-										<div
-											class="card"
-											id="user-grid"
-											style={`background-image: ${
-												event.banner ? `url(${event.banner})` : 'none'
-											}; padding: 0;`}
-										>
-											{#if event}
-												<img src={event.banner} alt="" id="cover-image" />
-											{/if}
-
-											<div class="card" id="user-grid-content">
-												<div id="user-grid-content-text">
-													<p>
-														<a href={event.anilist_url} target="_blank" class="title-text">
-															{event.title}
-														</a>
-														<br />
-														{$locale().dateFormatter(new Date(event.created_at))}
-													</p>
-
-													<p>{event.description}</p>
-												</div>
-											</div>
-										</div>
-									</a>
+									<Event event={asEvent(rawEvent)} />
 
 									{#if i < events.length - 1}
 										<p />
@@ -100,34 +72,3 @@
 {:catch}
 	<Message message="" loader="ripple" slot withReload>Error loading group.</Message>
 {/await}
-
-<style>
-	#user-grid-content {
-		display: flex;
-		flex-wrap: wrap;
-		column-gap: 1.5em;
-		background-color: rgba(0, 0, 0, 0.468);
-		color: #d8d8d8;
-		border-top-left-radius: 0;
-		border-top-right-radius: 0;
-	}
-
-	/* .click-item {
-		margin: 0 0.625rem;
-	} */
-
-	#user-grid {
-		background-size: cover;
-		background-position: center;
-		background-repeat: no-repeat;
-	}
-
-	#cover-image {
-		visibility: hidden;
-		height: 4.5em;
-	}
-
-	.title-text {
-		font-size: 1.1em;
-	}
-</style>