<script>
import { onMount } from 'svelte';
import InfiniteLoading from 'svelte-infinite-loading';
const api = 'https://hn.algolia.com/api/v1/search_by_date?tags=story';
let page = 1;
let list = [];
function infiniteHandler({ detail: { loaded, complete } }) {
fetch(`${api}&page=${page}`)
.then(response => response.json())
.then(data => {
if (data.hits.length) {
page += 1;
list = [...data.hits.reverse(), ...list];
loaded();
} else {
complete();
}
});
}
</script>
<div id="app">
<header class="hacker-news-header">
<a target="_blank" href="http://www.ycombinator.com/">
<img src="https://news.ycombinator.com/y18.gif" alt="Logo">
</a>
<span>Hacker News</span>
</header>
<InfiniteLoading on:infinite={infiniteHandler} direction="top" />
{#each list as item, index}
<div class="hacker-news-item" data-num={list.length - index}>