feat(group): group page from groups

4 files changed, 182 insertions, 43 deletions

diff --git a/src/lib/Database/groups.ts b/src/lib/Database/groups.ts
index e3e392b8..097d6f89 100644
--- a/src/lib/Database/groups.ts
+++ b/src/lib/Database/groups.ts
@@ -24,9 +24,9 @@ export const getGroups = async () => {
 };
 
 export const getGroup = async (slug: string) => {
-	const { data, error } = await supabase.from('groups').select('*').eq('slug', slug);
+	const { data, error } = await supabase.from('groups').select('*').eq('anilist_username', slug);
 
-	if (error) return [];
+	if (error || data.length === 0) return null;
 
-	return data as Group[];
+	return data[0] as Group;
 };
diff --git a/src/routes/events/group/[group]/+page.server.ts b/src/routes/events/group/[group]/+page.server.ts
new file mode 100644
index 00000000..b4094b4f
--- /dev/null
+++ b/src/routes/events/group/[group]/+page.server.ts
@@ -0,0 +1,5 @@
+export const load = ({ params }) => {
+	return {
+		group: params.group
+	};
+};
diff --git a/src/routes/events/group/[group]/+page.svelte b/src/routes/events/group/[group]/+page.svelte
new file mode 100644
index 00000000..5a36a755
--- /dev/null
+++ b/src/routes/events/group/[group]/+page.svelte
@@ -0,0 +1,132 @@
+<script lang="ts">
+	import type { Group } from '$lib/Database/groups';
+	import Message from '$lib/Loading/Message.svelte';
+	import tooltip from '$lib/Tooltip/tooltip';
+	import root from '$lib/Utility/root';
+	import { onMount } from 'svelte';
+
+	export let data;
+
+	let groupsResponse: Promise<Response>;
+
+	onMount(async () => {
+		groupsResponse = fetch(root(`/api/events/group?slug=${data.group}`));
+	});
+
+	const asGroup = (group: any) => group as Group;
+</script>
+
+{#await groupsResponse}
+	<Message message="Loading group ..." />
+{:then group}
+	{#if group}
+		{#await group.json()}
+			<Message message="Parsing group ..." />
+		{:then json}
+			{#if json === null}
+				<Message message="" loader="ripple" slot>
+					This group may not exist. Please
+					<a href={'#'} on:click={() => location.reload()}>try again</a> later.
+				</Message>
+			{:else}
+				{@const group = asGroup(json)}
+
+				<div
+					class="card"
+					id="user-grid"
+					style={`background-image: ${group.banner ? `url(${group.banner})` : 'none'}; padding: 0;`}
+				>
+					{#if group}
+						<img src={group.banner} alt="" id="cover-image" />
+					{/if}
+
+					<div class="card" id="user-grid-content">
+						<div id="user-grid-avatar">
+							<a href={`https://anilist.co/user/${group.anilist_username}`} target="_blank">
+								<img src={group.avatar} alt="" width="100vw" id="avatar" />
+							</a>
+						</div>
+
+						<div id="user-grid-content-text">
+							<p>
+								<a
+									href={`https://anilist.co/user/${group.anilist_username}`}
+									target="_blank"
+									title={String(group.anilist_id)}
+									use:tooltip
+								>
+									@{group.name}
+								</a>
+								{#if group && group.badge}
+									&#8204;
+									<button
+										class="unclickable-button button-badge badge-rainbow"
+										title={group.badge_description}
+										use:tooltip
+										data-tooltip-disable={group.badge_description}
+									>
+										{group.badge}
+									</button>
+								{/if}
+							</p>
+
+							<p>
+								{group.description}
+							</p>
+						</div>
+					</div>
+				</div>
+			{/if}
+		{:catch}
+			<Message message="" loader="ripple" slot>
+				Error parsing group. Please
+				<a href={'#'} on:click={() => location.reload()}>try again</a> later.
+			</Message>
+		{/await}
+	{:else}
+		<Message message="Parsing groups ..." />
+	{/if}
+{:catch}
+	<Message message="" loader="ripple" slot>
+		Error loading group. Please
+		<a href={'#'} on:click={() => location.reload()}>try again</a> later.
+	</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;
+	}
+
+	#user-grid-avatar {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+	}
+
+	#avatar {
+		border-radius: 8px;
+	}
+
+	/* .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;
+	}
+</style>
diff --git a/src/routes/events/groups/+page.svelte b/src/routes/events/groups/+page.svelte
index b52407f0..44d69cb0 100644
--- a/src/routes/events/groups/+page.svelte
+++ b/src/routes/events/groups/+page.svelte
@@ -25,53 +25,55 @@
 				{#each json as rawGroup}
 					{@const group = asGroup(rawGroup)}
 
-					<div
-						class="card"
-						id="user-grid"
-						style={`background-image: ${
-							group.banner ? `url(${group.banner})` : 'none'
-						}; padding: 0;`}
-					>
-						{#if group}
-							<img src={group.banner} alt="" id="cover-image" />
-						{/if}
+					<a href={root(`/events/group/${group.anilist_username}`)}>
+						<div
+							class="card"
+							id="user-grid"
+							style={`background-image: ${
+								group.banner ? `url(${group.banner})` : 'none'
+							}; padding: 0;`}
+						>
+							{#if group}
+								<img src={group.banner} alt="" id="cover-image" />
+							{/if}
 
-						<div class="card" id="user-grid-content">
-							<div id="user-grid-avatar">
-								<a href={`https://anilist.co/user/${group.anilist_username}`} target="_blank">
-									<img src={group.avatar} alt="" width="100vw" id="avatar" />
-								</a>
-							</div>
-
-							<div id="user-grid-content-text">
-								<p>
-									<a
-										href={`https://anilist.co/user/${group.anilist_username}`}
-										target="_blank"
-										title={String(group.anilist_id)}
-										use:tooltip
-									>
-										@{group.name}
+							<div class="card" id="user-grid-content">
+								<div id="user-grid-avatar">
+									<a href={`https://anilist.co/user/${group.anilist_username}`} target="_blank">
+										<img src={group.avatar} alt="" width="100vw" id="avatar" />
 									</a>
-									{#if group && group.badge}
-										&#8204;
-										<button
-											class="unclickable-button button-badge badge-rainbow"
-											title={group.badge_description}
+								</div>
+
+								<div id="user-grid-content-text">
+									<p>
+										<a
+											href={`https://anilist.co/user/${group.anilist_username}`}
+											target="_blank"
+											title={String(group.anilist_id)}
 											use:tooltip
-											data-tooltip-disable={group.badge_description}
 										>
-											{group.badge}
-										</button>
-									{/if}
-								</p>
+											@{group.name}
+										</a>
+										{#if group && group.badge}
+											&#8204;
+											<button
+												class="unclickable-button button-badge badge-rainbow"
+												title={group.badge_description}
+												use:tooltip
+												data-tooltip-disable={group.badge_description}
+											>
+												{group.badge}
+											</button>
+										{/if}
+									</p>
 
-								<p>
-									{group.description}
-								</p>
+									<p>
+										{group.description}
+									</p>
+								</div>
 							</div>
 						</div>
-					</div>
+					</a>
 				{/each}
 			</ul>
 		{:catch}