<script>
import { onMount } from 'svelte';
import { users, isLoading, error, isAddingUser, errorAddingUser } from './store.js'
import { fetchUsers, addUser } from './service.js'
let newUser = ''
onMount(fetchUsers)
$: displayError = JSON.stringify($error)
$: buttonText = $isAddingUser ? 'loading' : ($errorAddingUser ? 'error' : 'Add')
const addNewUser = () => addUser(newUser)
</script>
<input bind:value={newUser}/>
<button on:click={addNewUser}>{ buttonText }</button>
{#if $isLoading}
<i>Loading...</i>
{:else if $error}
<b>{displayError}</b>
{:else}
<div>
{#each $users as user}
<h3> {user.name}</h3>
{/each}
</div>
{/if}