Upgraded to 1.7 live view 0.18, I’m getting odd behavior with put_flash

michelson · March 12, 2023, 4:09pm

Hi @josevalim thanks for your reply.

the code is available here:

for instance, the component that works is this:

rauversion/rauversion-phx/blob/main/lib/rauversion_web/live/events_live/components/forms/scheduling_form_component.ex

defmodule RauversionWeb.Live.EventsLive.Components.SchedulingFormComponent do
  use RauversionWeb, :live_component

  alias Rauversion.Events

  @impl true
  def handle_event("add-feature", _, socket) do
    socket =
      update(socket, :changeset, fn changeset ->
        changeset
        |> Ecto.Changeset.apply_changes()
        |> Ecto.Changeset.change()
        |> EctoNestedChangeset.append_at(:scheduling_settings, %{})
      end)

    {:noreply, socket}
  end

  @impl true
  def handle_event("add-feature-scheduling", %{"id" => index}, socket) do

This file has been truncated. show original

and the component that doesn’t is this:

github.com

rauversion/rauversion-phx/blob/main/lib/rauversion_web/live/events_live/components/forms/attendees_component.ex

defmodule RauversionWeb.Live.EventsLive.Components.AttendeesComponent do
  use RauversionWeb, :live_component
  alias Rauversion.Events.InviteTicketForm
  alias Rauversion.Accounts
  alias Rauversion.Accounts.User

  @impl true
  def update(assigns, socket) do
    {:ok,
     socket
     |> assign(assigns)
     |> assign(:attendees, list_posts(assigns.event))
     |> assign(:open_modal, false)}
  end

  defp list_posts(event) do
    Rauversion.Events.list_tickets(event)
    # Events.list_event() |> Repo.preload(user: :avatar_blob)
  end

This file has been truncated. show original

I will do some more debugging and check the logs to see if it is doing more redirects.

michelson · March 12, 2023, 4:30pm

This is the result of debug from the save event:

The reply:

    {
      :noreply,
      socket
      |> assign(:open_modal, false)
      |> assign(:status, :success)
      |> put_flash(:info, "Event updated successfully")
      |> push_patch(to: "/events/#{socket.assigns.event.slug}/edit/attendees?tot=1")
    }

The log

[debug] Replied in 237µs
[debug] HANDLE EVENT "save" in RauversionWeb.EventsLive.New  Component: RauversionWeb.Live.EventsLive.Components.AttendeesComponent
  Parameters: %{"invite_ticket_form" => %{"email" => "jojioij", "message" => "oijoij", "ticket_id" => "1"}}
[debug] Replied in 516µs
[debug] HANDLE PARAMS in RauversionWeb.EventsLive.New
  Parameters: %{"slug" => "oijojoij", "tot" => "1"}
[debug] QUERY OK source="events" db=34.2ms idle=1830.0ms
↳ Rauversion.Events.find_event_by_user/2, at: lib/rauversion/events.ex:402
[debug] QUERY OK source="event_host" db=6.8ms idle=1865.0ms
↳ Rauversion.Events.find_event_by_user/2, at: lib/rauversion/events.ex:403
[debug] QUERY OK source="event_tickets" db=6.9ms idle=1864.9m
↳ Rauversion.Events.find_event_by_user/2, at: lib/rauversion/events.ex:403
[debug] Replied in 42ms

josevalim · March 12, 2023, 5:32pm

Thanks @michelson, can you please provide steps to reproduce too from scratch? Like:

git clone
run this task to setup
mix phx.server
access this page and press button xyz

Then I should be able to take a look at it tomorrow!

michelson · March 12, 2023, 6:11pm

Hey Jose, thanks for taking the time to look into this.

this are the steps:

Install dependencies with mix deps.get
rename .env.example to .env and add your variable configurations
Create and migrate your database with mix ecto.setup
Compile assets cd assets && yarn install & cd ..
Start Phoenix endpoint with mix phx.server or inside IEx with iex -S mix phx.server

Then sign up and enter your account, optionally, you can add an admin role to your user on some DB changing the type to “admin” or “artist” or by doing the following on iex.

user = Rauversion.Accounts.get_user!(1)   
Rauversion.Accounts.update_user_type(user, "admin")

Then, to test the forms, you will need to go to /events/mine and create a new event, when the new event is created there will be a menu on the side

The “Programar /Scheduling” form is that the one that it works
Them “Assistentes/Attendees” form is one that has issues on the flash message.

you can change the default language by visiting any URL with ?locale=en

josevalim · March 12, 2023, 9:43pm

For the modal that does not work, what happens is that when you submit the form, it crashes the component and the live view, because you are expecting a “ticket_id” parameter but none is submitted. You should see reports that the LiveView crashed both in your browser console (run liveSocket.enableDebug() once) and your app console.

If I change the handle_event to this:

  def handle_event("save", %{"invite_ticket_form" => _}, socket) do
      {:noreply,
       socket
       |> assign(:open_modal, false)
       |> assign(:status, :success)
       |> put_flash(:info, gettext("Invitation sent"))
       |> push_redirect(to: "/events/#{socket.assigns.event.slug}/edit/attendees")}
  end

Then it works for me (in that the flash shows).

michelson · March 12, 2023, 10:20pm

@josevalim , I’m sorry I forgot to mention. The branch to test this is “labels” in that branch is where I find the errors; I’ve tried push_patch, push_redirect & push_navigate. The branch has the latest live view, phoenix HTML.

The exact code that you pasted here does not work on that branch. I have made a screen recording of this:

{:phoenix_html, “3.3.0”},
{:phoenix_live_view, “~> 0.18.4”},

josevalim · March 13, 2023, 8:08am

Can you please confirm that you have also updated the LiveView JS client from npm when you updated the server to v0.18? Otherwise they may indeed not work if they are mismatched.

michelson · March 13, 2023, 3:43pm

oh! you are right

I’ve upgraded this:

-    "phoenix": "^1.6.10",
-    "phoenix_html": "^3.2.0",
-    "phoenix_live_view": "^0.17.10",
+    "phoenix": "^1.7.1",
+    "phoenix_html": "^3.3.1",
+    "phoenix_live_view": "^0.18.17",

And it seems to be working now!

thank you all who help me with this, thank you thank you than you.