Phoenix LiveView Basics

$ mix phx.new demo --no-ecto (1)
[...]
Fetch and install dependencies? [Yn] Y (2)
[...]

    $ cd demo

Start your Phoenix app with:

    $ mix phx.server

$ mix phx.new clock --no-ecto
[...]
$ cd clock

  scope "/", ClockWeb do
    pipe_through :browser

    get "/", PageController, :home
    live "/clock", ClockLive (1)
  end

defmodule ClockWeb.ClockLive do
  use ClockWeb, :live_view

  def mount(_params, _session, socket) do
    if connected?(socket) do (1)
      :timer.send_interval(1000, self(), :tick) (2)
    end

    {:ok, assign_current_time(socket)} (3)
  end

  def render(assigns) do
    ~H"""
    <h1 class="text-4xl font-mono">{@now}</h1>
    """
  end

  def handle_info(:tick, socket) do (4)
    {:noreply, assign_current_time(socket)}
  end

  defp assign_current_time(socket) do
    now =
      Time.utc_now() (5)
      |> Time.to_string()
      |> String.split(".") (6)
      |> hd()

    assign(socket, now: now) (7)
  end
end

$ mix phx.new demo --no-ecto
[...]
$ cd demo

  scope "/", DemoWeb do
    pipe_through :browser

    get "/", PageController, :home
    live "/counter", CounterLive (1)
  end

defmodule DemoWeb.CounterLive do
  use DemoWeb, :live_view

  def mount(_params, _session, socket) do
    {:ok, assign(socket, :counter, 0)} (1)
  end

  def render(assigns) do
    ~H"""
    <h1 class="text-2xl font-bold mb-4">Current count: {@counter}</h1>
    <button phx-click="inc" class="btn btn-primary mr-2">+1</button> (2)
    <button phx-click="reset" class="btn">Reset</button>
    """
  end

  def handle_event("inc", _params, socket) do
    {:noreply, update(socket, :counter, &(&1 + 1))} (3)
  end

  def handle_event("reset", _params, socket) do
    {:noreply, assign(socket, :counter, 0)}
  end
end

$ mix phx.new travelagent --no-ecto
$ cd travelagent

  scope "/", TravelagentWeb do
    pipe_through :browser

    get "/", PageController, :home
    live "/search", SearchLive
  end

defmodule Travelagent.Airports do
  def search_by_code(""), do: [] (1)

  def search_by_code(code) do (2)
    list_airports()
    |> Enum.filter(&String.starts_with?(&1.code, code))
  end

  def list_airports do (3)
    [
      %{name: "Berlin Brandenburg", code: "BER"},
      %{name: "Bremen", code: "BRE"},
      %{name: "Köln/Bonn", code: "CGN"},
      %{name: "Dortmund", code: "DTM"},
      %{name: "Dresden", code: "DRS"},
      %{name: "Düsseldorf", code: "DUS"},
      %{name: "Frankfurt", code: "FRA"},
      %{name: "Frankfurt-Hahn", code: "HHN"},
      %{name: "Hamburg", code: "HAM"},
      %{name: "Hannover", code: "HAJ"},
      %{name: "Leipzig Halle", code: "LEJ"},
      %{name: "München", code: "MUC"},
      %{name: "Münster Osnabrück", code: "FMO"},
      %{name: "Nürnberg", code: "NUE"},
      %{name: "Paderborn Lippstadt", code: "PAD"},
      %{name: "Stuttgart", code: "STR"}
    ]
  end
end

<div class="max-w-2xl mx-auto p-4">
  <form phx-submit="airport_code_search" class="mb-6 space-y-2">
    <label for="airport_code" class="label">Airport Code</label>
    <input
      id="airport_code"
      type="text"
      name="airport_code"
      value={@airport_code}
      placeholder="e.g. FRA"
      autofocus
      autocomplete="off"
      class="input input-bordered w-full" /> (1)
    <button type="submit" class="btn btn-primary">Search</button>
  </form>

  <%= unless @airports == [] do %> (2)
    <h2 class="text-xl font-semibold mb-2">Search Results</h2>
    <table class="table table-zebra">
      <thead>
        <tr>
          <th>Code</th>
          <th>Name</th>
        </tr>
      </thead>
      <tbody>
        <tr :for={airport <- @airports}> (3)
          <td class="font-mono">{airport.code}</td>
          <td>{airport.name}</td>
        </tr>
      </tbody>
    </table>
  <% end %>
</div>

defmodule TravelagentWeb.SearchLive do
  use TravelagentWeb, :live_view
  alias Travelagent.Airports (1)

  def mount(_params, _session, socket) do
    socket =
      socket
      |> assign(:airport_code, "") (2)
      |> assign(:airports, [])

    {:ok, socket}
  end

  def handle_event(
        "airport_code_search",
        %{"airport_code" => airport_code},
        socket
      ) do
    airport_code = String.upcase(airport_code) (3)

    socket =
      socket
      |> assign(:airport_code, airport_code) (4)
      |> assign(:airports, Airports.search_by_code(airport_code))

    {:noreply, socket}
  end
end

  scope "/", DemoWeb do
    pipe_through :browser

    get "/", PageController, :home
    live "/profile", ProfileLive (1)
  end

defmodule DemoWeb.ProfileLive do
  use DemoWeb, :live_view

  def mount(_params, _session, socket) do
    form = to_form(%{"name" => "", "email" => ""}, as: "profile") (1)
    {:ok, assign(socket, form: form, errors: %{}, saved: nil)}
  end

  def render(assigns) do
    ~H"""
    <div class="max-w-md mx-auto p-4 space-y-4">
      <h1 class="text-2xl font-bold">Edit profile</h1>

      <.form
        for={@form}
        phx-change="validate"
        phx-submit="save"
        class="space-y-4"
      >
        <div>
          <label for={@form[:name].id} class="label">Name</label> (2)
          <input
            type="text"
            name={@form[:name].name}
            id={@form[:name].id}
            value={@form[:name].value}
            class="input input-bordered w-full"
          />
          <p :if={@errors[:name]} class="text-error text-sm">
            {@errors[:name]}
          </p>
        </div>

        <div>
          <label for={@form[:email].id} class="label">Email</label>
          <input
            type="text"
            name={@form[:email].name}
            id={@form[:email].id}
            value={@form[:email].value}
            class="input input-bordered w-full"
          />
          <p :if={@errors[:email]} class="text-error text-sm">
            {@errors[:email]}
          </p>
        </div>

        <button type="submit" class="btn btn-primary">Save</button>
      </.form>

      <p :if={@saved} class="text-success">
        Saved: {@saved["name"]} &lt;{@saved["email"]}&gt;
      </p>
    </div>
    """
  end

  def handle_event("validate", %{"profile" => params}, socket) do (3)
    {:noreply,
     assign(socket,
       form: to_form(params, as: "profile"),
       errors: validate(params),
       saved: nil
     )}
  end

  def handle_event("save", %{"profile" => params}, socket) do (4)
    case validate(params) do
      errors when errors == %{} ->
        {:noreply,
         assign(socket,
           form: to_form(params, as: "profile"),
           errors: %{},
           saved: params
         )}

      errors ->
        {:noreply,
         assign(socket,
           form: to_form(params, as: "profile"),
           errors: errors,
           saved: nil
         )}
    end
  end

  defp validate(params) do
    %{}
    |> maybe_put_error(:name, params, &(String.length(&1) < 2), "at least 2 characters")
    |> maybe_put_error(:email, params, &(not String.contains?(&1, "@")), "must contain @")
  end

  defp maybe_put_error(errors, field, params, pred?, message) do
    value = params[Atom.to_string(field)] || ""
    if pred?.(value), do: Map.put(errors, field, message), else: errors
  end
end

  scope "/", DemoWeb do
    pipe_through :browser

    live "/todos", TodoLive
  end

defmodule DemoWeb.TodoLive do
  use DemoWeb, :live_view

  def mount(_params, _session, socket) do
    seed = [
      %{id: 1, text: "Read the LiveView streams docs"},
      %{id: 2, text: "Fix the colour picker"},
      %{id: 3, text: "Ship the landing page"}
    ]

    {:ok,
     socket
     |> assign(:form, to_form(%{"text" => ""}, as: "todo"))
     |> assign(:next_id, 4)
     |> stream(:todos, seed)} (1)
  end

  def render(assigns) do
    ~H"""
    <div class="max-w-md mx-auto p-4 space-y-4">
      <h1 class="text-2xl font-bold">Todos</h1>

      <.form for={@form} phx-submit="add" class="flex gap-2">
        <input
          type="text"
          name="todo[text]"
          value=""
          placeholder="What needs doing?"
          class="input input-bordered flex-1"
        />
        <button type="submit" class="btn btn-primary">Add</button>
      </.form>

      <ul id="todos" phx-update="stream" class="space-y-1"> (2)
        <li
          :for={{dom_id, todo} <- @streams.todos} (3)
          id={dom_id}
          class="flex items-center justify-between p-2 border rounded"
        >
          <span>{todo.text}</span>
          <button
            type="button"
            phx-click="remove"
            phx-value-id={todo.id}
            class="btn btn-sm btn-ghost"
          >
            ✕
          </button>
        </li>
      </ul>
    </div>
    """
  end

  def handle_event("add", %{"todo" => %{"text" => text}}, socket)
      when text != "" do
    todo = %{id: socket.assigns.next_id, text: text}

    {:noreply,
     socket
     |> stream_insert(:todos, todo, at: 0) (4)
     |> assign(:next_id, socket.assigns.next_id + 1)}
  end

  def handle_event("add", _params, socket), do: {:noreply, socket}

  def handle_event("remove", %{"id" => id}, socket) do
    {:noreply, stream_delete(socket, :todos, %{id: String.to_integer(id)})} (5)
  end
end