added search functionality

This should be future proof, however I'm not sure how well it'll handle
thousands of mods to search through. It should do it somewhat well, but
idk. We'll see, I'll perhaps implement a simpler search function in the
future instead of using Fuse if it becomes a problem.

1 files changed, 65 insertions, 13 deletions

diff --git a/src/app/browser.js b/src/app/browser.js
index 7fbae1d..b387a6a 100644
--- a/src/app/browser.js
+++ b/src/app/browser.js
@@ -1,3 +1,7 @@
+const Fuse = require("fuse.js");
+var fuse;
+var packages = [];
+
 var Browser = {
 	toggle: (state) => {
 		if (state) {
@@ -16,24 +20,40 @@ var Browser = {
 		browser.classList.toggle("shown")
 	},
 	loadfront: async () => {
-		let packages = await (await fetch("https://northstar.thunderstore.io/api/v1/package/")).json();
+		Browser.loading();
 		
-		for (let i in packages) {
-			let pkg = {...packages[i], ...packages[i].versions[0]};
-
-			new BrowserEl({
-				title: pkg.name,
-				image: pkg.icon,
-				author: pkg.owner,
-				download: pkg.download_url,
-				version: pkg.version_number,
-				description: pkg.description
+		if (packages.length < 1) {
+			packages = await (await fetch("https://northstar.thunderstore.io/api/v1/package/")).json();
+
+			fuse = new Fuse(packages, {
+				keys: ["full_name"]
 			})
 		}
+		
+		for (let i in packages) {
+			new BrowserElFromObj(packages[i]);
+		}
 	},
-	loading: () => {
+	loading: (string) => {
+		if (string) {
+			browserEntries.innerHTML = `<div class="loading">${string}</div>`;
+		}
+
 		if (! browserEntries.querySelector(".loading")) {
-			browserEntries.innerHTML = `<div class="loading">${lang("gui.browser.loading")}</div>`;
+			browserEntries.innerHTML = `<div class="loading">${lang('gui.browser.loading')}</div>`;
+		}
+	},
+	search: (string) => {
+		Browser.loading();
+		let res = fuse.search(string);
+
+		if (res.length < 1) {
+			Browser.loading("No results...")
+			return
+		}
+
+		for (let i = 0; i < res.length; i++) {
+			new BrowserElFromObj(res[i].item);
 		}
 	}
 }; Browser.toggle()
@@ -43,6 +63,19 @@ document.body.addEventListener("keyup", (e) => {
 	if (e.key == "Escape") {Browser.toggle(false)}
 })
 
+function BrowserElFromObj(obj) {
+	let pkg = {...obj, ...obj.versions[0]};
+
+	new BrowserEl({
+		title: pkg.name,
+		image: pkg.icon,
+		author: pkg.owner,
+		download: pkg.download_url,
+		version: pkg.version_number,
+		description: pkg.description
+	})
+}
+
 function BrowserEl(properties) {
 	properties = {
 		title: "No name",
@@ -105,3 +138,22 @@ function normalize(items) {
 		return newArray;
 	}
 }
+
+let searchtimeout;
+let searchstr = "";
+search.addEventListener("keyup", () => {
+	clearTimeout(searchtimeout);
+
+	if (searchstr != search.value) {
+		if (search.value.replaceAll(" ", "") == "") {
+			searchstr = "";
+			Browser.loadfront();
+			return
+		}
+
+		searchtimeout = setTimeout(() => {
+			Browser.search(search.value);
+			searchstr = search.value;
+		}, 500)
+	}
+})