How to use hooks with data generated from the server

eddyraz

good Afternoon, I have a live_view component with a input hidden field “attached” to a phx-hook

1–in the template:

<form id="login_form" phx-submit="check_login_credentials">
<input type="hidden" id="login_token" phx-hook="input_login_token"/> 
.
.
.
</form>

2–in the server:
there’s a function handle_event/3 that processes the username and password and send it to an external Auth API in Django using djoser REST API. and receives a token.

def handle_event("check_login_credentials", params, socket) do
login_tkn="823703847509432870598743205987" #test dummy  data
if login_tkn do
  {:noreply, push_event(socket, "saveLoginToken", %{login_token : login_tkn}
.
.
.
    end 
end

3—in the hooks file app.js theres a hook declared who manipulates the data sent from the server

let hooks = {}

hooks.saveLogintoken ={
mounted() {
    localStorage.clear()
    this.handleEvent("saveLoginToken", ({login_tkn}) =>  localStorage.setItem("login_token", login_tkn)
  },
};

When I put a console.log(something) in after the mounted() section it prints in the console, but any code put in this.handleEvent() section is not executed, If i take the other aproach and use
this.el.addEventListener("input", e => {....} it works but not handleEvent

could anybody explain why is not working, thanks in advanced.

16 comments

/phoenix #liveview #hooks

0 2619 16

2023-03-12 02:52:26 UTC

Showing Posts 1 to 10

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

mcrumm

Phoenix Core Team

Hi @eddyraz! I am not sure if this is the actual issue, but in your example I noticed a typo between the event name in push_event and the name in handleEvent. Is that difference present in your actual code as well? If so, does using the same event name in both places allow the handleEvent call back to be invoked?

Post #1

eddyraz

Thanks it was a typo, I just edited the post.

Post #2

mcrumm

Phoenix Core Team

Okay, I’m 0/1 so far, let’s try again!

Does the name of the hook object match the value given to phx-hook? In your example they are input_login_token and saveLogintoken respectively.

Since you mentioned that a console.log works in the mounted method I think this is probably not the problem either, but I’m just trying to eliminate all the “simple” stuff.

Post #3

imkleats

There’s one other typo that could be problematic if it’s not just erroneous transcription.

The event payload in the Elixir side has a key of login_token, but the object destructuring on the JS side’s handleEvent call is using the key login_tkn which would be undefined based on the payload coming across the socket.

Post #4

eddyraz

also a type, sorry i have to be more careful when posting.

Post #5

eddyraz

I also changed that(it was that way in the code), but still no reults. I read the Javascript interoperability in Liveview hexdocs (JavaScript interoperability — Phoenix LiveView v1.2.5), but still no clue why isn’t working.

Post #6

Terbium-135

If you are using push_event:

Phoenix Liveview adds the string phx: in front of the event name.
So "saveLoginToken" becomes "phx:saveLoginToken"

Have a look at

with the topic: Handling server-pushed events


let liveSocket = new LiveSocket(...)
window.addEventListener(`phx:highlight`, (e) => {
  let el = document.getElementById(e.detail.id)
  if(el) {
    // logic for highlighting
  }
})

Not sure if this is the reason for your problem

Post #7

eddyraz

in the docs says this:

push_event(socket, event, payload)
Pushes an event to the client.

Events can be handled in two ways:

1. They can be handled on window via addEventListener. A "phx:" prefix will be added to the event name.

2. They can be handled inside a hook via handleEvent.

So I think as I am using the hook aproach it must work without the "phx:" prefix I keep looking for a reason this is not working.

Post #8

codeanpeace

The key you set here is login_token…

… while the key you seem to be unpacking on via destructuring assignment here is login_tkn.

Give this a shot:
this.handleEvent("saveLoginToken", ({login_token}) => localStorage.setItem("login_token", login_token)

Post #9

mcrumm

Phoenix Core Team

Correct. The "phx:" prefix is not part of the event name when using this.handleEvent() on LiveSocket hooks.

To avoid possible issues with JavaScript destructuring while debugging, you could try replacing your handleEvent with the following:

this.handleEvent("saveLoginToken", (payload) => {
  console.log("received payload", payload)
})

…other than that, it is hard to say without having more of the code in context. Would it be possible for you to copy/paste some large blocks of code directly from your project? Please remove anything you can’t share, of course! but the more context the better.