<script>
	import { onMount } from 'svelte';

    import { listChannels } from '../apiServer';
    import { channelsList } from '../store';
    import Channel from './Channel.svelte';

    let channels;
    let loading = true;

    channelsList.subscribe((value) => {
        channels = value.channels;
    });

	onMount(async () => {
        let channels = await listChannels();
        channelsList.update((value) => value.setChannels(channels.data));
        loading = false;
    });
</script>

<ul class="select-none">
    {#if loading}
        <li><em>loading channels&hellip;</em></li>
    {:else}
        {#each channels as channel}
            <Channel {...channel} />
        {/each}
    {/if}
</ul>

<style>
</style>

