add liveview helpers

assets/js/socket.js

@@ -45,7 +45,7 @@ let socket = new Socket("/socket", {params: {token: window.userToken}})
 //       # max_age: 1209600 is equivalent to two weeks in seconds
 //       case Phoenix.Token.verify(socket, "user socket", token, max_age: 1209600) do
 //         {:ok, user_id} ->
-//           {:ok, assign(socket, :user, user_id)}
+//           {:ok, socket |> assign(:user, user_id)}
 //         {:error, reason} ->
 //           :error
 //       end

lib/lokal_web.ex

@@ -83,6 +83,7 @@ defmodule LokalWeb do
 
       # Import LiveView helpers (live_render, live_component, live_patch, etc)
       import Phoenix.LiveView.Helpers
+      import LokalWeb.LiveHelpers
 
       # Import basic rendering functionality (render, render_layout, etc)
       import Phoenix.View

lib/lokal_web/channels/user_socket.ex

@@ -9,7 +9,7 @@ defmodule LokalWeb.UserSocket do
   # verification, you can put default assigns into
   # the socket that will be set for all channels, ie
   #
-  #     {:ok, assign(socket, :user_id, verified_user_id)}
+  #     {:ok, socket |> assign(:user_id, verified_user_id)}
   #
   # To deny connection, return `:error`.
   #

lib/lokal_web/live/component/topbar.ex

@@ -41,7 +41,7 @@ defmodule LokalWeb.Live.Component.Topbar do
             </form>
 
             <%# user settings %>
-            <%= if assigns |> Map.has_key?(:current_user) do %>
+            <%= if @current_user do %>
               <li>
                 <%= @current_user.email %></li>
               <li>

lib/lokal_web/live/live_helpers.ex

@@ -0,0 +1,36 @@
+defmodule LokalWeb.LiveHelpers do
+  import Phoenix.LiveView.Helpers
+  import Phoenix.LiveView, only: [assign_new: 3]
+  alias Lokal.{Accounts}
+
+  @doc """
+  Renders a component inside the `LokalWeb.ModalComponent` component.
+
+  The rendered modal receives a `:return_to` option to properly update
+  the URL when the modal is closed.
+
+  ## Examples
+
+      <%= live_modal LokalWeb.TagLive.FormComponent,
+        id: @tag.id || :new,
+        action: @live_action,
+        tag: @tag,
+        return_to: Routes.tag_index_path(@socket, :index) %>
+  """
+  def live_modal(component, opts) do
+    path = Keyword.fetch!(opts, :return_to)
+    modal_opts = [id: :modal, return_to: path, component: component, opts: opts]
+    live_component(LokalWeb.ModalComponent, modal_opts)
+  end
+
+  def assign_defaults(socket, %{"user_token" => user_token} = _session) do
+    socket
+    |> assign_new(:current_user, fn ->
+      Accounts.get_user_by_session_token(user_token)
+    end)
+  end
+  
+  def assign_defaults(socket, _session) do
+    socket
+  end
+end

lib/lokal_web/live/modal_component.ex

@@ -0,0 +1,26 @@
+defmodule LokalWeb.ModalComponent do
+  use LokalWeb, :live_component
+
+  @impl true
+  def render(assigns) do
+    ~L"""
+    <div id="<%= @id %>" class="phx-modal"
+      phx-capture-click="close"
+      phx-window-keydown="close"
+      phx-key="escape"
+      phx-target="#<%= @id %>"
+      phx-page-loading>
+
+      <div class="phx-modal-content">
+        <%= live_patch raw("&times;"), to: @return_to, class: "phx-modal-close" %>
+        <%= live_component @socket, @component, @opts %>
+      </div>
+    </div>
+    """
+  end
+
+  @impl true
+  def handle_event("close", _, socket) do
+    {:noreply, push_patch(socket, to: socket.assigns.return_to)}
+  end
+end

lib/lokal_web/live/page_live.ex

@@ -2,20 +2,20 @@ defmodule LokalWeb.PageLive do
   use LokalWeb, :live_view
 
   @impl true
-  def mount(_params, _session, socket) do
+  def mount(_params, session, socket) do
-    {:ok, assign(socket, query: "", results: %{})}
+    {:ok, socket |> assign_defaults(session) |> assign(query: "", results: %{})}
   end
 
   @impl true
   def handle_event("suggest", %{"q" => query}, socket) do
-    {:noreply, assign(socket, results: search(query), query: query)}
+    {:noreply, socket |> assign(results: search(query), query: query)}
   end
 
   @impl true
   def handle_event("search", %{"q" => query}, socket) do
     case search(query) do
       %{^query => vsn} ->
-        {:noreply, redirect(socket, external: "https://hexdocs.pm/#{query}/#{vsn}")}
+        {:noreply, socket |> redirect(external: "https://hexdocs.pm/#{query}/#{vsn}")}
 
       _ ->
         {:noreply,

lib/lokal_web/templates/layout/live.html.leex

@@ -1,5 +1,5 @@
 <main role="main" class="container min-w-full min-h-full">
-  <%= live_component LokalWeb.Live.Component.Topbar %>
+  <%= live_component LokalWeb.Live.Component.Topbar, current_user: assigns[:current_user] %>
 
   <%= @inner_content %>
 </main>