import { onMount } from 'svelte';

import { currentPerson } from './store';

let userId;

$: currentPerson.dispatch(userId);

</script>

<h1>

Select a User Id

</h1>

<input type="number" bind:value={userId} />

<p>

Try deleting the contents of the input and putting the same number again. It will get the cached result instead of making a second API call :]

</p>

{#if userId}

{#await $currentPerson}

<p>Loading...</p>

{:then $currentPerson}

<p>

{JSON.stringify($currentPerson)}

</p>

{:catch $currentPerson}

<h1>Person not found</h1>

{/await}

{/if}