[FIX]: Users demo

lib/demo_web/live/user_live/edit.ex

@@ -5,19 +5,19 @@ defmodule DemoWeb.UserLive.Edit do
   alias DemoWeb.Router.Helpers, as: Routes
   alias Demo.Accounts
 
-  def mount(%{path_params: %{"id" => id}}, socket) do
-    user = Accounts.get_user!(id)
-
-    {:ok,
-     assign(socket, %{
-       count: 0,
-       user: user,
-       changeset: Accounts.change_user(user)
-     })}
+  def mount(_session, socket) do
+    {:ok, socket}
   end
 
   def render(assigns), do: DemoWeb.UserView.render("edit.html", assigns)
 
+  def handle_params(%{"id" => id}, _uri, socket) do
+    user = Accounts.get_user!(id)
+    changeset = Accounts.change_user(user)
+    socket = assign(socket, %{count: 0, user: user, changeset: changeset})
+    {:noreply, socket}
+  end
+
   def handle_event("validate", %{"user" => params}, socket) do
     changeset =
       socket.assigns.user
@@ -30,7 +30,7 @@ defmodule DemoWeb.UserLive.Edit do
   def handle_event("save", %{"user" => user_params}, socket) do
     case Accounts.update_user(socket.assigns.user, user_params) do
       {:ok, user} ->
-        {:stop,
+        {:noreply,
          socket
          |> put_flash(:info, "User updated successfully.")
          |> redirect(to: Routes.live_path(socket, UserLive.Show, user))}

lib/demo_web/live/user_live/index.ex

@@ -8,10 +8,12 @@ defmodule DemoWeb.UserLive.Index do
   def render(assigns), do: UserView.render("index.html", assigns)
 
   def mount(_session, socket) do
+    if connected?(socket), do: Demo.Accounts.subscribe()
+
     {:ok, assign(socket, page: 1, per_page: 5)}
   end
 
-  def handle_params(params, url, socket) do
+  def handle_params(params, _url, socket) do
     {page, ""} = Integer.parse(params["page"] || "1")
     {:noreply, socket |> assign(page: page) |> fetch()}
   end
@@ -32,16 +34,18 @@ defmodule DemoWeb.UserLive.Index do
     {:noreply, go_page(socket, socket.assigns.page + 1)}
   end
   def handle_event("keydown", _, socket), do: {:noreply, socket}
-
-  defp go_page(socket, page) when page > 0 do
-    live_redirect(socket, to: Routes.live_path(socket, __MODULE__, page))
-  end
-  defp go_page(socket, page), do: socket
-
-  def handle_event("delete_user", id, socket) do
+  def handle_event("delete_user", %{"user-id" => id}, socket) do
     user = Accounts.get_user!(id)
     {:ok, _user} = Accounts.delete_user(user)
 
+    %{page: page, per_page: per_page} = socket.assigns
+    socket = assign(socket, users: Accounts.list_users(page, per_page))
+
     {:noreply, socket}
   end
+
+  defp go_page(socket, page) when page > 0 do
+    live_redirect(socket, to: Routes.live_path(socket, __MODULE__, page))
+  end
+  defp go_page(socket, _page), do: socket
 end

lib/demo_web/live/user_live/new.ex

@@ -13,7 +13,7 @@ defmodule DemoWeb.UserLive.New do
 
   def render(assigns), do: Phoenix.View.render(DemoWeb.UserView, "new.html", assigns)
 
-  def handle_event("validate", %{"user" => user_params} = params, socket) do
+  def handle_event("validate", %{"user" => user_params} = _params, socket) do
     changeset =
       %User{}
       |> Demo.Accounts.change_user(user_params)
@@ -22,7 +22,7 @@ defmodule DemoWeb.UserLive.New do
     {:noreply, assign(socket, changeset: changeset)}
   end
 
-  def handle_event("save", %{"user" => user_params} = params, socket) do
+  def handle_event("save", %{"user" => user_params} = _params, socket) do
     case Accounts.create_user(user_params) do
       {:ok, user} ->
         {:stop,

lib/demo_web/live/user_live/presence_index.ex

@@ -4,19 +4,25 @@ defmodule DemoWeb.UserLive.PresenceIndex do
   alias Demo.Accounts
   alias DemoWeb.{UserView, Presence}
   alias Phoenix.Socket.Broadcast
+  alias DemoWeb.Router.Helpers, as: Routes
 
-  def mount(%{path_params: %{"name" => name}}, socket) do
-    Demo.Accounts.subscribe()
-    Phoenix.PubSub.subscribe(Demo.PubSub, "users")
-    Presence.track(self(), "users", name, %{})
-    {:ok, fetch(socket)}
+  def mount(_session, socket) do
+    {:ok, socket}
   end
 
   def render(assigns), do: UserView.render("index.html", assigns)
 
+  def handle_params(%{"name" => name}, _uri, socket) do
+    if connected?(socket), do: Demo.Accounts.subscribe()
+    Phoenix.PubSub.subscribe(Demo.PubSub, "users")
+    Presence.track(self(), "users", name, %{})
+    {:noreply, fetch(socket)}
+  end
+
   defp fetch(socket) do
     assign(socket, %{
       users: Accounts.list_users(1, 10),
+      page: 1,
       online_users: DemoWeb.Presence.list("users")
     })
   end
@@ -29,6 +35,19 @@ defmodule DemoWeb.UserLive.PresenceIndex do
     {:noreply, fetch(socket)}
   end
 
+  def handle_event("keydown", %{"code" => "ArrowLeft"}, socket) do
+    {:noreply, go_page(socket, socket.assigns.page - 1)}
+  end
+  def handle_event("keydown", %{"code" => "ArrowRight"}, socket) do
+    {:noreply, go_page(socket, socket.assigns.page + 1)}
+  end
+  def handle_event("keydown", _, socket), do: {:noreply, socket}
+
+  defp go_page(socket, page) when page > 0 do
+    live_redirect(socket, to: Routes.live_path(socket, __MODULE__, page))
+  end
+  defp go_page(socket, page), do: socket
+
   def handle_event("delete_user", id, socket) do
     user = Accounts.get_user!(id)
     {:ok, _user} = Accounts.delete_user(user)

lib/demo_web/live/user_live/show.ex

@@ -20,9 +20,13 @@ defmodule DemoWeb.UserLive.Show do
     """
   end
 
-  def mount(%{path_params: %{"id" => id}}, socket) do
+  def mount(_session, socket) do
+    {:ok, socket}
+  end
+
+  def handle_params(%{"id" => id}, _uri, socket) do
     if connected?(socket), do: Demo.Accounts.subscribe(id)
-    {:ok, fetch(assign(socket, id: id))}
+    {:noreply, fetch(assign(socket, id: id))}
   end
 
   defp fetch(%Socket{assigns: %{id: id}} = socket) do

lib/demo_web/templates/page/index.html.eex

@@ -19,7 +19,8 @@
       <li><%= link "Rainbow", to: Routes.live_path(@conn, DemoWeb.RainbowLive) %></li>
       <li><%= link "Counter", to: Routes.live_path(@conn, DemoWeb.CounterLive) %></li>
       <li><%= link "Top", to: Routes.live_path(@conn, DemoWeb.TopLive) %></li>
-      <li><%= link "Presence Example", to: Routes.live_path(@conn, DemoWeb.UserLive.PresenceIndex, "user#{System.unique_integer([:positive])}") %></li>
+      <li><%= link "Presence Users Example", to: Routes.live_path(@conn, DemoWeb.UserLive.PresenceIndex, "user#{System.unique_integer([:positive])}") %></li>
+      <li><%= link "Users Basic Example", to: Routes.live_path(@conn, DemoWeb.UserLive.Index) %></li>
     </ul>
   </article>
 </section>

lib/demo_web/templates/user/form.html.leex

@@ -16,9 +16,7 @@
   <%= error_tag f, :password_confirmation %>
 
   <%= label f, :phone_number %>
-
-  <%= text_input f, :phone_number, phx_blur: "blur" %>
-
+  <%= text_input f, :phone_number %>
   <%= error_tag f, :phone_number %>
 
   <div>

lib/demo_web/templates/user/index.html.leex

@@ -12,7 +12,7 @@
   </thead>
   <tbody>
 <%= for user <- @users do %>
-    <tr>
+    <tr id=<%= user.id %>>
       <td><%= user.username %></td>
       <td><%= user.email %></td>
       <td><%= user.phone_number %></td>
@@ -22,7 +22,7 @@
         <%= link "Edit", to: Routes.live_path(@socket, UserLive.Edit, user) %>
         <%= link "Delete", to: "#",
             phx_click: "delete_user",
-            phx_value: user.id %>
+            phx_value_user_id: user.id %>
       </td>
     </tr>
 <% end %>

mix.exs

@@ -40,6 +40,7 @@ defmodule Demo.Mixfile do
       {:phoenix_pubsub, "~> 1.1"},
       {:phoenix_ecto, "~> 4.0"},
       {:ecto_sql, "~> 3.0"},
+      {:floki, ">= 0.0.0", only: :test},
       {:postgrex, ">= 0.0.0"},
       {:phoenix_html, "~> 2.13"},
       {:phoenix_live_reload, "~> 1.0", only: :dev},

mix.lock

@@ -9,8 +9,10 @@
   "ecto": {:hex, :ecto, "3.2.2", "bb6d1dbcd7ef975b60637e63182e56f3d7d0b5dd9c46d4b9d6183a5c455d65d1", [:mix], [{:decimal, "~> 1.6", [hex: :decimal, repo: "hexpm", optional: false]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}], "hexpm"},
   "ecto_sql": {:hex, :ecto_sql, "3.2.0", "751cea597e8deb616084894dd75cbabfdbe7255ff01e8c058ca13f0353a3921b", [:mix], [{:db_connection, "~> 2.1", [hex: :db_connection, repo: "hexpm", optional: false]}, {:ecto, "~> 3.2.0", [hex: :ecto, repo: "hexpm", optional: false]}, {:myxql, "~> 0.2.0", [hex: :myxql, repo: "hexpm", optional: true]}, {:postgrex, "~> 0.15.0", [hex: :postgrex, repo: "hexpm", optional: true]}, {:telemetry, "~> 0.4.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm"},
   "file_system": {:hex, :file_system, "0.2.7", "e6f7f155970975789f26e77b8b8d8ab084c59844d8ecfaf58cbda31c494d14aa", [:mix], [], "hexpm"},
+  "floki": {:hex, :floki, "0.23.1", "e100306ce7d8841d70a559748e5091542e2cfc67ffb3ade92b89a8435034dab1", [:mix], [{:html_entities, "~> 0.5.0", [hex: :html_entities, repo: "hexpm", optional: false]}], "hexpm"},
   "gettext": {:hex, :gettext, "0.17.0", "abe21542c831887a2b16f4c94556db9c421ab301aee417b7c4fbde7fbdbe01ec", [:mix], [], "hexpm"},
   "hackney": {:hex, :hackney, "1.15.2", "07e33c794f8f8964ee86cebec1a8ed88db5070e52e904b8f12209773c1036085", [:rebar3], [{:certifi, "2.5.1", [hex: :certifi, repo: "hexpm", optional: false]}, {:idna, "6.0.0", [hex: :idna, repo: "hexpm", optional: false]}, {:metrics, "1.0.1", [hex: :metrics, repo: "hexpm", optional: false]}, {:mimerl, "~>1.1", [hex: :mimerl, repo: "hexpm", optional: false]}, {:ssl_verify_fun, "1.1.5", [hex: :ssl_verify_fun, repo: "hexpm", optional: false]}], "hexpm"},
+  "html_entities": {:hex, :html_entities, "0.5.0", "40f5c5b9cbe23073b48a4e69c67b6c11974f623a76165e2b92d098c0e88ccb1d", [:mix], [], "hexpm"},
   "idna": {:hex, :idna, "6.0.0", "689c46cbcdf3524c44d5f3dde8001f364cd7608a99556d8fbd8239a5798d4c10", [:rebar3], [{:unicode_util_compat, "0.4.1", [hex: :unicode_util_compat, repo: "hexpm", optional: false]}], "hexpm"},
   "jason": {:hex, :jason, "1.1.2", "b03dedea67a99223a2eaf9f1264ce37154564de899fd3d8b9a21b1a6fd64afe7", [:mix], [{:decimal, "~> 1.0", [hex: :decimal, repo: "hexpm", optional: true]}], "hexpm"},
   "metrics": {:hex, :metrics, "1.0.1", "25f094dea2cda98213cecc3aeff09e940299d950904393b2a29d191c346a8486", [:rebar3], [], "hexpm"},

priv/repo/seeds.exs

@@ -14,7 +14,6 @@ for i <- 1..1000 do
   {:ok, _} =
     Demo.Accounts.create_user(%{
       username: "user#{i}",
-      name: "User #{i}",
       email: "user#{i}@test",
       phone_number: "555-555-5555"
     })

test/demo_web/live/user_edit_test.exs

@@ -0,0 +1,43 @@
+defmodule DemoWeb.UserEditTest do
+  use DemoWeb.ConnCase
+  import Phoenix.LiveViewTest
+  # alias Phoenix.LiveViewTest.DOM
+
+  alias Demo.Accounts
+
+  def user_fixture(attrs \\ %{}) do
+    valid_attrs = %{
+      username: "user#{:rand.uniform(1000)}",
+      email: "user-#{:rand.uniform(10000)}@test.com",
+      phone_number: "555-555-5555"
+    }
+
+    {:ok, user} =
+      attrs
+      |> Enum.into(valid_attrs)
+      |> Accounts.create_user()
+
+    user
+  end
+
+  describe "user edit" do
+    test "disconnected and connected mount", %{conn: conn} do
+      user = user_fixture()
+      conn = get(conn, "/users/#{user.id}/edit")
+
+      assert html_response(conn, 200) =~ "Edit"
+
+      {:ok, _view, _html} = live(conn)
+    end
+
+    test "can edit a user", %{conn: conn} do
+      user = user_fixture()
+      {:ok, view, html} = live(conn, "/users/#{user.id}/edit")
+      assert html =~ user.email
+
+      {:error, {:redirect, %{to: path}}} = render_submit(view, :save, %{"user" => %{"email" => "[email protected]"}})
+
+      assert path == "/users/#{user.id}"
+    end
+  end
+end

test/demo_web/live/user_index_test.exs

@@ -0,0 +1,71 @@
+defmodule DemoWeb.UserIndexTest do
+  use DemoWeb.ConnCase
+  import Phoenix.LiveViewTest
+  alias Phoenix.LiveViewTest.DOM
+
+  alias Demo.Accounts
+
+  def user_fixture(attrs \\ %{}) do
+    valid_attrs = %{
+      username: "user#{:rand.uniform(1000)}",
+      email: "user-#{:rand.uniform(10000)}@test.com",
+      phone_number: "555-555-5555"
+    }
+
+    {:ok, user} =
+      attrs
+      |> Enum.into(valid_attrs)
+      |> Accounts.create_user()
+
+    user
+  end
+
+  describe "user index" do
+    test "disconnected and connected mount", %{conn: conn} do
+      user = user_fixture()
+      conn = get(conn, "/users")
+      assert html_response(conn, 200) =~ "Listing Users"
+      assert html_response(conn, 200) =~ "New User"
+      assert html_response(conn, 200) =~ user.username
+
+      {:ok, _view, _html} = live(conn)
+    end
+  end
+
+  describe "user actions" do
+    test "can click to next page", %{conn: conn} do
+      for _i <- 1..20 do
+        user_fixture()
+      end
+      {:ok, view, html} = live(conn, "/users")
+
+      refute html =~ "page 2"
+      html = render_keydown(view, :keydown, %{"code" => "ArrowRight"})
+      assert html =~ "page 2"
+
+      refute html =~ "page 1"
+      html = render_keydown(view, :keydown, %{"code" => "ArrowLeft"})
+      assert html =~ "page 1"
+    end
+
+    test "can delete a user", %{conn: conn} do
+      user = user_fixture()
+      {:ok, view, html} = live(conn, "/users")
+
+      assert [
+         {"tr", [{"id", _}],
+           [
+             {"td", [], [_user_id]},
+             {"td", [], [_user_email]},
+             {"td", [], [_ph_number]},
+             {"td", [], _}
+           ]
+         }
+       ] = DOM.all(html, "##{user.id}")
+
+      html = render_click(view, "delete_user", %{"user-id" => user.id})
+
+      assert [] = DOM.all(html, "##{user.id}")
+    end
+  end
+end