src/routes/events/groups/+page.svelte


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

<script lang="ts">
	import type { Group as GroupType } from '$lib/Database/groups';
	import Message from '$lib/Loading/Message.svelte';
	import root from '$lib/Utility/root';
	import { onMount } from 'svelte';
	import Group from '$lib/Events/Group.svelte';

	let groupsResponse: Promise<Response>;

	onMount(async () => {
		groupsResponse = fetch(root('/api/events/groups'));
	});

	const asGroup = (group: any) => group as GroupType;
</script>

{#await groupsResponse}
	<Message message="Loading groups ..." />
{:then groups}
	{#if groups}
		{#await groups.json()}
			<Message message="Parsing groups ..." />
		{:then json}
			<ul>
				{#each json as rawGroup}
					{@const group = asGroup(rawGroup)}

					<a href={root(`/events/group/${group.anilist_username}`)}>
						<Group {group} />
					</a>
				{/each}
			</ul>
		{:catch}
			<Message message="" loader="ripple" slot>
				Error parsing groups. 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 groups. Please
		<a href={'#'} on:click={() => location.reload()}>try again</a> later.
	</Message>
{/await}