Context
I’m having some issues with getting a LiveView hook to fire when I assign things to the socket first. I have the following event handler in my live file (setup_live.ex):
def handle_event("save_personal_details", params, socket) do
game_state = "setup_skills"
socket = socket
|> assign(:player, to_form(params))
|> assign(:skills, to_form(@skills))
|> assign(:game_state, game_state)
|> push_event(
"submit_player_personal_details",
%{player: params, game_state: game_state}
)
{:noreply, socket}
end
In this case both params and @skills are just maps and will render correctly in a form (I mention this as I thought something may be going wrong with to_form but this doesn’t seem to be the case).
In a component I have a form with phx-hook="SetupPersonalDetails" and phx-submit="save_personal_details". So far so good, this event handler is called when I submit the form.
I then have a SetupPersonalDetails hook that looks like this:
export const SetupPersonalDetails = {
mounted() {
this.pushEvent("restore", {
player: JSON.parse(localStorage.getItem("player")),
game_state: localStorage.getItem("game_state") || "setup_personal_details"
})
this.handleEvent("submit_player_personal_details", playerPersonalDetails => {
console.log('Updating player personal details...')
localStorage.setItem("player", JSON.stringify(playerPersonalDetails.player))
localStorage.setItem("game_state", playerPersonalDetails.game_state)
console.log('Player name submitted')
})
}
}
The Problem
My hook never handles the submit_player_personal_details that’s emitted - unless I remove the assigns from my event handler. If I change my event handler in my live file to:
def handle_event("save_personal_details", params, socket) do
game_state = "setup_skills"
socket = socket
|> push_event(
"submit_player_personal_details",
%{player: params, game_state: game_state}
)
{:noreply, socket}
end
in other words, remove the pipes into assigns, the JavaScript Hook runs and writes to localStorage correctly. What am I doing wrong here? I’m a bit of a Phoenix/Elixir novice, any help appreciated!
