sjolicoeur

sjolicoeur

Hello,

full disclosure I am still very new to elixir and phoenix and liveview.

I am trying to transform a liveview controller and it’s. *.leex template into a component. The controller was auto generated with mix phx.gen.live and I am trying to turn the :show controller into a re-usable component that can be embedded in other views.

The first of which was to insert it into page_live.html.leex which according to the docs should work when

<%# live_render(@socket, ChatDemo.ChatRoomLive.Show, id: "ChatWindow", session: %{"id" => "07593216-b033-40e1-8c03-f32aa7375dec"} ) %>

But I get a no match of right hand side value: :not_mounted_at_router and somehow the debug page doesn’t show the expected content for session. I know it does require an :id in the params.

the controller works as a standalone, but not when rendered in another *.leex, is it possible to write a mount function that will work with live_render ? What am I doing wrong? or miss understanding?

the router entry:

  scope "/", DemoWeb do
    pipe_through [:browser, :admin_view]
    live "/message/:id", MessageLive.Show, :show
    live "/message/:id/show/edit", MessageLive.Show, :edit
  end

the liveview render call

<%= live_render(@socket, DemoWeb.ChatRoomLive.Show, id: "ChatWindow", session:  %{"id" => "07593216-b033-40e1-8c03-f32aa7375dec"} ) %>

the code seems to fail here

@impl true
  def mount(params, session, socket) do
    %{"id" => id} = params # FAILS HERE, but session only contains the csrf token
    if connected?(socket), do: Chat.subscribe()
    messages = Chat.list_message_for_chat_room(id)
    {:ok, socket
          |> assign(:messages, messages)
          |> assign(:message, %DemoWeb.Chat.Message{})
    }
  end

Showing Posts 3 to 1

APB9785

APB9785

Creator of ECSx

From Phoenix.LiveComponent - Targeting Component Events:

If you want to send the event to yourself, you can simply use the @myself assign, which is an internal unique reference to the component instance

Note @myself is not set for stateless components, as they cannot receive events.

So yes, @myself is specific to stateful components.

As for handle_params/3, this function is not for LiveComponents to handle events, it is for the parent LiveView to handle URL parameters. LiveComponent events are handled with handle_event/3 - either in the LiveView (if the component is stateless), or in the component itself (if the component is stateful AND the event has phx-target="<%= @myself %>")

Looking through the mount/3 function in the OP, I think there is also a lack of context here that might make it difficult to troubleshoot this issue. You’re talking about a LiveComponent, but mount/3 is the mount for LiveViews (components use mount/1). If you’re still having trouble, please share the full repository so we can see how the LC is interacting with the parent LV.

sjolicoeur

sjolicoeur OP

Yes, that was the page I was reading from… I managed to get further by commenting out my handle_params function. the logs had raised the issue it seems, but not the web based error.

Removing the handle_params fixed my issue. Also is @myself only possible to use in a live_component?

APB9785

APB9785

Creator of ECSx

Which docs are you reading? From Phoenix.LiveComponent:

A component can be invoked as:

<%= live_component @socket, HeroComponent, content: @content %>
— All posts loaded —

Where Next? Top

Trending in Questions Top

RSP87
I’m working on a project that simulates the bumbl example in the programming phoenix book. It acts almost like an email client. We have a...
New
RemyXRenard
I’m seeing that a list inside a Kino.DataTable will be interpreted as a charlist, even if the Kino.configure() is set to charlists: :as_l...
New
velrest
So my question is quite simple and i have found no conclusive answer on forum, google or AI. Should we use :erlang.float for Integer to ...
New
nseaSeb
Hello, I know there is an approach for handling lists that allows for optimized traversal, but I can’t recall the specific method (somet...
New
samoloth
Hi, I’ve just set up an application with ash_authentication. There is only magic link strategy for now, so there is no confirmation add o...
New
FlyingNoodle
If a change or preparation module uses Ash.Changeset.get_argument/2 or Ash.Query.get_argument/2 (or any of the other get_argument functio...
New
ryanwinchester
apply_graft/2 doesn’t rewrite an add_many sub-workflow’s deps on an add step. Grafted jobs cancel with “upstream job was deleted” Version...
New

Other Trending Topics Top

mudasobwa
I am happy to introduce the very α version of the new programming language compiled to BEAM. Welcome Cure. It has literally three kille...
New
marciok
Hi there! We created Gust: A task orchestrator inspired by Airflow. For those who have never heard about Aiflow, it’s a Python-based wor...
New
jimsynz
Beam Bots (or just BB for short) is a framework for building fault-tolerant robotics applications in Elixir using familiar OTP patterns. ...
New
Dmk
Xamal is a deployment tool for Elixir apps that deploys native releases to bare metal servers over SSH. It’s a port of GitHub - basecamp/...
New
Damirados
Hello everyone. After busy few months I am happy to announce v0.1.0 of Emerge &amp; Solve. They are GUI (Emerge) and State management (S...
New
netoum
Corex is an accessible, unstyled UI component library for Phoenix that integrates Zag.js state machines using Vanilla JavaScript and Live...
New

We're in Beta

About us Mission Statement

Options

Thread Display Mode




Thread Preview

Skip Thread Previews