import { onMount } from 'svelte';

import { searchTerm, people } from './store';

let timer;

// debouncing is always a good idea :]

function handleKeyup(event){

clearTimeout(timer);

timer = setTimeout(() => searchTerm.set(event.target.value), 500);

}

</script>

<h1>Search a user by name (try Clementine)</h1>

<input type="text" value={$searchTerm} on:keyup={handleKeyup} />

<p>

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

</p>

{#if $searchTerm}

{#await $people}

<p>Searching...</p>

{:then $people}

{#each $people as person}

<p>Name: {person.name}</p>

{/each}

{:catch $people}

<p>ohno, something wrong isn't right! here's ther error:</p>

<p>{JSON.stringify($people)}</p>

{/await}

{/if}