From dd72f8d489d30152030afd84e7c881a36913a488 Mon Sep 17 00:00:00 2001
From: KKlochko <KKlochko@protonmail.com>
Date: Sun, 14 Apr 2024 21:36:36 +0300
Subject: [PATCH] Update the index page to save the search in the query
 parameters.

---
 src/main/blog/handlers.cljs                            | 6 ++++--
 views/index.hbs                                        | 2 ++
 views/partials/search_articles.hbs                     | 6 +++---
 views/partials/search_articles_update_param_script.hbs | 9 +++++++++
 4 files changed, 18 insertions(+), 5 deletions(-)
 create mode 100644 views/partials/search_articles_update_param_script.hbs

diff --git a/src/main/blog/handlers.cljs b/src/main/blog/handlers.cljs
index c28ef03..91ff33e 100644
--- a/src/main/blog/handlers.cljs
+++ b/src/main/blog/handlers.cljs
@@ -7,10 +7,12 @@
   [client]
   (fn [req res]
     (let [channel (chan)
-          id (.-id (.-params req))]
+          search (.-search (.-query req))]
       (go
         (try
-          (let [articles (<! (db/get-articles-briefly client channel))]
+          (let [articles (if (nil? search)
+                           (<! (db/get-articles-briefly client channel))
+                           (<! (db/search-articles-briefly client search channel)))]
             (res/status 200)
             (.render res "index"
                      (-> {:articles articles
diff --git a/views/index.hbs b/views/index.hbs
index c81c10f..eec2d07 100644
--- a/views/index.hbs
+++ b/views/index.hbs
@@ -5,3 +5,5 @@
 
   {{> articles_briefly }}
 </main>
+
+{{> search_articles_update_param_script }}
diff --git a/views/partials/search_articles.hbs b/views/partials/search_articles.hbs
index 469e1c1..9a83a39 100644
--- a/views/partials/search_articles.hbs
+++ b/views/partials/search_articles.hbs
@@ -1,4 +1,4 @@
-<form class="max-w-md mx-auto" method="POST">
+<div class="max-w-md mx-auto">
     <label for="default-search" class="mb-2 text-sm font-medium text-gray-900 sr-only dark:text-white">Search</label>
     <div class="relative">
         <div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
@@ -14,6 +14,6 @@
                hx-target="#articles"
                hx-swap="outerHTML"
                class="block w-full p-4 ps-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-               placeholder="Search articles by title or content" required />
+               placeholder="Search articles by title or content" />
     </div>
-</form>
+</div>
diff --git a/views/partials/search_articles_update_param_script.hbs b/views/partials/search_articles_update_param_script.hbs
new file mode 100644
index 0000000..85f2215
--- /dev/null
+++ b/views/partials/search_articles_update_param_script.hbs
@@ -0,0 +1,9 @@
+<script>
+  function updateURLSearchParameter() {
+    let search = htmx.find('#search')
+    let qp = new URLSearchParams();
+    qp.set('search', search.value);
+    history.replaceState(null, null, "?"+qp.toString());
+  }
+  document.querySelector('#search').addEventListener('input', updateURLSearchParameter);
+</script>