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?
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.
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.
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
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
Now I do:
push_path(socket, to: self_path(socket, :search, %{"sort_by" => "foo"}))
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:
You will have to store the uri in assigns.
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.
You will need to filter out empty string values if extra contains a nil value.
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.
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
Worth adding that instead of URI.decode_query/1 and URI.encode_query/1, you might want to use more robust Plug.Conn.Query.decode/1 and Plug.Conn.Query.encode/1, which do better encoding/decoding of lists in URL (e.g. ?ids[]=1&ids[]=2).
100% right! Let me post the latest code I had that worked great for me:
def uri_path(uri, params) do
params = Stringify.call(params) # utility function to stringify this map because Query params will be string only
query =
Plug.Conn.Query.decode(uri.query || "")
|> Map.merge(params)
|> Enum.reject(fn {_k, v} -> v == nil or v == "" end)
|> Map.new()
new_uri = Map.put(uri, :query, Plug.Conn.Query.encode(query))
%{new_uri | scheme: nil, authority: nil, host: nil} |> URI.to_string()
end
I put this in my app_web.ex file so that I could use it everywhere. Maybe that’s bad practice but it was common enough to warrant it.
as of LiveView 18.18 this works well within a LiveView:
defp self_path(socket, action, extra \\ %{}) do
# find the name of the Routes function with:
# `mix phx.routes`
Routes.word_index_path(socket, action, extra)
end
def handle_event("some_event", params, socket) do
url = self_path(socket, :index, %{"sort_by" => "foo"})
socket = push_patch(socket, to: url)
# updates URL to:
# path?sort_by=foo
{:noreply, socket}
end
