From 36bbd317f75ec354593c7218ccdd5e8681505a45 Mon Sep 17 00:00:00 2001
From: nwrenger <nils@wrenger.net>
Date: Sun, 13 Aug 2023 15:47:11 +0200
Subject: [PATCH] :bug: Fixed Search && Visuals on Page Load && Spelling

---
 src/components/materials/Search.svelte         | 18 ++++++++++--------
 src/components/materials/browse/Filter.svelte  |  4 ++--
 .../materials/browse/ItemCard.svelte           |  2 +-
 src/components/materials/browse/View.svelte    |  8 ++++----
 src/components/navigation/NavBar.svelte        |  1 -
 5 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/src/components/materials/Search.svelte b/src/components/materials/Search.svelte
index 9ccb987..ec1f4b1 100644
--- a/src/components/materials/Search.svelte
+++ b/src/components/materials/Search.svelte
@@ -1,6 +1,5 @@
 <script>
 	import { page } from "$app/stores";
-
 	import Input from "../basic/Input.svelte";
 	import Button from "../basic/Button.svelte";
 	import { onMount } from "svelte";
@@ -10,17 +9,20 @@
 	let search = "";
 	let grade = "";
 	let subject = "";
+	let mounted = false;
 
-	function getParam(key) {
-		return $page.url.searchParams.get(key) || "";
-	}
+	onMount(() => {
+		mounted = true;
+	});
 
 	onMount(() => {
-		if (!system) system = getParam("system");
-		grade = getParam("grade_number");
-		subject = getParam("subject");
-		search = getParam("search");
+		mounted = true;
+		search = $page.url.searchParams.get("search") || "";
 	});
+
+	$: if (mounted && !system) subject = $page.url.searchParams.get("system") || "";
+	$: if (mounted) grade = $page.url.searchParams.get("grade_number") || "";
+	$: if (mounted) subject = $page.url.searchParams.get("subject") || "";
 </script>
 
 <Input bind:value={search} placeholder="(noch nicht funktionell!)" required name="suche" id="suche">
diff --git a/src/components/materials/browse/Filter.svelte b/src/components/materials/browse/Filter.svelte
index 8eae791..34dd554 100644
--- a/src/components/materials/browse/Filter.svelte
+++ b/src/components/materials/browse/Filter.svelte
@@ -29,14 +29,14 @@
 			goto(
 				`/materials/browse?system=${getParam("system")}&grade_number=${selected
 					.map((obj) => obj.value)
-					.join(",")}&subject=${getParam("subject")}`,
+					.join(",")}&subject=${getParam("subject")}&search=${getParam("search")}`,
 				{ replaceState: true }
 			);
 		} else {
 			goto(
 				`/materials/browse?system=${getParam("system")}&grade_number=${getParam(
 					"grade_number"
-				)}&subject=${selected.map((obj) => obj.value).join(",")}`,
+				)}&subject=${selected.map((obj) => obj.value).join(",")}&search=${getParam("search")}`,
 				{ replaceState: true }
 			);
 		}
diff --git a/src/components/materials/browse/ItemCard.svelte b/src/components/materials/browse/ItemCard.svelte
index 42d84f3..ed30b09 100644
--- a/src/components/materials/browse/ItemCard.svelte
+++ b/src/components/materials/browse/ItemCard.svelte
@@ -23,7 +23,7 @@
 			</p>
 			<p class="my-1">
 				{#await Promise.all([subject, grade])}
-					<i> Loading... </i>
+					<i> Lädt... </i>
 				{:then [resolvedSubject, resolvedGrade]}
 					<i>
 						{resolvedSubject.data.name_de}, {resolvedGrade.data.number == "Oberstufe"
diff --git a/src/components/materials/browse/View.svelte b/src/components/materials/browse/View.svelte
index 8c10e17..906f640 100644
--- a/src/components/materials/browse/View.svelte
+++ b/src/components/materials/browse/View.svelte
@@ -15,9 +15,9 @@
 	}
 
 	let itemsPromise = null;
-	let subject = "";
-	let grade = "";
-	let search = "";
+	let subject;
+	let grade;
+	let search;
 	let mounted = false;
 
 	onMount(() => (mounted = true));
@@ -74,7 +74,7 @@
 			</ParagraphDefault>
 		{/if}
 	{:else if items === null}
-		<!-- Data is null, that's expected because the DOM hasn't loaded yet -->
+		<!-- Items is null, that's expected because the DOM hasn't loaded yet -->
 		<div class="grid grid-cols-1 lg:grid-cols-2 gap-4 w-full">
 			<Spinner color="gray" />
 		</div>
diff --git a/src/components/navigation/NavBar.svelte b/src/components/navigation/NavBar.svelte
index 013fe8f..52f3e32 100644
--- a/src/components/navigation/NavBar.svelte
+++ b/src/components/navigation/NavBar.svelte
@@ -71,7 +71,6 @@
 			<div class="pt-1" />
 			<Button
 				href={DISCORD_LINK}
-				target="_blank"
 				color="emerald"
 				external
 				extra={showMenu ? "w-full mr-3 ml-3 mt-3" : "mr-3 ml-3"}>Zum Discord-Server!</Button