orsinium

orsinium

Preserve params when push_patch from handle_event

I have 2 live components on the same page, one for pagination and another for search. Both write their state into URL query params which are later handled by the live controller.

Pagination component:

def handle_event("pagination", %{"page" => _} = params, socket) do
  path = ITJWeb.Router.Helpers.live_path(socket, ITJWeb.OffersLive, params)
  socket = push_patch(socket, to: path)
  {:noreply, socket}
end

Search component:

def handle_event("offer_search", %{"search" => search}, socket) do
  path = ITJWeb.Router.Helpers.live_path(socket, ITJWeb.OffersLive, search)
  socket = push_patch(socket, to: path)
  {:noreply, socket}
end

Controller:

def mount(params, _session, socket) do
  {:noreply, socket} = handle_params(params, nil, socket)
  {:ok, socket}
end

def handle_params(params, _uri, socket) do
  ...
  {:noreply, socket}
end

The issue is that each component resets all existing query params. In other words, when you change the page, the search gets reset. There is a live demo: itj.orsinium.dev/offers.

The issue is that live_path requires all query params to be explicitly passed as a third argument but the existing query params (if I understand correctly) are not passed into handle_event.

  1. Is there a way to get current URL query params inside handle_event?
  2. Is there a way to do live_path + push_patch with preserving the current URL query params?
  3. Should I approach the whole problem differently? Is handle_event of a live component a good place to modify URL or should I delegate it to the controller somehow?

Marked As Solved

Sleepful

Sleepful

I did hit this, so now just use:

<.simple_form for={@form} action={~p"/"} >

instead of

<.form for={@form} action={Routes.home_path(@conn, :action, params)} >

and the :action from verified_route is whatever you defined in the router for that path

Also Liked

cmo

cmo

That’s certainly not the case. I have a LiveView that I set myriad URL query params on and they don’t get overridden. Though I keep the params in assigns so maybe I’m telling a fib :slight_smile:

When you’re using the URL query params, you use handle_params to handle assigning anything that is associated with them. You don’t assign or update them elsewhere (i.e. in handle_event or handle_info). If you want to change them, you use push_patch.

You might find Sophie’s article on the topic useful, though she doesn’t seem to use push_patch.

  def self_path(socket, extra \\ %{}) do
    Routes.live_path(socket, __MODULE__, Enum.into(extra, socket.assigns.params))
  end

  defp patch(socket, extra) do
    push_patch(socket, to: self_path(socket, extra))
  end

  def handle_params(params, _uri, socket) do
    {
      :noreply,
      socket
      |> assign_params(params)
      |> assign_page(params)
      |> assign_search(params)
      |> assign_results()
    }
  end

  defp assign_params(socket, params) do
    assign(socket, :params, Map.take(params, ["page", "search"]))
  end

  defp assign_page(socket, %{"page" => page}) do
    assign(socket, :page, String.to_integer(page))
  end

  defp assign_page(socket, _params) do
    assign(socket, :page, 1)
  end

  def handle_event("submit", %{"search" => search_string}, socket) do
    {:noreply, patch(socket, search: search_string, page: 1)}
  end

  def handle_event("goto_page", %{"number" => number}, %{assigns: %{page: page}} = socket) do
    number = String.to_integer(number)

    if number == page do
      {:noreply, socket}
    else
      {:noreply, patch(socket, page: number)}
    end
  end
cmo

cmo

Or writing them as Function Components. Then you handle the event in the liveview. None of your components are managing their own state so could be Function Components.

orsinium

orsinium

I see that people resurrected this thread with the release of Phoenix 1.7. So, probably, I should provide a final solution to it.

What I ended up doing is explicitly re-add search params to the new path when updating the page number:

And I do not re-add the page number when the search is updated because I want to get the user to the first page when they change the parameters anyway.

So, this solution is a bit messy (because the pagination component must know about all other components that change the page parameters, which is a good example of bad coupling) and you should avoid doing that in big projects. That was good enough for a small pet project, though.

People here (@cmo and @Sleepful) say that in Phoenix 1.7 verified routes should preserve GET parameters. I can’t check it right now (the project is still on Phoenix 1.6), so I’ll mark it as the answer. Feel free to drop a message in the thread if it doesn’t work for you.

Where Next?

Popular in Questions Top

siddhant3030
Hi, I have to write a raw query for one of my project. But till now I have used ecto queries and don’t have much experience writing raw ...
New
Darmani72
If I have a post route which an argument: post /my_post_route/:my_param1, MyController.my_post_handler How would get the post params ...
New
Fl4m3Ph03n1x
About me? ( if you have nothing better to do than reading about some random guy in the internet :stuck_out_tongue: ) Hello all, this is ...
New
New
pmjoe
I have a relationship of love and hate with Elixir. Lots of things are just absolutely right, but there are some things that are kind of ...
New
vonH
When I run the Plug and I recompile I wind up having to use Ctrl C to quit iex and start again. Witht the help of rlwrap I can use the cu...
New
Lily
In templates/appointment/index.html.eex: &lt;%= for appointment &lt;- @appointments do %&gt; &lt;tr&gt; &lt;td&gt;&lt;%= appoi...
New
ycv005
I have followed this StackOverflow post to install the specific version of Erlang. And When I am running mix ecto.setup then getting fol...
New
bsollish-terakeet
Credo is smart enough to check for (something like) this: assert length(the_list) == 0 with this response: Checking if an enum is empt...
New
sergio_101
I am VERY much an elixir newbie. I have taken one elixir course and one phoenix course on Udemy. During that course, I saw the instructor...
New

Other popular topics Top

greenz1
I have a phoenix application from which a user can download multiple(5-6) files of size 1MB. I couldn’t find anything related to sending ...
New
electic
Hi, I am new to Elixir. I am trying to use the DateTime component to insert a date into MySQL however the there seems to be no way to fo...
New
jononomo
I am trying to figure out how Mix knows whether the environment is test, dev, or prod -- where is this set? Thanks.
New
alice
Hey, Just curious what are the main benefits of Elixir compared to Clojure? When is Elixir more useful than Clojure and vice versa? Th...
New
jerry
Good day to you all. I have been struggling to get a query involving like and ilike to work. Can anyone assist me on this, please? pro...
New
chrismccord
This release brings a number of exciting features, including integration with the new Phoenix LiveDashboard and Phoenix LiveView. There h...
New
Qqwy
Original source of discussion: This topic on the Pragmatic Programmers' Functional Web Development with Elixir, OTP, and Phoenix forum. ...
New
AstonJ
Please see the new poll here: Which code editor or IDE do you use? (Poll) (2022 Edition) It’s been a while since we first asked this, I...
208 31107 143
New
romenigld
I am trying to run a deploy with docker and I successfully runned with this command: docker build -t romenigld/blog-prod . but when I t...
New
svb
Hi! Currently I want to submit a form by pressing the Enter key. However, since my input field is of type “textarea” this is just adds a...
New

We're in Beta

About us Mission Statement