LiveView push_patch append to params

Phoenix Forum Questions / Help
#1

I’m creating a search form with filters and want both the query and the filters to change the URL. The filters and query can be set separately or together, and handle_params can already deal with either being empty.

What I’m doing is triggering a push_patch on events (filter click, form submit, clear search). Something like this:

  def handle_event("update_filter", %{"filter" => filter}, socket) do
    {:noreply,
     push_patch(socket,
       to: Routes.live_path(socket, Index, query: socket.assigns.query, filter: filter)
     )}
  end

  def handle_event("search", %{"query" => query}, socket) do
    {:noreply,
     push_patch(socket,
       to: Routes.live_path(socket, Index, query: query, filter: socket.assigns.filter)
     )}
  end

This works, but my “problem” is that I have to set all the url params every time I call push_patch. Is there any way to say append this param to the current path? Alternatively, is there any other design pattern I should be following to set this up?

#2

I set up events to do exactly what you’re doing but with a different problem, but I wonder, does it make more sense to use live_patch links from your template with the query params in tact and then use handle_params at the LV level to grab those params?

This means the event handler would go away and having to push_patch from the LV itself since live_patch already pushes it to the URL.

Just asking because the above applies to your example too. I wonder what folks think about this. What would be the way to do this?

What’s interesting is the --live generator from Phoenix 1.5 includes making a search form using the event style but in their case, they are doing an external redirect so maybe the use case is different.

#3

The reason I’m not using live_patch is because both filter and search are independent generic components and I don’t want to have to pass all the assigns to both. Instead, whenever they are “used”, they send the parent an event saying “Hey, someone searched for X” or “Hey, someone filtered by Y”.

If I was able to use live_patch to add to the existing URL, instead of replacing it, then I would be able to use it generically.

2 Likes
#4

Would you mind gisting the complete code for those components and how this parent event is sent?

#5

How to try it. I tried generating but no search feature got generated.

mix phx.gen.live Masters Item items item

No search thing got generated.

#6

I’m using Surface, but you can do the same with regular LiveView.

#7

I have the same problem. Desperate for a solution… Cleaner push_patch and handle_params?

#8

Here is how I solved it in my app:

  1. I store the params in handle_params as part of the assigns:

     def handle_params(params, url, socket) do
   # You could store the params as is but I like to store
   # only what has been parsed/validated.
   params = parse_params(params)
   {:noreply, assign(socket, :params, params)
 end

  2. Create a helper called self_path:

     def self_path(socket, action, extra) do
   Routes.live_path(socket, __MODULE__, action, Enum.into(extra, socket.assign.params))
 end

  3. Now I do:

     push_path(socket, to: self_path(socket, :search, %{"sort_by" => "foo"}))
5 Likes
#9

for whoever that comes across this thread, @josevalim’s answer will not apply if you are using actions in your router declarations, as the route helper gets renamed to match the controller, and also results in different helper arities for different helpers.

Until the day comes where where we can use Phoenix.Controller helpers like current_path/2 to merge in params in liveview, you’ll have to update the URI manually.

You will need to modify step 2 of @josevalim’s answer to something like this:

def self_path(socket, extra) do
      # explained in notes 1
  uri = URI.parse(socket.assigns.uri)

    current_query_params =
      (uri.query || "")
      |> URI.decode_query()

    # explained in notes 2
    to_merge = Enum.into(extra, %{}) |> to_string_map()

    new_query_params =
      current_query_params
      |> Map.merge(to_merge)
      # explained in notes 3
      |> Enum.filter(fn {_k, v} -> v != "" end)

    encoded_params = URI.encode_query(new_query_params)

    %URI{
      uri
      | authority: nil,
        host: nil,
        scheme: nil,
        port: nil,
      # explained in notes 4
        query: if(encoded_params == "", do: nil, else: encoded_params)
    }
    |> URI.to_string()

end

Note that:

  1. You will have to store the uri in assigns.
  2. You will also need to convert the extra arg into a string map to correctly merge into the parsed query params, which will be string keys. This is represented by a utility function to_string_map/1 which simply does a list comprehension to convert the atom key to a string.
  3. You will need to filter out empty string values if extra contains a nil value.
  4. You will need to check if the encoded params is an empty string, and if so, set the :query key of the new URI to nil. This new %URI{} struct needs all keys except :path to be replaced with nil.
1 Like
#10

FWIW, you can also directly use the URI rather than calling the Routes helpers. The above code does this as well, but I wanted to provide a more concise version if you don’t need as many bells and whistles.

  def handle_params(_params, uri, socket) do
    {:noreply, assign(socket, :uri, URI.parse(uri))}
  end

  def handle_event("prev_page", _, socket = %{assigns: %{pager: %{page: page}, uri: uri}}) do
    current_params = URI.decode_query(uri.query || "")
    new_params = Map.put(current_params, "page", page - 1)
    to = uri.path <> "?" <> URI.encode_query(new_params)

    {:noreply, push_patch(socket, to: to)}
  end
2 Likes

Our Sponsors

© Copyright Elixir Forum | Terms | Privacy & Cookies

Elixir Forum