<script>
import { onMount } from 'svelte';
import ListView from 'svelte-list-view';
// states
let page = 1;
let items = [];
async function fetchJokes() {
// API docs: https://icanhazdadjoke.com/api#search-for-dad-jokes
const res = await fetch(`https://icanhazdadjoke.com/search?page=${page}`, {
headers: { accept: 'application/json' }
});
if (res.ok) {
page = page + 1;
return (await res.json()).results;
}
return [];
}
// fetch first 20 jokes after mounting
onMount(async () => {
items = await fetchJokes();
});
// load more function fires when last item get into viewport
const handleLoadMore = async () => {
const newItems = await fetchJokes();
items = [...items, ...newItems];
}
</script>
<ListView {items} on:loadmore={handleLoadMore} let:item>
<p>{item.joke}</p>
</ListView>