From 4626ff8a298f1869168c0e5c617259bbaaa28a1a Mon Sep 17 00:00:00 2001
From: KKlochko <KKlochko@protonmail.com>
Date: Fri, 4 Apr 2025 11:20:06 +0300
Subject: [PATCH] Update the search component to send event for updating the
 query.

---
 .../components/my_components/author_search.ex          |  4 ++--
 .../components/my_components/book_search.ex            |  6 +++---
 .../live/author_live/index.ex                          |  9 +++++++++
 .../live/book_live/index.ex                            | 10 ++++++++++
 4 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/lib/decentralised_book_index_web/components/my_components/author_search.ex b/lib/decentralised_book_index_web/components/my_components/author_search.ex
index 7bddbb6..40b6ebc 100644
--- a/lib/decentralised_book_index_web/components/my_components/author_search.ex
+++ b/lib/decentralised_book_index_web/components/my_components/author_search.ex
@@ -10,8 +10,8 @@ defmodule DecentralisedBookIndexWeb.Components.MyComponents.AuthorSearch do
     ~H"""
     <div class="relative bg-white shadow-md dark:bg-gray-800 sm:rounded-lg">
       <div class="flex flex-col items-center justify-between p-4 space-y-3 md:flex-row md:space-y-0 md:space-x-4">
-        <div class="w-full md:w-1/2">
-          <form class="flex items-center">
+        <div class="w-full grow">
+          <form class="flex items-center" phx-submit="search">
             <label for="simple-search" class="sr-only">Search</label>
             <div class="relative w-full">
               <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
diff --git a/lib/decentralised_book_index_web/components/my_components/book_search.ex b/lib/decentralised_book_index_web/components/my_components/book_search.ex
index 122e250..e80a158 100644
--- a/lib/decentralised_book_index_web/components/my_components/book_search.ex
+++ b/lib/decentralised_book_index_web/components/my_components/book_search.ex
@@ -12,8 +12,8 @@ defmodule DecentralisedBookIndexWeb.Components.MyComponents.BookSearch do
     ~H"""
     <div class="relative bg-white shadow-md dark:bg-gray-800 sm:rounded-lg">
       <div class="flex flex-col items-center justify-between p-4 space-y-3 md:flex-row md:space-y-0 md:space-x-4">
-        <div class="w-full md:w-1/2">
-          <form class="flex items-center">
+        <div class="w-full grow">
+          <form class="flex items-center" phx-submit="search">
             <label for="simple-search" class="sr-only">Search</label>
             <div class="relative w-full">
               <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
@@ -61,7 +61,7 @@ defmodule DecentralisedBookIndexWeb.Components.MyComponents.BookSearch do
             </svg>
         </button>
         <!-- Dropdown menu -->
-        <div id="dropdownSearchBook" class="z-10 hidden text-base list-none bg-white divide-y divide-gray-100 rounded-lg shadow-sm w-44 dark:bg-gray-700">
+        <div id="dropdownSearchBook" class="z-10 hidden text-base list-none bg-white rounded-lg shadow-sm w-64 dark:bg-gray-700 p-2 flex flex-col gap-2">
           <div class="flex items-center w-full space-x-3 md:w-auto">
             <form phx-change="change-search-mode">
             <select name="search_mode" id="search_mode" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 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">
diff --git a/lib/decentralised_book_index_web/live/author_live/index.ex b/lib/decentralised_book_index_web/live/author_live/index.ex
index 25b62d3..ef98ec0 100644
--- a/lib/decentralised_book_index_web/live/author_live/index.ex
+++ b/lib/decentralised_book_index_web/live/author_live/index.ex
@@ -186,4 +186,13 @@ defmodule DecentralisedBookIndexWeb.AuthorLive.Index do
 
     {:noreply, push_patch(socket, to: ~p"/authors?#{params}")}
   end
+
+  @impl true
+  def handle_event("search", %{"query" => query}, socket) do
+    params =
+      socket.assigns.params
+      |> Map.put("query", query)
+
+    {:noreply, push_patch(socket, to: ~p"/authors?#{params}")}
+  end
 end
diff --git a/lib/decentralised_book_index_web/live/book_live/index.ex b/lib/decentralised_book_index_web/live/book_live/index.ex
index 4983f16..16474bd 100644
--- a/lib/decentralised_book_index_web/live/book_live/index.ex
+++ b/lib/decentralised_book_index_web/live/book_live/index.ex
@@ -250,4 +250,14 @@ defmodule DecentralisedBookIndexWeb.BookLive.Index do
         )
     end
   end
+
+  @impl true
+  def handle_event("search", %{"query" => query}, socket) do
+    params =
+      socket.assigns.params
+      |> Map.put("query", query)
+
+    {:noreply, push_patch(socket, to: ~p"/books?#{params}")}
+  end
+
 end