globz

globz

Migrate live_patch to .link patch

Hi,

I am trying to migrate my project to live_view 0.18.3 and I am having problems with live_patch…here’s my current code:

def modal(assigns) do
assigns = assign_new(assigns, :return_to, fn → nil end)

~H"""
<div id="modal" class="phx-modal fade-in" phx-remove={hide_modal()}>
  <div
    id="modal-content"
    class="phx-modal-content fade-in-scale"
    phx-click-away={JS.dispatch("click", to: "#close")}
    phx-window-keydown={JS.dispatch("click", to: "#close")}
    phx-key="escape"
  >
    <%= if @return_to do %>
      <%= live_patch "✖",
        to: @return_to,
        id: "close",
        class: "phx-modal-close",
        phx_click: hide_modal()
      %>
    <% else %>
      <a id="close" href="#" class="phx-modal-close" phx-click={hide_modal()}>✖</a>
    <% end %>

    <%= render_slot(@inner_block) %>
  </div>
</div>
"""

end

defp hide_modal(js \ %JS{}) do
js
|> JS.hide(to: “modal”, transition: “fade-out”)
|> JS.hide(to: “#modal-content”, transition: “fade-out-scale”)
end

How can I rewrite my live_patch into the new Phoenix.Component.link/1 ? I tried various ways but I keep getting this error:

== Compilation error in file lib/primordial_web/live/live_helpers.ex ==
** (SyntaxError) lib/primordial_web/live/live_helpers.ex:40:8: syntax error before: to
|
40 | to: @return_to,

This is what I tried:

      <.link patch={
       to: @return_to,
       id: "close",
       class: "phx-modal-close",
       phx_click: hide_modal()}>✖</.link>

Anyone can help explain the new syntax? Thank you

Marked As Solved

t0t0

t0t0

Hi,

your syntax is incorrect, it should be:

<.link
  patch={@return_to}
  id="close"
  class="phx-modal-close"
  phx-click={hide_modal()}
>✖</.link>

And to include and merge your if/else condition:

<.link
  {if @return_to, do: [patch: @return_to], else: [href: "#"]},
  id="close"
  class="phx-modal-close"
  phx-click={hide_modal()}
>✖</.link>

Last Post!

globz

globz

Thank you so much, the merged if/else is also much better than before.
I haven’t touched this project/Elixir for many months, need to get a refresher on the syntax!

Thank again and happy near year!

Where Next?

Popular in Questions Top

electic
Hi, I am new to Elixir. I am trying to use the DateTime component to insert a date into MySQL however the there seems to be no way to fo...
New
JeremM34
Hello, how can I check the Phoenix version ? Thanks !
New
joaquinalcerro
Hi there, I am working with Ecto-Postgresql and I need to call all of the records from a specific table but the table has 40,000 records...
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
sergio_101
I am VERY much an elixir newbie. I have taken one elixir course and one phoenix course on Udemy. During that course, I saw the instructor...
New
stefanluptak
Hello everybody, usually, I use a 29" ultra-wide monitor for VSCode which can easily accomodate explorer (files panel) + file with code ...
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

Other popular topics Top

KronicDeth
Elixir plugin for JetBrain’s IntelliJ Platform (including Rubymine) This is a plugin that adds support for Elixir to JetBrains IntelliJ...
289 36689 110
New
baxterw3b
Hi guys, i’m new in the Elixir world, and i have to say, that i love it! i’m having some problem to understand anonymous functions with ...
New
joaquinalcerro
Hi there, I am working with Ecto-Postgresql and I need to call all of the records from a specific table but the table has 40,000 records...
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
sorentwo
Hello! tl;dr Announcing Oban, an Ecto based job processing library with a focus on reliability and historical observability. After spen...
985 44608 311
New
sergio
Kind of like when jquery came out, it was super necessary. Existing drag and drop libraries have a bunch of baggage to support old browse...
New

We're in Beta

About us Mission Statement