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}