Propagate filters during navigation

When navigating from the dashboard to the error detail page we now
propagate the active filters so users can navigate back and fort without
losing them.

Author: crbelaus

lib/error_tracker/web/live/dashboard.ex

@@ -7,24 +7,28 @@ defmodule ErrorTracker.Web.Live.Dashboard do
 
   alias ErrorTracker.Error
   alias ErrorTracker.Repo
+  alias ErrorTracker.Web.Search
 
   @per_page 10
 
   @impl Phoenix.LiveView
   def handle_params(params, uri, socket) do
-    {search, search_form} = search_terms(params)
-
     path = struct(URI, uri |> URI.parse() |> Map.take([:path, :query]))
 
     {:noreply,
      socket
-     |> assign(path: path, search: search, page: 1, search_form: search_form)
+     |> assign(
+       path: path,
+       search: Search.from_params(params),
+       page: 1,
+       search_form: Search.to_form(params)
+     )
      |> paginate_errors()}
   end
 
   @impl Phoenix.LiveView
   def handle_event("search", params, socket) do
-    {search, _search_form} = search_terms(params["search"] || %{})
+    search = Search.from_params(params["search"] || %{})
 
     path_w_filters = %URI{socket.assigns.path | query: URI.encode_query(search)}
 
@@ -109,15 +113,6 @@ defmodule ErrorTracker.Web.Live.Dashboard do
     )
   end
 
-  defp search_terms(params) do
-    data = %{}
-    types = %{reason: :string, source_line: :string, source_function: :string, status: :string}
-
-    changeset = Ecto.Changeset.cast({data, types}, params, Map.keys(types))
-
-    {Ecto.Changeset.apply_changes(changeset), to_form(changeset, as: :search)}
-  end
-
   defp filter(query, search) do
     Enum.reduce(search, query, &do_filter/2)
   end

lib/error_tracker/web/live/dashboard.html.heex

@@ -63,7 +63,7 @@
         class="border-b bg-gray-400/10 border-y border-gray-900 hover:bg-gray-800/60 last-of-type:border-b-0"
       >
         <td scope="row" class="px-4 py-4 font-medium text-white relative">
-          <.link navigate={error_path(@socket, error)} class="absolute inset-1">
+          <.link navigate={error_path(@socket, error, @search)} class="absolute inset-1">
             <span class="sr-only">(<%= sanitize_module(error.kind) %>) <%= error.reason %></span>
           </.link>
           <p class="whitespace-nowrap text-ellipsis overflow-hidden">

lib/error_tracker/web/live/show.ex

@@ -7,52 +7,55 @@ defmodule ErrorTracker.Web.Live.Show do
   alias ErrorTracker.Error
   alias ErrorTracker.Occurrence
   alias ErrorTracker.Repo
+  alias ErrorTracker.Web.Search
 
   @occurrences_to_navigate 50
 
   @impl Phoenix.LiveView
-  def mount(%{"id" => id}, _session, socket) do
+  def mount(params = %{"id" => id}, _session, socket) do
     error = Repo.get!(Error, id)
-    {:ok, assign(socket, error: error, app: Application.fetch_env!(:error_tracker, :otp_app))}
+
+    {:ok,
+     assign(socket,
+       error: error,
+       app: Application.fetch_env!(:error_tracker, :otp_app),
+       search: Search.from_params(params)
+     )}
   end
 
   @impl Phoenix.LiveView
-  def handle_params(%{"occurrence_id" => occurrence_id}, _uri, socket) do
+  def handle_params(params, _uri, socket) do
     occurrence =
-      socket.assigns.error
-      |> Ecto.assoc(:occurrences)
-      |> Repo.get!(occurrence_id)
-
-    socket =
-      socket
-      |> assign(:occurrence, occurrence)
-      |> load_related_occurrences()
-
-    {:noreply, socket}
-  end
-
-  def handle_params(_, _uri, socket) do
-    [occurrence] =
-      socket.assigns.error
-      |> Ecto.assoc(:occurrences)
-      |> order_by([o], desc: o.id)
-      |> limit(1)
-      |> Repo.all()
+      if occurrence_id = params["occurrence_id"] do
+        socket.assigns.error
+        |> Ecto.assoc(:occurrences)
+        |> Repo.get!(occurrence_id)
+      else
+        socket.assigns.error
+        |> Ecto.assoc(:occurrences)
+        |> order_by([o], desc: o.id)
+        |> limit(1)
+        |> Repo.one()
+      end
 
     socket =
       socket
-      |> assign(:occurrence, occurrence)
+      |> assign(occurrence: occurrence)
       |> load_related_occurrences()
 
     {:noreply, socket}
   end
 
   @impl Phoenix.LiveView
   def handle_event("occurrence_navigation", %{"occurrence_id" => id}, socket) do
-    {:noreply,
-     push_patch(socket,
-       to: occurrence_path(socket, %Occurrence{error_id: socket.assigns.error.id, id: id})
-     )}
+    occurrence_path =
+      occurrence_path(
+        socket,
+        %Occurrence{error_id: socket.assigns.error.id, id: id},
+        socket.assigns.search
+      )
+
+    {:noreply, push_patch(socket, to: occurrence_path)}
   end
 
   @impl Phoenix.LiveView

lib/error_tracker/web/live/show.html.heex

@@ -1,5 +1,5 @@
 <div class="my-6">
-  <.button type="link" href={dashboard_path(@socket)}>« Back to the dashboard</.button>
+  <.button type="link" href={dashboard_path(@socket, @search)}>« Back to the dashboard</.button>
 </div>
 
 <div id="header">

lib/error_tracker/web/router/routes.ex

@@ -8,21 +8,36 @@ defmodule ErrorTracker.Web.Router.Routes do
   @doc """
   Returns the dashboard path
   """
-  def dashboard_path(socket = %Socket{}) do
-    socket.private[:dashboard_path]
+  def dashboard_path(socket = %Socket{}, params \\ %{}) do
+    socket
+    |> dashboard_uri(params)
+    |> URI.to_string()
   end
 
   @doc """
   Returns the path to see the details of an error
   """
-  def error_path(socket = %Socket{}, %Error{id: id}) do
-    dashboard_path(socket) <> "/#{id}"
+  def error_path(socket = %Socket{}, %Error{id: id}, params \\ %{}) do
+    socket
+    |> dashboard_uri(params)
+    |> URI.append_path("/#{id}")
+    |> URI.to_string()
   end
 
   @doc """
   Returns the path to see the details of an occurrence
   """
-  def occurrence_path(socket = %Socket{}, %Occurrence{id: id, error_id: error_id}) do
-    dashboard_path(socket) <> "/#{error_id}/#{id}"
+  def occurrence_path(socket = %Socket{}, %Occurrence{id: id, error_id: error_id}, params \\ %{}) do
+    socket
+    |> dashboard_uri(params)
+    |> URI.append_path("/#{error_id}/#{id}")
+    |> URI.to_string()
+  end
+
+  defp dashboard_uri(socket = %Socket{}, params) do
+    %URI{
+      path: socket.private[:dashboard_path],
+      query: if(Enum.any?(params), do: URI.encode_query(params))
+    }
   end
 end

lib/error_tracker/web/search.ex

@@ -0,0 +1,24 @@
+defmodule ErrorTracker.Web.Search do
+  @moduledoc false
+
+  @types %{
+    reason: :string,
+    source_line: :string,
+    source_function: :string,
+    status: :string
+  }
+
+  defp changeset(params) do
+    Ecto.Changeset.cast({%{}, @types}, params, Map.keys(@types))
+  end
+
+  @spec from_params(map()) :: %{atom() => String.t()}
+  def from_params(params) do
+    params |> changeset() |> Ecto.Changeset.apply_changes()
+  end
+
+  @spec to_form(map()) :: Phoenix.HTML.Form.t()
+  def to_form(params) do
+    params |> changeset() |> Phoenix.Component.to_form(as: :search)
+  end
+end