solop

solop

Feature request: phx-hook for "inserted"

There are javascript hooks for mount, update, delete etc, but none specifically for insert.
Mount is called on each item when the page is first loaded, the proposed “insert” hook would only be called if a new item is inserted into the stream.

Most Liked

chrismccord

chrismccord

Creator of Phoenix

If you put a hook on the stream items, the mounted callback would be fired for each added item, so you effectively have what you’re asking for already :slight_smile:

sodapopcan

sodapopcan

Hooks are about generic JS interop and not directly related to streams. The lifecycle events you describe are directly related to the node the hook is attached to, not its children.

That said, how do you have your hooks set up?

If your hook is attached to each item in the stream, then mounted is exactly what you want. mounted is called any time an element with an attached hook is added to the DOM, not just on page load.

If you have your hook on the stream’s container, then a custom event can get you what you’re looking for:

Hooks.StreamContainerHook = {
  mounted() {
    const streamContainer = this.el

    this.handleEvent("my-custom-event-name", ({ id }) => {
      const insertedNode = streamContainer.querySelector(`#stream_item_${id}`)
    }
  }
}
def handle_event("insert", _, socket) do
  new_item = %{id: 1, name: "Some item"}

  socket =
    socket
    |> stream_insert(:my_stream, new_item)
    |> push_event("my-custom-event-name", %{id: new_item.id})

  {:noreply, socket}
end

Where Next?

Popular in Proposals: Ideas Top

alaadahmed
Hi folks, I tried Phoenix 1.7 and it is awesome, but I have small suggestion, which in my opinion will organize files in a better way. ...
New
munksgaard
I’m copying and pasting this issue from @Terbium-135 here verbatim, because I would be interested in such a feature as well, and because ...
New
dvartic
Would there be interest to implement a link/1 that gives to option to operate on other events? So I implemented a simple link/1 function...
New
zachdaniel
One thing I find is that I typically “start” with a LiveView even for static pages (in cases where I know I’m likely to add interactivity...
New
jakeprem
Goal: To make JS.patch and JS.navigate more interoperable with JS.push. Scenario: Imagine making a reusable Phoenix component and you wa...
New
BartOtten
I’d like to propose that we refrain from using the term "DeadView" as the opposite of “LiveView” and instead choose an alternative. A new...
New
cevado
I was reading the EEP-79, and thinking about the poor record support in Elixir(i’ve tried to discuss about that in the forum before). I s...
New

Other popular topics Top

Brian
What is the proper way to load a module from a file in to IEX? In the python world, doing something like this pretty standard: from ....
New
stefanchrobot
What’s the safe way to decode a JSON string into a struct? I want to avoid calling String.to_atom. Jason.decode can give me a map with st...
New
dogweather
I wrote this comment on r/haskell, and it’s not popular there. :wink: But I think I’m on to something… Haskell reminds me of Java, and e...
New
shijith.k
I am trying to start a new phoenix project with elixir 1.9, but mix phx.new does not work. It says that ** (Mix) The task "phx.new" could...
New
TunkShif
This post is an instruction guide to help you setup your Neovim for Elixir development from scratch. It includes general information on h...
274 42576 114
New
JorisKok
I have a server on AWS, and was running a load test using artillery. When looking at the Phoenix dashboard I see the Ports going to 100% ...
New

We're in Beta

About us Mission Statement