LiveView write to the session while being mounted

johmue

Two questions in short version

The :router option of live_render/3 has disappeared from the docs in 0.17.6. In 0.17.10 it still seems to works in the unit tests. In the browser I still get a :not_mounted_at_router issue. How can I pass params to mount/3 when using live_render/3?
How can I pass params to mount/3 from live/2 from LiveViewTest?

Long version

I want to handle requests like /item/<id>?foo=bar in a way that %{"foo" => "bar"} is put to the session like put_session(conn, "foo", "bar") and id is to be passed to a LiveView’s mount/3 callback in the params argument.

That works following the hint from this article and using the :router option of live_render/3.

So I route the GET /item/<id> requests to a function

def show(conn, %{"foo" => bar} = _params) do
  conn
  |> put_session(conn, "foo", bar)
  |> live_render(conn, MyLiveView, router: MyAppWeb.Router)
end

This works with phoenix_live_view 0.17.10 even though the :router option of live_render/3 has disappeared from the docs. So the question if it will work in the future and if not how to do it then.

Second question is how to call this LiveView from a test. If the LiveView is not mounted in the Router like live "/item/:id/", MyLiveView the call live(conn, "/item/1234") does not pass the id to MyLiveView’s mount/3.

What are my options? Maybe a completely different approach?

2 comments

/phoenix #session #liveview #plug-router

0 1582 2

2022-06-17 13:37:22 UTC

Showing Posts 1 to 2

Show Best Posts
Show All (oldest first)
Show All (newest first)

andreaseriksson

I have another approach. For me, there is a scenarion when people leave the site and go to Stripe. So, I want to store the return to - path in a session so I can redirect them correct.

I basically use a JS-hook for this.

In the template;

<span id={@id} phx-hook="StoreReturnTo" data-return-to={@encoded_return_to}></span>

Note that I encode the param so its not visible for the user:

Phoenix.Token.sign(LiveSaasKitWeb.Endpoint, "return_to", return_to)

ANd then a hook:

export const StoreReturnTo = {
  mounted() {
    const elm = this.el
    const path = elm.dataset.returnTo

    if (path) fetch(`/store_return_to?p=${path}`)
  },
}

And that posts (actually GET) to a normal controller that decodes the path and add it to the session.

But, to be fair, I havent looked into if there is a better way to do this

Post #1

johmue

As ever so often. A few minutes after posting the question I found the natural solution for my use case. So just for reference to future readers, this is how I finally solved it:

The endpoint /item/<id> is routed directly into the LiveView, so detour through the show function with live_render.
The foo parameter is caught by a Plug that sits at the end of the browser pipeline. The code of the Plug module looks like this:

defmodule MyAppWeb.Plugs.Foo do
  use MyAppWeb, :controller
  import Plug.Conn

  def init(default), do: default

  def call(%Plug.Conn{params: %{"foo" => foo}} = conn, _default) do
    put_session(conn, "foo", foo)
    |> assign(:foo, foo)
  end

  def call(conn, default) do
    foo = get_session(conn, "foo") || default
    put_session(conn, "foo", foo)
    |> assign(:foo, foo)
  end
end

So if there is a ?foo=bar in the request, it is put to the session and assigned to the assigns of the conn. If not the foo parameter is either fetched from the session or set to default.

That is doing all I need.

Post #2

— All posts loaded —