feat: add search input field

Author: trueChazza

lib/media_server_web/components/nav_component.ex

@@ -2,4 +2,13 @@ defmodule MediaServerWeb.Components.NavComponent do
   use MediaServerWeb, :live_component
 
   alias Phoenix.LiveView.JS
+
+  @impl true
+  def handle_event("search", %{"search" => %{"query" => query}}, socket) do
+    {
+      :noreply,
+      socket
+      |> push_redirect(to: Routes.search_index_path(socket, :index, query: query))
+    }
+  end
 end

lib/media_server_web/components/nav_component.html.heex

@@ -66,4 +66,8 @@
         <%= live_redirect "Continues", to: Routes.continues_index_path(@socket, :index), class: "text-base block px-3 py-2 font-medium #{ @class }" %>
     </div>
   </div>
+
+    <.form let={f} for={:search} id="search" phx-target={@myself} phx-submit="search">
+        <%= text_input f, :query, placeholder: "Search", class: "mt-1 block w-full shadow-sm focus:ring-slate-500 focus:border-slate-500 sm:text-sm border-gray-300 rounded-md" %>
+    </.form>
 </nav>

lib/media_server_web/live/search_live/index.ex

@@ -0,0 +1,20 @@
+defmodule MediaServerWeb.SearchLive.Index do
+  use MediaServerWeb, :live_view
+
+  @impl true
+  def mount(_params, _session, socket) do
+    {
+      :ok,
+      socket
+      |> assign(page_title: "Search")
+    }
+  end
+
+  @impl true
+  def handle_params(_params, _url, socket) do
+    {
+      :noreply,
+      socket
+    }
+  end
+end

lib/media_server_web/live/search_live/index.html.heex

@@ -0,0 +1,2 @@
+
+<h2>Results</h2>

lib/media_server_web/router.ex

@@ -36,6 +36,8 @@ defmodule MediaServerWeb.Router do
       live "/episodes/:episode/watch", WatchEpisodeLive.Show, :show
     end
 
+    live "/search", SearchLive.Index, :index
+
     live "/continues", ContinuesLive.Index, :index
     live "/favourites", FavouritesLive.Index, :index
 

test/media_server_web/components/nav_component_test.exs

@@ -32,5 +32,25 @@ defmodule MediaServerWeb.Components.NavComponentTest do
       assert html =~ "Favourites"
       assert html =~ "Continues"
     end
+
+    test "it can query search", %{conn: conn, user: user} do
+      conn =
+        post(conn, Routes.user_session_path(conn, :create), %{
+          "user" => %{
+            "email" => user.email,
+            "password" => AccountsFixtures.valid_user_password()
+          }
+        })
+
+      {:ok, index_live, _html} = live(conn, Routes.components_index_path(conn, :index))
+
+      {:ok, _, html} =
+        index_live
+        |> form("#search", search: %{query: "Some query"})
+        |> render_submit()
+        |> follow_redirect(conn, Routes.search_index_path(conn, :index, query: "Some query"))
+
+      assert html =~ "Results"
+    end
   end
 end