feat(web): functional instant mod search on discovery

beat-forge · Aug 14, 2023 · e9fc412 · e9fc412
1 parent ae7e7b6
commit e9fc412
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 11 deletions.
diff --git a/apps/web/src/lib/components/ModListItem.svelte b/apps/web/src/lib/components/ModListItem.svelte
@@ -23,7 +23,7 @@
 
 <a href={`/mod/${slug}`}>
     <div
-	    class="beatforge-discover-list-item flex flex-row gap-2 md:gap-4 w-full bg-primary-850 hover:bg-primary-900 border-b-[1px] border-primary-850 items-center p-2 md:p-4 min-w-0 transition hover:duration-[0ms] duration-[120ms] min-h-[129px]">
+	    class="beatforge-discover-list-item flex flex-row gap-2 md:gap-4 w-full bg-primary-850 hover:bg-primary-900 border-b-[1px] border-primary-850 items-center p-2 md:p-4 min-w-0 transition hover:duration-[0ms] duration-[120ms] my-2 md:my-0">
         <div
             class="beatforge-discover-list-item-image h-12 w-12 md:h-24 md:w-24 bg-primary-600 flex flex-shrink-0 overflow-hidden rounded-md mr-2"
         >

diff --git a/apps/web/src/lib/components/ModVersionItem.svelte b/apps/web/src/lib/components/ModVersionItem.svelte
@@ -40,7 +40,7 @@
 		<div class="beatforge-btn-wrapper flex flex-col rounded-lg overflow-hidden min-w-[199px] will-change-transform -mb-[4px]">
 			<Button variant="gradient" customClasses="!rounded-[0px] will-change-transform">
 				<LogoIcon customClasses="w-4 h-4" />
-				<div class="text-sm font-bold will-change-transform">Install</div>
+				<div class="text-sm font-bold will-change-transform">Download</div>
 			</Button>
             {#if isHovered}
                 <div class="flex flex-row gap-[2px] mt-[2px] opacity-0 group-hover:opacity-100 overflow-hidden rounded-b-lg will-change-transform" transition:slide={{ delay: 0, duration: 350, easing: quintOut, axis: 'y' }}>

diff --git a/apps/web/src/routes/discover/+page.svelte b/apps/web/src/routes/discover/+page.svelte
@@ -8,10 +8,10 @@
 	import { onMount } from 'svelte';
 
 	enum Sort {
-		Newest,
-		Oldest,
-		MostPopular,
-		LeastPopular
+		Newest = "created_at:desc",
+		Oldest = "created_at:asc",
+		MostPopular = "stats.downloads:desc",
+		LeastPopular = "stats.downloads:asc"
 	}
 
 	let listHeight;
@@ -30,11 +30,12 @@
 				},
 				body: JSON.stringify({
 					q: q,
-					sort: sort
+					sort: [sort.toString()]
 				})
 			})
 		).json();
 		data = res.hits;
+		data = data;
 	};
 
 	const searchOnInput = async (e: any) => {
@@ -86,9 +87,9 @@
 					slug={mod.slug}
 					author={mod.author.username}
 					description={mod.description}
-					category={mod.category.name}
+					category={mod.category}
 					downloads={mod.stats.downloads}
-					updatedAt={mod.updatedAt}
+					updatedAt={mod.updated_at}
 					icon={mod.icon}
 				/>
 			{/each}

diff --git a/apps/web/src/routes/mod/[mod]/+page.svelte b/apps/web/src/routes/mod/[mod]/+page.svelte
@@ -31,7 +31,7 @@
 			<div class="flex p-4 bg-primary-850 h-20 justify-between -mt-4">
 				<div class="sm:ml-12 -mt-20">
 					<img
-						src={modData.icon ? modData.icon : '/icons/default.png'}
+						src={modData.icon ? modData.icon : '/images/unknown.svg'}
 						alt="icon"
 						class="w-32 border-primary-850 border-4 rounded-md"
 					/>
@@ -84,7 +84,7 @@
                                     <CheckmarkIcon customClasses="w-5 h-5" />
                                     Copied!
                                 </div>
-                                
+
                             {:else}
                                 <div class:copy-button-active={$copiedState} class="flex items-center gap-2" transition:fade={{ duration: 75 }}>
                                     <CopyIcon customClasses="w-5 h-5" />