Migrate live_patch to .link patch

Phoenix Forum Questions / Help
1

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

2

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>
2 Likes
3

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!