From b654e65ee200acb807b1914158afb998be563ed1 Mon Sep 17 00:00:00 2001
From: Baraa Al-Masri <pub@mbaraa.com>
Date: Mon, 22 Apr 2024 10:21:03 +0300
Subject: [PATCH] chore(search): add navigatable search results

---
 components/pages/index.templ                  |  4 +-
 components/ui/.keep                           |  0
 components/ui/search/search.templ             | 66 +++++++++++++++++++
 components/ui/search/search_suggestion.templ  | 11 ++++
 components/ui/search/search_suggestions.templ | 19 ++++++
 components/ui/search_result.templ             | 13 ----
 components/ui/search_result_suggestions.templ | 14 ----
 handlers/search_suggestions.go                | 10 ++-
 8 files changed, 106 insertions(+), 31 deletions(-)
 create mode 100644 components/ui/.keep
 create mode 100644 components/ui/search/search.templ
 create mode 100644 components/ui/search/search_suggestion.templ
 create mode 100644 components/ui/search/search_suggestions.templ
 delete mode 100644 components/ui/search_result.templ
 delete mode 100644 components/ui/search_result_suggestions.templ

diff --git a/components/pages/index.templ b/components/pages/index.templ
index 8e4d692..74252bb 100644
--- a/components/pages/index.templ
+++ b/components/pages/index.templ
@@ -1,7 +1,7 @@
 package pages
 
 import "dankmuzikk/components/layouts"
-import "dankmuzikk/components/ui"
+import "dankmuzikk/components/ui/search"
 
 templ Index() {
 	@layouts.Default(main())
@@ -9,6 +9,6 @@ templ Index() {
 
 templ main() {
 	<main class="w-full h-screen">
-		@ui.SearchResultSugesttions()
+		@search.Search()
 	</main>
 }
diff --git a/components/ui/.keep b/components/ui/.keep
new file mode 100644
index 0000000..e69de29
diff --git a/components/ui/search/search.templ b/components/ui/search/search.templ
new file mode 100644
index 0000000..c540444
--- /dev/null
+++ b/components/ui/search/search.templ
@@ -0,0 +1,66 @@
+package search
+
+templ Search() {
+	<div class="">
+		<form
+			class="form-control"
+			hx-get="/api/search-suggession"
+			hx-swap="innerHTML"
+			hx-target="#search-results"
+			hx-trigger="keyup"
+		>
+			<input
+				id="search-input"
+				class="input input-bordered"
+				type="search"
+				name="query"
+				autofocus
+				autocomplete="off"
+			/>
+		</form>
+		<div id="search-results"></div>
+	</div>
+	//
+	<script lang="javascript">
+        const searchInputEl = document.getElementById("search-input");
+        let focusedSuggestionIndex = 0;
+
+        searchInputEl.addEventListener("keydown", (e) => {
+            if (e.key !== "ArrowDown") {
+                return;
+            }
+            moveToSuggestions()
+        });
+
+        function moveToSuggestions() {
+            let searchSuggestionsEl = document.getElementById("search-suggestion-"+focusedSuggestionIndex.toString());
+            // sometimes it needs a second to initialize.
+            if (!searchSuggestionsEl) {
+                searchSuggestionsEl = document.getElementById("search-suggestion-"+focusedSuggestionIndex.toString());
+            }
+            if (!searchSuggestionsEl) {
+                return;
+            }
+            const moveToNextSuggestion = (e) => {
+                const numSuggestions = (document.getElementById("search-suggestions").children ?? []).length
+                if (e.key === "ArrowDown") {
+                    focusedSuggestionIndex = (focusedSuggestionIndex+1) % numSuggestions;
+                    moveToSuggestions()
+                    searchSuggestionsEl.removeEventListener("keydown", moveToNextSuggestion);
+                }
+                if (e.key === "ArrowUp") {
+                    focusedSuggestionIndex--;
+                    if (focusedSuggestionIndex < 0) {
+                        focusedSuggestionIndex = 0;
+                        searchInputEl.focus();
+                        return;
+                    }
+                    moveToSuggestions()
+                    searchSuggestionsEl.removeEventListener("keydown", moveToNextSuggestion);
+                }
+            }
+            searchSuggestionsEl.focus();
+            searchSuggestionsEl.addEventListener("keydown", moveToNextSuggestion);
+        }
+    </script>
+}
diff --git a/components/ui/search/search_suggestion.templ b/components/ui/search/search_suggestion.templ
new file mode 100644
index 0000000..f82e566
--- /dev/null
+++ b/components/ui/search/search_suggestion.templ
@@ -0,0 +1,11 @@
+package search
+
+templ SearchSuggestion(suggestion, originalQuery string) {
+	<div>
+		if len(suggestion) <= len(originalQuery) {
+			<span><b>{ suggestion }</b></span>
+		} else {
+			<span><b>{ originalQuery }</b>{ suggestion[len(originalQuery):] }</span>
+		}
+	</div>
+}
diff --git a/components/ui/search/search_suggestions.templ b/components/ui/search/search_suggestions.templ
new file mode 100644
index 0000000..e280043
--- /dev/null
+++ b/components/ui/search/search_suggestions.templ
@@ -0,0 +1,19 @@
+package search
+
+import "fmt"
+
+templ SearchSuggestions(suggestions []string, originalQuery string) {
+	<ul id="search-suggestions" class="grid grid-cols-1 w-full">
+		for i, suggestion := range suggestions {
+			<li class="focus-within:bg-base-300">
+				<a href="https://google.com" class="w-full" id={ fmt.Sprintf("search-suggestion-%d", i) }>
+					if len(suggestion) <= len(originalQuery) {
+						<span><b>{ suggestion }</b></span>
+					} else {
+						<span><b>{ originalQuery }</b>{ suggestion[len(originalQuery):] }</span>
+					}
+				</a>
+			</li>
+		}
+	</ul>
+}
diff --git a/components/ui/search_result.templ b/components/ui/search_result.templ
deleted file mode 100644
index 88e511f..0000000
--- a/components/ui/search_result.templ
+++ /dev/null
@@ -1,13 +0,0 @@
-package ui
-
-import "dankmuzikk/services/youtube"
-
-type TSearchResult = youtube.SearchResult
-
-templ SearchResult(result TSearchResult) {
-	<div>
-		{ result.Title }
-		{ result.Url }
-		<img src={ result.ThumbnailUrl } alt={ result.Title + " Thumbnail" }/>
-	</div>
-}
diff --git a/components/ui/search_result_suggestions.templ b/components/ui/search_result_suggestions.templ
deleted file mode 100644
index 8eb721e..0000000
--- a/components/ui/search_result_suggestions.templ
+++ /dev/null
@@ -1,14 +0,0 @@
-package ui
-
-templ SearchResultSugesttions() {
-	<form
-		class="form-control"
-		hx-get="/api/search-suggession"
-		hx-swap="innerHTML"
-		hx-target="#search-results"
-		hx-trigger="keyup"
-	>
-		<input class="input input-bordered" type="search" name="query"/>
-	</form>
-	<div id="search-results"></div>
-}
diff --git a/handlers/search_suggestions.go b/handlers/search_suggestions.go
index 7f45c58..c8cd07a 100644
--- a/handlers/search_suggestions.go
+++ b/handlers/search_suggestions.go
@@ -1,8 +1,9 @@
 package handlers
 
 import (
+	"context"
+	"dankmuzikk/components/ui/search"
 	"dankmuzikk/services/youtube"
-	"encoding/json"
 	"net/http"
 )
 
@@ -14,6 +15,11 @@ func HandleSearchSugessions(hand *http.ServeMux) {
 			w.WriteHeader(http.StatusBadRequest)
 			return
 		}
-		_ = json.NewEncoder(w).Encode(suggessions)
+
+		err = search.SearchSuggestions(suggessions, q).Render(context.Background(), w)
+		if err != nil {
+			w.WriteHeader(http.StatusInternalServerError)
+			return
+		}
 	})
 }