I have story_cards that render a list of authors, among other things. Clicking an author should open a modal, via a function set_modal_data/1. This function needs the to be passed one author (not all authors).
Is there a way to pass the set_modal_click/1 function to the story_card function component call (e.g. <.story_card ... on_author_click={...}/>? Currently, I am using slots to be able assign the set_modal_click/1 to the phx-click that should open the modal.
# current solution
<.story_card
:for={story <- @stories}
story={story}
>
<:author let={author}>
<span
class="pub-cover-author-tag"
phx-click={set_modal_data(%{"id" => author.id, "modal" => "user"})}
>
<%= author.username %>
</span>
</:author>
</.story_card>
# hypothesized solution
<.story_card
:for={story <- @stories}
story={story}
let={author}
on_author_click={set_modal_data(%{"id" => author.id, "modal" => "user"})}
/>
Ty
2 Likes
I know you’re not using Surface but perhaps this documentation could help you.
if you have current_user stored in your socket, you could send it together with author
<.story_card
:for={story <- @stories}
story={story}
current_user={@current_user}
author={story.author}
</.story_card>
Something like that perhaps, then you could check inside story card if the current user is the author or not and act accordingly.
Not sure if I’m being relevant. 
1 Like
Rereading my post, I notice I should have explained it better.
There is a comprehension for authors inside the story_card function component: for author <- @authors do .... One story_card shows a html-element with a phx-click for each author.
<.story_card
:for={story <- @stories}
story={story}
>
<:author let={author}> <-- author comes from comprehension
<span
class="pub-cover-author-tag"
phx-click={set_modal_data(%{"id" => author.id, "modal" => "user"})}
>
<%= author.username %>
</span>
</:author>
</.story_card>
So the comprehension giving the author map can be found here (made some adjustments for this post so might contain typo’s):
attr :story, :map
attr :on_title_click, JS, default: %JS{}
slot :author
def story_card(assigns) do
~H"""
<div>
<div>
<.link phx-click={@on_title_click}>
<%= @story.title %>
</.link>
<div class="pub-cover-authors">
<%= for author <- @authors do %>
<%= render_slot(@author, author) %>
<% end %>
</div>
</div>
</div>
"""
end
1 Like
You should be able to pass it as a capture:
<.story_card
:for={story <- @stories}
story={story}
on_author_click={&set_modal_data/1}
/>
and then:
phx-click={on_author_click.(%{"id" => author.id, "modal" => "user"})
I may also be misunderstand what you’re after, though!
2 Likes
Oh yes. I see what you mean. I haven’t thought of it that way yet.
The reason for my post was that I like to be able to see all my LiveView event calls from my LiveView modules.
So I try to prevent this:
defmodule AppWeb.PageLive do
...
def render(assigns) do
~H"""
<.some_component/> <-- this component calls \"some_event\" from inside itself
"""
end
def handle_event("some_event", _, socket) do
...
{:noreply, socket}
end
end
Instead, I have been doing:
defmodule AppWeb.PageLive do
...
def render(assigns) do
~H"""
<.some_component on_some_click={JS.push("some_event", value: ...)}/>
"""
end
def handle_event("some_event", _, socket) do
...
{:noreply, socket}
end
end
However, some components have bindings (e.g. phx-click) inside them that are inside a comprehension expression. For example:
def some_component(assigns) do
~H"""
<div>
<%= for item <- @items do %>
<span phx-click={JS.push("some_event", value: %{item: item})}/>
<% end %>
</div>
"""
end
I was wondering if I can pass that JS.push("some_event", value: %{item: item}) from the last example/code block to the <.some_component/> component from the render function of the LiveView module, somehow.
Some like:
<.some_component
let={item}
on_some_click={JS.push("some_event", %{item: item})}
/>
That makes sense!
It should work with the capture:
def story_card(assigns) do
~H"""
...
<li :for={author <- @authors}>
<a phx-click={@on_author_click.(author)}>...</a>
</li>
...
"""
end
def render(assigns) do
~H"""
<.story_card
authors={@authors}
on_author_click={&JS.push("some_event", value: %{author: &1})}
/>
"""
end
(sorry I forgot the @ in my original example)
Possibly you already got that but I wasn’t sure from your response
1 Like
Just got back to my computer to implement it and I am getting an error saying:
protocol Jason.Encoder not implemented for #App.Accounts.User<__meta__: #Ecto.Schema.Metadata<:loaded, "users">, ...> of type App.Accounts.User (a struct), Jason.Encoder protocol must always be explicitly implemented.
If you own the struct, you can derive the implementation specifying which fields should be encoded to JSON:
@derive {Jason.Encoder, only: [....]}
defstruct ...
It is also possible to encode all fields, although this should be used carefully to avoid accidentally leaking private information when new fields are added:
@derive Jason.Encoder
defstruct ...
Finally, if you don't own the struct you want to encode to JSON, you may use Protocol.derive/3 placed outside of any module:
Protocol.derive(Jason.Encoder, NameOfTheStruct, only: [...])
Protocol.derive(Jason.Encoder, NameOfTheStruct)
. This protocol is implemented for the following type(s): Any, Atom, BitString, Date, DateTime, Decimal, Ecto.Association.NotLoaded, Ecto.Schema.Metadata, Float, Integer, Jason.Fragment, Jason.OrderedObject, List, Map, NaiveDateTime, Time
I am not familiar with having to explicitly implement Jason.Encoder protocol for a struct I own (in this case User, which corresponds with the author variable from earlier). Is this error to be expected when implementing the solution you suggested, that you know? This might be a good opportunity for me to learn more about implementing the Jason.Encoder protocol, in that case.
edit:
This is the stack trace I am getting:
(jason 1.4.0) lib/jason.ex:164: Jason.encode!/2
(phoenix_live_view 0.18.17) lib/phoenix_live_view/js.ex:127: Phoenix.HTML.Safe.Phoenix.LiveView.JS.to_iodata/1
(phoenix_html 3.3.1) lib/phoenix_html.ex:265: Phoenix.HTML.build_attrs/1
(phoenix_html 3.3.1) lib/phoenix_html.ex:218: Phoenix.HTML.attributes_escape/1
(app 0.1.0) lib/app_web/components/base_components.ex:668: anonymous fn/3 in AppWeb.BaseComponents."authors_label_list (overridable 1)"/1
(elixir 1.14.0) lib/enum.ex:2468: Enum."-reduce/3-lists^foldl/2-0-"/3
(app 0.1.0) lib/app_web/components/base_components.ex:667: anonymous fn/2 in AppWeb.BaseComponents."authors_label_list (overridable 1)"/1
(app 0.1.0) /Users/.../app/lib/app_web/components/base_components.ex:586: AppWeb.BaseComponents.story_card/1
(elixir 1.14.0) lib/enum.ex:2468: Enum."-reduce/3-lists^foldl/2-0-"/3
(phoenix_live_view 0.18.17) lib/phoenix_live_view/diff.ex:396: Phoenix.LiveView.Diff.traverse/7
(phoenix_live_view 0.18.17) lib/phoenix_live_view/diff.ex:571: anonymous fn/3 in Phoenix.LiveView.Diff.traverse_comprehension/5
(elixir 1.14.0) lib/enum.ex:1780: Enum."-map_reduce/3-lists^mapfoldl/2-0-"/3
(phoenix_live_view 0.18.17) lib/phoenix_live_view/diff.ex:492: Phoenix.LiveView.Diff.traverse/7
(phoenix_live_view 0.18.17) lib/phoenix_live_view/diff.ex:544: anonymous fn/4 in Phoenix.LiveView.Diff.traverse_dynamic/7
(elixir 1.14.0) lib/enum.ex:2468: Enum."-reduce/3-lists^foldl/2-0-"/3
(phoenix_live_view 0.18.17) lib/phoenix_live_view/diff.ex:396: Phoenix.LiveView.Diff.traverse/7
(phoenix_live_view 0.18.17) lib/phoenix_live_view/diff.ex:544: anonymous fn/4 in Phoenix.LiveView.Diff.traverse_dynamic/7
(elixir 1.14.0) lib/enum.ex:2468: Enum."-reduce/3-lists^foldl/2-0-"/3
Oh right, I was sort of afraid of that, lol. It’s just saying you can’t encode an Elixir struct into HTML which makes sense. I think you can just put @derive Json.Encoder in your schema. The idea is that it’s telling it how to convert a schema into JSON. That should work (I’m not actually trying these things as I type them). You could also explicitly pass the artist attributes as in your original example:
phx-click={&JS.push("some_event", value: %{id: &1.id, name: &1.name, ...etc})}
Be very careful with this. The user struct in this case is being sent to the JS front end unencrypted. I would strongly suggest pulling out specific keys that are relevant to the JS.
3 Likes
Right, you’d need to make sure you have the redacted fields set. Thanks for chiming in, I did not think of that!
2 Likes
I don’t see why this is happening, though. Why would encoding normally not be an issue, but in this case it would? Not doubting this fact, but would like to know why.
JS functions return JSON that gets hardcoded into the DOM, so anything you pass in has to be serializable into JSON. Jason knows how to do this for primitives but is not implemented out of the box for structs. So you have to explicitly say they’re serializable with @derive Jason.Encoder which is metaprogramming a defimpl behind the scenes.
As @benwilson512 pointed out, using @derive will make all fields in your struct available which can be dangerous if any of your structs fields contain sensitive data.
I see. That was the missing piece for me.
So swapping phx-click=“some_event” (including phx-value-…=…) with JS.push(…) is not without potential implications, also for performance?
I have been quite liberal in my use of JS. push(…)
Ya, it’s a bit weird at first, especially if you’re coming from React or the like as even though it’s pretty clear that do_it()) in phx-click={do_it()} is an immediately-invoked function, your brain is thinking it’s a closure that is getting executed on click. Really it’s returning a datastruct that describes a procedure to be executed when clicked. If you inspect the element you can see exactly what it’s returning.
Yes. I was actually going to suggest that this should all just be done with phx events, but I feel I’m always saying that stuff and have been feeling like an old curmudgeon so I decided to take a break from that
But now that I’ve started: for something like this, if you’re making a network call anyway (ie, querying the user by id once opening the modal), I would just keep it simple and store the modal state in LV state and forgo JS commands altogether.
Yes, that’s starting to make more sense now. I designed my modal in a way that it can take any JS command by using attr :on_some_click, JS, default: %JS{}. The JS commands of the attr would then be chained to the JS commands that are hardcoded into the function component. This seemed to made sense initially.
Perhaps you already have something like this but I think even better would be to have routes to your story cards. Then you can just push_patch on clicking a story link. Now you can get the story id from the URL which you can load in handle_params. I feel this is better UX as you now have a shareable URL to a card and better DX as there are slightly less moving parts. This is still possible with JS commands, of course, but I feel they are a bit overkill if you’re hitting the server anyway.
EDIT: I wanted to make clear that it can still be a modal. You can just use the presence of a story_id in the URL for the open state of the modal.
1 Like
Yes, I have implemented something along this lines before. I like the approach.
I am going to make some changes to the modal, but also the pages from which the modals are opened, because this thread has made me realize that my more general approach to when I am fetching what data from the server is a bit weird. The author variable from the comprehension expression contains a lot of unnecessary data, for example.
I’m glad we had this exchange, because it makes me realize some weak spots in my understanding of LV still.
