Help with svelte component in astro
This is my [page].astro- which is supposed to be index of all episodes fetched from spotify api. It only fetches 20 episodes, I want to fetch more episodes when ''next" button is clicked. The next button is in my component folder as NextButton.svelte. I want to trigger a function but the button in svelte component not working
[page].astro
NextButton.svelte
[page].astro
---
import { main ,loadMoreEpisodes } from '../../utils/app.js';
import NextButton from '../../components/NextButton.svelte'
export async function getStaticPaths({paginate}){
const episodes = await main()
return paginate(episodes, { pageSize: 20 });
}
const { page } = Astro.props;
---
<Layout title="Episodes" >
<div class="bg-slate-900">
<Navbar />
<h1 class="">
<span class="">
Browse Episodes
</span>
</h1>
<h1>Page {page.currentPage}</h1>
<NextButton />
<button this-one>CLick this</button>
<div class="text-white mx-auto">
{page.data.map(episode => (
<EpisodeCard
href={`/episodes/${episode.id}`}
title={episode.name}
body={episode.description.slice(0,145)+'...'}
img={episode.images[0].url}/>
))
}
</div>
</Layout>
<script>
import { main, fetchNextEpisodes } from "../../utils/app";
console.log("page rendereed");
const buttons = document.querySelector("[this-one]")
buttons.addEventListener('click',()=>fetchNextEpisodes());
</script>---
import { main ,loadMoreEpisodes } from '../../utils/app.js';
import NextButton from '../../components/NextButton.svelte'
export async function getStaticPaths({paginate}){
const episodes = await main()
return paginate(episodes, { pageSize: 20 });
}
const { page } = Astro.props;
---
<Layout title="Episodes" >
<div class="bg-slate-900">
<Navbar />
<h1 class="">
<span class="">
Browse Episodes
</span>
</h1>
<h1>Page {page.currentPage}</h1>
<NextButton />
<button this-one>CLick this</button>
<div class="text-white mx-auto">
{page.data.map(episode => (
<EpisodeCard
href={`/episodes/${episode.id}`}
title={episode.name}
body={episode.description.slice(0,145)+'...'}
img={episode.images[0].url}/>
))
}
</div>
</Layout>
<script>
import { main, fetchNextEpisodes } from "../../utils/app";
console.log("page rendereed");
const buttons = document.querySelector("[this-one]")
buttons.addEventListener('click',()=>fetchNextEpisodes());
</script>NextButton.svelte
<script>
import {fetchNextEpisodes} from '../utils/app.js';
async function handleClick(){
await fetchNextEpisodes();
}
</script>
<button class="primary" on:click={handleClick}>Next ep</button><script>
import {fetchNextEpisodes} from '../utils/app.js';
async function handleClick(){
await fetchNextEpisodes();
}
</script>
<button class="primary" on:click={handleClick}>Next ep</button>
