implemented the search to get results

OneBusAway · Aug 26, 2024 · c6cfaf0 · c6cfaf0
1 parent eee9096
commit c6cfaf0
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 23 deletions.
diff --git a/src/components/navigation/Header.svelte b/src/components/navigation/Header.svelte
@@ -13,9 +13,16 @@
 	let searchInput = '';
 
 	const debouncedSearch = debounce(async () => {
-		const response = await fetch(`/api/oba/search?query=${encodeURIComponent(searchInput)}`);
-		const results = await response.json();
-		dispatch('searchResults', results);
+		if (searchInput.length > 2) {
+			try {
+				const response = await fetch(`/api/oba/search?query=${encodeURIComponent(searchInput)}`);
+				const results = await response.json();
+				console.log('Search API response:', results);
+				dispatch('searchResults', results);
+			} catch (error) {
+				console.error('Error fetching search results:', error);
+			}
+		}
 	}, 300);
 
 	$: if (searchInput) debouncedSearch();

diff --git a/src/components/search/SearchResults.svelte b/src/components/search/SearchResults.svelte
@@ -1,28 +1,30 @@
 <script>
-	export let results;
+	export let searchResults = [];
 	import { createEventDispatcher } from 'svelte';
 
 	const dispatch = createEventDispatcher();
 
 	function handleStopClick(stop) {
-		dispatch('stopSelected', stop);
+		dispatch('stopSelected', { stop });
 	}
 
 	function handleRouteClick(route) {
-		alert(`TODO: show route ${route.id}`);
+		console.log('Route selected:', route);
 	}
+
+	$: console.log('SearchResults component received:', searchResults);
 </script>
 
 <div class="p-4">
 	<h2 class="mb-4 text-xl font-bold">Search Results</h2>
 
 	<h3 class="mb-2 text-lg font-semibold">Stops</h3>
-	{#if results.stopSearchResults.length > 0}
+	{#if searchResults.stopSearchResults && searchResults.stopSearchResults.list && searchResults.stopSearchResults.list.length > 0}
 		<ul>
-			{#each results.stopSearchResults as stop}
+			{#each searchResults.stopSearchResults.list as stop}
 				<li>
 					<button on:click={() => handleStopClick(stop)} class="text-blue-500 hover:underline">
-						{stop.name}
+						{stop.longName || stop.shortName || stop.name}
 					</button>
 				</li>
 			{/each}
@@ -32,12 +34,12 @@
 	{/if}
 
 	<h3 class="mt-4 mb-2 text-lg font-semibold">Routes</h3>
-	{#if results.routeSearchResults.length > 0}
+	{#if searchResults.routeSearchResults && searchResults.routeSearchResults.list && searchResults.routeSearchResults.list.length > 0}
 		<ul>
-			{#each results.routeSearchResults as route}
+			{#each searchResults.routeSearchResults.list as route}
 				<li>
 					<button on:click={() => handleRouteClick(route)} class="text-blue-500 hover:underline">
-						{route.shortName} - {route.longName}
+						{route.shortName || route.longName}
 					</button>
 				</li>
 			{/each}

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -11,7 +11,7 @@
 	let selectedRoute = null;
 	let showRouteMap = false;
 	let showAllStops = false;
-	let searchResults = null;
+	let searchResults = [];
 
 	function stopSelected(event) {
 		stop = event.detail.stop;
@@ -48,13 +48,20 @@
 		showAllStops = true;
 		showRouteMap = false;
 	}
-
 	function handleSearch(event) {
+		console.log('Raw search event:', event);
 		searchResults = event.detail;
+		console.log('Search results set:', searchResults);
+	}
+
+	function closeModal() {
+		searchResults = null;
 	}
 </script>
 
-<Header on:searchResults={handleSearch} />
+<Header 
+	on:searchResults={handleSearch}
+/>
 
 {#if stop}
 	<ModalPane on:close={closePane}>
@@ -68,9 +75,9 @@
 	</ModalPane>
 {/if}
 
-{#if searchResults}
-	<ModalPane on:close={closePane}>
-		<SearchResults results={searchResults} />
+{#if searchResults && searchResults.length > 0}
+	<ModalPane on:close={closeModal}>
+		<SearchResults {searchResults} />
 	</ModalPane>
 {/if}
 

diff --git a/src/routes/api/oba/search/+server.js b/src/routes/api/oba/search/+server.js
@@ -11,11 +11,17 @@ export async function GET({ url }) {
 	const searchInput = url.searchParams.get('query');
 
 	try {
-		const response = await oba.searchForRoute.retrieve({ input: searchInput });
-		return new Response(JSON.stringify(response), {
-			status: 200,
-			headers: { 'Content-Type': 'application/json' }
-		});
+		const [stopResponse, routeResponse] = await Promise.all([
+			oba.searchForRoute.retrieve({ input: searchInput }),
+			oba.searchForStop.retrieve({ input: searchInput })
+		]);
+
+		console.log("Data test", routeResponse.data, stopResponse.data);
+
+		return new Response(JSON.stringify({
+			routeSearchResults: routeResponse.data,
+			stopSearchResults: stopResponse.data,
+		  }), { headers: { 'Content-Type': 'application/json' } });
 	} catch (error) {
 		if (error.error.code == 404) {
 			return new Response(JSON.stringify({ error: 'No results found' }), {