Add infinite loading support to hashtags

materialious/src/lib/api/index.ts

@@ -151,8 +151,8 @@ export async function getSearchSuggestions(search: string, fetchOptions?: Reques
 	return await resp.json();
 }
 
-export async function getHashtag(tag: string): Promise<{ results: Video[]; }> {
-	const resp = await fetchErrorHandle(await fetch(buildPath(`hashtag/${tag}`)));
+export async function getHashtag(tag: string, page: number = 0): Promise<{ results: Video[]; }> {
+	const resp = await fetchErrorHandle(await fetch(buildPath(`hashtag/${tag}?page=${page}`)));
 	return await resp.json();
 }
 

materialious/src/routes/(app)/hashtag/[slug]/+page.svelte

@@ -1,7 +1,28 @@
 <script lang="ts">
+	import { getHashtag } from '$lib/api/index.js';
+	import { activePageStore } from '$lib/store.js';
 	import VideoList from '$lib/VideoList.svelte';
+	import InfiniteLoading, { type InfiniteEvent } from 'svelte-infinite-loading';
 
 	export let data;
+
+	let currentPage = 1;
+	$: videos = [...data.hashTagVideos.results];
+
+	activePageStore.set('hashtag');
+
+	async function loadMore(event: InfiniteEvent) {
+		currentPage++;
+		const hashtagVideos = (await getHashtag(data.hashtag, currentPage)).results;
+		if (hashtagVideos.length === 0) {
+			event.detail.complete();
+		} else {
+			videos = [...videos, ...hashtagVideos];
+			event.detail.loaded();
+		}
+	}
 </script>
 
-<VideoList videos={data.hashTagVideos.results} />
+<VideoList {videos} />
+
+<InfiniteLoading on:infinite={loadMore} />

materialious/src/routes/(app)/hashtag/[slug]/+page.ts

@@ -2,6 +2,7 @@ import { getHashtag } from '$lib/api';
 
 export async function load({ params }) {
   return {
+    hashtag: params.slug,
     hashTagVideos: await getHashtag(params.slug)
   };
 }