add liveview helpers

This commit is contained in:
shibao 2021-09-02 23:32:53 -04:00 committed by oliviasculley
parent 81a250206e
commit 66cc11e9eb
8 changed files with 71 additions and 8 deletions

View File

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

View File

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

View File

@ -9,7 +9,7 @@ defmodule LokalWeb.UserSocket do
# verification, you can put default assigns into # verification, you can put default assigns into
# the socket that will be set for all channels, ie # 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`. # To deny connection, return `:error`.
# #

View File

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

View File

@ -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

View File

@ -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

View File

@ -2,20 +2,20 @@ defmodule LokalWeb.PageLive do
use LokalWeb, :live_view use LokalWeb, :live_view
@impl true @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 end
@impl true @impl true
def handle_event("suggest", %{"q" => query}, socket) do 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 end
@impl true @impl true
def handle_event("search", %{"q" => query}, socket) do def handle_event("search", %{"q" => query}, socket) do
case search(query) do case search(query) do
%{^query => vsn} -> %{^query => vsn} ->
{:noreply, redirect(socket, external: "https://hexdocs.pm/#{query}/#{vsn}")} {:noreply, socket |> redirect(external: "https://hexdocs.pm/#{query}/#{vsn}")}
_ -> _ ->
{:noreply, {:noreply,

View File

@ -1,5 +1,5 @@
<main role="main" class="container min-w-full min-h-full"> <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 %> <%= @inner_content %>
</main> </main>