fix(web): catch if mod list is empty

beat-forge · Aug 14, 2023 · 8fe88f4 · 8fe88f4
1 parent 46fd531
commit 8fe88f4
Showing 1 changed file with 61 additions and 41 deletions.
diff --git a/apps/web/src/routes/discover/+page.svelte b/apps/web/src/routes/discover/+page.svelte
@@ -4,43 +4,46 @@
 	import { Button } from 'ui/button';
 
 	import VirtualList from 'svelte-tiny-virtual-list';
-    import ModListItem from '$lib/components/ModListItem.svelte';
+	import ModListItem from '$lib/components/ModListItem.svelte';
 	import { onMount } from 'svelte';
 
-    enum Sort {
-        Newest,
-        Oldest,
-        MostPopular,
-        LeastPopular
-    }
+	enum Sort {
+		Newest,
+		Oldest,
+		MostPopular,
+		LeastPopular
+	}
 
 	let listHeight;
-    let data: any[] = [];
-    let sort = Sort.Newest;
+	let data: any[] = [];
+	let sort = Sort.Newest;
 
-    const search = async (q: String) => {
-        const res = await (await fetch(`https://search.beatforge.net/indexes/staging_mods/search`, {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-                'Access-Control-Allow-Origin': '*',
-                'Authorization': 'Bearer ' + '1bb9363429a821bb444c459fe529505de0c9985a6abb6802c1849797b4ae316b'
-            },
-            body: JSON.stringify({
-                q: q,
-                sort: sort
-            })
-        })).json();
-        data = res.hits;
-    };
+	const search = async (q: String) => {
+		const res = await (
+			await fetch(`https://search.beatforge.net/indexes/staging_mods/search`, {
+				method: 'POST',
+				headers: {
+					'Content-Type': 'application/json',
+					'Access-Control-Allow-Origin': '*',
+					Authorization:
+						'Bearer ' + '1bb9363429a821bb444c459fe529505de0c9985a6abb6802c1849797b4ae316b'
+				},
+				body: JSON.stringify({
+					q: q,
+					sort: sort
+				})
+			})
+		).json();
+		data = res.hits;
+	};
 
-    const searchOnInput = async (e: any) => {
-        await search(<String>(<HTMLInputElement>e.target).value)
-    };
+	const searchOnInput = async (e: any) => {
+		await search(<String>(<HTMLInputElement>e.target).value);
+	};
 
-    onMount(async () => {
-        await search('');
-    })
+	onMount(async () => {
+		await search('');
+	});
 </script>
 
 <div class="w-full max-w-7xl px-6 mx-auto">
@@ -49,17 +52,23 @@
 	</div>
 
 	<div class="beatforge-discover-filter-wrapper flex flex-row gap-4 mt-4">
-		<div class="relative flex w-full flex-row items-center overflow-hidden rounded-md bg-primary-800 text-primary-50">
+		<div
+			class="relative flex w-full flex-row items-center overflow-hidden rounded-md bg-primary-800 text-primary-50"
+		>
 			<SearchIcon customClasses="w-4 h-4 absolute left-4 z-10 select-none pointer-events-none" />
 			<input
-                on:input={searchOnInput}
+				on:input={searchOnInput}
 				class="flex w-full flex-row items-center gap-2 py-3 pl-12"
 				placeholder="Search for mods"
 			/>
 		</div>
 
-		<div class="relative flex w-2/5 flex-row items-center overflow-hidden rounded-md bg-primary-800">
-			<ChevronDownIcon customClasses="w-4 h-4 absolute right-4 z-10 select-none pointer-events-none" />
+		<div
+			class="relative flex w-2/5 flex-row items-center overflow-hidden rounded-md bg-primary-800"
+		>
+			<ChevronDownIcon
+				customClasses="w-4 h-4 absolute right-4 z-10 select-none pointer-events-none"
+			/>
 			<select class="flex w-full flex-row items-center gap-2 py-3 pl-4 pr-12">
 				<option value="1">Newest</option>
 				<option value="2">Oldest</option>
@@ -69,13 +78,24 @@
 		</div>
 	</div>
 
-	<div
-		class="beatforge-discover-list-items-wrapper mt-4 overflow-hidden rounded-md"
-	>
-		{#each data as mod}
-            <ModListItem name={mod.name} slug={mod.slug} author={mod.author.username} description={mod.description} category={mod.category.name} downloads={mod.stats.downloads} updatedAt={mod.updatedAt} icon={mod.icon} />
-		{/each}
-        <!-- <VirtualList width="100%" itemCount={data.length} itemSize={129} height="100%">
+	<div class="beatforge-discover-list-items-wrapper mt-4 overflow-hidden rounded-md">
+		{#if data && data.length}
+			{#each data as mod}
+				<ModListItem
+					name={mod.name}
+					slug={mod.slug}
+					author={mod.author.username}
+					description={mod.description}
+					category={mod.category.name}
+					downloads={mod.stats.downloads}
+					updatedAt={mod.updatedAt}
+					icon={mod.icon}
+				/>
+			{/each}
+		{:else}
+			<p class="text-center text-primary-300">No mods found</p>
+		{/if}
+		<!-- <VirtualList width="100%" itemCount={data.length} itemSize={129} height="100%">
             <div slot="item" let:index let:style {style}>
 				<p>{data[index].name}</p>
                 <DiscoverListItem