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

<script lang="ts">
import Spacer from "$lib/Layout/Spacer.svelte";
import type { Group as GroupType } from "$lib/Database/SB/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: unknown) => group as GroupType;
</script>

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

        <a href={root(`/events/group/${group.anilist_username}`)}>
          <Group {group} />
        </a>

        {#if i < json.length - 1}
          <Spacer />
        {/if}
      {/each}
    {:catch}
      <Message message="" loader="ripple" slot withReload>Error parsing groups.</Message>
    {/await}
  {:else}
    <Message message="Parsing groups ..." />
  {/if}
{:catch}
  <Message message="" loader="ripple" slot withReload>Error loading groups.</Message>
{/await}