Merge pull request #238 from HBO-i/feat/207/search-for-whole-site

Feat/207/search for whole site
HBO-i · Aug 25, 2024 · 896128e · 896128e
2 parents d2952e1 + f62f82e
commit 896128e
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 36 deletions.
diff --git a/src/lib/components/SearchField.svelte b/src/lib/components/SearchField.svelte
@@ -3,7 +3,6 @@
 	import { allMethods, showSearchField, isJavaScriptDisabled, isMacDevice } from '$lib/stores';
 
 	import { goto } from '$app/navigation';
-	import { matchSorter } from 'match-sorter';
 	import { focusTrap } from 'svelte-focus-trap';
 
 	import { onMount } from 'svelte';
@@ -18,9 +17,9 @@
 	/**
 	 * Updates the search query based on the input field and adds the corresponding methods in the search array
 	 */
-	const updateSearchQuery = (e: KeyboardEvent) => {
+	const updateSearchQuery = async (e: KeyboardEvent) => {
 		const searchInput = e.target as HTMLInputElement;
-		const searchQuery = searchInput.value;
+		const searchQuery = searchInput.value.toLowerCase();
 
 		if (searchQuery.length > 1) {
 			showSearchField.set(true);
@@ -31,19 +30,26 @@
 		}
 
 		if (!$allMethods) {
-			// const res = await fetch('/api/methods');
-			// if (res.ok) {
-			// 	const result = await res.json();
-			// 	const methodsArray = result;
-			// 	allMethods.set(methodsArray);
-			// }
+			const res = await fetch('/api/methods');
+			if (res.ok) {
+				const result = await res.json();
+				const methodsArray = result;
+				allMethods.set(methodsArray);
+			}
 		}
 
-		const searchedArray = matchSorter($allMethods, searchQuery, {
-			keys: ['name']
-		});
-
-		searchedArrayDisplay = searchedArray.splice(0, 3);
+		searchedArrayDisplay = $allMethods
+			.filter((method: Method) => {
+				return (
+					method.name.toLowerCase().includes(searchQuery) ||
+					method.why.toLowerCase().includes(searchQuery) ||
+					method.how.toLowerCase().includes(searchQuery) ||
+					method.practice.toLowerCase().includes(searchQuery) ||
+					method.ingredients.some((ingredient) => ingredient.toLowerCase().includes(searchQuery)) ||
+					method.phases.some((phase) => phase.toLowerCase().includes(searchQuery))
+				);
+			})
+			.splice(0, 3); // Limit to 3 results for display
 	};
 
 	/**
@@ -110,7 +116,7 @@
 						<a
 							href={'/' + method.category + '/' + method.slug}
 							on:click={clearSearch}
-							class="custom-style"
+							class="custom-style search-results"
 						>
 							<span>{method.name}</span> - {method.category}
 						</a>
@@ -239,4 +245,9 @@
 			padding: 1.5em;
 		}
 	}
+
+	.search-results:hover {
+		background-color: var(--color-primary);
+		color: var(--color-bg);
+	}
 </style>
diff --git a/src/routes/[category=category]/[method]/+page.svelte b/src/routes/[category=category]/[method]/+page.svelte
@@ -23,7 +23,7 @@
 </svelte:head>
 
 <section>
-	<GoBack link={$isJavaScriptDisabled ? '/' : previousRoute ?? '/'} text="Methods" isClickable />
+	<GoBack link="/" text="Methods" isClickable />
 
 	<picture>
 		<source

diff --git a/src/routes/search/+page.svelte b/src/routes/search/+page.svelte
@@ -2,46 +2,54 @@
 	import type { Method } from '$lib/types';
 
 	import { page } from '$app/stores';
+
 	import { allMethods } from '$lib/stores';
 	import MethodList from '$lib/components/method/MethodList.svelte';
 
+	let searchedArrayDisplay: Method[];
 	$: queryString = $page.url.search;
 	$: searchQuery = queryString.split('=')[1] ?? '';
 	$: formattedSearchQuery = searchQuery.toLowerCase().replace('+', ' ');
 
-	$: searchedMethodsArray = $allMethods.filter(function (method: Method) {
-		const lowerCasedMethodName = method.name.toLowerCase();
-
-		return lowerCasedMethodName.includes(formattedSearchQuery);
+	$: searchedArrayDisplay = $allMethods.filter((method: Method) => {
+		const lowerCasedQuery = formattedSearchQuery.toLowerCase();
+
+		// Check if any of the fields contain the search query
+		return (
+			method.name.toLowerCase().includes(lowerCasedQuery) ||
+			method.why.toLowerCase().includes(lowerCasedQuery) ||
+			method.how.toLowerCase().includes(lowerCasedQuery) ||
+			method.practice.toLowerCase().includes(lowerCasedQuery) ||
+			method.ingredients.some((ingredient) => ingredient.toLowerCase().includes(lowerCasedQuery)) ||
+			method.phases.some((phase) => phase.toLowerCase().includes(lowerCasedQuery))
+		);
 	});
-
-	$: isValidQuery = searchedMethodsArray.length > 0 && formattedSearchQuery !== '';
-
-	$: isSearchEmpty = formattedSearchQuery === '';
 </script>
 
 <svelte:head>
 	<title>Search for: {formattedSearchQuery} — ICT Research Methods</title>
 </svelte:head>
-
 <a href="/">&larr; Back home</a>
 <h1>Search for: {formattedSearchQuery}</h1>
 
-{#if isValidQuery}
-	<MethodList methodsArray={searchedMethodsArray} />
-{:else if isSearchEmpty}
-	<p>You're searching for nothing. How am I supposed to find something, lol?</p>
-	<p>Go <a href="/">home</a>, you're drunk.</p>
-{:else}
-	<p>
-		Nothing found. Are you sure this is a valid search query? Please try again or go back to <a
-			href="/">home</a
-		>.
-	</p>
+{#if searchedArrayDisplay}
+	<MethodList methodsArray={searchedArrayDisplay} />
 {/if}
 
 <noscript>
 	Unfortunately the search doesn't work yet without JavaScript. We are working on it, but for now:
 	please <a href="https://www.enable-javascript.com/" target="_blank">enable JavaScript</a> in your browser
 	if you want to search.
 </noscript>
+
+<style lang="scss">
+	.search-results {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5em;
+
+		li a {
+			text-decoration: none;
+		}
+	}
+</style>